1

app/router.options.ts

-import type { RouterConfig } from '@nuxt/schema';
+import type { RouterConfig } from "@nuxt/schema";
 // https://router.vuejs.org/api/interfaces/routeroptions.html
 export default <RouterConfig>{
   routes: (_routes) => [
     {
-      name: 'tokenIndex',
-      path: '/',
-      component: () => import('@/views/token/index.vue'),
+      name: "tokenIndex",
+      path: "/",
+      component: () => import("@/views/token/index.vue"),
       meta: { hasSearch: true, hasRollToken: true, footer: true },
       children: [
         {
-          name: 'tokenlistDefault',
-          path: '/',
-          component: () => import('~/views/token/CustomTokenList.vue'),
-          meta: { hasSearch: true, hasRollToken: true, footer: true },
+          name: "tokenlistDefault",
+          path: "/",
+          component: () => import("~/views/token/CustomTokenList.vue"),
+          meta: {
+            hasSearch: true,
+            hasRollToken: true,
+            footer: true,
+          },
         },
         {
-          name: 'tokenList',
-          path: '/:chain?/:page(\\d+)?',
-          component: () => import('~/views/token/CustomTokenList.vue'),
-          meta: { hasSearch: true, hasRollToken: true, footer: true },
+          name: "tokenList",
+          path: "/:chain?/:page(\\d+)?",
+          component: () => import("~/views/token/CustomTokenList.vue"),
+          meta: {
+            hasSearch: true,
+            hasRollToken: true,
+            footer: true,
+          },
         },
       ],
     },
     {
-      name: 'tokenDetail',
-      path: '/:chain/:tb([a-zA-Z0-9_]{10,100})',
-      component: () => import('@/views/detail/index.vue'),
+      name: "tokenDetail",
+      path: "/:chain/:tb([a-zA-Z0-9_]{10,100})",
+      component: () => import("@/views/detail/index.vue"),
       meta: { hasSearch: true, hasRollToken: true, footer: false },
     },
     {
-      path: '/analysis/:chain/:tb',
-      name: 'tokenAnalysis',
-      component: () => import('@/views/analysis/index.vue'),
+      path: "/analysis/:chain/:tb",
+      name: "tokenAnalysis",
+      component: () => import("@/views/analysis/index.vue"),
       meta: { hasSearch: true, hasRollToken: true, footer: false },
     },
     {
-      path: '/login/:code?',
-      name: 'login',
-      component: () => import('@/views/login/index.vue'),
+      path: "/login/:code?",
+      name: "login",
+      component: () => import("@/views/login/index.vue"),
     },
     {
-      path: '/user',
-      name: 'userInfo',
-      component: () => import('@/views/user/index.vue'),
+      path: "/user",
+      name: "userInfo",
+      component: () => import("@/views/user/index.vue"),
       meta: { hasSearch: false, hasRollToken: false, footer: false },
       children: [
         {
-          path: '/user/personal',
-          name: 'personal',
-          component: () => import('@/views/user/PersonalCenter.vue'),
+          path: "/user/personal",
+          name: "personal",
+          component: () => import("@/views/user/PersonalCenter.vue"),
           meta: { hasSearch: false, hasRollToken: false, footer: false },
         },
         {
-          path: '/user/member',
-          name: 'member',
-          component: () => import('@/views/user/memberCenter.vue'),
+          path: "/user/member",
+          name: "member",
+          component: () => import("@/views/user/memberCenter.vue"),
           meta: { hasSearch: false, hasRollToken: false, footer: false },
         },
         // 账单明细
         {
-          path: '/user/Billing',
-          name: 'Billing',
-          component: () => import('@/views/user/Billing.vue'),
+          path: "/user/Billing",
+          name: "Billing",
+          component: () => import("@/views/user/Billing.vue"),
           meta: { hasSearch: false, hasRollToken: false, footer: false },
         },
         {
-          path: '/user/InviteWelfare',
-          name: 'InviteWelfare',
-          component: () => import('@/views/user/invitation.vue'),
+          path: "/user/InviteWelfare",
+          name: "InviteWelfare",
+          component: () => import("@/views/user/invitation.vue"),
           meta: { hasSearch: false, hasRollToken: false, footer: false },
         },
       ],
     },
     // 价值币筛选
     {
-      path: '/CoinFilter',
-      name: 'CoinFilter',
-      component: () => import('@/views/Private/CoinFilter/index.vue'),
+      path: "/CoinFilter",
+      name: "CoinFilter",
+      component: () => import("@/views/Private/CoinFilter/index.vue"),
       meta: { hasSearch: false, hasRollToken: false, footer: false },
     },
   ],

components/SwitchLanguage.vue

@@ -12,39 +12,45 @@
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 const props = defineProps({
   type: {
     type: String,
-    default: 'home',
+    default: "home",
   },
 });
 const { locale } = useI18n();
 // 回到客户端修改获取浏览器语言
 if (process.client) {
-  let lan = localStorage.getItem('lang');
-  if (navigator.language === 'zh-CN' || navigator.language === 'zh-TW') {
-    lan = 'cn';
-  } else if (navigator.language == 'en') {
-    lan = 'en';
+  let lan = localStorage.getItem("lang");
+  if (navigator.language === "zh-CN" || navigator.language === "zh-TW") {
+    lan = "cn";
+  } else if (navigator.language == "en") {
+    lan = "en";
   }
   if (lan) {
     locale.value = lan;
   }
 }
+watch(
+  () => locale.value,
+  (v) => {
+    console.log(v);
+  }
+);
 const languageOptions = [
   {
-    label: '中文简体',
-    value: 'cn',
+    label: "中文简体",
+    value: "cn",
   },
   {
-    label: 'English',
-    value: 'en',
+    label: "English",
+    value: "en",
   },
 ];
 const changeLanguage = (v: string) => {
   locale.value = v;
-  localStorage.setItem('lang', v);
+  localStorage.setItem("lang", v);
 };
 </script>
 
@@ -58,7 +64,7 @@ const changeLanguage = (v: string) => {
   :deep(.t-input__inner) {
     font-weight: 700;
     font-size: 15px;
-    font-family: 'bold';
+    font-family: "bold";
   }
 }
 </style>

middleware/index.global.ts

+export default defineNuxtRouteMiddleware(() => {
+  if (process.client) {
+    let lan = localStorage.getItem("lang");
+    if (navigator.language === "zh-CN" || navigator.language === "zh-TW") {
+      lan = "cn";
+    } else if (navigator.language == "en") {
+      lan = "en";
+    }
+    if (lan) {
+      window.localStorage.setItem("lang", lan);
+    }
+  }
+});

views/Private/CoinFilter/index.vue

@@ -4,6 +4,20 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const { data } = await useAsyncData(
+  "hello",
+  () => $fetch("http://156.247.9.93:9501/v1/eth/indexV1"),
+  {
+    // 在这里修改数据
+    transform: (input) => {
+      // 这里的 input 就是从服务器请求获取的数据
+      console.log(input); // { status: 200, message: 'Success', list: [ 1, 2, 3 ] }
+      return input;
+    },
+    lazy: true,
+  }
+);
+</script>
 
 <style lang="less"></style>

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 { useI18n } from 'vue-i18n';
-import CustPagination from './CustPagination.vue';
-import request from '@/utils/request';
-import { filterChainObj, getSwap } from '@/constants/UnifiedManagementChain';
-import JumpOther from './JumpOther.vue';
-import KLink from '/public/images/svg/table/k_link.svg';
-import analysisSvg from '/public/images/svg/table/media.svg';
-import { webLogo } from '@/constants/logo';
-import CustomTableSort from './tableSort.vue';
-import { TableSort, TableSortAsc } from '@/utils/tool';
-import CustomRadio from '../CustomComponent/radio.vue';
-import BscChain from '/public/images/svg/selectChain/bsc.svg';
-import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg';
-import CustomAvatar from './avatar.vue';
-import TokenAvatar from './tokenAvatar.vue';
-import useSwap from '@/hooks/useSwap';
+import { parsePercent, parseCoinAmount, parseNumberToK } from "@/utils/tool";
+import { useI18n } from "vue-i18n";
+import CustPagination from "./CustPagination.vue";
+import request from "@/utils/request";
+import { filterChainObj, getSwap } from "@/constants/UnifiedManagementChain";
+import JumpOther from "./JumpOther.vue";
+import KLink from "/public/images/svg/table/k_link.svg";
+import analysisSvg from "/public/images/svg/table/media.svg";
+import { webLogo } from "@/constants/logo";
+import CustomTableSort from "./tableSort.vue";
+import { TableSort, TableSortAsc } from "@/utils/tool";
+import CustomRadio from "../CustomComponent/radio.vue";
+import BscChain from "/public/images/svg/selectChain/bsc.svg";
+import SwapSvg from "/public/images/svg/socialInfoWrapper/bscTransaction.svg";
+import CustomAvatar from "./avatar.vue";
+import TokenAvatar from "./tokenAvatar.vue";
+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(null);
-const affixedTableWidth = ref('');
+const affixedTableWidth = ref("");
 // 当前选中的行数
 const CurLineIndex = ref(0);
 // 表格数据轮询
@@ -247,121 +247,121 @@ const colGroupList = reactive({
 const RightInfo = useCurrentRightInfo();
 // 吸顶表头左右跟随滑动
 const affixedHead = reactive({
-  left: '',
-  top: '',
-  height: '',
-  width: '',
+  left: "",
+  top: "",
+  height: "",
+  width: "",
 });
 // 当前排序状态
 const SortOptions = reactive({
   up: {
-    field: 'up',
-    type: 'all',
+    field: "up",
+    type: "all",
     status: false,
   },
   pb: {
-    field: 'pb',
-    type: 'all',
+    field: "pb",
+    type: "all",
     status: false,
   },
   vn: {
-    field: 'vn',
-    type: 'all',
+    field: "vn",
+    type: "all",
     status: false,
   },
   txn: {
-    field: 'txn',
-    type: 'all',
+    field: "txn",
+    type: "all",
     status: false,
   },
   r5m: {
-    field: 'r5m',
-    type: 'all',
+    field: "r5m",
+    type: "all",
     status: false,
   },
   r1h: {
-    field: 'r1h',
-    type: 'all',
+    field: "r1h",
+    type: "all",
     status: false,
   },
   r4h: {
-    field: 'r4h',
-    type: 'all',
+    field: "r4h",
+    type: "all",
     status: false,
   },
   r24h: {
-    field: 'r24h',
-    type: 'all',
+    field: "r24h",
+    type: "all",
     status: false,
   },
 });
-const currentBtn = ref('default');
+const currentBtn = ref("default");
 const btns = computed(() => [
   {
-    label: t('filter.pairs'),
-    value: 'default',
+    label: t("filter.pairs"),
+    value: "default",
   },
   {
-    label: t('filter.updated'),
-    value: 'new',
+    label: t("filter.updated"),
+    value: "new",
   },
   {
-    label: t('filter.gainers'),
-    value: 'max-up',
+    label: t("filter.gainers"),
+    value: "max-up",
   },
   {
-    label: t('filter.losers'),
-    value: 'max-down',
+    label: t("filter.losers"),
+    value: "max-down",
   },
   {
-    label: t('filter.r24hVolume'),
-    value: 'txn',
+    label: t("filter.r24hVolume"),
+    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') {
-    GlbFilter.value.date_orderby = 'txn';
-    GlbFilter.value.sort = 'desc';
-  } else if (value == 'max-up') {
+  if (value == "txn") {
+    GlbFilter.value.date_orderby = "txn";
+    GlbFilter.value.sort = "desc";
+  } else if (value == "max-up") {
     // 最大涨幅
-    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-    GlbFilter.value.sort = 'desc';
-  } else if (value == 'max-down') {
+    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
+    GlbFilter.value.sort = "desc";
+  } else if (value == "max-down") {
     // 最大跌幅
-    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-    GlbFilter.value.sort = 'asc';
+    GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
+    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";
   }
 };
 // 排序事件
@@ -372,15 +372,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.list = TableSortAsc(resultData.list, field);
-  } else if (sort === 'desc') {
+  } else if (sort === "desc") {
     // 降序
     resultData.list = TableSort(resultData.list, field);
   } else {
@@ -391,16 +391,16 @@ 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_vn = '$' + parseNumberToK(item.vn);
+      item.n_up = "$" + parseCoinAmount(item.up);
+      item.n_vn = "$" + parseNumberToK(item.vn);
       item.n_pb = parseNumberToK(item.pb);
       item.n_r5m = parseFloat(item.r5m * 100).toFixed(2);
       item.n_r1h = parseFloat(item.r1h * 100).toFixed(2);
@@ -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;
@@ -458,6 +458,7 @@ const { data, refresh } = await useFetch(
     },
   }
 );
+
 const next = () => {
   loading.value = true;
   refresh();
@@ -470,17 +471,17 @@ const getDefaultList = () => {
 };
 const CustomgetRoute = () => {
   if (route.params.chain) {
-    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) {
-    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);
   }
@@ -493,9 +494,9 @@ useHead({
   link: [webLogo],
   meta: [
     {
-      name: 'description',
+      name: "description",
       content:
-        'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
+        "DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
     },
   ],
 });
@@ -506,7 +507,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";
     });
   });
 };
