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 (userAgent) {
    if (
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent
+        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,17 +179,26 @@ const popupContent = () => {
    padding: 0 4px;
  }
 }
-.custom-chose-chain-content {
+.custom-select-home-chain {
+  .t-popup__content {
+    background: var(--new-background-8);
+    .custom-chose-chain-content {
      width: 380px;
      padding: 12px;
      .search-box {
        .t-input {
-      background: #f9fafb;
+          background: var(--new-background-9);
-      border: 1px solid #f0f1f5;
+          border: var(--new-border-10);
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
          border-radius: 10px;
-      .t-input__inner {
+          .t-input__inner::placeholder {
-        font-family: "Medium";
+            font-family: 'Medium';
+            color: var(--new-color-9);
+          }
+          .t-input__prefix {
+            svg {
+              stroke: var(--new-color-9);
+            }
          }
        }
      }
@@ -200,7 +210,7 @@ const popupContent = () => {
        max-height: 500px;
        overflow-y: auto;
        &::after {
-      content: "";
+          content: '';
          display: block;
          flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
          margin: 10px;
@@ -220,14 +230,17 @@ const popupContent = () => {
          cursor: pointer;
          font-size: 12px;
          white-space: nowrap;
-      font-family: "bold";
+          font-family: 'bold';
          img {
            width: 27px;
            height: 27px;
          }
        }
      }
+    }
+  }
 }
 @keyframes customAnimation1 {
  0% {
    transform: rotateX(180deg);

--- a/views/token/CustomTokenList.vue
+++ b/views/token/CustomTokenList.vue
--- 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 {