1

components/Animation.vue

+<template>
+  <div
+    class="custom-loading-box"
+    :style="{
+      width: width,
+      height: height,
+      background: background,
+      position: position,
+    }"
+    :class="{ 'custom-is-table-box': !isTable }"
+  >
+    <div
+      class="ball-beat"
+      :style="{ top: top, left: left }"
+      :class="{ 'custom-is-table-child': !isTable }"
+    >
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  background: {
+    type: String,
+    default: 'var(--theme-color17)',
+  },
+  position: {
+    type: String,
+    default: 'absolute',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  left: {
+    type: String,
+    default: '0px',
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+  top: {
+    type: String,
+    default: '0px',
+  },
+  isTable: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@/style/flex.less';
+.custom-loading-box {
+  top: 0;
+  //   -webkit-transform: translateY(-50%) translateX(-50%);
+  //   transform: translateY(-50%) translateX(-50%);
+  z-index: 100;
+  box-sizing: border-box;
+  .ball-beat {
+    position: sticky;
+    .dja();
+  }
+  .ball-beat > div {
+    background-color: #4999ff;
+    width: 14px;
+    height: 14px;
+    border-radius: 100% !important;
+    margin: 2px;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    display: inline-block;
+    -webkit-animation: ball-beat 0.7s 0s infinite linear;
+    animation: ball-beat 0.7s 0s infinite linear;
+    z-index: 300;
+  }
+
+  .ball-beat > div:nth-child(2n-1) {
+    -webkit-animation-delay: 0.35s !important;
+    animation-delay: 0.35s !important;
+  }
+}
+.custom-is-table-box {
+  .dja();
+  .custom-is-table-child {
+    .dj();
+    position: relative;
+  }
+}
+
+@-webkit-keyframes ball-beat {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes ball-beat {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+</style>

constants/UnifiedManagementChain.ts

@@ -15,6 +15,15 @@
  * honeypot :有没有蜜罐
  * gopluslabs :有没有gopluslabs
  */
+
+/**
+ * 2/8日
+ * 缺少的链
+ * doge
+ * nov
+ * tom
+ *
+ */
 export const chain_options = [
   // ETH
   {
@@ -22,6 +31,7 @@ export const chain_options = [
     value: '/eth',
     img: '/images/svg/selectChain/ETT.svg',
     name: 'ETH',
+    fullName: 'ETHEREUM',
     chain_id: 1,
     Currency: ['WETH', 'USDT'],
     url: {
@@ -54,6 +64,7 @@ export const chain_options = [
     value: '/coinnav',
     img: '/images/svg/selectChain/bsc.svg',
     name: 'BSC',
+    fullName: 'BSC',
     chain_id: 56,
     Currency: ['WBNB', 'USDT'],
     url: {
@@ -86,6 +97,7 @@ export const chain_options = [
     value: '/pol',
     img: '/images/svg/selectChain/pol.svg',
     name: 'POL',
+    fullName: 'POLYGON',
     chain_id: 137,
     Currency: ['WMATIC', 'USDT'],
     url: {
@@ -118,6 +130,7 @@ export const chain_options = [
     value: '/ava',
     img: '/images/svg/selectChain/ava.svg',
     name: 'AVA',
+    fullName: 'AVALANCHE',
     chain_id: 43114,
     Currency: ['WAVAX', 'USDT'],
     url: {
@@ -150,6 +163,7 @@ export const chain_options = [
     value: '/fan',
     img: '/images/svg/selectChain/fan.svg',
     name: 'FAN',
+    fullName: 'FANTOM',
     chain_id: 250,
     Currency: ['WFTM', 'USDT'],
     url: {
@@ -182,6 +196,7 @@ export const chain_options = [
     value: '/cro',
     img: '/images/svg/selectChain/cro.svg',
     name: 'CRO',
+    fullName: 'CRONOS',
     chain_id: 25,
     Currency: ['WCRO', 'USDT'],
     url: {
@@ -214,6 +229,7 @@ export const chain_options = [
     value: '/aur',
     img: '/images/svg/selectChain/aur.svg',
     name: 'AUR',
+    fullName: 'AURORA',
     chain_id: 1313161554,
     Currency: ['WETH', 'USDT'],
     url: {
@@ -246,6 +262,7 @@ export const chain_options = [
     value: '/mri',
     img: '/images/svg/selectChain/mri.svg',
     name: 'MRI',
+    fullName: 'MOONRIVER',
     chain_id: 1285,
     Currency: ['WMOVR', 'USDT'],
     url: {
@@ -278,6 +295,7 @@ export const chain_options = [
     value: '/mbe',
     img: '/images/svg/selectChain/mbe.svg',
     name: 'MBE',
+    fullName: 'MOONBEAM',
     chain_id: 1284,
     Currency: ['WGLMR', 'USDT'],
     url: {
@@ -310,6 +328,7 @@ export const chain_options = [
     value: '/arb',
     img: '/images/svg/selectChain/arb.svg',
     name: 'ARB',
+    fullName: 'ARBITRUM',
     chain_id: 42161,
     Currency: ['WETH', 'USDT'],
     url: {
@@ -336,14 +355,13 @@ export const chain_options = [
       url: 'https://api.gopluslabs.io/api/v1/token_security/42161?contract_addresses=',
     },
   },
-
-  // 新链
   // opt
   {
     label: 'OPT',
     value: '/opt',
     img: '/images/svg/selectChain/opt.svg',
     name: 'OPT',
+    fullName: 'OPTIMISM',
     chain_id: 10,
     Currency: ['WETH', 'USDT'],
     url: {
@@ -376,6 +394,7 @@ export const chain_options = [
     value: '/gno',
     img: '/images/svg/selectChain/gno.svg',
     name: 'GNO',
+    fullName: 'GNOSIS CHAIN',
     chain_id: 100,
     Currency: ['WXDAI', 'USDT'],
     url: {
@@ -408,6 +427,7 @@ export const chain_options = [
     value: '/cel',
     img: '/images/svg/selectChain/cel.svg',
     name: 'CEL',
+    fullName: 'CELO',
     chain_id: 42220,
     Currency: ['CELO', 'USDT'],
     url: {
@@ -440,6 +460,7 @@ export const chain_options = [
     value: '/met',
     img: '/images/svg/selectChain/met.svg',
     name: 'MET',
+    fullName: 'METIS',
     chain_id: 1088,
     Currency: ['Metis', 'USDT'],
     url: {
@@ -472,6 +493,7 @@ export const chain_options = [
     value: '/hec',
     img: '/images/svg/selectChain/hec.svg',
     name: 'HEC',
+    fullName: 'HECO',
     chain_id: 128,
     Currency: ['WHT', 'USDT'],
     url: {
@@ -504,6 +526,7 @@ export const chain_options = [
     value: '/ast',
     img: '/images/svg/selectChain/ast.svg',
     name: 'AST',
+    fullName: 'ASTAR',
     chain_id: 592,
     Currency: ['WASTR', 'USDT'],
     url: {

constants/token.ts

@@ -16,7 +16,7 @@ export const Time_price_range_options = [
   { label: '5M', value: '5m' },
   { label: '1H', value: '1h' },
   { label: '4H', value: '4h' },
-  { label: '24H', value: '24h' },
+  { label: '1D', value: '24h' },
 ];
 export const POOL_SIZE_OPTIONS = [
   { label: '20-50', value: '20_50' },

language/cn.ts

@@ -33,6 +33,7 @@ const cn = {
     losers: '最大跌幅',
     r24hVolume: '最大交易',
     CustomFilter: '高级筛选',
+    Collection: '收藏',
   },
   login: {
     h1: '区块链监控专家',

language/en.ts

@@ -34,6 +34,7 @@ const cn = {
     losers: 'Losers',
     r24hVolume: '24h Volume',
     CustomFilter: 'Custom filters',
+    Collection: 'Collection',
   },
   login: {
     h1: 'On-chain intelligent screening',

package-lock.json

@@ -14,7 +14,7 @@
         "md5": "^2.3.0",
         "nuxt-svgo": "^1.1.0",
         "qrcode": "^1.5.1",
-        "tdesign-icons-vue-next": "^0.1.5",
+        "tdesign-icons-vue-next": "^0.1.7",
         "tdesign-vue-next": "^0.24.9",
         "vue-clipboard3": "^1.0.1",
         "vue-i18n": "^9.2.2"

package.json

@@ -26,7 +26,7 @@
     "md5": "^2.3.0",
     "nuxt-svgo": "^1.1.0",
     "qrcode": "^1.5.1",
-    "tdesign-icons-vue-next": "^0.1.5",
+    "tdesign-icons-vue-next": "^0.1.7",
     "tdesign-vue-next": "^0.24.9",
     "vue-clipboard3": "^1.0.1",
     "vue-i18n": "^9.2.2"

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"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/filter/select.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2421_5415)">
+    <path d="M11.2933 5.96024C11.4828 5.7836 11.7336 5.68744 11.9926 5.69201C12.2517 5.69658 12.4989 5.80153 12.6821 5.98475C12.8653 6.16796 12.9703 6.41514 12.9748 6.67421C12.9794 6.93328 12.8832 7.18401 12.7066 7.37358L8.75393 11.3269C8.55391 11.5268 8.28271 11.6391 7.99993 11.6391C7.71715 11.6391 7.44595 11.5268 7.24593 11.3269L3.2926 7.37358C3.11052 7.18489 3.00985 6.93224 3.01225 6.67004C3.01465 6.40784 3.11994 6.15708 3.30543 5.97176C3.49093 5.78644 3.74179 5.68139 4.00399 5.67923C4.26619 5.67708 4.51875 5.77799 4.70726 5.96024L7.99993 9.25224L11.2933 5.95891V5.96024Z" fill="#838383"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2421_5415">
+    <rect width="16" height="16" fill="white"/>
+    </clipPath>
+    </defs>
+    </svg>
+    
\ No newline at end of file

public/images/svg/rightDetail/colection.svg

+<svg width="22" height="22" viewBox="0 0 22 22" fill="" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.52873 19.7553C6.19643 19.7553 5.86413 19.6516 5.58234 19.4443C5.08257 19.0801 4.838 18.4766 4.94433 17.8678L5.69665 13.4842C5.70197 13.4549 5.68868 13.4337 5.67805 13.423L2.48799 10.3127C2.0467 9.88208 1.88986 9.24939 2.07861 8.66455C2.27001 8.07705 2.76712 7.65702 3.37855 7.56664L7.78348 6.92597C7.80475 6.92331 7.82601 6.90736 7.83665 6.88609L9.8065 2.89853C10.0777 2.34559 10.6306 2 11.2473 2H11.25C11.8667 2 12.4197 2.34293 12.6935 2.89853L14.6634 6.88875C14.674 6.91002 14.6926 6.92331 14.7165 6.92597L19.1215 7.56664C19.7329 7.65702 20.2327 8.07705 20.4214 8.66455C20.6101 9.25205 20.4533 9.88474 20.012 10.3154L16.8299 13.4204C16.8113 13.439 16.8033 13.4629 16.8087 13.4895L17.561 17.8732C17.6647 18.4846 17.4174 19.088 16.9177 19.4496C16.4179 19.8111 15.7692 19.859 15.2243 19.5692L11.2872 17.4983C11.2686 17.4877 11.242 17.4877 11.2208 17.4983L7.27839 19.5692C7.04179 19.6941 6.78393 19.7553 6.52873 19.7553ZM11.25 3.54186C11.2101 3.54186 11.1995 3.56312 11.1915 3.57907V3.58173L9.22166 7.57195C8.98506 8.0478 8.53314 8.37744 8.00944 8.45453L3.60451 9.0952C3.59122 9.09786 3.56198 9.10052 3.54869 9.14305C3.53539 9.18293 3.554 9.20154 3.5673 9.21217L6.75469 12.3198C7.13484 12.692 7.31029 13.2263 7.21724 13.75L6.46492 18.1337C6.46227 18.1523 6.45695 18.1762 6.49151 18.2001C6.52607 18.2241 6.54999 18.2134 6.56328 18.2055L10.503 16.1346C10.9735 15.89 11.5318 15.89 11.9997 16.1346L15.942 18.2055C15.958 18.2134 15.9793 18.2241 16.0138 18.2001C16.0484 18.1736 16.0457 18.147 16.0431 18.131L15.2907 13.7394C15.2057 13.221 15.3785 12.6893 15.7506 12.3198L15.7533 12.3172L18.9407 9.20951C18.954 9.19622 18.9726 9.18027 18.9593 9.1404C18.946 9.09786 18.9168 9.0952 18.9035 9.09254L14.4959 8.45188C13.9722 8.37478 13.5176 8.04514 13.2837 7.57195L11.3138 3.58173C11.3058 3.56578 11.2925 3.54186 11.25 3.54186Z" fill=""/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/rightDetail/colection2.svg

+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.53252 16.6467C5.25329 16.6467 4.97406 16.5596 4.73728 16.3854C4.31732 16.0793 4.11181 15.5723 4.20116 15.0607L4.83333 11.3771C4.8378 11.3526 4.82663 11.3347 4.81769 11.3258L2.13711 8.7122C1.7663 8.35032 1.6345 7.81868 1.7931 7.32724C1.95394 6.83356 2.37166 6.48062 2.88544 6.40467L6.58688 5.86632C6.60475 5.86408 6.62262 5.85068 6.63155 5.83281L8.28681 2.48208C8.51466 2.01745 8.9793 1.72705 9.49754 1.72705H9.49978C10.018 1.72705 10.4827 2.01521 10.7127 2.48208L12.368 5.83504C12.3769 5.85291 12.3926 5.86408 12.4127 5.86632L16.1141 6.40467C16.6279 6.48062 17.0479 6.83356 17.2065 7.32724C17.3651 7.82091 17.2333 8.35256 16.8624 8.71444L14.1886 11.3235C14.1729 11.3392 14.1662 11.3593 14.1707 11.3816L14.8029 15.0652C14.89 15.579 14.6822 16.086 14.2623 16.3898C13.8423 16.6936 13.2973 16.7338 12.8393 16.4904L9.53105 14.7502C9.51541 14.7413 9.49308 14.7413 9.47521 14.7502L6.16245 16.4904C5.96364 16.5953 5.74696 16.6467 5.53252 16.6467ZM9.49978 3.02267C9.46627 3.02267 9.45734 3.04054 9.45063 3.05394V3.05617L7.79537 6.40913C7.59656 6.80899 7.21682 7.08598 6.77675 7.15076L3.07531 7.68911C3.06415 7.69135 3.03957 7.69358 3.0284 7.72932C3.01724 7.76283 3.03287 7.77847 3.04404 7.7874L5.72239 10.3987C6.04183 10.7115 6.18926 11.1605 6.11107 11.6005L5.4789 15.2841C5.47667 15.2997 5.4722 15.3198 5.50124 15.3399C5.53028 15.36 5.55039 15.3511 5.56156 15.3444L8.87208 13.6043C9.26746 13.3988 9.73656 13.3988 10.1297 13.6043L13.4425 15.3444C13.4559 15.3511 13.4737 15.36 13.5028 15.3399C13.5318 15.3176 13.5296 15.2953 13.5274 15.2819L12.8952 11.5916C12.8237 11.156 12.9689 10.7092 13.2816 10.3987L13.2839 10.3965L15.9622 7.78517C15.9734 7.774 15.989 7.7606 15.9779 7.72709C15.9667 7.69135 15.9421 7.68911 15.9309 7.68688L12.2273 7.14853C11.7872 7.08375 11.4052 6.80675 11.2087 6.40913L9.55339 3.05617C9.54669 3.04277 9.53552 3.02267 9.49978 3.02267Z" fill="#7B7D87"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/rightDetail/collection-yes.svg

+<svg width="19" height="19" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.26668 16.7675C4.50909 17.2234 3.5184 16.9876 3.05827 16.2453C2.84014 15.8929 2.77235 15.472 2.86927 15.0719L3.84983 11.0214C3.86151 10.9742 3.85979 10.9249 3.84486 10.8786C3.82992 10.8323 3.80233 10.7908 3.76501 10.7585L0.555338 8.04948C-0.111346 7.48718 -0.188297 6.50381 0.381636 5.84823C0.517249 5.69183 0.683507 5.56299 0.87081 5.46918C1.05811 5.37536 1.26275 5.31841 1.4729 5.30163L5.68518 4.96926C5.77698 4.96185 5.85911 4.90322 5.89668 4.81408L7.51963 0.969312C7.85781 0.168364 8.79832 -0.21413 9.61891 0.12216C10.0103 0.283261 10.3199 0.587815 10.4802 0.969312L12.1032 4.81387C12.1407 4.90322 12.2229 4.96207 12.3147 4.96926L16.5274 5.30184C17.4108 5.37159 18.0648 6.12851 17.9949 6.98787C17.962 7.39797 17.7645 7.77925 17.4447 8.04992L14.2351 10.759C14.1604 10.822 14.1266 10.924 14.1502 11.0216L15.1308 15.0721C15.3338 15.9101 14.8068 16.7544 13.9466 16.9565C13.7416 17.0047 13.5286 17.0128 13.3203 16.9804C13.1119 16.948 12.9123 16.8757 12.7332 16.7677L9.1266 14.597C9.08865 14.5739 9.04474 14.5617 8.99993 14.5617C8.95511 14.5617 8.91121 14.5739 8.87325 14.597L5.26668 16.7675Z" fill="#287EFF"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/rightDetail/copy.svg

+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.821 0.197754H4.27701C3.87601 0.197754 3.55 0.528063 3.55 0.934132V1.0569H2.811C2.506 1.0569 2.24601 1.25086 2.14301 1.52333H0.727005C0.326005 1.52333 0 1.85364 0 2.25971V10.0659C0 10.472 0.326005 10.8022 0.727005 10.8022H7.173C7.574 10.8022 7.90001 10.472 7.90001 10.0659V9.47637H8.821C9.222 9.47637 9.548 9.14616 9.548 8.7404V0.934132C9.548 0.528063 9.222 0.197754 8.821 0.197754ZM2.811 1.54784H5.089C5.216 1.54784 5.319 1.65247 5.319 1.78111C5.319 1.90965 5.216 2.01428 5.089 2.01428H2.811C2.684 2.01428 2.58101 1.90965 2.58101 1.78111C2.58101 1.65247 2.684 1.54784 2.811 1.54784ZM7.416 10.0659C7.416 10.2016 7.307 10.311 7.173 10.311H0.727005C0.593005 10.311 0.484001 10.2016 0.484001 10.0659V2.25971C0.484001 2.12438 0.593005 2.01428 0.727005 2.01428H2.134C2.23 2.29951 2.497 2.50523 2.811 2.50523H5.089C5.403 2.50523 5.67001 2.29951 5.76601 2.01428H7.173C7.307 2.01428 7.416 2.12438 7.416 2.25971V10.0659ZM9.064 8.7404C9.064 8.87572 8.955 8.98613 8.821 8.98613H7.90001V2.25971C7.90001 1.85364 7.574 1.52333 7.173 1.52333H5.757C5.654 1.25086 5.394 1.0569 5.089 1.0569H4.035V0.934132C4.035 0.79881 4.14401 0.688706 4.27701 0.688706H8.821C8.955 0.688706 9.064 0.79881 9.064 0.934132V8.7404Z" fill="#7B7D87"/>
+    <path d="M6.04691 3.39014H1.82991C1.69591 3.39014 1.58691 3.50014 1.58691 3.6358C1.58691 3.77156 1.69591 3.88156 1.82991 3.88156H6.04691C6.17991 3.88156 6.28891 3.77156 6.28891 3.6358C6.28891 3.50014 6.17991 3.39014 6.04691 3.39014Z" fill="#7B7D87"/>
+    <path d="M6.04691 4.81396H1.82991C1.69591 4.81396 1.58691 4.92397 1.58691 5.05973C1.58691 5.19539 1.69591 5.30539 1.82991 5.30539H6.04691C6.17991 5.30539 6.28891 5.19539 6.28891 5.05973C6.28891 4.92397 6.17991 4.81396 6.04691 4.81396Z" fill="#7B7D87"/>
+    <path d="M3.93791 6.23779H1.82991C1.69591 6.23779 1.58691 6.3478 1.58691 6.48346C1.58691 6.61921 1.69591 6.72922 1.82991 6.72922H3.93791C4.07191 6.72922 4.17992 6.61921 4.17992 6.48346C4.17992 6.3478 4.07191 6.23779 3.93791 6.23779Z" fill="#7B7D87"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/table/down.svg

+<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.82615 0H1.17383C0.574708 0 0.27468 0.766372 0.698308 1.21457L5.0245 5.79165C5.28707 6.06945 5.71293 6.06945 5.9755 5.79165L10.3016 1.21457C10.7254 0.766372 10.4253 0 9.82615 0Z" fill="#EA3943"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/table/up.svg

+<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.82615 6H1.17383C0.574708 6 0.27468 5.23363 0.698308 4.78543L5.0245 0.20835C5.28707 -0.0694504 5.71293 -0.0694504 5.9755 0.20835L10.3016 4.78543C10.7254 5.23363 10.4253 6 9.82615 6Z" fill="#16C784"/>
+    </svg>
+    
\ No newline at end of file

style/default.css

@@ -78,19 +78,24 @@
 
   --user-center-input-back-color: rgb(236, 236, 239);
   --history-list-reset-btn-back: var(--theme16);
-  --history-list-reset-btn-color: var(--theme3);
 
   /*  */
   --new-background-1: white;
   --new-background-2: #eff2f5;
   --new-background-3: #f1f6fe;
+  --new-background-4: #f9fafb;
 
   --new-border-1: #dcdcdc;
   --new-border-2: 1px solid #e0e3ea;
   --new-border-3: rgb(239, 242, 245);
+  --new-border-4: rgb(224, 227, 234);
+  --new-border-5: #287eff;
+  --new-border-6: #f0f1f5;
 
   --new-color-1: #6d6d6d;
   --new-color-2: #287eff;
+  --new-color-3: #7b7d87;
+  --new-color-4: #5ab055;
 }
 
 :root[theme-mode='dark'] {
@@ -135,19 +140,24 @@
   --tradingview-color-1: rgb(47, 50, 54);
   --user-center-input-back-color: rgb(47, 50, 54);
   --history-list-reset-btn-back: var(--theme14);
-  --history-list-reset-btn-color: var(--theme6);
 
   /*  */
   --new-background-1: #142028;
   --new-background-2: #1a1a1a;
   --new-background-3: #002d72;
+  --new-background-4: #151515;
 
   --new-border-1: none;
   --new-border-2: 1px solid #0b1217;
   --new-border-3: rgb(20, 32, 40);
+  --new-border-4: none;
+  --new-border-5: #428dff;
+  --new-border-6: #151515;
 
   --new-color-1: #a9a9a9;
   --new-color-2: #28b2ff;
+  --new-color-3: #848e9c;
+  --new-color-4: #5ab055;
 }
 /* 主题按钮*/
 .custom_button_back_border {

style/line.less

@@ -6,7 +6,7 @@
     width: 200%;
     height: 200%;
     position: absolute;
-    border: 1px solid var(--new-border-1);
+    border: var(--new-border-2);
     top: 0;
     left: 0;
     transform-origin: 0 0;

views/layout/Search.vue

@@ -41,17 +41,6 @@
           </t-input>
           <t-tabs :default-value="1">
             <t-tab-panel :value="1" :label="$t('tokenInfo.TopSearch')">
-              <div class="t-radio-btns">
-                <t-button
-                  class="btn-cl"
-                  @click="chooseB(item.value, index)"
-                  :class="{ active: watchValue(item.value) }"
-                  v-for="(item, index) in SearchChainOptions"
-                  :key="item.value"
-                >
-                  {{ item.label }}
-                </t-button>
-              </div>
               <div class="table-box">
                 <div
                   id="search-token-list"
@@ -86,14 +75,13 @@
                         <div class="price-and-time">
                           <div class="token">
                             <span>Price: </span>
-                            <span>&nbsp;{{ item.info.up }}</span>
+                            <span>&nbsp;{{ item.up }}</span>
                           </div>
                           <div class="token not_first">
                             <span>24H Price Change: </span>
-                            <span
-                              :style="{ color: monitor(item.info.Newr24h) }"
-                              >{{ item.info.Newr24h }}</span
-                            >
+                            <span :style="{ color: monitor(item.Newr24h) }">{{
+                              item.Newr24h
+                            }}</span>
                           </div>
                           <div class="token not_first">
                             <span>Holders: </span>
@@ -103,7 +91,7 @@
                         <div class="price-and-time">
                           <div class="token">
                             <span>Tx: </span>
-                            <span>&nbsp;{{ item.info.tx }}</span>
+                            <span>&nbsp;{{ item.tx }}</span>
                           </div>
                           <div class="token not_first">
                             <span>Pool: </span>
@@ -175,10 +163,7 @@ import { WebS } from '@/utils/TokenTrans';
 import JumpOther from '/views/token/JumpOther.vue';
 import KLink from '/public/images/svg/table/k_link.svg';
 import analysisSvg from '/public/images/svg/table/media.svg';
-import {
-  SearchChainOptions,
-  chain_options,
-} from '@/constants/UnifiedManagementChain';
+import { chain_options } from '@/constants/UnifiedManagementChain';
 const keyword = ref('');
 const inputPlaceholder = ref('');
 const visible = ref(false);
@@ -230,18 +215,6 @@ const showSelect = () => {
   chooseSearchTwo.value = true;
 };
 const current = ref('all');
-// 监听点击
-const watchValue = (value) => {
-  return current.value === value;
-};
-
-// 按钮组切换事件
-const chooseB = (value, index) => {
-  current.value = value;
-  loadingMore.value = false;
-  resultList.value = [];
-  getTokenList();
-};
 const collectData = (item) => {
   if (item.isStar) {
     Cache.deleteCollection(item.tb_name);
@@ -297,7 +270,7 @@ const getTokenList = () => {
     defalutPage.value = 1;
   }
   request
-    .get(`/v1/coinnav/search`, {
+    .get(`/search`, {
       params: {
         q: WebS(RemoveSpaces(keyword.value)),
         page: defalutPage.value,
@@ -348,10 +321,10 @@ const resultFilter = (list) => {
     if (item.name.length >= 20) {
       item.name = item.name.substring(0, 20) + '...';
     }
-    item.info.up = '$' + parseCoinAmount(item.info.up);
+    item.up = '$' + parseCoinAmount(item.up);
 
-    item.info.Newr24h = parsePercent(item.info.r24h);
-    item.info.r24h = item.info.r24h.toFixed(3);
+    item.Newr24h = parsePercent(item.r24h);
+    item.r24h = item.r24h.toFixed(3);
     // 将token转换为常用样式
     item.filterToken =
       item.token.substring(0, 6) +
@@ -361,8 +334,8 @@ const resultFilter = (list) => {
       item.tb_name.substring(0, 6) +
       '...' +
       item.tb_name.substring(item.tb_name.length - 4);
-    if (item.info.Newr24h[0] !== '-') {
-      item.info.Newr24h = '+' + item.info.Newr24h;
+    if (item.Newr24h[0] !== '-') {
+      item.Newr24h = '+' + item.Newr24h;
     }
     // 判断当前token是否已收藏
     let res = localStorage.getItem('COLLECTION_LIST');
@@ -443,6 +416,7 @@ const goDetail = (row) => {
   // 2
   :deep(.t-drawer__header) {
     padding: 0 !important;
+    flex-direction: column;
   }
 
   .t-drawer {
@@ -466,6 +440,9 @@ const goDetail = (row) => {
         }
       }
     }
+    .t-tabs {
+      width: 100%;
+    }
     :deep(.t-drawer__content-wrapper) {
       margin-top: 64px !important;
       width: 50vw;
@@ -473,27 +450,6 @@ const goDetail = (row) => {
       margin-left: 25vw;
       background: @td--Search-drawer-back-color;
       border-radius: 4px;
-      .t-radio-btns {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        row-gap: 6px;
-        margin: 6px 0;
-        .btn-cl {
-          background: @td-Search-btn-color-3;
-          border: none;
-          color: @td-search-btns-textColor;
-          border-radius: 16px;
-          margin: 0 16px;
-          width: 100px;
-          height: 26px;
-          font-size: @font-size-s;
-        }
-        .active {
-          background: @td--main-btn-color-1;
-          color: white;
-        }
-      }
       .table-box {
         width: 100%;
         .total-token-info-fa {

views/token/JumpOther.vue

@@ -60,7 +60,10 @@ const StopBubbly = (e: any) => {
 .other-box-cl {
   .kline-btn {
     border-radius: 8px;
-
+    border: 2px solid var(--new-border-5);
+    width: 50px;
+    height: 38px;
+    padding: 0;
     :deep(.k-link) {
       fill: var(--td--main-btn-color-1);
       transition: 0.3s fill;

views/token/RightDetail.vue

-<!--
- * @Author: walker.liu
- * @Date: 2022-04-09 14:54:44
- * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
--->
 <template>
   <div class="right-detail-wrapper">
     <div class="right-header">
-      <div class="right-header-child">
+      <template v-for="item in headerBtns" :key="item.value">
         <t-button
           class="detail-button-cl"
-          @click="gotoDetail('details')"
+          @click="gotoDetail(item.value)"
           :class="{
-            active: monitor('details'),
-            occupy: currentRouter === 'tokenAnalysis',
+            active: monitor(item.value),
+            occupy:
+              currentRouter === 'tokenAnalysis' && item.value == 'details',
           }"
+          v-if="btnLoad(item.value)"
         >
-          {{ $t('securityCheck.details') }}
+          {{ item.label }}
           <template #icon>
-            <Detailsicon class="details-icon-cl"></Detailsicon>
+            <template v-if="item.value === 'details'">
+              <Detailsicon class="details-icon-cl"></Detailsicon>
+            </template>
+            <template v-else-if="item.value === 'favo'">
+              <Favo class="right-detail-analysis-icon"></Favo>
+            </template>
+            <template v-else>
+              <CollectionSvg
+                class="right-detail-collection-icon"
+              ></CollectionSvg>
+            </template>
           </template>
         </t-button>
-        <t-button
-          v-if="currentRouter !== 'tokenAnalysis'"
-          class="detail-button-cl"
-          @click="gotoDetail('favo')"
-          :class="{ active: monitor('favo') }"
-        >
-          {{ $t('securityCheck.analysis') }}
-          <template #icon>
-            <Favo class="right-detail-analysis-icon"></Favo>
-          </template>
-        </t-button>
-      </div>
+      </template>
     </div>
     <div v-show="isDetails" class="details-title-box">
-      <div class="header-token-box">
-        <div class="header-token-info">
-          <div class="pro-tokeninfo-header">
-            <div class="left-token-name">
-              <div class="token-name-child">
-                <span class="title">{{ tokenInfo.symbol }}</span>
-              </div>
-              <div class="address-info">
-                <span class="address-info-item">
-                  <span>{{ $t('TableList.token') }}</span>
-                  <span class="address">:&nbsp;{{ tokenInfo.tokenSub }}</span>
-                  <file-copy-icon
-                    @click="doCopy(tokenInfo.token)"
-                  ></file-copy-icon>
-                </span>
-              </div>
-            </div>
-            <div class="rigth-token-logo">
-              <TextLogo></TextLogo>
-            </div>
-          </div>
-          <div class="token-price-cl">
-            <div class="left-info">
-              <div class="price">
-                <span
-                  >{{ $t('TableList.price') }}:{{
-                    parseCoinAmount(tokenInfo.up)
-                  }}</span
-                >
-                <span class="r24h-cl" :style="{ color: r24hColor() }"
-                  >&nbsp;&nbsp;{{ numR24h }}({{ r24h }})</span
-                >
-              </div>
-            </div>
-            <div class="filled-star-box">
-              <star-filled-icon
-                v-if="isInCollection"
-                size="20px"
-                class="filled-star"
-                @click="collectData"
-              />
-              <star-icon
-                v-else
-                @click="collectData"
-                size="20px"
-                class="filled-star-on"
-              ></star-icon>
-            </div>
-          </div>
-        </div>
-      </div>
-
+      <RightDetailHeader
+        :tokenInfo="tokenInfo"
+        :numR24h="numR24h"
+        :r24h="r24h"
+        :tb="tb"
+        :currentPath="currentPath"
+        v-model:isInCollection="isInCollection"
+      ></RightDetailHeader>
       <div class="right-body-scroll narrow-scrollbar">
         <div class="right-body">
           <token-social-list
@@ -127,32 +79,7 @@
             :currentPath="currentPath"
             :tb="props.tb"
           ></time-tab>
-          <div class="select-box_collect">
-            <ClientOnly>
-              <t-select
-                empty=" "
-                :placeholder="$t('collection.Focus')"
-                :popup-props="{ overlayClassName: 'attention-list-box' }"
-                @popup-visible-change="selectOpenClose"
-              >
-                <template #panelTopContent>
-                  <div class="select-header-btn">
-                    <span>{{ $t('collection.header') }}</span>
-                    <t-button
-                      size="small"
-                      @click="showCollection"
-                      class="custom_button_back_border"
-                      >{{ $t('collection.allcollection') }}</t-button
-                    >
-                  </div>
-                  <CollectionTable></CollectionTable>
-                </template>
-              </t-select>
-            </ClientOnly>
-            <collection-drawer
-              v-model:visible="collectionVisible"
-            ></collection-drawer>
-          </div>
+          <div class="select-box_collect"></div>
           <security-check
             :token="props.token"
             :currentPath="currentPath"
@@ -160,24 +87,24 @@
         </div>
       </div>
     </div>
-    <div v-if="ifDetails" v-show="!isDetails" class="all-echarts">
-      <details-echarts
-        :token="props.token"
-        :tb="tb"
-        :currentPath="currentPath"
-        :r24h="numR24h"
-        :mt="mt"
-      ></details-echarts>
-    </div>
+    <template v-if="ifDetails">
+      <div v-show="!isDetails" class="all-echarts">
+        <details-echarts
+          :token="props.token"
+          :tb="tb"
+          :currentPath="currentPath"
+          :r24h="numR24h"
+          :mt="mt"
+        ></details-echarts>
+      </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
-import { FileCopyIcon, StarIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
 import request from '@/utils/request';
-import { parseCoinAmount, parsePercent } from '@/utils/tool';
+import { parsePercent } from '@/utils/tool';
 import TimeTab from './TimeTab.vue';
 import SecurityCheck from './SecurityCheck.vue';
-import CollectionDrawer from './CollectionDrawer.vue';
 import TokenInfo from './TokenInfo.vue';
 import TokenPool from './TokenPool.vue';
 import TokenSocialList from './TokenSocialList.vue';
@@ -187,18 +114,29 @@ 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 TextLogo from '/public/images/svg/rightDetail/testLogo.svg';
-import useCopy from '@/hooks/useCopy';
+import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
 import { useI18n } from 'vue-i18n';
-const { doCopy } = useCopy();
+import RightDetailHeader from './rightDetailHeader';
 const router = useRouter();
 const { t, locale } = useI18n();
 // 通知表格收藏图表取消收藏
 const CollectionDe = CollectionDelete();
-
 // 是否加载折线图
 // const initEchart = computed(() => store.getters['echart/gethasInit']);
-
+const headerBtns = computed(() => [
+  {
+    label: t('securityCheck.details'),
+    value: 'details',
+  },
+  {
+    label: t('filter.Collection'),
+    value: 'collection',
+  },
+  {
+    label: t('securityCheck.analysis'),
+    value: 'favo',
+  },
+]);
 const props = defineProps({
   token: String,
   scene: String,
@@ -207,21 +145,30 @@ const props = defineProps({
   r24h: String,
   mt: String,
 });
+const emit = defineEmits(['update:setPool', 'SettwitterRul']);
 const r24h = ref('');
 const numR24h = ref('');
-const emit = defineEmits(['update:setPool', 'SettwitterRul']);
+// 判断当前路由，隐藏右侧详情box中的折线图模块
+const currentRouter = router.currentRoute.value.name;
 const currentTab = ref('info');
-const collectionVisible = ref(false);
+const isInCollection = ref(false);
+// 默认选择detail按钮
+const defaBtn = ref('details');
+const isDetails = ref(true);
+const ifDetails = ref(false);
+const WatchEcharts = useWatchEcharts();
+// 传给详情折线图的tbname
+const tb = ref('');
+// 点击pool才加载
+const isPool = ref(false);
+const PoolAddress = ref('');
 // 当前链
 const chain = useChain();
-const tokenInfo: any = reactive({
+const tokenInfo: any = ref({
   avatar: '',
   token: '',
   pool: [],
 });
-const showCollection = () => {
-  collectionVisible.value = true;
-};
 watch(
   () => props.r24h,
   (v) => {
@@ -238,7 +185,12 @@ watch(
     }
   }
 );
-
+const btnLoad = (value: string) => {
+  if (currentRouter == 'tokenAnalysis' && value == 'favo') {
+    return false;
+  }
+  return true;
+};
 watch(
   () => CollectionDe.value,
   (v) => {
@@ -248,18 +200,6 @@ watch(
     }
   }
 );
-const r24hColor = () => {
-  if (r24h.value[0] === '-') {
-    return '#f85260';
-  } else {
-    return '#23ab94';
-  }
-};
-// 传给详情折线图的tbname
-const tb = ref('');
-// 点击pool才加载
-const isPool = ref(false);
-const PoolAddress = ref('');
 // 流动池tab改变
 const changeTab = (value) => {
   if (value === 'pool') {
@@ -267,7 +207,6 @@ const changeTab = (value) => {
   }
 };
 
-const isInCollection = ref(false);
 const getTokenInfo = async () => {
   try {
     const result: any = await request.get(`/v1/${chain.value}/getRightInfo`, {
@@ -276,6 +215,7 @@ const getTokenInfo = async () => {
         mainstream: props.mt,
       },
     });
+
     result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
     result.tokenSub = '';
     if (result.token) {
@@ -284,21 +224,28 @@ const getTokenInfo = async () => {
         '...' +
         result.token.substr(result.token.length - 4, 4);
     }
+    // tbname-掩码
+    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;
+      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, result);
+    Object.assign(tokenInfo.value, result);
     // 如果有推特链接，提交给twitter组件解析
-    if (result.chat?.twitter) {
+    if ('chat' in result) {
       emit('SettwitterRul', result.chat.twitter);
     }
   } catch (e) {
     console.log(e);
   }
 };
-// 默认选择detail按钮
-const defaBtn = ref('details');
-const isDetails = ref(true);
-const ifDetails = ref(false);
-const WatchEcharts = useWatchEcharts();
 // 语言变化
 watch(
   () => locale.value,
@@ -352,201 +299,86 @@ watch(
     }
   }
 );
-// 判断当前路由，隐藏右侧详情box中的折线图模块
-const currentRouter = router.currentRoute.value.name;
-// 收藏表格是否更新
-const CollectionCl = CollectionChange();
-// 收藏列表select打开事件
-const selectOpenClose = (v: boolean) => {
-  CollectionCl.value.isOpen = v;
-};
-
-const collectData = () => {
-  if (isInCollection.value) {
-    Cache.deleteCollection(props.tb);
-    isInCollection.value = false;
-  } else {
-    Cache.setCollection({
-      hash: props.tb,
-      symbol: tokenInfo.symbol,
-      path: props.currentPath,
-    });
-    isInCollection.value = true;
-  }
-  // 通知select中的收藏数据更新
-  CollectionCl.value.value += 1;
-};
 </script>
 <style lang="less">
 @import '@/style/flex.less';
+@import '@/style/variables.less';
 .right-detail-wrapper {
   height: calc(100vh - 70px);
-  background-color: var(--td-bg-color-container);
   flex: 1;
   position: sticky;
-  top: 0;
+  top: 12px;
   z-index: 99;
-  border-left: 1px solid var(--td-component-border);
+  margin-right: 8px;
+  box-sizing: border-box;
   .right-header {
-    height: 62px;
+    box-sizing: border-box;
+    height: 40px;
     width: 100%;
     .da();
-    border-top: 1px solid var(--td-component-border);
-    .right-header-child {
-      height: 80%;
-      width: 100%;
-      margin: 8px 4px;
-      border: 2px solid var(--td--main-btn-color-1);
-      border-radius: 30px;
-      .dja();
-      .detail-button-cl {
-        border-radius: 20px;
-        height: 90%;
-        width: calc(50% - 8px);
-        border: none;
-        background: none;
-        color: var(--td-search-btn-back-1);
-        font-weight: bold;
-        .details-icon-cl {
-          width: 30px;
-          fill: var(--td-search-btn-back-1);
-        }
-        .right-detail-analysis-icon {
-          width: 26px;
-          margin-right: 10px;
-          fill: var(--td-search-btn-back-1);
-        }
+    border: 1px solid var(--td-component-border);
+    border-bottom: none;
+    border-radius: 10px 10px 0px 0px;
+    background-color: var(--td-bg-color-container);
+    .detail-button-cl {
+      height: 100%;
+      border-radius: 0;
+      width: calc(50% - 8px);
+      border: none;
+      background: none;
+      color: var(--td-search-btn-back-1);
+      font-weight: bold;
+      .details-icon-cl {
+        width: 30px;
+        fill: var(--td-search-btn-back-1);
       }
-      .active {
-        background: var(--td--main-btn-color-1);
-        color: white;
-        .details-icon-cl {
-          fill: white;
-        }
-        .right-detail-analysis-icon {
-          fill: white;
-        }
+      .right-detail-collection-icon {
+        margin-right: 10px;
+        fill: var(--td-search-btn-back-1);
       }
-      .occupy {
-        width: 98.5%;
+      .right-detail-analysis-icon {
+        width: 26px;
+        margin-right: 10px;
+        fill: var(--td-search-btn-back-1);
       }
-      .title {
-        color: var(--td-text-color-primary);
-        margin-right: 16px;
-        font-size: 20px;
+    }
+    & > :first-child {
+      border-top-left-radius: 10px;
+    }
+    & > :last-child {
+      border-top-right-radius: 10px;
+    }
+    .active {
+      background: var(--td--main-btn-color-1);
+      color: white;
+      .details-icon-cl {
+        fill: white;
       }
-      .t-icon {
-        cursor: pointer;
-        font-size: 20px;
-        &:hover {
-          color: var(--td-brand-color);
-        }
+      .right-detail-analysis-icon {
+        fill: white;
+      }
+      .right-detail-collection-icon {
+        fill: white;
+      }
+    }
+    .occupy {
+      width: 98.5%;
+    }
+    .title {
+      color: var(--td-text-color-primary);
+      margin-right: 16px;
+      font-size: 20px;
+    }
+    .t-icon {
+      cursor: pointer;
+      font-size: 20px;
+      &:hover {
+        color: var(--td-brand-color);
       }
     }
   }
   .details-title-box {
     width: 100%;
-    .header-token-box {
-      margin-top: -1px;
-      .header-token-info {
-        border: 1px solid var(--td-component-border);
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-        border-left: none;
-        .pro-tokeninfo-header {
-          height: 76px;
-          display: flex;
-          .left-token-name {
-            width: 70%;
-            height: 100%;
-            padding-left: 12px;
-            .token-name-child {
-              font-size: var(--font-size-xxl);
-              color: var(--td-right-detail-font-color-1);
-              font-weight: bold;
-              .da();
-              white-space: nowrap;
-              height: 70%;
-              span {
-                line-height: 60px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-
-              :not(:first-child) {
-                margin-left: 10px;
-              }
-            }
-            .address-info {
-              display: flex;
-              flex-basis: 50%;
-              .address-info-item {
-                font-size: var(--font-size);
-                .address {
-                  margin-right: 4px;
-                }
-              }
-            }
-            :hover.address-info {
-              cursor: pointer;
-            }
-          }
-          .rigth-token-logo {
-            width: 30%;
-            height: 100%;
-            .dja();
-            img {
-              width: 80px;
-            }
-          }
-        }
-        .token-price-cl {
-          height: 30px;
-          padding-left: 12px;
-          .da();
-          .left-info {
-            width: 70%;
-            font-size: 16px;
-            color: var(--td-text-color-secondary);
-            display: flex;
-            white-space: nowrap;
-            .price {
-              color: var(--td-Search-info-color-1);
-              font-size: 16px;
-              font-weight: bold;
-              .r24h-cl {
-                font-size: var(--font-size-s);
-                font-weight: normal;
-              }
-            }
-            .kline-btn {
-              margin-left: 16px;
-              width: 24px;
-              height: 24px;
-              .t-icon {
-                font-size: 24px;
-                color: #fff;
-              }
-            }
-          }
-          .filled-star-box {
-            width: 30%;
-            height: 30px;
-            .dja();
-            .filled-star {
-              color: var(--td-brand-color);
-              cursor: pointer;
-            }
-            .filled-star-on {
-              cursor: pointer;
-            }
-          }
-          .t-avatar {
-            margin-left: auto;
-          }
-        }
-      }
-    }
     .right-body-scroll {
       width: 100%;
       overflow-y: scroll;
@@ -567,9 +399,8 @@ const collectData = () => {
         .info-tabs {
           border: 1px solid var(--td-component-border);
           border-top: none;
-          border-left: none;
-          border-bottom-left-radius: 3px;
-          border-bottom-right-radius: 3px;
+          border-bottom-left-radius: @border-radius;
+          border-bottom-right-radius: @border-radius;
           .t-tabs__nav-scroll {
             width: 100%;
             display: flex;
@@ -589,24 +420,6 @@ const collectData = () => {
             }
           }
         }
-        .select-box_collect {
-          margin-top: 6px;
-          .t-select {
-            .dja();
-            font-size: var(--font-size-l);
-            z-index: 102;
-            height: 40px;
-            .t-input__inner {
-              text-align: center;
-              margin-left: 16px;
-              font-size: var(--font-size-base);
-            }
-            .t-input__inner::placeholder {
-              color: var(--td-search-btn-back-1) !important;
-              font-weight: bold;
-            }
-          }
-        }
       }
     }
   }
@@ -616,29 +429,3 @@ const collectData = () => {
   }
 }
 </style>
-
-<style lang="less">
-.attention-list-box {
-  width: 354px;
-  border-radius: 6px;
-  box-shadow: 0px 1px 10px #888888;
-  min-height: 300px;
-  .t-popup__content {
-    width: 100% !important;
-    min-height: 300px;
-    margin: 0;
-  }
-  .select-header-btn {
-    padding: 0 6px;
-    span {
-      font-size: var(--font-size-l);
-    }
-    .t-button {
-      float: right;
-      .t-button__text {
-        font-size: var(--font-size-s);
-      }
-    }
-  }
-}
-</style>

views/token/SecurityCheck.vue

 <template>
   <div class="field-list_SecurityCheck">
+    <div class="header-box">{{ $t('securityCheck.securityCheck') }}</div>
     <div class="field-list-status" v-show="ChainObj.honeypot.request">
-      <div class="header-box">{{ $t('securityCheck.securityCheck') }}</div>
       <div class="field-header">
         <div class="label">
           {{ $t('securityCheck.honeypot') }}：
@@ -207,24 +207,22 @@ const getList = (token: string, Obj: any) => {
 </script>
 <style lang="less">
 @import '@/style/flex.less';
+@import '@/style/variables.less';
 .field-list_SecurityCheck {
   margin-top: 8px;
   border: 1px solid var(--td-Search-info-border-bottom-2);
-  border-top: none;
-  border-left: none;
-  border-radius: 3px;
+  background-color: var(--td-bg-color-container);
+  border-radius: @border-radius;
+  .header-box {
+    padding: 4px 12px;
+    .dja();
+    font-size: var(--font-size-base);
+    font-weight: bold;
+    height: 40px;
+    border-bottom: 1px solid var(--td-search-brand-color-1);
+    color: var(--td-search-btn-back-1);
+  }
   .field-list-status {
-    .header-box {
-      padding: 4px 12px;
-      .dja();
-      font-size: var(--font-size-base);
-      font-weight: bold;
-      height: 40px;
-      border: 1px solid var(--td-search-brand-color-1);
-      border-left: none;
-      border-right: none;
-      color: var(--td-search-btn-back-1);
-    }
     .field-header {
       padding: 4px 12px;
       font-size: var(--font-size-l);

views/token/TimeTab.vue

 <template>
   <div class="token-time-range">
-    <t-radio-group v-model="current" variant="primary-filled">
-      <t-radio-button v-for="tab of tabOptions" :value="tab.value" :key="tab">
-        {{ tab.label }}
-      </t-radio-button>
-    </t-radio-group>
+    <div class="right-range-box">
+      <t-button
+        v-for="item in tabOptions"
+        :key="item.value"
+        class="right-range-btn"
+        :class="{ active: item.value == current }"
+        @click="btnChange(item.value)"
+      >
+        {{ item.label }}
+      </t-button>
+    </div>
     <div class="time-range-data">
       <div class="item">
         <div class="label">{{ $t('home.newHolder') }}</div>
@@ -43,6 +49,7 @@ const props = defineProps({
 });
 // 当前链
 const chain = useChain();
+const current = ref('5m');
 const tabOptions = computed(() => {
   return [
     {
@@ -63,7 +70,9 @@ const tabOptions = computed(() => {
     },
   ];
 });
-
+const btnChange = (value: string) => {
+  current.value = value;
+};
 // token变化清空timeTab的数据
 watch(
   () => props.token,
@@ -82,7 +91,6 @@ const timeMap: any = reactive({
   '4h': {},
   '24h': {},
 });
-const current = ref('5m');
 watch(current, (v) => {
   if (timeMap[v].newHolders === undefined) {
     getTimeList('');
@@ -119,50 +127,47 @@ const getTimeList = async (PoolAddress) => {
 </script>
 <style lang="less">
 @import '@/style/flex.less';
+@import '@/style/variables.less';
 .token-time-range {
   margin-top: 8px;
-  border: 1px solid var(--td-Search-info-border-bottom-2);
   border-radius: 3px;
   border-left: none;
-  .t-radio-group {
-    width: 100%;
-    margin: 0;
-    .t-radio-button {
-      width: 100%;
-      height: 100% !important;
-      .dja();
-      border: 1px solid var(--td-Search-info-border-bottom-2);
-      border-right: none;
-      background: var(--td--right-back-color-2) !important;
-
-      &::before {
-        height: 0;
-      }
-      .t-radio-button__label {
-        width: 25%;
-        font-weight: bold;
-        .dj();
-      }
+  background: var(--td--right-back-color-2);
+  .right-range-box {
+    display: flex;
+    // border: 1px solid var(--td-Search-info-border-bottom-2);
+    .right-range-btn {
+      width: 25%;
+      height: 35px;
+      color: var(--new-color-3);
+      border: var(--new-border-2);
+      background: var(--td--right-back-color-2);
+      border-radius: 0;
+      margin: 0;
     }
-    .t-is-checked {
-      background: var(--td--main-btn-color-1) !important;
-      border: 1px solid var(--td--main-btn-color-1);
+    .active {
+      background: #287eff;
+      color: white;
     }
-    :nth-child(4) {
-      border-right: 1px solid var(--td-Search-info-border-bottom-2);
+    & > :first-child {
+      border-top-left-radius: @border-radius;
     }
-    .t-radio-group__bg-block {
-      background: var(--td--main-btn-color-1);
+    & > :last-child {
+      border-top-right-radius: @border-radius;
+    }
+    & > :not(:first-child) {
+      border-left: none;
     }
-  }
-  .t-radio-group--filled {
-    background: var(--td--right-back-color-2) !important;
   }
   .time-range-data {
-    margin-top: 12px;
     padding: 2px 6px;
     .dj(space-between);
+    border: var(--new-border-2);
+    border-top: none;
+    border-bottom-left-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
     .label {
+      padding-top: 12px;
       color: var(--td-text-color-secondary);
       font-size: 12px;
       margin-bottom: 6px;

views/token/TokenFilter.vue

-<!--
- * @Author: walker.liu
- * @Date: 2022-03-02 14:48:36
- * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
--->
 <template>
   <div class="filter-block-wrapper">
     <div class="custom-form">
       <div class="select-box-chain">
-        <ClientOnly>
-          <t-select
-            v-model="chain"
-            @change="selectChange"
-            :popup-props="{ overlayClassName: 'select_chain_box' }"
-          >
-            <template #prefixIcon>
-              <img :src="chain_options[ChainImgIndex].img" alt="" />
-            </template>
-            <t-option
-              v-for="item in chain_options"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            >
-              <div class="item-box">
-                <div class="img-box">
-                  <img :src="item.img" alt="" />
-                </div>
-                <div>{{ item.label }}</div>
-              </div>
-            </t-option>
-          </t-select>
-        </ClientOnly>
-        <t-radio-group
-          v-model="formData.isNewchain"
-          class="custom-group3"
-          :options="chooseChainBtns"
-        >
-          <t-radio-button
-            v-for="item of chooseChainBtns"
-            :key="item.value"
-            :value="item.value"
-            >{{ item.label }}</t-radio-button
-          >
-        </t-radio-group>
+        <ChoseChain></ChoseChain>
         <ClientOnly>
           <div class="Advanced-Features">
             <t-button class="Smart-btn" @click="openSmart">
@@ -150,6 +110,7 @@
             ></t-switch>
             <ClientOnly
               ><t-select
+                class="custom-select-home-range"
                 v-model="formData.priceRangeTime"
                 :popup-props="{ overlayClassName: 'select_home_range_box' }"
               >
@@ -251,7 +212,6 @@ import {
   NEW_HOLDER_OPTIONS,
   VOLUME_OPTIONS,
   TXNS_OPTIONS,
-  chooseChainBtns,
   Time_price_range_options,
 } from '@/constants/token';
 import {
@@ -266,6 +226,7 @@ import QuestionSvg from '/public/images/svg/filter/Question.svg';
 import { MessagePlugin } from 'tdesign-vue-next';
 import SmartAlerts from './SmartAlerts.vue';
 import { useI18n } from 'vue-i18n';
+import ChoseChain from './choseChain';
 const { t } = useI18n();
 // 当前链
 const chain = useChain();
@@ -287,13 +248,10 @@ const formData = reactive({
 });
 // 当前链整个对象数据
 const ChainObj = ref();
-const ChainImgIndex = ref(0);
-
 if (route.params.chain) {
   let Obj = filterChainObj('name', route.params.chain, true);
   if (Obj) {
     ChainObj.value = Obj;
-    ChainImgIndex.value = Obj.index;
     chain.value = Obj.value;
   }
 } else {
@@ -302,17 +260,6 @@ if (route.params.chain) {
 
 // 弹出框状态
 const visible = ref(false);
-
-const selectChange = (v: string) => {
-  ChainObj.value = filterChainObj('value', v, true);
-  // 当前链保存到本地
-  window.localStorage.setItem('chain', v);
-  chain.value = ChainObj.value.value;
-  // 跳转路由
-  router.push({
-    path: `/${ChainObj.value.name}/1`,
-  });
-};
 // 重置
 const Reset = () => {
   formData.date = '5m';
@@ -353,8 +300,6 @@ watch(
   (v) => {
     if (v) {
       ChainObj.value = filterChainObj('value', v, true);
-      // 修改图片信息
-      ChainImgIndex.value = ChainObj.value.index;
       PoolSize.value = SwitchCurrency(v);
     }
   }
@@ -463,6 +408,7 @@ watch(formData, (v) => {
   .t-select__list {
     .t-select-option {
       .dja();
+      font-size: 12px;
     }
   }
 }
@@ -521,8 +467,7 @@ watch(formData, (v) => {
         margin-left: 12px;
         width: 110px;
       }
-      .custom-group2,
-      .custom-group3 {
+      .custom-group2 {
         .t-radio-button {
           border: none;
           margin: 0 4px;
@@ -547,17 +492,6 @@ watch(formData, (v) => {
           margin-left: 72px;
         }
       }
-      .custom-group3 {
-        .t-radio-button {
-          width: 120px;
-        }
-        label:nth-child(1) {
-          margin-left: 12px;
-        }
-        label:nth-child(2) {
-          margin-left: 74px;
-        }
-      }
       .Advanced-Features {
         position: absolute;
         right: 12px;
@@ -611,9 +545,10 @@ watch(formData, (v) => {
         border-radius: 0 0 @border-radius @border-radius;
       }
       .title {
-        width: 130px;
+        width: 110px;
         font-size: 12px;
         padding-left: 8px;
+        white-space: nowrap;
         .da();
         & > :nth-child(1) {
           padding-right: 12px;
@@ -625,7 +560,6 @@ watch(formData, (v) => {
         .t-radio-group {
           .t-radio-button {
             border: none;
-            margin: 0 12px;
             border-radius: 16px;
             font-size: 12px;
             width: 90px;
@@ -636,7 +570,7 @@ watch(formData, (v) => {
             width: 63px;
           }
           .custom-value-type-1:nth-child(2) {
-            margin-left: 82px;
+            margin-left: 74px;
           }
           .custom-button:nth-child(1) {
             width: 63px;
@@ -647,7 +581,7 @@ watch(formData, (v) => {
             color: white;
           }
           .t-select__wrap {
-            width: 70px;
+            width: 60px;
             height: 28px;
             margin-left: 12px;
             .t-input__wrap {
@@ -660,16 +594,20 @@ watch(formData, (v) => {
               text-align: center;
             }
           }
+          .custom-select-home-range {
+            .t-input__inner {
+              font-size: 12px;
+            }
+          }
         }
         .custom-group-type-1 {
-          margin-left: 6px;
+          margin-left: -2px;
         }
         .custom-group-type-2 {
-          margin-left: 82px;
+          margin-left: 72px;
         }
         .custom-group-type-3 {
           .pre-switch2 {
-            margin-left: 18px;
             background-color: var(--td--main-btn-color-1);
             width: 63px;
             .t-switch__content {
@@ -682,7 +620,6 @@ watch(formData, (v) => {
         }
         .pre-switch {
           width: 63px;
-          margin-left: 18px;
           background-color: var(--td--main-btn-color-1);
         }
         .t-radio-group__outline {

views/token/TokenInfo.vue

@@ -73,7 +73,7 @@ watch(
   }
 );
 </script>
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/flex.less';
 .token-info-wrapper {
   margin-top: 12px;
@@ -96,6 +96,8 @@ watch(
         width: 50%;
         color: var(--td-Search-info-color-1);
         font-family: fiveFont;
+        text-align: right;
+        padding-right: 12px;
       }
     }
   }

views/token/TokenList.vue

@@ -68,11 +68,14 @@ 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 SortSvg from '/public/images/svg/table/sort.svg';
+import UpSvg from '/public/images/svg/table/up.svg';
+import DownSvg from '/public/images/svg/table/down.svg';
 import { webLogo } from '@/constants/logo';
 import FilterBtns from './FilterBtn';
 const route = useRoute();
 // 当前链
 const chain = useChain();
+const loading = ref(false);
 // 筛选条件
 const GlbFilter = useCurFilter();
 //
@@ -107,7 +110,6 @@ if (route.params.page) {
     pageNum.value = parseInt(route.params.page);
   GlbFilter.value.page = parseInt(route.params.page);
 }
-const loading = ref(false);
 
 // 预渲染的数据
 const PreRenderList = UsePreRenderList();
@@ -124,17 +126,19 @@ const getTableList = () => {
         params: GlbFilter.value,
       })
       .then((result: any) => {
-        TableFilter(result);
-        loading.value = false;
-        if (process.client) {
-          closeInterVal();
-          // 开启定时器
-          Intervalfun();
+        if (result.list.length) {
+          TableFilter(result);
+          loading.value = false;
+          if (process.client) {
+            closeInterVal();
+            // 开启定时器
+            Intervalfun();
+          }
+          // 通知右侧请求接口
+          RightInfo.value.token = result.list[0].token;
+          RightInfo.value.tb = result.list[0].tbname;
+          RightInfo.value.r24h = result.list[0].r24h;
         }
-        // 通知右侧请求接口
-        RightInfo.value.token = result.list[0].token;
-        RightInfo.value.tb = result.list[0].tbname;
-        RightInfo.value.r24h = result.list[0].r24h.toString();
       });
   } catch (e) {
     loading.value = false;
@@ -150,11 +154,9 @@ watch(
     getTableList();
   }
 );
-// 当前选中的行数
-const CurLineIndex = ref(0);
 // 表格数据过滤方法
 const TableFilter = (result: any) => {
-  if (result.length !== 0) {
+  if ('list' in result) {
     result.list.forEach((item, index) => {
       item.index = index + 1;
       item.up = '$' + parseCoinAmount(item.up);
@@ -176,6 +178,31 @@ const TableFilter = (result: any) => {
     resultData.list = [];
   }
 };
+
+// 预取数据
+// const { refresh } = await useLazyFetch(
+//   () => `http://156.247.9.93:9501/v1${chain.value}/index`,
+//   {
+//     params: GlbFilter.value,
+//     onResponse({ request, response, options }) {
+//       try {
+//         loading.value = false;
+//         if (response._data.data) {
+//           TableFilter(toRaw(response._data.data));
+//         }
+//       } catch (e) {
+//         resultData.list = [];
+//         console.log(e);
+//       }
+//       return response._data;
+//     },
+//     onRequestError({ error }) {
+//       console.log(error);
+//     },
+//   }
+// );
+// 当前选中的行数
+const CurLineIndex = ref(0);
 function next() {
   loading.value = true;
   refresh();
@@ -297,12 +324,17 @@ const riseFailLabel = (h, { col, row }) => {
     prefix = '';
   }
   return (
-    <span class={className}>
+    <span class={[className, 'custom-r-time-td']}>
+      {className == 'up' ? <UpSvg></UpSvg> : ''}
+      {className == 'down' ? <DownSvg></DownSvg> : ''}
       {prefix}
       {parsePercent(row[col.colKey])}
     </span>
   );
 };
+const riseFailLabel2 = (h, { col, row }) => {
+  return <span class="custom-Indicators-td">{row[col.colKey]}</span>;
+};
 const columns = computed(() => {
   return [
     {
@@ -330,18 +362,21 @@ const columns = computed(() => {
           colKey: 'up',
           title: t('TableList.price'),
           align: 'center',
+          cell: riseFailLabel2,
         },
         {
           colKey: 'pb',
           title: 'Pool',
           sortType: 'all',
           align: 'center',
+          cell: riseFailLabel2,
           sorter: (a, b) => parseFloat(a.oldPb) - parseFloat(b.oldPb),
         },
         {
           colKey: 'vn',
           title: t('TableList.volume'),
           sortType: 'all',
+          cell: riseFailLabel2,
           sorter: (a, b) => parseFloat(a.oldVn) - parseFloat(b.oldVn),
           align: 'center',
         },
@@ -349,6 +384,7 @@ const columns = computed(() => {
           colKey: 'txn',
           title: t('TableList.txns'),
           sortType: 'all',
+          cell: riseFailLabel2,
           sorter: (a, b) => a.txn - b.txn,
           align: 'center',
         },
@@ -468,9 +504,9 @@ const columns = computed(() => {
         }
         & > :nth-child(2) {
           th {
-            font-size: var(--font-size-s);
+            font-size: 14px;
             font-family: fiveFont;
-            border-bottom: 1px solid rgb(224, 227, 234);
+            border-bottom: 1px solid var(--new-border-4);
           }
           & > * {
             position: relative !important;
@@ -480,7 +516,7 @@ const columns = computed(() => {
               width: 200%;
               height: 200%;
               position: absolute;
-              border: 1px solid var(--new-border-1);
+              border: var(--new-border-2);
               top: 0;
               left: 0;
               transform-origin: 0 0;
@@ -564,18 +600,19 @@ const columns = computed(() => {
       .down {
         color: #f85260;
       }
-    }
-    .temp-name {
-      width: 20px;
-      height: 20px;
-      background: var(--td--table-icon-color-1);
-      margin-left: -12px;
-      -webkit-clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
-      clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
+      .custom-r-time-td {
+        font-weight: 600;
+        font-size: 13px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .custom-Indicators-td {
+        font-size: 14px;
+      }
     }
     .page-footer {
       padding: 0 24px;
-      border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
     }
   }
 }

views/token/TokenPool.vue

@@ -106,7 +106,7 @@ const isLoading = ref(false);
 const getPoolToken = async () => {
   isLoading.value = true;
   const res: any = await request.get(
-    `/v1/${
+    `/v1${
       route.name !== 'tokenIndex' ? props.currentPath : chain.value
     }/getRightPondInfo`,
     {
@@ -177,7 +177,7 @@ const switchPool = (item, index) => {
   // goDetailK(params);
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/variables.less';
 @import '@/style/flex.less';
 .token-pool-wrapper {

views/token/TokenSocialList.vue

@@ -180,10 +180,10 @@ const changeLink = (chain: string) => {
   height: 40px;
   border: 1px solid var(--td-component-border);
   border-top: none;
-  border-left: none;
   .dja(space-between,center);
   padding: 4px 12px;
   box-sizing: border-box;
+  background-color: var(--td-bg-color-container);
   .social-item {
     width: 22px;
     height: 22px;

views/token/choseChain/index.less

+@import '@/style/variables.less';
+@import '@/style/flex.less';
+.custom-chose-chain-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 34px;
+  border: var(--new-border-2);
+  border-radius: @border-radius;
+  padding: 0 10px;
+  cursor: pointer;
+  .left-icon {
+    height: 70%;
+  }
+  .current-chain-text {
+    font-weight: 700;
+    font-size: 13px;
+    user-select: none;
+  }
+  .right-icon {
+    .select-icon {
+      stroke: #838383;
+      color: #838383;
+    }
+    .active {
+      stroke: var(--td--main-btn-color-1);
+      color: var(--td--main-btn-color-1);
+    }
+    @keyframes customAnimation1 {
+      0% {
+        transform: rotateX(180deg);
+      }
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+    @keyframes customAnimation2 {
+      0% {
+        transform: rotateX(180deg);
+      }
+      100% {
+        transform: rotateX(0deg);
+      }
+    }
+    // 旋转样式
+    .t-fake-arrow--active {
+      animation: customAnimation1 400ms;
+      //   animation-fill-mode: forwards;
+    }
+    //  恢复
+    .t-fake-arrow--leave {
+      animation: customAnimation2 400ms;
+      //   animation-fill-mode: forwards;
+    }
+  }
+  & > * {
+    padding: 0 4px;
+  }
+}
+.custom-chose-chain-content {
+  width: 380px;
+  padding: 12px;
+  .search-box {
+    .t-input {
+      background: #f9fafb;
+      border: 1px solid #f0f1f5;
+      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+      border-radius: 10px;
+    }
+  }
+  .chain-box-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 12px;
+    max-height: 500px;
+    overflow-y: auto;
+    &::after {
+      content: '';
+      display: block;
+      flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
+      margin: 10px;
+    }
+    .chain-box {
+      box-sizing: border-box;
+      width: 27%;
+      height: 80px;
+      margin: 10px;
+      background: var(--new-background-4);
+      border: 1px solid var(--new-border-6);
+      border-radius: 14px;
+      .dja(space-evenly,center);
+      flex-direction: column;
+      font-weight: 700;
+      color: var(--home-page-color-1);
+      cursor: pointer;
+      font-size: 13px;
+    }
+  }
+}

views/token/choseChain/index.tsx

+import { defineComponent, ref } from 'vue';
+import {
+  chain_options,
+  filterChainObj,
+} from '@/constants/UnifiedManagementChain';
+import SelectSvg from '/public/images/svg/filter/select.svg';
+import ChainSearch from '/public/images/svg/filter/chainSearch.svg';
+import { ChevronDownIcon } from 'tdesign-icons-vue-next';
+import './index.less';
+import { useI18n } from 'vue-i18n';
+export default defineComponent({
+  setup(props) {
+    const { t } = useI18n();
+    const route = useRoute();
+    const router = useRouter();
+    const ChainImgIndex = ref(0);
+    const ChainObj = ref<any>({});
+    const chain = useChain();
+    const chainName = ref('');
+    // 弹窗是否打开
+    const DialogVisible = ref<boolean>(false);
+    let Scopedchain = '';
+    if (typeof route.params.chain == 'string') {
+      Scopedchain = route.params.chain;
+    }
+    if (route.params.chain) {
+      let Obj = filterChainObj('name', Scopedchain, true);
+      if (Obj) {
+        ChainObj.value = Obj;
+        chainName.value = ChainObj.value.name;
+        ChainImgIndex.value = Obj.index;
+        chain.value = Obj.value;
+      }
+    } else {
+      ChainObj.value = filterChainObj('value', chain.value, true);
+    }
+    const ChangeDialog = () => {
+      //   DialogVisible.value = !DialogVisible.value;
+    };
+    const onVisibleChange = (visible: any, e: any) => {
+      DialogVisible.value = visible;
+    };
+    // 关闭弹窗
+    const ClosePopup = () => {
+      DialogVisible.value = false;
+    };
+    // 切换事件
+    const selectChange = (v: string) => {
+      ChainObj.value = filterChainObj('value', v, true);
+      // 当前链保存到本地
+      window.localStorage.setItem('chain', v);
+      chain.value = ChainObj.value.value;
+      chainName.value = ChainObj.value.name;
+      ChainImgIndex.value = ChainObj.value.index;
+      // 跳转路由
+      router.push({
+        path: `/${ChainObj.value.name}/1`,
+      });
+      ClosePopup();
+    };
+    // 弹窗内容
+    const popupContent = () => {
+      return (
+        <div class="custom-chose-chain-content">
+          <div class="search-box">
+            <t-input
+              placeholder={t('Search.search')}
+              prefixIcon={() => <ChainSearch></ChainSearch>}
+            ></t-input>
+          </div>
+          <div class="chain-box-body narrow-scrollbar">
+            {chain_options.map((item: any) => (
+              <div
+                class="chain-box"
+                onClick={selectChange.bind(this, item.value)}
+              >
+                <img src={item.img} alt="" />
+                <span>{item.fullName}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    };
+    return () => (
+      <t-popup
+        placement="bottom-left"
+        trigger="click"
+        v-model:visible={DialogVisible.value}
+        content={popupContent}
+        onVisibleChange={onVisibleChange}
+      >
+        <div class="custom-chose-chain-box" onClick={ChangeDialog}>
+          <img
+            src={chain_options[ChainImgIndex.value].img}
+            alt=""
+            class="left-icon"
+          />
+          <span class="current-chain-text">{chainName.value}</span>
+          <span class="right-icon">
+            <ChevronDownIcon
+              class={[
+                'select-icon',
+                DialogVisible.value ? 'active' : '',
+                DialogVisible.value
+                  ? 't-fake-arrow--active'
+                  : 't-fake-arrow--leave',
+              ]}
+            ></ChevronDownIcon>
+          </span>
+        </div>
+      </t-popup>
+    );
+  },
+});

views/token/index.vue

@@ -29,6 +29,11 @@
         <FixedJoinUs></FixedJoinUs>
         <Announcement></Announcement>
       </ClientOnly>
+      <Animation
+        v-if="pageLoading2"
+        position="fixed"
+        background="red"
+      ></Animation>
     </template>
   </MyLayout>
 </template>
@@ -38,10 +43,13 @@ 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 chain = useChain();
 const currentPath = ref('');
+const pageLoading2 = ref(false);
 // div是否隐藏
 const pageloading = ref(true);
 const getUa = () => {
@@ -58,6 +66,7 @@ onBeforeMount(() => {
 });
 onMounted(() => {
   pageloading.value = false;
+  currentPath.value = chain.value;
 });
 const RightInfo = useCurrentRightInfo();
 watch(RightInfo.value, (v) => {
@@ -68,6 +77,13 @@ watch(RightInfo.value, (v) => {
 const changeChain = (chain) => {
   currentPath.value = chain;
 };
+// 监听路由变化
+watch(
+  () => route.href,
+  (v) => {
+    pageLoading2.value = true;
+  }
+);
 </script>
 
 <style lang="less">

views/token/rightDetailHeader/index.less

+@import '@/style/flex.less';
+.header-token-box {
+  margin-top: -1px;
+  .header-token-info {
+    border: 1px solid var(--td-component-border);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding: 8px 12px;
+    background-color: var(--td-bg-color-container);
+    .filled-star-box {
+      .dja(flex-end);
+      .filled-star {
+        color: var(--td-brand-color);
+        cursor: pointer;
+      }
+      .filled-star-on {
+        cursor: pointer;
+      }
+    }
+    .pro-tokeninfo-header {
+      display: flex;
+      box-sizing: border-box;
+      .left-token-name {
+        width: 70%;
+        height: 100%;
+        .token-name-child {
+          .da();
+          max-width: 176px;
+          font-size: var(--font-size-xxl);
+          color: var(--td-right-detail-font-color-1);
+          line-height: 47px;
+          .title {
+            font-weight: bold;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          img {
+            width: 38px;
+            height: 38px;
+          }
+
+          :not(:first-child) {
+            margin-left: 10px;
+          }
+        }
+        .address-info {
+          display: flex;
+          color: var(--new-color-3);
+          .address-info-item {
+            font-size: var(--font-size);
+            .address {
+              margin-right: 4px;
+            }
+          }
+        }
+        :hover.address-info {
+          cursor: pointer;
+        }
+      }
+    }
+    .token-price-cl {
+      .da();
+      .left-info {
+        width: 70%;
+        font-size: 16px;
+        color: var(--td-text-color-secondary);
+        display: flex;
+        white-space: nowrap;
+        .price {
+          color: var(--new-color-4);
+          font-size: 16px;
+          font-weight: bold;
+          .price-box {
+            .da();
+            height: 50px;
+            margin-top: -24px;
+            font-weight: 700;
+            font-size: 28px;
+          }
+          .r24h-cl {
+            font-size: var(--font-size-s);
+            font-weight: normal;
+          }
+        }
+        .kline-btn {
+          margin-left: 16px;
+          width: 24px;
+          height: 24px;
+          .t-icon {
+            font-size: 24px;
+            color: #fff;
+          }
+        }
+      }
+      .t-avatar {
+        margin-left: auto;
+      }
+    }
+  }
+}

views/token/rightDetailHeader/index.tsx

+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { StarFilledIcon } from 'tdesign-icons-vue-next';
+import CopySvg from '/public/images/svg/rightDetail/copy.svg';
+import useCopy from '@/hooks/useCopy';
+import { parseCoinAmount } from '@/utils/tool';
+import * as Cache from '@/utils/cache';
+import './index.less';
+import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
+import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
+export default defineComponent({
+  props: {
+    tokenInfo: Object as any,
+    numR24h: String,
+    r24h: String,
+    isInCollection: Boolean,
+    tb: String,
+    currentPath: String,
+  },
+  emits: ['update:isInCollection'],
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const { doCopy } = useCopy();
+    const collectData = () => {
+      const { tokenInfo, isInCollection, tb, currentPath } = props;
+      if (isInCollection) {
+        Cache.deleteCollection(tb);
+        emit('update:isInCollection', false);
+      } else {
+        Cache.setCollection({
+          hash: tb,
+          symbol: tokenInfo.symbol,
+          path: currentPath,
+        });
+        emit('update:isInCollection', true);
+      }
+      // // 通知select中的收藏数据更新
+      // CollectionCl.value.value += 1;
+    };
+    const r24hColor = () => {
+      if (props.r24h) {
+        if (props.r24h[0] === '-') {
+          return '#f85260';
+        } else {
+          return '#23ab94';
+        }
+      }
+    };
+    const getPrice = () => {
+      const { tokenInfo } = props;
+      if ('up' in tokenInfo) {
+        let up = parseCoinAmount(tokenInfo.up);
+        if (up.indexOf('{') !== -1) {
+          up = up.slice(0, up.length - 2);
+        }
+        return up;
+      } else {
+        return '';
+      }
+    };
+    return () => (
+      <div class="header-token-box">
+        <div class="header-token-info">
+          <div class="filled-star-box">
+            <span>
+              {props.isInCollection ? (
+                <CollectionSvg3 class="filled-star" onClick={collectData} />
+              ) : (
+                <CollectionSvg2
+                  onClick={collectData}
+                  class="filled-star-on"
+                ></CollectionSvg2>
+              )}
+            </span>
+          </div>
+          <div class="pro-tokeninfo-header">
+            <div class="left-token-name">
+              <div class="token-name-child">
+                <img src="/images/img/default-avatar.png" alt="swap" />
+                <span class="title">{props.tokenInfo.symbol}</span>
+              </div>
+              <div class="address-info">
+                <span class="address-info-item">
+                  <span>{t('TableList.token')}</span>
+                  <span class="address">：{props.tokenInfo.tokenSub}</span>
+                  <span onClick={doCopy.bind(this, props.tokenInfo.token)}>
+                    <CopySvg></CopySvg>
+                  </span>
+                </span>
+              </div>
+              <div class="address-info">
+                <span class="address-info-item">
+                  <span>{t('TableList.pool')}</span>
+                  <span class="address">：{props.tokenInfo.tbnameSub}</span>
+                  <span onClick={doCopy.bind(this, props.tokenInfo.n_tb)}>
+                    <CopySvg></CopySvg>
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div class="token-price-cl">
+              <div class="left-info">
+                <div class="price">
+                  <div
+                    class="price-box"
+                    style={{
+                      color: r24hColor(),
+                    }}
+                  >
+                    {/* <span>{getPrice()}</span> */}
+                    {getPrice()}
+                  </div>
+                  <div
+                    class="r24h-cl"
+                    style={{
+                      color: r24hColor(),
+                    }}
+                  >
+                    {props.numR24h}
+                    {`(${props.r24h})`}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});