@@ -537,16 +538,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') {
-    return '$';
+  if (HeadTokenType.value === "USDT") {
+    return "$";
   } else {
-    return '';
+    return "";
   }
 };
 // tbName---流动池折线图传递参数
@@ -560,11 +561,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 = () => {
@@ -582,7 +583,7 @@ const closeInterVal = () => {
 const windowOpenFn = (e: any) => {
   // ==visible代表在当前窗口
   let isExist = e.target.visibilityState;
-  if (isExist === 'visible') {
+  if (isExist === "visible") {
     // 先关再开
     closeInterVal();
     Intervalfun();
@@ -599,9 +600,9 @@ const onCurrentChange = (v) => {
 };
 const onScrollEvent = () => {
   // 获取滚动元素dom
-  BodyscrollDom.value = document.getElementById('layout-scroll');
+  BodyscrollDom.value = document.getElementById("layout-scroll");
   if (BodyscrollDom.value) {
-    affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
+    affixedHead.top = BodyscrollDom.value.offsetTop + "px";
     BodyscrollDom.value.onscroll = function (e: any) {
       let client = CustomHead.value.getBoundingClientRect();
       if (client.top <= BodyscrollDom.value.offsetTop) {
@@ -628,7 +629,7 @@ const onTableScroll = () => {
 };
 const setColGroupList = () => {
   columnsChild.value.forEach((item: any) => {
-    colGroupList.list.push('0px');
+    colGroupList.list.push("0px");
   });
 };
 onMounted(() => {
@@ -680,79 +681,79 @@ onUnmounted(() => {
 const columns = computed(() => {
   return [
     {
-      title: t('TableList.tokenbase'),
+      title: t("TableList.tokenbase"),
       children: [
         {
-          colKey: 'index',
-          width: 'auto',
-          title: '#',
+          colKey: "index",
+          width: "auto",
+          title: "#",
         },
         {
-          colKey: 'tn',
-          title: t('TableList.token'),
+          colKey: "tn",
+          title: t("TableList.token"),
         },
       ],
     },
     {
-      title: t('TableList.basic'),
+      title: t("TableList.basic"),
       children: [
         {
-          colKey: 'up',
-          title: t('TableList.price'),
+          colKey: "up",
+          title: t("TableList.price"),
           sort: true,
         },
         {
-          colKey: 'pb',
-          title: 'Pool',
+          colKey: "pb",
+          title: "Pool",
           sort: true,
         },
         {
-          colKey: 'vn',
-          title: t('TableList.volume'),
+          colKey: "vn",
+          title: t("TableList.volume"),
           sort: true,
         },
         {
-          colKey: 'txn',
-          title: t('TableList.txns'),
+          colKey: "txn",
+          title: t("TableList.txns"),
           sort: true,
         },
       ],
     },
     {
-      title: t('TableList.priceChange'),
+      title: t("TableList.priceChange"),
       children: [
         {
-          colKey: 'r5m',
-          title: t('TableList.time1'),
+          colKey: "r5m",
+          title: t("TableList.time1"),
           sort: true,
         },
         {
-          colKey: 'r1h',
-          title: t('TableList.time2'),
+          colKey: "r1h",
+          title: t("TableList.time2"),
           sort: true,
         },
         {
-          colKey: 'r4h',
-          title: t('TableList.time3'),
+          colKey: "r4h",
+          title: t("TableList.time3"),
           sort: true,
         },
         {
-          colKey: 'r24h',
-          title: t('TableList.time4'),
+          colKey: "r24h",
+          title: t("TableList.time4"),
           sort: true,
         },
       ],
     },
     {
-      title: t('TableList.others'),
+      title: t("TableList.others"),
       children: [
         {
-          colKey: 'operation',
-          title: t('TableList.k_line'),
+          colKey: "operation",
+          title: t("TableList.k_line"),
         },
         {
-          colKey: 'media',
-          title: t('TableList.mediaData'),
+          colKey: "media",
+          title: t("TableList.mediaData"),
         },
       ],
     },
@@ -772,21 +773,21 @@ const columnsChild = computed(() => {
 let arr1 = new Array(100);
 for (let i = 0; i < arr1.length; i++) {
   arr1[i] = {
-    one: '1',
-    two: '2',
-    three: '3',
-    four: '4',
-    five: '5',
-    sex: '6',
-    seven: '7',
+    one: "1",
+    two: "2",
+    three: "3",
+    four: "4",
+    five: "5",
+    sex: "6",
+    seven: "7",
   };
 }
 </script>
 
 <style lang="less">
-@import '@/style/variables.less';
-@import '@/style/line.less';
-@import '@/style/flex.less';
+@import "@/style/variables.less";
+@import "@/style/line.less";
+@import "@/style/flex.less";
 .custom-token-list {
   margin-top: 8px;
   box-sizing: border-box;
@@ -829,7 +830,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 {
@@ -852,7 +853,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: 10px 12px;
               .thead-sort-box {
@@ -894,7 +895,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 {
@@ -917,7 +918,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: 10px 12px;
             .thead-sort-box {
@@ -942,7 +943,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: 10px 12px;
             .custom-no-list {
               .dja();
@@ -973,7 +974,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);

views/token/RightDetail.vue

 <template>
-  <div class="right-detail-wrapper">
+  <!-- <div class="right-detail-wrapper">
     <div class="right-header">
       <template v-for="item in headerBtns" :key="item.value">
         <t-button
@@ -89,7 +89,6 @@
         </div>
       </div>
     </div>
-    <!-- 收藏 -->
     <template v-if="CollectionOnload">
       <div v-show="defaBtn == 'collection'">
         <Collection></Collection>
@@ -106,26 +105,27 @@
         ></details-echarts>
       </div>
     </template>
-  </div>
+  </div> -->
+  <div></div>
 </template>
 <script setup lang="ts">
-import request from '@/utils/request';
-import { parsePercent, parseCoinAmount } from '@/utils/tool';
-import TimeTab from './TimeTab.vue';
-import SecurityCheck from './SecurityCheck.vue';
-import TokenInfo from './TokenInfo.vue';
-import TokenPool from './TokenPool.vue';
-import TokenSocialList from './TokenSocialList.vue';
-import * as Cache from '@/utils/cache';
-import { MessagePlugin } from 'tdesign-vue-next';
-import DetailsEcharts from '../analysis/detailsEcharts.vue';
-import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
-import Favo from '/public/images/svg/rightDetail/favo.svg';
-import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
-import { useI18n } from 'vue-i18n';
-import RightDetailHeader from './rightDetailHeader';
-import SubmitSocialInfo from './SubmitSocialInfo';
-import Collection from './collection';
+import request from "@/utils/request";
+import { parsePercent, parseCoinAmount } from "@/utils/tool";
+import TimeTab from "./TimeTab.vue";
+import SecurityCheck from "./SecurityCheck.vue";
+import TokenInfo from "./TokenInfo.vue";
+import TokenPool from "./TokenPool.vue";
+import TokenSocialList from "./TokenSocialList.vue";
+import * as Cache from "@/utils/cache";
+import { MessagePlugin } from "tdesign-vue-next";
+import DetailsEcharts from "../analysis/detailsEcharts.vue";
+import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
+import Favo from "/public/images/svg/rightDetail/favo.svg";
+import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
+import { useI18n } from "vue-i18n";
+import RightDetailHeader from "./rightDetailHeader";
+import SubmitSocialInfo from "./SubmitSocialInfo";
+import Collection from "./collection";
 const router = useRouter();
 const { t, locale } = useI18n();
 // 通知表格收藏图表取消收藏
@@ -134,16 +134,16 @@ const CollectionDe = CollectionDelete();
 // const initEchart = computed(() => store.getters['echart/gethasInit']);
 const headerBtns = computed(() => [
   {
-    label: t('securityCheck.details'),
-    value: 'details',
+    label: t("securityCheck.details"),
+    value: "details",
   },
   {
-    label: t('filter.Collection'),
-    value: 'collection',
+    label: t("filter.Collection"),
+    value: "collection",
   },
   {
-    label: t('securityCheck.analysis'),
-    value: 'echart',
+    label: t("securityCheck.analysis"),
+    value: "echart",
   },
 ]);
 const props = defineProps({
@@ -155,52 +155,52 @@ const props = defineProps({
   mt: String,
   up: Number,
 });
-const emit = defineEmits(['update:setPool', 'SettwitterRul']);
-const r24h = ref('');
-const numR24h = ref('');
+const emit = defineEmits(["update:setPool", "SettwitterRul"]);
+const r24h = 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: '',
-  token: '',
+  avatar: "",
+  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 + '');
-  if (r24h.value[0] !== '-') {
-    r24h.value = '+' + r24h.value;
+  r24h.value = parsePercent(proR24h + "");
+  if (r24h.value[0] !== "-") {
+    r24h.value = "+" + r24h.value;
   }
 };
 watch(
@@ -214,13 +214,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;
@@ -236,7 +236,7 @@ watch(
 );
 // 流动池tab改变
 const changeTab = (value) => {
-  if (value === 'pool') {
+  if (value === "pool") {
     isPool.value = true;
   }
 };
@@ -250,31 +250,31 @@ const getTokenInfo = async () => {
       },
     });
 
-    result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
-    result.tokenSub = '';
+    result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
+    result.tokenSub = "";
     if (result.token) {
       result.tokenSub =
         result.token.substr(0, 6) +
-        '...' +
+        "..." +
         result.token.substr(result.token.length - 4, 4);
     }
     // tbname-掩码
-    result.tbnameSub = '';
-    result.n_tb = '';
+    result.tbnameSub = "";
+    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) {
-      emit('SettwitterRul', result.chat.twitter);
+    if ("chat" in result) {
+      emit("SettwitterRul", result.chat.twitter);
     }
   } catch (e) {
     console.log(e);
@@ -284,7 +284,7 @@ const getTokenInfo = async () => {
 watch(
   () => locale.value,
   (v) => {
-    if (defaBtn.value == 'echart') {
+    if (defaBtn.value == "echart") {
       WatchEcharts.value += 1;
     }
   }
@@ -292,16 +292,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;
   }
@@ -316,14 +316,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;
@@ -333,8 +333,8 @@ watch(
 );
 </script>
 <style lang="less">
-@import '@/style/flex.less';
-@import '@/style/variables.less';
+@import "@/style/flex.less";
+@import "@/style/variables.less";
 .right-detail-wrapper {
   height: calc(100vh - 70px);
   flex: 1;
@@ -362,7 +362,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);
@@ -438,7 +438,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);

views/token/index.vue

+<!--
+ * @Author: lei 2897821407@qq.com
+ * @Date: 2023-02-20 19:44:54
+ * @LastEditors: lei 2897821407@qq.com
+ * @LastEditTime: 2023-02-20 20:00:08
+ * @FilePath: \dexfilter-web-nuxt3\views\token\index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <MyLayout>
     <template #content>
@@ -29,24 +37,24 @@
 </template>
 
 <script setup lang="ts">
-import MyLayout from '@/views/layout/layout.vue';
-import RightDetail from '@/views/token/RightDetail.vue';
-import TokenFilter from '@/views/token/TokenFilter.vue';
-import RollToken from '@/views/layout/rollToken.vue';
+import MyLayout from "@/views/layout/layout.vue";
+import RightDetail from "@/views/token/RightDetail.vue";
+import TokenFilter from "@/views/token/TokenFilter.vue";
+import RollToken from "@/views/layout/rollToken.vue";
 const route = useRoute();
 const token = ref();
 const TbName = ref();
 const r24h = ref();
 const up = ref();
 const chain = useChain();
-const currentPath = ref('');
+const currentPath = ref("");
 const getUa = () => {
   if (
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
       navigator.userAgent
     )
   ) {
-    window.location.href = 'http://m.dexfilter.com';
+    window.location.href = "http://m.dexfilter.com";
   }
 };
 onBeforeMount(() => {
@@ -68,7 +76,7 @@ const changeChain = (chain) => {
 </script>
 
 <style lang="less">
-@import '@/style/variables.less';
+@import "@/style/variables.less";
 .home-wrapper {
   width: 100vw;
   display: flex;