1

2ed4b6b8 · haojie · c701a547 · 2ed4b6b8 · c701a547 · 2ed4b6b8
Commit 2ed4b6b8 authored Feb 24, 2023 by haojie
12 changed files
--- a/a-disst.zip
+++ b/a-disst.zip
--- a/a-dist.zip
+++ b/a-dist.zip
--- a/language/en.ts
+++ b/language/en.ts
@@ -29,7 +29,7 @@ const cn = {
  },
  filter: {
    pairs: 'Pairs',
-    updated: 'Updated',
+    updated: 'New Pairs',
    gainers: 'Gainers',
    losers: 'Losers',
    r24hVolume: '24h Volume',

--- a/middleware/index.global.ts
+++ b/middleware/index.global.ts
-export default defineNuxtRouteMiddleware(() => {
+export default defineNuxtRouteMiddleware((context: any) => {
-  try {
+  const headers = useRequestHeaders();
-    if (process.client) {
+  let userAgent = process.server ? headers['user-agent'] : navigator.userAgent;
-      if (
+  if (userAgent) {
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    if (
-          navigator.userAgent
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        )
+        userAgent
-      ) {
+      )
+    ) {
+      if (process.server) {
+        navigateTo('http://m.dexfilter.com', {
+          external: true,
+        });
+      } else {
        window.location.href = 'http://m.dexfilter.com';
      }
    }
-  } catch (e) {
-    window.location.href = 'http://m.dexfilter.com';
-    console.log(e);
  }
 });
--- a/public/images/svg/filter/chainSearch.svg
+++ b/public/images/svg/filter/chainSearch.svg
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M17.5003 17.5L13.8753 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17.5003 17.5L13.8753 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
\ No newline at end of file
--- a/style/default.css
+++ b/style/default.css
@@ -87,6 +87,8 @@
  --new-background-5: white;
  --new-background-6: #f4f5f7;
  --new-background-7: rgba(40, 126, 255, 0.3);
+  --new-background-8: #ffffff;
+  --new-background-9: #f9fafb;
  --new-border-1: #dcdcdc;
  --new-border-2: 1px solid #e0e3ea;
@@ -97,6 +99,7 @@
  --new-border-7: #f5f8fc;
  --new-border-8: #e0e3ea;
  --new-border-9: #e0e3ea;
+  --new-border-10: 1px solid #f0f1f5;
  --new-color-1: #6d6d6d;
  --new-color-2: #287eff;
@@ -105,6 +108,8 @@
  --new-color-5: #16c784;
  --new-color-6: #ea3943;
  --new-color-7: rgb(108, 108, 108);
+  --new-color-8: #9b96b6;
+  --new-color-9: #1a1a1a;
 }
 :root[theme-mode='dark'] {
@@ -158,6 +163,8 @@
  --new-background-5: #0b1217;
  --new-background-6: #0b1217;
  --new-background-7: rgba(40, 126, 255, 0.3);
+  --new-background-8: #1c222b;
+  --new-background-9: #29353d;
  --new-border-1: none;
  /* 有颜色的 */
@@ -170,6 +177,7 @@
  --new-border-6: #151515;
  --new-border-7: #0b1217;
  --new-border-9: #0b1217;
+  --new-border-10: 2px solid #23323c;
  --new-color-1: #a9a9a9;
  --new-color-2: #28b2ff;
@@ -178,6 +186,8 @@
  --new-color-5: #19de92;
  --new-color-6: #ec5058;
  --new-color-7: #cfcfcf;
+  --new-color-8: #dde1ec;
+  --new-color-9: #dfdfdf;
 }
 /* 主题按钮*/
 .custom_button_back_border {

--- a/views/layout/rollToken.vue
+++ b/views/layout/rollToken.vue
@@ -96,15 +96,15 @@
 </template>
 <script lang="ts" setup>
-import request from "@/utils/request";
+import request from '@/utils/request';
-import { publicTokenImg } from "@/constants/UnifiedManagementChain";
+import { publicTokenImg } from '@/constants/UnifiedManagementChain';
-import CloseScrollToken from "/public/images/svg/filter/CloseScrollToken.svg";
+import CloseScrollToken from '/public/images/svg/filter/CloseScrollToken.svg';
-import Closeleft from "/public/images/svg/filter/Closeleft.svg";
+import Closeleft from '/public/images/svg/filter/Closeleft.svg';
 const ScrollList = reactive({
  list: [],
 });
 // 滚动代币当前状态--默认展开
-const srcollType = ref("open");
+const srcollType = ref('open');
 // 获取当前链
 const chain = useChain();
 watch(
@@ -114,17 +114,17 @@ watch(
  }
 );
 // 动画速度
-const animationSpeed = ref("");
+const animationSpeed = ref('');
 onMounted(() => {
  if (!ScrollList.list.length) {
    getPublicToken();
  }
 });
 const changeScrollBox = () => {
-  if (srcollType.value == "open") {
+  if (srcollType.value == 'open') {
-    srcollType.value = "close";
+    srcollType.value = 'close';
  } else {
-    srcollType.value = "open";
+    srcollType.value = 'open';
  }
 };
 // 获取滚动代币
@@ -147,8 +147,8 @@ const getPublicToken = async () => {
      // 检测图片是否存在
      // console.log(Obj.sy);
      Obj.img = CurImgObj.img;
-      if (Obj.sy.indexOf(".e") !== -1) {
+      if (Obj.sy.indexOf('.e') !== -1) {
-        Obj.sy = Obj.sy.replace(".e", "E");
+        Obj.sy = Obj.sy.replace('.e', 'E');
      }
      list.push(Obj);
    });
@@ -162,28 +162,28 @@ const getPublicToken = async () => {
 };
 // 图片
 const doubt = {
-  img: "/images/svg/header/doubt.svg",
+  img: '/images/svg/header/doubt.svg',
 };
 const scroll_box_1 = ref(null);
 const scroll_box_2 = ref(null);
 const scroll_box_3 = ref(null);
 // 鼠标移入暂停
 const stopAn = () => {
-  scroll_box_1.value.style.animationPlayState = "paused";
+  scroll_box_1.value.style.animationPlayState = 'paused';
-  scroll_box_2.value.style.animationPlayState = "paused";
+  scroll_box_2.value.style.animationPlayState = 'paused';
-  scroll_box_3.value.style.animationPlayState = "paused";
+  scroll_box_3.value.style.animationPlayState = 'paused';
 };
 // 鼠标移出继续滚动
 const leaveAn = () => {
-  scroll_box_1.value.style.animationPlayState = "running";
+  scroll_box_1.value.style.animationPlayState = 'running';
-  scroll_box_2.value.style.animationPlayState = "running";
+  scroll_box_2.value.style.animationPlayState = 'running';
-  scroll_box_3.value.style.animationPlayState = "running";
+  scroll_box_3.value.style.animationPlayState = 'running';
 };
 </script>
 <style lang="less">
-@import "@/style/variables.less";
+@import '@/style/variables.less';
-@import "@/style/flex.less";
+@import '@/style/flex.less';
 .custom-scroll-token {
  .header-scroll_box-fa {
    user-select: none;
@@ -223,18 +223,18 @@ const leaveAn = () => {
            .span-1 {
              padding-left: 6px;
              font-weight: 500;
-              font-family: "Medium";
+              font-family: 'Medium';
            }
          }
          .right-info {
            .da();
            .span-2 {
              font-weight: 600;
-              font-family: "Regular";
+              font-family: 'Regular';
            }
            .span-3 {
-              font-family: "Medium";
+              font-family: 'Medium';
-              color: #9b96b6;
+              color: var(--new-color-8);
            }
          }
        }
@@ -275,6 +275,33 @@ const leaveAn = () => {
    transform: translate3d(-100%, 0, 0);
  }
 }
+@-webkit-keyframes scroll-token-box {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@-moz-keyframes scroll-token-box {
+  0% {
+    -moz-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -moz-transform: translate3d(-100%, 0, 0);
+  }
+}
+@-o-keyframes scroll-token-box {
+  0% {
+    -o-transform: translate3d(0, 0, 0);
+  }
+  100% {
+    -o-transform: translate3d(-100%, 0, 0);
+  }
+}
 .scroll-change-leave-active {
  animation: move2 0.7s ease;
 }

--- a/views/token/ChoseChain.vue
+++ b/views/token/ChoseChain.vue
@@ -2,6 +2,7 @@
  <t-popup
    placement="bottom-left"
    trigger="click"
+    overlayClassName="custom-select-home-chain"
    v-model:visible="DialogVisible"
    :content="popupContent"
    :VisibleChange="onVisibleChange"
@@ -26,29 +27,29 @@
 import {
  chain_options,
  filterChainObj,
-} from "@/constants/UnifiedManagementChain";
+} from '@/constants/UnifiedManagementChain';
-import ChainSearch from "/public/images/svg/filter/chainSearch.svg";
+import ChainSearch from '/public/images/svg/filter/chainSearch.svg';
-import { ChevronDownIcon } from "tdesign-icons-vue-next";
+import { ChevronDownIcon } from 'tdesign-icons-vue-next';
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const ChainImgIndex = ref(0);
 const ChainObj = ref<any>({});
 const chain = useChain();
-const chainName = ref("");
+const chainName = ref('');
 // 筛选后的列表
 const filterList = reactive({
  list: chain_options,
 });
 // 弹窗是否打开
 const DialogVisible = ref<boolean>(false);
-let Scopedchain = "";
+let Scopedchain = '';
-if (typeof route.params.chain == "string") {
+if (typeof route.params.chain == 'string') {
  Scopedchain = route.params.chain;
 }
 if (Scopedchain) {
-  let Obj = filterChainObj("name", Scopedchain, true);
+  let Obj = filterChainObj('name', Scopedchain, true);
  if (Obj) {
    ChainObj.value = Obj;
    chainName.value = ChainObj.value.name;
@@ -56,7 +57,7 @@ if (Scopedchain) {
    chain.value = Obj.value;
  }
 } else {
-  ChainObj.value = filterChainObj("value", chain.value, true);
+  ChainObj.value = filterChainObj('value', chain.value, true);
  chainName.value = ChainObj.value.name;
  ChainImgIndex.value = ChainObj.value.index;
  chain.value = ChainObj.value.value;
@@ -70,9 +71,9 @@ const ClosePopup = () => {
 };
 // 切换事件
 const selectChange = (v: string) => {
-  ChainObj.value = filterChainObj("value", v, true);
+  ChainObj.value = filterChainObj('value', v, true);
  // 当前链保存到本地
-  window.localStorage.setItem("chain", v);
+  window.localStorage.setItem('chain', v);
  chain.value = ChainObj.value.value;
  chainName.value = ChainObj.value.name;
  ChainImgIndex.value = ChainObj.value.index;
@@ -114,7 +115,7 @@ const popupContent = () => {
    <div class="custom-chose-chain-content">
      <div class="search-box">
        <t-input
-          placeholder={t("Search.search")}
+          placeholder={t('Search.search')}
          prefixIcon={() => <ChainSearch></ChainSearch>}
          onChange={InputChange}
        ></t-input>
@@ -133,8 +134,8 @@ const popupContent = () => {
 </script>
 <style lang="less">
-@import "@/style/variables.less";
+@import '@/style/variables.less';
-@import "@/style/flex.less";
+@import '@/style/flex.less';
 .custom-chose-chain-box {
  display: flex;
  justify-content: space-between;
@@ -151,7 +152,7 @@ const popupContent = () => {
    font-weight: 700;
    font-size: 15px;
    user-select: none;
-    font-family: "bold";
+    font-family: 'bold';
  }
  .right-icon {
    .select-icon {
@@ -178,56 +179,68 @@ const popupContent = () => {
    padding: 0 4px;
  }
 }
-.custom-chose-chain-content {
+.custom-select-home-chain {
-  width: 380px;
+  .t-popup__content {
-  padding: 12px;
+    background: var(--new-background-8);
-  .search-box {
+    .custom-chose-chain-content {
-    .t-input {
+      width: 380px;
-      background: #f9fafb;
+      padding: 12px;
-      border: 1px solid #f0f1f5;
+      .search-box {
-      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+        .t-input {
-      border-radius: 10px;
+          background: var(--new-background-9);
-      .t-input__inner {
+          border: var(--new-border-10);
-        font-family: "Medium";
+          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+          border-radius: 10px;
+          .t-input__inner::placeholder {
+            font-family: 'Medium';
+            color: var(--new-color-9);
+          }
+          .t-input__prefix {
+            svg {
+              stroke: var(--new-color-9);
+            }
+          }
+        }
      }
-    }
+      .chain-box-body {
-  }
+        display: flex;
-  .chain-box-body {
+        flex-wrap: wrap;
-    display: flex;
+        justify-content: space-between;
-    flex-wrap: wrap;
+        margin-top: 12px;
-    justify-content: space-between;
+        max-height: 500px;
-    margin-top: 12px;
+        overflow-y: auto;
-    max-height: 500px;
+        &::after {
-    overflow-y: auto;
+          content: '';
-    &::after {
+          display: block;
-      content: "";
+          flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
-      display: block;
+          margin: 10px;
-      flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
+        }
-      margin: 10px;
+        .chain-box {
-    }
+          box-sizing: border-box;
-    .chain-box {
+          width: 27%;
-      box-sizing: border-box;
+          height: 80px;
-      width: 27%;
+          margin: 10px;
-      height: 80px;
+          background: var(--new-background-4);
-      margin: 10px;
+          border: 1px solid var(--new-border-6);
-      background: var(--new-background-4);
+          border-radius: 14px;
-      border: 1px solid var(--new-border-6);
+          .dja(space-evenly,center);
-      border-radius: 14px;
+          flex-direction: column;
-      .dja(space-evenly,center);
+          font-weight: 700;
-      flex-direction: column;
+          color: var(--home-page-color-1);
-      font-weight: 700;
+          cursor: pointer;
-      color: var(--home-page-color-1);
+          font-size: 12px;
-      cursor: pointer;
+          white-space: nowrap;
-      font-size: 12px;
+          font-family: 'bold';
-      white-space: nowrap;
+          img {
-      font-family: "bold";
+            width: 27px;
-      img {
+            height: 27px;
-        width: 27px;
+          }
-        height: 27px;
+        }
      }
    }
  }
 }
 @keyframes customAnimation1 {
  0% {
    transform: rotateX(180deg);

--- a/views/token/CustomTokenList.vue
+++ b/views/token/CustomTokenList.vue
@@ -42,7 +42,7 @@
                <th class="custom-before-line">
                  <div class="thead-sort-box">
                    <template v-if="item.title == 'Pool'">
-                      {{ $t("TableList.pool") + HeadTokenType }}
+                      {{ $t('TableList.pool') + HeadTokenType }}
                    </template>
                    <template v-else>
                      {{ item.title }}
@@ -77,7 +77,7 @@
              <th class="custom-before-line" ref="tableTrOne">
                <div class="thead-sort-box">
                  <template v-if="item.title == 'Pool'">
-                    {{ $t("TableList.pool") + HeadTokenType }}
+                    {{ $t('TableList.pool') + HeadTokenType }}
                  </template>
                  <template v-else>
                    {{ item.title }}
@@ -169,7 +169,7 @@
          <template v-if="!resultData.list.length">
            <tr>
              <td colspan="12">
-                <div class="custom-no-list">{{ $t("filter.noList") }}</div>
+                <div class="custom-no-list">{{ $t('filter.noList') }}</div>
              </td>
            </tr>
          </template>
@@ -189,23 +189,23 @@
 </template>
 <script lang="ts" setup>
-import { parsePercent, parseCoinAmount, parseNumberToK } from "@/utils/tool";
+import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
-import CustPagination from "./CustPagination.vue";
+import CustPagination from './CustPagination.vue';
-import request from "@/utils/request";
+import request from '@/utils/request';
-import { filterChainObj, getSwap } from "@/constants/UnifiedManagementChain";
+import { filterChainObj, getSwap } from '@/constants/UnifiedManagementChain';
-import JumpOther from "./JumpOther.vue";
+import JumpOther from './JumpOther.vue';
-import KLink from "/public/images/svg/table/k_link.svg";
+import KLink from '/public/images/svg/table/k_link.svg';
-import analysisSvg from "/public/images/svg/table/media.svg";
+import analysisSvg from '/public/images/svg/table/media.svg';
-import { webLogo } from "@/constants/logo";
+import { webLogo } from '@/constants/logo';
-import CustomTableSort from "./tableSort.vue";
+import CustomTableSort from './tableSort.vue';
-import { TableSort, TableSortAsc } from "@/utils/tool";
+import { TableSort, TableSortAsc } from '@/utils/tool';
-import CustomRadio from "../CustomComponent/radio.vue";
+import CustomRadio from '../CustomComponent/radio.vue';
-import BscChain from "/public/images/svg/selectChain/bsc.svg";
+import BscChain from '/public/images/svg/selectChain/bsc.svg';
-import SwapSvg from "/public/images/svg/socialInfoWrapper/bscTransaction.svg";
+import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg';
-import CustomAvatar from "./avatar.vue";
+import CustomAvatar from './avatar.vue';
-import TokenAvatar from "./tokenAvatar.vue";
+import TokenAvatar from './tokenAvatar.vue';
-import useSwap from "@/hooks/useSwap";
+import useSwap from '@/hooks/useSwap';
 const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
 const route = useRoute();
 const LoadHead = ref(false);
@@ -223,7 +223,7 @@ const GlbFilter = useCurFilter();
 const CurrentTime = useCurrentTimeChange();
 // 吸顶元素
 const affixedHeadRef = ref<HTMLDivElement | null>(null);
-const affixedTableWidth = ref("");
+const affixedTableWidth = ref('');
 // 当前选中的行数
 const CurLineIndex = ref(0);
 // 表格数据轮询
@@ -244,121 +244,121 @@ const colGroupList = reactive<{
 const RightInfo = useCurrentRightInfo();
 // 吸顶表头左右跟随滑动
 const affixedHead = reactive({
-  left: "",
+  left: '',
-  top: "",
+  top: '',
-  height: "",
+  height: '',
-  width: "",
+  width: '',
 });
 // 当前排序状态
 const SortOptions = reactive<any>({
  up: {
-    field: "up",
+    field: 'up',
-    type: "all",
+    type: 'all',
    status: false,
  },
  pb: {
-    field: "pb",
+    field: 'pb',
-    type: "all",
+    type: 'all',
    status: false,
  },
  vn: {
-    field: "vn",
+    field: 'vn',
-    type: "all",
+    type: 'all',
    status: false,
  },
  txn: {
-    field: "txn",
+    field: 'txn',
-    type: "all",
+    type: 'all',
    status: false,
  },
  r5m: {
-    field: "r5m",
+    field: 'r5m',
-    type: "all",
+    type: 'all',
    status: false,
  },
  r1h: {
-    field: "r1h",
+    field: 'r1h',
-    type: "all",
+    type: 'all',
    status: false,
  },
  r4h: {
-    field: "r4h",
+    field: 'r4h',
-    type: "all",
+    type: 'all',
    status: false,
  },
  r24h: {
-    field: "r24h",
+    field: 'r24h',
-    type: "all",
+    type: 'all',
    status: false,
  },
 });
-const currentBtn = ref("default");
+const currentBtn = ref('default');
 const btns = computed(() => [
  {
-    label: t("filter.pairs"),
+    label: t('filter.pairs'),
-    value: "default",
+    value: 'default',
  },
  {
-    label: t("filter.updated"),
+    label: t('filter.updated'),
-    value: "new",
+    value: 'new',
  },
  {
-    label: t("filter.gainers"),
+    label: t('filter.gainers'),
-    value: "max-up",
+    value: 'max-up',
  },
  {
-    label: t("filter.losers"),
+    label: t('filter.losers'),
-    value: "max-down",
+    value: 'max-down',
  },
  {
-    label: t("filter.r24hVolume"),
+    label: t('filter.r24hVolume'),
-    value: "txn",
+    value: 'txn',
  },
 ]);
 const onFilterChange = (value: string) => {
-  if (value == "new") {
+  if (value == 'new') {
    GlbFilter.value.nt = 1;
-  } else if (value == "default") {
+  } else if (value == 'default') {
    GlbFilter.value.nt = 0;
  }
  // 永远请求第一页
  pageNum.value = 1;
-  if (value == "txn") {
+  if (value == 'txn') {
-    GlbFilter.value.date_orderby = "txn";
+    GlbFilter.value.date_orderby = 'txn';
-    GlbFilter.value.sort = "desc";
+    GlbFilter.value.sort = 'desc';
-  } else if (value == "max-up") {
+  } else if (value == 'max-up') {
    // 最大涨幅
-    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
+    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-    GlbFilter.value.sort = "desc";
+    GlbFilter.value.sort = 'desc';
-  } else if (value == "max-down") {
+  } else if (value == 'max-down') {
    // 最大跌幅
-    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
+    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-    GlbFilter.value.sort = "asc";
+    GlbFilter.value.sort = 'asc';
  }
  getTableList();
 };
 // 获取涨跌幅
 const getUpDown = (value: string) => {
-  if (value && value[0] == "-") {
+  if (value && value[0] == '-') {
    return `${value}%`;
  }
  return `+${value}%`;
 };
 // 获取涨跌幅颜色
 const getUpDownColor = (value: string) => {
-  if (value && value[0] == "-") {
+  if (value && value[0] == '-') {
    // down
-    return "#f23645";
+    return '#f23645';
  }
  // up
-  return "#23ab94";
+  return '#23ab94';
 };
 // 获取表格可视区域宽度
 const getTableWidth = () => {
  if (CustomTable.value) {
    // 获取元素可视区域宽度
    let width = CustomTable.value.clientWidth;
-    affixedHead.width = width + "px";
+    affixedHead.width = width + 'px';
  }
 };
 // 排序事件
@@ -369,15 +369,15 @@ const submitSort = ({ sort, field }: any) => {
      SortOptions[item].type = sort;
      SortOptions[item].status = true;
    } else {
-      SortOptions[item].type = "all";
+      SortOptions[item].type = 'all';
      SortOptions[item].status = false;
    }
  });
  // 开始排序
-  if (sort === "asc") {
+  if (sort === 'asc') {
    // 升序
    resultData.value.list = TableSortAsc(resultData.value.list, field);
-  } else if (sort === "desc") {
+  } else if (sort === 'desc') {
    // 降序
    resultData.value.list = TableSort(resultData.value.list, field);
  } else {
@@ -390,21 +390,21 @@ const submitSort = ({ sort, field }: any) => {
 // 获取head的宽度赋给吸顶表头
 const getMinWidth = () => {
  if (CustomHead.value) {
-    affixedTableWidth.value = CustomHead.value.clientWidth + "px";
+    affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
  }
 };
 // 表格数据过滤方法
 const TableFilter = (result: any) => {
-  if ("list" in result && result.list.length) {
+  if ('list' in result && result.list.length) {
    result.list.forEach((item: any, index: number) => {
      item.index = index + 1;
-      item.n_up = "$" + parseCoinAmount(item.up);
+      item.n_up = '$' + parseCoinAmount(item.up);
-      item.n_vn = "$" + parseNumberToK(item.vn);
+      item.n_vn = '$' + parseNumberToK(item.vn);
      item.n_pb = parseNumberToK(item.pb);
-      item.n_r5m = parseFloat(item.r5m * 100 + "").toFixed(2);
+      item.n_r5m = parseFloat(item.r5m * 100 + '').toFixed(2);
-      item.n_r1h = parseFloat(item.r1h * 100 + "").toFixed(2);
+      item.n_r1h = parseFloat(item.r1h * 100 + '').toFixed(2);
-      item.n_r4h = parseFloat(item.r4h * 100 + "").toFixed(2);
+      item.n_r4h = parseFloat(item.r4h * 100 + '').toFixed(2);
-      item.n_r24h = parseFloat(item.r24h * 100 + "").toFixed(2);
+      item.n_r24h = parseFloat(item.r24h * 100 + '').toFixed(2);
      //
      item.n_r5m = getUpDown(item.n_r5m);
      item.n_r1h = getUpDown(item.n_r1h);
@@ -431,7 +431,7 @@ const getParams = () => {
  };
  if (CurrentTime.value) {
    params.date = CurrentTime.value;
-  } else if ("date" in params) {
+  } else if ('date' in params) {
    delete params.date;
  }
  return params;
@@ -439,27 +439,27 @@ const getParams = () => {
 // 获取host
 const getBaseUrl = () => {
  if (process.server) {
-    // if (process.dev) {
+    if (process.dev) {
-    //   return "http://156.247.9.93:9501";
+      return 'http://156.247.9.93:9501';
-    // }
+    }
-    return "https://apiv1.dexfilter.com/";
+    return 'https://dexfilter.com';
  } else {
-    return "/v1";
+    return '/v1';
  }
 };
+//创建AbortController对象
+const abortController = new AbortController();
 // 预取数据
 const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
  params: getParams(),
  lazy: true,
-  method: "GET",
+  // method: "GET",
-  mode: "cors",
+  // mode: "cors",
-  credentials: "include",
+  // credentials: "include",
  baseURL: getBaseUrl(),
+  signal: abortController.signal,
  onRequest(context: any) {},
  onResponse({ request, response, options }) {
-    console.log(response.url);
-    console.log(response.status);
    try {
      loading.value = false;
      if (response._data.data) {
@@ -472,10 +472,10 @@ const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
    return response._data;
  },
  onRequestError({ error }) {
-    console.log(error, "请求错误");
+    console.log(error, '请求错误');
  },
  onResponseError(error) {
-    console.log(error, "返回的error");
+    console.log(error, '返回的error');
  },
 });
@@ -492,18 +492,18 @@ const getDefaultList = () => {
  }
 };
 const CustomgetRoute = () => {
-  if (route.params.chain && typeof route.params.chain == "string") {
+  if (route.params.chain && typeof route.params.chain == 'string') {
-    let Obj = filterChainObj("name", route.params.chain);
+    let Obj = filterChainObj('name', route.params.chain);
    if (Obj) {
      ChainObj.value = Obj;
      chain.value = Obj.value;
      HeadTokenType.value = ChainObj.value.Currency[0];
    }
  } else {
-    ChainObj.value = filterChainObj("value", chain.value);
+    ChainObj.value = filterChainObj('value', chain.value);
  }
-  if (route.params.page && typeof route.params.page == "string") {
+  if (route.params.page && typeof route.params.page == 'string') {
-    if (typeof parseInt(route.params.page) === "number")
+    if (typeof parseInt(route.params.page) === 'number')
      pageNum.value = parseInt(route.params.page);
    GlbFilter.value.page = parseInt(route.params.page);
  }
@@ -516,9 +516,9 @@ useHead({
  link: [webLogo],
  meta: [
    {
-      name: "description",
+      name: 'description',
      content:
-        "DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
+        'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
    },
  ],
 });
@@ -529,7 +529,7 @@ const getColGroupWidth = () => {
  // 动态改变吸顶表头的th宽度
  colGroupList.list.forEach((it: any) => {
    tableTrOne.value.forEach((item: any, index: number) => {
-      colGroupList.list[index] = item.clientWidth + "px";
+      colGroupList.list[index] = item.clientWidth + 'px';
    });
  });
 };
@@ -540,7 +540,7 @@ const getTableList = async () => {
    let result: any = await request.get(`/v1${chain.value}/indexV1`, {
      params: getParams(),
    });
-    if (Object.prototype.toString.call(result) == "[object Array]") {
+    if (Object.prototype.toString.call(result) == '[object Array]') {
      resultData.value.list = [];
      resultData.value.filterList = [];
      resultData.value.total = 0;
@@ -564,16 +564,16 @@ watch(
    CurLineIndex.value = 0;
    pageNum.value = 1;
    // 修改title
-    ChainObj.value = filterChainObj("value", chain.value);
+    ChainObj.value = filterChainObj('value', chain.value);
    getTableList();
  }
 );
 // 判断是否需要加$
 const Judgment = () => {
-  if (HeadTokenType.value === "USDT") {
+  if (HeadTokenType.value === 'USDT') {
-    return "$";
+    return '$';
  } else {
-    return "";
+    return '';
  }
 };
 // tbName---流动池折线图传递参数
@@ -588,11 +588,11 @@ const handleRowClick = (item: any, index: number) => {
 };
 // 监听是否切出页面
 const listenerWindow = (fn: any) => {
-  document.addEventListener("visibilitychange", fn);
+  document.addEventListener('visibilitychange', fn);
 };
 // 取消监听
 const closeListener = (fn: any) => {
-  document.removeEventListener("visibilitychange", fn);
+  document.removeEventListener('visibilitychange', fn);
 };
 // 有数据，开启定时器
 const Intervalfun = () => {
@@ -612,7 +612,7 @@ const closeInterVal = () => {
 const windowOpenFn = (e: any) => {
  // ==visible代表在当前窗口
  let isExist = e.target.visibilityState;
-  if (isExist === "visible") {
+  if (isExist === 'visible') {
    // 先关再开
    closeInterVal();
    Intervalfun();
@@ -629,9 +629,9 @@ const onCurrentChange = (v: number) => {
 };
 const onScrollEvent = () => {
  // 获取滚动元素dom
-  BodyscrollDom.value = document.getElementById("layout-scroll");
+  BodyscrollDom.value = document.getElementById('layout-scroll');
  if (BodyscrollDom.value && CustomHead.value) {
-    affixedHead.top = BodyscrollDom.value.offsetTop + "px";
+    affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
    let Newclient = CustomHead.value.getBoundingClientRect();
    if (Newclient.top <= BodyscrollDom.value.offsetTop) {
      // 显示吸顶表头
@@ -669,7 +669,7 @@ const onTableScroll = () => {
 };
 const setColGroupList = () => {
  columnsChild.value.forEach((item: any) => {
-    colGroupList.list.push("0px");
+    colGroupList.list.push('0px');
  });
 };
 onMounted(() => {
@@ -727,79 +727,79 @@ onUnmounted(() => {
 const columns = computed(() => {
  return [
    {
-      title: t("TableList.tokenbase"),
+      title: t('TableList.tokenbase'),
      children: [
        {
-          colKey: "index",
+          colKey: 'index',
-          width: "auto",
+          width: 'auto',
-          title: "#",
+          title: '#',
        },
        {
-          colKey: "tn",
+          colKey: 'tn',
-          title: t("TableList.token"),
+          title: t('TableList.token'),
        },
      ],
    },
    {
-      title: t("TableList.basic"),
+      title: t('TableList.basic'),
      children: [
        {
-          colKey: "up",
+          colKey: 'up',
-          title: t("TableList.price"),
+          title: t('TableList.price'),
          sort: true,
        },
        {
-          colKey: "pb",
+          colKey: 'pb',
-          title: "Pool",
+          title: 'Pool',
          sort: true,
        },
        {
-          colKey: "vn",
+          colKey: 'vn',
-          title: t("TableList.volume"),
+          title: t('TableList.volume'),
          sort: true,
        },
        {
-          colKey: "txn",
+          colKey: 'txn',
-          title: t("TableList.txns"),
+          title: t('TableList.txns'),
          sort: true,
        },
      ],
    },
    {
-      title: t("TableList.priceChange"),
+      title: t('TableList.priceChange'),
      children: [
        {
-          colKey: "r5m",
+          colKey: 'r5m',
-          title: t("TableList.time1"),
+          title: t('TableList.time1'),
          sort: true,
        },
        {
-          colKey: "r1h",
+          colKey: 'r1h',
-          title: t("TableList.time2"),
+          title: t('TableList.time2'),
          sort: true,
        },
        {
-          colKey: "r4h",
+          colKey: 'r4h',
-          title: t("TableList.time3"),
+          title: t('TableList.time3'),
          sort: true,
        },
        {
-          colKey: "r24h",
+          colKey: 'r24h',
-          title: t("TableList.time4"),
+          title: t('TableList.time4'),
          sort: true,
        },
      ],
    },
    {
-      title: t("TableList.others"),
+      title: t('TableList.others'),
      children: [
        {
-          colKey: "operation",
+          colKey: 'operation',
-          title: t("TableList.k_line"),
+          title: t('TableList.k_line'),
        },
        {
-          colKey: "media",
+          colKey: 'media',
-          title: t("TableList.mediaData"),
+          title: t('TableList.mediaData'),
        },
      ],
    },
@@ -819,21 +819,21 @@ const columnsChild = computed(() => {
 let arr1 = new Array(100);
 for (let i = 0; i < arr1.length; i++) {
  arr1[i] = {
-    one: "1",
+    one: '1',
-    two: "2",
+    two: '2',
-    three: "3",
+    three: '3',
-    four: "4",
+    four: '4',
-    five: "5",
+    five: '5',
-    sex: "6",
+    sex: '6',
-    seven: "7",
+    seven: '7',
  };
 }
 </script>
 <style lang="less">
-@import "@/style/variables.less";
+@import '@/style/variables.less';
-@import "@/style/line.less";
+@import '@/style/line.less';
-@import "@/style/flex.less";
+@import '@/style/flex.less';
 .custom-token-list {
  margin-top: 8px;
  box-sizing: border-box;
@@ -876,7 +876,7 @@ for (let i = 0; i < arr1.length; i++) {
              font-size: 14px;
              color: var(--td--main-btn-color-1);
              white-space: nowrap;
-              font-family: "bold";
+              font-family: 'bold';
              padding: 4px 12px;
            }
            .t-align-center {
@@ -899,7 +899,7 @@ for (let i = 0; i < arr1.length; i++) {
            th {
              font-weight: 500;
              font-size: 14px;
-              font-family: "Medium";
+              font-family: 'Medium';
              border-bottom: 1px solid var(--new-border-4);
              padding: 20px 12px;
              .thead-sort-box {
@@ -941,7 +941,7 @@ for (let i = 0; i < arr1.length; i++) {
            font-size: 14px;
            color: var(--td--main-btn-color-1);
            white-space: nowrap;
-            font-family: "bold";
+            font-family: 'bold';
            padding: 4px 12px;
          }
          .t-align-center {
@@ -964,7 +964,7 @@ for (let i = 0; i < arr1.length; i++) {
          th {
            font-weight: 500;
            font-size: 14px;
-            font-family: "Medium";
+            font-family: 'Medium';
            border-bottom: 1px solid var(--new-border-4);
            padding: 20px 12px;
            .thead-sort-box {
@@ -989,7 +989,7 @@ for (let i = 0; i < arr1.length; i++) {
            border: none;
            border-bottom: 1px solid var(--new-border-3);
            background: var(--new-background-5);
-            font-family: "Regular";
+            font-family: 'Regular';
            padding: 16px 12px;
            .custom-no-list {
              .dja();
@@ -1020,7 +1020,7 @@ for (let i = 0; i < arr1.length; i++) {
            color: var(--main-theme-color);
            font-weight: 700;
            font-size: 16px;
-            font-family: "bold";
+            font-family: 'bold';
          }
          .symbol {
            color: var(--td-search-btn-back-1);

--- a/views/token/RightDetail.vue
+++ b/views/token/RightDetail.vue
@@ -46,7 +46,7 @@
            :currentPath="currentPath"
            :chat="tokenInfo.chat"
          ></token-social-list>
-          <!-- <submit-social-info></submit-social-info> -->
+          <submit-social-info></submit-social-info>
          <t-tabs
            class="info-tabs"
            v-model="currentTab"
@@ -91,7 +91,7 @@
    </div>
    <template v-if="CollectionOnload">
      <div v-show="defaBtn == 'collection'">
-        <!-- <Collection></Collection> -->
+        <Collection></Collection>
      </div>
    </template>
    <template v-if="ifDetails">
@@ -108,23 +108,23 @@
  </div>
 </template>
 <script setup lang="tsx">
-import request from "@/utils/request";
+import request from '@/utils/request';
-import { parsePercent, parseCoinAmount } from "@/utils/tool";
+import { parsePercent, parseCoinAmount } from '@/utils/tool';
-import TimeTab from "./TimeTab.vue";
+import TimeTab from './TimeTab.vue';
-import SecurityCheck from "./SecurityCheck.vue";
+import SecurityCheck from './SecurityCheck.vue';
-import TokenInfo from "./TokenInfo.vue";
+import TokenInfo from './TokenInfo.vue';
-import TokenPool from "./TokenPool.vue";
+import TokenPool from './TokenPool.vue';
-import TokenSocialList from "./TokenSocialList.vue";
+import TokenSocialList from './TokenSocialList.vue';
-import * as Cache from "@/utils/cache";
+import * as Cache from '@/utils/cache';
-import { MessagePlugin } from "tdesign-vue-next";
+import { MessagePlugin } from 'tdesign-vue-next';
-import DetailsEcharts from "../analysis/detailsEcharts.vue";
+import DetailsEcharts from '../analysis/detailsEcharts.vue';
-import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
+import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
-import Favo from "/public/images/svg/rightDetail/favo.svg";
+import Favo from '/public/images/svg/rightDetail/favo.svg';
-import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
+import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
-import RightDetailHeader from "./rightDetailHeader.vue";
+import RightDetailHeader from './rightDetailHeader.vue';
-import SubmitSocialInfo from "./SubmitSocialInfo";
+import SubmitSocialInfo from './SubmitSocialInfo';
-import Collection from "./collection";
+import Collection from './collection';
 const router = useRouter();
 const { t, locale } = useI18n();
 // 通知表格收藏图表取消收藏
@@ -133,16 +133,16 @@ const CollectionDe = CollectionDelete();
 // const initEchart = computed(() => store.getters['echart/gethasInit']);
 const headerBtns = computed(() => [
  {
-    label: t("securityCheck.details"),
+    label: t('securityCheck.details'),
-    value: "details",
+    value: 'details',
  },
  {
-    label: t("filter.Collection"),
+    label: t('filter.Collection'),
-    value: "collection",
+    value: 'collection',
  },
  {
-    label: t("securityCheck.analysis"),
+    label: t('securityCheck.analysis'),
-    value: "echart",
+    value: 'echart',
  },
 ]);
 const props = defineProps({
@@ -154,52 +154,52 @@ const props = defineProps({
  mt: String,
  up: Number,
 });
-const emit = defineEmits(["update:setPool", "SettwitterRul"]);
+const emit = defineEmits(['update:setPool', 'SettwitterRul']);
-const r24h = ref("");
+const r24h = ref('');
-const numR24h = ref("");
+const numR24h = ref('');
 // 收藏列表是否首次加载
 const CollectionOnload = ref(false);
 // 判断当前路由，隐藏右侧详情box中的折线图模块
 const currentRouter = router.currentRoute.value.name;
-const currentTab = ref("info");
+const currentTab = ref('info');
 const isInCollection = ref(false);
 // 默认选择detail按钮
-const defaBtn = ref("details");
+const defaBtn = ref('details');
 const ifDetails = ref(false);
 const WatchEcharts = useWatchEcharts();
 // 传给详情折线图的tbname
-const tb = ref("");
+const tb = ref('');
 // 点击pool才加载
 const isPool = ref(false);
-const PoolAddress = ref("");
+const PoolAddress = ref('');
 // 当前链
 const chain = useChain();
 const tokenInfo: any = ref({
-  avatar: "",
+  avatar: '',
-  token: "",
+  token: '',
  pool: [],
 });
 const getPriceRange = () => {
  const { up, r24h: proR24h } = props;
-  if ((proR24h + "")[0] == "-") {
+  if ((proR24h + '')[0] == '-') {
    // -，跌
-    let newR24h = parseFloat((proR24h + "").replace("-", ""));
+    let newR24h = parseFloat((proR24h + '').replace('-', ''));
    // 原价
    let oldPrice = props.up / (1 - newR24h);
    numR24h.value = oldPrice - props.up;
-    numR24h.value = "-" + parseCoinAmount(numR24h.value);
+    numR24h.value = '-' + parseCoinAmount(numR24h.value);
  } else if (proR24h == 0) {
-    numR24h.value = "+0";
+    numR24h.value = '+0';
  } else {
    // +,涨
    // 原价
    let oldPrice = props.up / (proR24h + 1);
    numR24h.value = props.up - oldPrice;
-    numR24h.value = "+" + parseCoinAmount(numR24h.value);
+    numR24h.value = '+' + parseCoinAmount(numR24h.value);
  }
-  r24h.value = parsePercent(proR24h + "");
+  r24h.value = parsePercent(proR24h + '');
-  if (r24h.value[0] !== "-") {
+  if (r24h.value[0] !== '-') {
-    r24h.value = "+" + r24h.value;
+    r24h.value = '+' + r24h.value;
  }
 };
 watch(
@@ -213,13 +213,13 @@ watch(
 watch(
  () => props.r24h,
  (v) => {
-    if (typeof v !== "undefined") {
+    if (typeof v !== 'undefined') {
      getPriceRange();
    }
  }
 );
 const btnLoad = (value: string) => {
-  if (currentRouter == "tokenAnalysis" && value == "echart") {
+  if (currentRouter == 'tokenAnalysis' && value == 'echart') {
    return false;
  }
  return true;
@@ -235,7 +235,7 @@ watch(
 );
 // 流动池tab改变
 const changeTab = (value) => {
-  if (value === "pool") {
+  if (value === 'pool') {
    isPool.value = true;
  }
 };
@@ -249,31 +249,31 @@ const getTokenInfo = async () => {
      },
    });
-    result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
+    result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
-    result.tokenSub = "";
+    result.tokenSub = '';
    if (result.token) {
      result.tokenSub =
        result.token.substr(0, 6) +
-        "..." +
+        '...' +
        result.token.substr(result.token.length - 4, 4);
    }
    // tbname-掩码
-    result.tbnameSub = "";
+    result.tbnameSub = '';
-    result.n_tb = "";
+    result.n_tb = '';
    if (props.tb) {
      // 先将d去掉
      result.n_tb =
-        props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
+        props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
      result.tbnameSub =
        result.n_tb.substr(0, 6) +
-        "..." +
+        '...' +
        result.n_tb.substr(result.n_tb.length - 4, 4);
    }
    isInCollection.value = Cache.hasSet(props.tb);
    Object.assign(tokenInfo.value, result);
    // 如果有推特链接，提交给twitter组件解析
-    if ("chat" in result) {
+    if ('chat' in result) {
-      emit("SettwitterRul", result.chat.twitter);
+      emit('SettwitterRul', result.chat.twitter);
    }
  } catch (e) {
    console.log(e);
@@ -283,7 +283,7 @@ const getTokenInfo = async () => {
 watch(
  () => locale.value,
  (v) => {
-    if (defaBtn.value == "echart") {
+    if (defaBtn.value == 'echart') {
      WatchEcharts.value += 1;
    }
  }
@@ -291,16 +291,16 @@ watch(
 // 点击查看token详情信息
 // v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
 const gotoDetail = (value) => {
-  if (value == "collection" && !CollectionOnload.value) {
+  if (value == 'collection' && !CollectionOnload.value) {
    CollectionOnload.value = true;
  }
  // 先判断是否有token,没有则禁止打开折线图模块
-  if (!props.tb && value === "echart") {
+  if (!props.tb && value === 'echart') {
    MessagePlugin.closeAll();
-    MessagePlugin.warning(t("MessagePlugin.plToken"));
+    MessagePlugin.warning(t('MessagePlugin.plToken'));
    return;
  }
-  if (value === "echart") {
+  if (value === 'echart') {
    tb.value = props.tb;
    ifDetails.value = true;
  }
@@ -315,14 +315,14 @@ const monitor = computed((value) => {
 // 接收右侧详情流动池address
 const changePool = (PoolValue) => {
  PoolAddress.value = PoolValue;
-  emit("update:setPool", PoolValue);
+  emit('update:setPool', PoolValue);
 };
 watch(
  () => props.token,
  (v) => {
    if (v) {
      //如果折线图为隐藏状态，需注销折线图模块
-      if (defaBtn.value != "echart") {
+      if (defaBtn.value != 'echart') {
        ifDetails.value = false;
      }
      tb.value = props.tb;
@@ -332,8 +332,8 @@ watch(
 );
 </script>
 <style lang="less">
-@import "@/style/flex.less";
+@import '@/style/flex.less';
-@import "@/style/variables.less";
+@import '@/style/variables.less';
 .right-detail-wrapper {
  height: calc(100vh - 70px);
  flex: 1;
@@ -361,7 +361,7 @@ watch(
      font-size: 14px;
      margin: 0;
      padding: 0;
-      font-family: "Regular";
+      font-family: 'Regular';
      .details-icon-cl {
        width: 30px;
        fill: var(--td-search-btn-back-1);
@@ -437,7 +437,7 @@ watch(
          border-bottom-left-radius: @border-radius;
          border-bottom-right-radius: @border-radius;
          .t-tabs__nav-item-text-wrapper {
-            font-family: "Medium";
+            font-family: 'Medium';
          }
          .t-tabs__header {
            background-color: var(--td--right-back-color-2);

--- a/views/token/avatar.vue
+++ b/views/token/avatar.vue
@@ -13,13 +13,13 @@
 <script lang="ts" setup>
 const props = withDefaults(
  defineProps<{
-    value: string;
+    value?: string;
    width?: string;
    height?: string;
  }>(),
  {
-    width: "30px",
+    width: '30px',
-    height: "30px",
+    height: '30px',
  }
 );
 // 获取token首字母
@@ -28,12 +28,12 @@ const getTokenInitials = () => {
  if (value) {
    return value[0];
  }
-  return "";
+  return '';
 };
 </script>
 <style lang="less">
-@import "@/style/flex.less";
+@import '@/style/flex.less';
 .avatar-icon {
  border-radius: 50%;
  background: #5f6e78;
@@ -41,7 +41,7 @@ const getTokenInitials = () => {
  .dja();
  font-weight: 500;
  font-size: 17px;
-  font-family: "Medium";
+  font-family: 'Medium';
  margin-right: 12px;
 }
 </style>
--- a/views/token/rightDetailHeader.vue
+++ b/views/token/rightDetailHeader.vue
@@ -19,7 +19,7 @@
            </div>
            <div class="address-info">
              <span class="address-info-item">
-                <span>{{ $t("TableList.token") }}</span>
+                <span>{{ $t('TableList.token') }}</span>
                <span class="address">：{{ tokenInfo.tokenSub }}</span>
                <span @click="doCopy(tokenInfo.token)">
                  <CopySvg></CopySvg>
@@ -28,7 +28,7 @@
            </div>
            <div class="address-info margin">
              <span class="address-info-item">
-                <span>{{ $t("TableList.pool") }}</span>
+                <span>{{ $t('TableList.pool') }}</span>
                <span class="address">：{{ tokenInfo.tbnameSub }}</span>
                <span @click="doCopy(tokenInfo.n_tb)">
                  <CopySvg></CopySvg>
@@ -75,15 +75,15 @@
 </template>
 <script lang="ts" setup>
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed } from 'vue';
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n';
-import CopySvg from "/public/images/svg/rightDetail/copy.svg";
+import CopySvg from '/public/images/svg/rightDetail/copy.svg';
-import useCopy from "@/hooks/useCopy";
+import useCopy from '@/hooks/useCopy';
-import * as Cache from "@/utils/cache";
+import * as Cache from '@/utils/cache';
-import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
+import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
-import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
+import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
-import { parseCoinAmount } from "@/utils/tool";
+import { parseCoinAmount } from '@/utils/tool';
-import AvatarVue from "./avatar.vue";
+import AvatarVue from './avatar.vue';
 const props = defineProps<{
  tokenInfo: any;
  numR24h: string;
@@ -92,7 +92,7 @@ const props = defineProps<{
  tb: string;
  currentPath: string;
 }>();
-const emit = defineEmits(["update:isInCollection"]);
+const emit = defineEmits(['update:isInCollection']);
 const { t } = useI18n();
 // 收藏表格是否更新
 const CollectionCl = CollectionChange();
@@ -101,19 +101,19 @@ const getPrice = () => {
  try {
    const { tokenInfo } = props;
    if (tokenInfo) {
-      if ("up" in tokenInfo) {
+      if ('up' in tokenInfo) {
        let up = parseCoinAmount(tokenInfo.up);
-        if (up.indexOf("{") !== -1) {
+        if (up.indexOf('{') !== -1) {
          up = up.slice(0, up.length - 2);
        }
        return up;
      } else {
-        return "";
+        return '';
      }
    }
  } catch (e) {
    console.log(e);
-    return "";
+    return '';
  }
 };
 const collectData = () => {
@@ -126,24 +126,24 @@ const collectData = () => {
        },
      ]);
    }
-    emit("update:isInCollection", false);
+    emit('update:isInCollection', false);
  } else {
    Cache.setCollection({
      hash: tb,
      symbol: tokenInfo.symbol,
      path: currentPath,
    });
-    emit("update:isInCollection", true);
+    emit('update:isInCollection', true);
  }
  // 通知select中的收藏数据更新
  CollectionCl.value += 1;
 };
 const r24hColor = () => {
  if (props.r24h) {
-    if (props.r24h[0] === "-") {
+    if (props.r24h[0] === '-') {
-      return "#f85260";
+      return '#f85260';
    } else {
-      return "#23ab94";
+      return '#23ab94';
    }
  }
 };
@@ -151,21 +151,21 @@ const getImg = computed(() => {
  const { tokenInfo } = props;
  try {
    if (Object.keys(tokenInfo).length) {
-      if ("chat" in tokenInfo) {
+      if ('chat' in tokenInfo) {
        return tokenInfo.chat.img;
      } else {
-        return "";
+        return '';
      }
    }
  } catch (e) {
    console.log(e);
-    return "";
+    return '';
  }
 });
 </script>
 <style lang="less">
-@import "@/style/flex.less";
+@import '@/style/flex.less';
 .header-token-box {
  margin-top: -1px;
  box-sizing: border-box;
@@ -198,17 +198,18 @@ const getImg = computed(() => {
        height: 100%;
        .token-name-child {
          .da();
-          max-width: 176px;
          color: var(--td-right-detail-font-color-1);
          line-height: 47px;
          min-height: 47px;
          .title {
+            max-width: 100px;
            font-weight: 700;
            font-size: 26px;
            overflow-x: hidden;
+            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
-            font-family: "bold";
+            font-family: 'bold';
          }
          img {
            width: 38px;
@@ -226,7 +227,7 @@ const getImg = computed(() => {
        .address-info {
          display: flex;
          color: var(--new-color-7);
-          font-family: "Regular";
+          font-family: 'Regular';
          margin-top: 1px;
          .address-info-item {
            font-size: var(--font-size);
@@ -259,7 +260,7 @@ const getImg = computed(() => {
            font-weight: 700;
            font-size: 28px;
            min-height: 50px;
-            font-family: "bold";
+            font-family: 'bold';
            color: var(--td-Search-info-color-1);
          }
          .r24h-cl {
@@ -267,7 +268,7 @@ const getImg = computed(() => {
            font-weight: normal;
            margin-top: -3px;
            text-align: right;
-            font-family: "Medium";
+            font-family: 'Medium';
          }
        }
        .kline-btn {