1

app.vue

@@ -4,5 +4,5 @@
 
 <style>
 @import '@/style/reset.css';
-@import '@/style/index.css';
+@import 'tdesign-vue-next/es/style/index.css';
 </style>

components/SwitchLanguage.vue

@@ -58,6 +58,7 @@ const changeLanguage = (v: string) => {
   :deep(.t-input__inner) {
     font-weight: 700;
     font-size: 15px;
+    font-family: 'bold';
   }
 }
 </style>

nuxt.config.ts

@@ -75,5 +75,5 @@ export default defineNuxtConfig({
         : ['echarts'],
     // cssSourceMap: true,
   },
-  css: [],
+  css: ['@/style/font-family.css'],
 });

package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "axios": "^0.24.0",
     "cross-env": "^7.0.3",
+    "fontmin": "^0.9.9",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "nuxt": "^3.1.1",

style/default.css

@@ -84,6 +84,8 @@
   --new-background-2: #eff2f5;
   --new-background-3: #f1f6fe;
   --new-background-4: #f9fafb;
+  --new-background-5: white;
+  --new-background-6: #f4f5f7;
 
   --new-border-1: #dcdcdc;
   --new-border-2: 1px solid #e0e3ea;
@@ -92,6 +94,8 @@
   --new-border-5: #287eff;
   --new-border-6: #f0f1f5;
   --new-border-7: #f5f8fc;
+  --new-border-8: #e0e3ea;
+  --new-border-9: #e0e3ea;
 
   --new-color-1: #6d6d6d;
   --new-color-2: #287eff;
@@ -132,7 +136,7 @@
   --td-Search-info-color-2: #ffffff;
   --td-search-box-border: var(--theme2);
   --td-search-btns-textColor: var(--theme2);
-  --td--right-back-color-2: var(--theme13);
+  --td--right-back-color-2: #142028;
   --td-right-detail-font-color-1: var(--theme3);
   /* 下划线颜色 */
   --td-Search-info-border-bottom-2: rgba(255, 255, 255, 0.4);
@@ -147,14 +151,20 @@
   --new-background-2: #1a1a1a;
   --new-background-3: #002d72;
   --new-background-4: #151515;
+  --new-background-5: #0b1217;
+  --new-background-6: #0b1217;
 
   --new-border-1: none;
+  /* 有颜色的 */
   --new-border-2: 1px solid #0b1217;
+  /* 没颜色的 */
+  --new-border-8: none;
   --new-border-3: rgb(20, 32, 40);
   --new-border-4: none;
   --new-border-5: #428dff;
   --new-border-6: #151515;
   --new-border-7: #0b1217;
+  --new-border-9: #0b1217;
 
   --new-color-1: #a9a9a9;
   --new-color-2: #28b2ff;
@@ -166,3 +176,9 @@
   background-color: var(--td--main-btn-color-1) !important;
   border: var(--td--main-btn-color-1) !important;
 }
+
+/* border-top: var(--new-border-2);
+border-bottom: var(--new-border-2);
+border-left: 1px solid var(--new-border-8);
+border-right: 1px solid var(--new-border-8); */
+/* background-color: var(--td--right-back-color-2); */

style/font-family.css

+@font-face {
+  font-family: 'bold';
+  src: url('./fonts//output/SourceHanSansCN-Bold.ttf');
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Medium';
+  src: url('./fonts/output/SourceHanSansCN-Medium.ttf');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Regular';
+  src: url('./fonts/output/SourceHanSansCN-Regular.ttf');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Normal';
+  src: url('./fonts/output/SourceHanSansCN-Normal.ttf');
+  font-style: normal;
+}
+
+/* =--------------------------- */
+@font-face {
+  font-family: 'ExtraLight';
+  src: url('./fonts/output/SourceHanSansCN-ExtraLight.ttf');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Heavy';
+  src: url('./fonts/output/SourceHanSansCN-Heavy.ttf');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Light';
+  src: url('./fonts/output/SourceHanSansCN-Light.ttf');
+  font-style: normal;
+}

style/fonts/font.js

+var Fontmin = require('fontmin');
+
+// 公共文本
+const publicText =
+  '#().{}abcdefghrjklmnopqrstuvwxyz:：ABCDEFGHRJKLMNOPQRSTUVWXYZ,0123456789$￥;+-*/%';
+function getBold() {
+  // bold
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Bold.ttf')
+    .use(
+      Fontmin.glyph({
+        text:
+          publicText +
+          `
+        中文简体
+        代币基本信息
+        基本指标
+        价格变化
+        数据详细
+        分钟
+        小时
+        加入我们
+        联系我们
+        连接钱包
+        `,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      console.log(err);
+      throw err;
+    }
+  });
+}
+const getMedium = () => {
+  // Medium
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Medium.ttf')
+    .use(
+      Fontmin.glyph({
+        text:
+          publicText +
+          `
+        当链主流币种
+        交易配对
+        最新上币
+        最大涨幅
+        最大跌幅
+        最大交易量
+        代币名称
+        价格
+        流动池
+        成交金额
+        交易笔数
+        分钟
+        小时
+        k线图
+        数据分析
+        更新社区信息
+        币种简介
+        池子信息
+        貔貅检测
+        是否
+        开关
+        交易历史
+        大单追踪
+        价格警报
+        买入
+        卖出
+        是否
+        Dex连接
+        代币
+        社交和其他链接
+        更新社交信息
+确保您的代币具有最新的所有社交信息，以便获得高热度。
+这不是强制性的，您仍然可以仅依靠 CoinGecko、Etherscan（和区块
+浏览器等）或 CoinMarketCap 更新的信息。
+但请注意，这些平台可能需要一些时间才能真正反映这些变化。
+您还可以添加项目的简短描述，解释代币的主要用途和优势。
+请注意诈骗者，这是在 Dexfilter 中更新代币信息的唯一方法。
+我们的管理员不会先私信，不会私下索要资金，也不会使用不同的方法。
+取消
+前往提交
+24H收藏
+币种
+新持有人/交易笔数
+24H涨幅
+编辑收藏
+置顶
+拖动
+删除
+加入我们
+池子配对
+总流通量
+共条数据
+持有人
+前往数据分析
+买卖次数
+出入金
+TOP100股东资金变动
+流动池
+推特
+推特汇总
+连接小狐狸钱包
+        `,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+const getRegular = () => {
+  // Regular
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Regular.ttf')
+    .use(
+      Fontmin.glyph({
+        text:
+          publicText +
+          `
+          全选
+          完成
+          搜索
+          智能警报
+          重置筛选
+          交易配对
+          最新上币
+          最大涨幅
+          最大跌幅
+          最大交易量
+          详情
+          收藏
+          分析
+          日成交量
+          流动池
+          余额
+          总市值
+          代币供应量
+          最高价
+          低
+          持有人
+          是否貔貅
+          买入Gas费
+          卖出Gas费
+          购买税率
+          卖出税率
+          交易开关
+          lp持有人数
+          能否收回所有权
+          是否开源
+          能否出售所有
+          可修改滑点
+          交易冷却时间
+          可被暂停交易
+          买入税费
+          卖出税费
+          是否反巨鲸
+          是否有黑名单
+          是否代理合约
+          是否白名单
+          查看合同
+          代币交易
+          项目网站
+          电子邮箱  
+          额外信息
+          上面欠缺的链接可以通过此表格并付费提交信息
+          DexFilter是一个链上过滤器，它对链上的所有数据进行统计，可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。
+          总持有人
+          24小时新增
+          24小时清仓
+          24H买入笔数
+          24h卖出笔数
+          总成交额
+          入金数
+          出金数
+          24H入金
+          24H出金
+          当前流动池
+          账号创建日期
+          粉丝人数
+          当前总人数
+          当前在线人数
+        `,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+
+const getNormal = () => {
+  // Normal
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Normal.ttf')
+    .use(
+      Fontmin.glyph({
+        text:
+          publicText +
+          `
+        时间区间
+        流动池大小
+        涨跌幅
+        新增持有人
+        成交量
+        交易笔数
+        交易时间
+        交易类型
+        token交易量
+        交易总金额
+        价格
+        新增持有人
+        前一百持有人
+        卖出比例
+        交易哈希
+        代币名称
+        `,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+
+const getLight = () => {
+  // Light
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Light.ttf')
+    .use(
+      Fontmin.glyph({
+        text:
+          publicText +
+          `
+        新增持有人
+        交易笔数
+        买入
+        卖出
+        成交量
+        `,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+
+//-------------------------------------
+//-------------------------------------
+
+const getExtraLight = () => {
+  // ExtraLight
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-ExtraLight.ttf')
+    .use(
+      Fontmin.glyph({
+        text: publicText + ``,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+const getHeavy = () => {
+  // ExtraLight
+  var fontmin = new Fontmin()
+    .src('./style/fonts/Complete/SourceHanSansCN-Heavy.ttf')
+    .use(
+      Fontmin.glyph({
+        text: publicText + ``,
+        hinting: false,
+      })
+    )
+    .dest('./style/fonts/output/');
+  fontmin.run(function (err, files) {
+    if (err) {
+      throw err;
+    }
+  });
+};
+
+getBold();
+getExtraLight();
+getHeavy();
+getLight();
+getMedium();
+getNormal();
+getRegular();

style/layout.less

@@ -155,6 +155,7 @@
   height: calc(100vh - 70px);
   overflow-y: scroll;
   overflow-x: hidden;
+  background: var(--main-theme-color-2);
 }
 
 .s-layout-footer {

style/variables.less

@@ -2,6 +2,7 @@
 @prefix: tdesign-starter;
 @border-radius: 10px;
 @box-shadow:inset 0px 0px 2px rgba(0, 0, 0, 0.25);
+@width: 1280px;
 /* 6/15开始修改样式 */
 @main-theme-color: var(--main-theme-color);
 // 搜索框边框色

views/analysis/ChartBox.vue

@@ -82,6 +82,7 @@ const goAnalysis = () => {
       border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
       padding-left: 8px;
       .dja(space-between,center);
+      font-family: 'Medium';
       span {
         display: block;
         white-space: nowrap;
@@ -90,6 +91,7 @@ const goAnalysis = () => {
       }
       .go-ana-btn {
         margin-right: 6px;
+        font-family: 'Medium';
       }
     }
     .left {
@@ -109,21 +111,41 @@ const goAnalysis = () => {
         margin-top: 2px;
         height: 70px;
         :deep(.onefield) {
+          .label {
+            font-family: 'Regular';
+          }
           color: rgb(84, 112, 198);
           .value {
             font-weight: bold;
+            font-family: 'Medium';
           }
         }
         :deep(.twofield) {
           color: rgb(145, 204, 117);
+          .label {
+            font-family: 'Regular';
+          }
           .value {
             font-weight: bold;
+            font-family: 'Medium';
           }
         }
         :deep(.threefield) {
+          .label {
+            font-family: 'Regular';
+          }
           color: rgb(250, 200, 88);
           .value {
             font-weight: bold;
+            font-family: 'Medium';
+          }
+        }
+        :deep(.newfield) {
+          .label {
+            font-family: 'Regular';
+          }
+          .value {
+            font-family: 'Medium';
           }
         }
       }
@@ -137,6 +159,7 @@ const goAnalysis = () => {
             font-size: @font-size-s;
             border-radius: 0;
             padding: 2px 8px;
+            font-family: 'Medium';
           }
         }
       }

views/analysis/HolderBox.vue

@@ -26,7 +26,7 @@
         <span class="value">{{ formData.value2 ?? '--' }}</span>
       </div>
       <div class="threefield">
-        <span class="label">{{ $t('analysis.r24hClearance') }}</span>
+        <span class="label">{{ $t('analysis.r24hClearance') }}：</span>
         <span class="value">{{ formData.value3 ?? '--' }}</span>
       </div>
     </template>

views/detail/index.vue

@@ -242,6 +242,7 @@ const getPoll = (PoolValue) => {
   height: calc(100vh - 70px);
   overflow: hidden;
   display: flex;
+  background: var(--main-theme-color-2);
   .left-wrapper {
     width: calc(100vw - 380px);
     height: 100%;
@@ -305,7 +306,9 @@ const getPoll = (PoolValue) => {
     flex: 1;
     position: sticky;
     top: 0;
-    border-left: 1px solid var(--td-component-border);
+    .right-detail-wrapper {
+      margin-right: 0;
+    }
   }
 }
 </style>

views/layout/Footer.vue

@@ -64,6 +64,7 @@ import tgSvg from '/public/images/svg/footer/tg.svg';
       }
       span {
         display: inline-block;
+        font-family: 'Regular';
       }
     }
   }
@@ -75,6 +76,7 @@ import tgSvg from '/public/images/svg/footer/tg.svg';
       font-weight: bold;
       color: black;
       font-size: @font-size-xl;
+      font-family: 'bold';
     }
     .icons-box {
       height: calc(100% - 100px);
@@ -101,8 +103,10 @@ import tgSvg from '/public/images/svg/footer/tg.svg';
         font-weight: bold;
         color: black;
         font-size: @font-size-xl;
+        font-family: 'bold';
       }
       .right-email-tg {
+        font-family: 'Regular';
         display: flex;
         align-items: center;
         cursor: pointer;

views/layout/Foxwallet.vue

@@ -107,12 +107,14 @@ const getConnectFox = async () => {
     padding: 0 0 6px 6px;
     font-weight: bold;
     user-select: none;
+    font-family: 'bold';
   }
   .wallet-Connect {
     .t-button {
       width: 100%;
       background-color: var(--td--main-btn-color-1);
       border: none;
+      font-family: 'Medium';
       .icon {
         padding-right: 8px;
       }
@@ -133,8 +135,10 @@ const getConnectFox = async () => {
     border-radius: 4px;
     line-height: 34px;
     text-align: center;
-    font-weight: bold;
+    font-weight: 700;
+    font-size: 15px;
     color: var(--td--main-btn-color-1);
+    font-family: 'bold';
   }
 }
 </style>

views/layout/Header.vue

@@ -43,6 +43,10 @@ const route = useRoute();
 .s-header {
   height: 100%;
   border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
+  background: var(--td--right-back-color-2);
+  .t-menu {
+    background: var(--td--right-back-color-2);
+  }
   .home-logo {
     width: 190px;
     height: 70px;
@@ -54,6 +58,7 @@ const route = useRoute();
     text-decoration: none;
     span {
       padding-left: 10px;
+      font-family: 'Medium';
     }
   }
   :hover .home-logo {

views/layout/Search.vue

@@ -238,7 +238,7 @@ const darg = () => {
       let cliheight = dom.clientHeight;
       if (
         domHeight - cliheight - domTop <= 20 &&
-        resultList.value.length > 19
+        resultList.value.length >= 19
       ) {
         // 滚动到底部
         if (hasMorePages.value) {
@@ -246,6 +246,7 @@ const darg = () => {
           if (loadingMore.value) {
             return;
           }
+          console.log('ddd');
           loadingMore.value = true;
           getTokenList();
         }
@@ -379,6 +380,7 @@ const goDetail = (row) => {
     margin: 0 1rem 0 0.6rem;
     color: var(--td-Search-info-color-2);
     font-size: @font-size-s;
+    font-family: 'Regular';
   }
   .input2-icon {
     margin-left: 7px;
@@ -486,18 +488,18 @@ const goDetail = (row) => {
                 position: relative;
                 :nth-child(1) {
                   color: @td-search-btn-back-1;
+                  font-family: 'Regular';
                 }
                 :nth-child(2) {
-                  font-weight: bold;
                   overflow: hidden;
                   text-overflow: ellipsis;
                 }
                 :nth-child(3) {
-                  font-weight: bold;
                   color: @td-search-btn-back-1;
                 }
-                :nth-child(4) {
+                & > :not(:first-child) {
                   font-weight: bold;
+                  font-family: 'Medium';
                 }
                 .collection-box {
                   position: absolute;
@@ -519,9 +521,11 @@ const goDetail = (row) => {
                 .token {
                   :nth-child(1) {
                     color: @td-search-btn-back-1;
+                    font-family: 'Regular';
                   }
                   :nth-child(2) {
                     font-weight: bold;
+                    font-family: 'Medium';
                   }
                 }
                 .not_first {

views/layout/rollToken.vue

@@ -165,14 +165,17 @@ const leaveAn = () => {
           .span-1 {
             padding-left: 6px;
             font-weight: 500;
+            font-family: 'Medium';
           }
         }
         .right-info {
           .da();
           .span-2 {
             font-weight: 600;
+            font-family: 'Regular';
           }
           .span-3 {
+            font-family: 'Medium';
             color: #9b96b6;
           }
         }

views/token/CustPagination.vue

@@ -174,6 +174,7 @@ const updatePage = (value: number) => {
   .left-total {
     padding-left: 12px;
     font-size: 14px;
+    font-family: 'Medium';
   }
   .right-page {
     padding-right: 12px;

views/token/FilterBtn/index.less

@@ -13,6 +13,7 @@
     color: var(--new-color-1);
     --ripple-color: none !important;
     transition: all 0.3s;
+    font-family: 'Regular';
     &:hover {
       background: var(--new-background-2);
     }
@@ -22,6 +23,7 @@
     color: var(--new-color-2);
     font-weight: 500;
     transition: all 0.3s;
+    font-family: 'Medium';
     &:hover {
       background: var(--new-background-3);
     }

views/token/HistoryList.vue

@@ -697,6 +697,7 @@ const columns = computed(() => [
   width: 100%;
   height: 100%;
   overflow-y: scroll;
+  background-color: var(--td--right-back-color-2);
   :deep .t-table {
     white-space: nowrap;
     .asyncLoadingTitle {
@@ -707,6 +708,23 @@ const columns = computed(() => [
     th,
     td {
       padding: 10px 12px;
+      background-color: var(--td--right-back-color-2);
+    }
+    thead {
+      tr {
+        th {
+          border-bottom: var(--new-border-2);
+          font-family: 'Normal';
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          border-bottom: var(--new-border-2);
+          font-family: 'Medium';
+        }
+      }
     }
     .filter-header {
       .dja();
@@ -754,15 +772,16 @@ const columns = computed(() => [
     position: sticky;
     top: 3px;
     z-index: 80;
-    background: var(--td-table-tr-back-color);
+    background-color: var(--td--right-back-color-2);
     .left {
       margin-left: 12px;
-      background: var(--history-list-reset-btn-back);
+      background-color: var(--td--right-back-color-2);
       border: 1px solid var(--td--table-icon-color-1);
       border-radius: 6px;
       padding: 4px 6px;
       .t-radio-button {
         border: none;
+        font-family: 'Medium';
       }
       .t-is-checked {
         background: var(--themeColor);
@@ -776,6 +795,7 @@ const columns = computed(() => [
         border: 1px solid var(--td--table-icon-color-1);
         background: var(--history-list-reset-btn-back);
         color: var(--td-Search-info-color-1);
+        font-family: 'Regular';
         .icon {
           margin-right: 6px;
           fill: var(--td-Search-info-color-1);

views/token/RightDetail.vue

@@ -325,10 +325,9 @@ watch(
     height: 40px;
     width: 100%;
     .da();
-    border: 1px solid var(--td-component-border);
-    border-bottom: none;
     border-radius: 10px 10px 0px 0px;
-    background-color: var(--td-bg-color-container);
+    background-color: var(--td--right-back-color-2);
+    box-shadow: @box-shadow;
     .detail-button-cl {
       height: 100%;
       border-radius: 0;
@@ -336,9 +335,11 @@ watch(
       border: none;
       background: none;
       color: var(--td-search-btn-back-1);
-      font-weight: bold;
+      font-weight: 400;
+      font-size: 14px;
       margin: 0;
       padding: 0;
+      font-family: 'Regular';
       .details-icon-cl {
         width: 30px;
         fill: var(--td-search-btn-back-1);
@@ -408,14 +409,24 @@ watch(
           }
         }
         .info-tabs {
-          border: 1px solid var(--td-component-border);
-          border-top: none;
+          border-bottom: var(--new-border-2);
+          border-left: 1px solid var(--new-border-8);
+          border-right: 1px solid var(--new-border-8);
           border-bottom-left-radius: @border-radius;
           border-bottom-right-radius: @border-radius;
+          .t-tabs__nav-item-text-wrapper {
+            font-family: 'Medium';
+          }
+          .t-tabs__header {
+            background-color: var(--td--right-back-color-2);
+          }
+          .t-tabs__content {
+            background-color: var(--td--right-back-color-2);
+          }
           .t-tabs__nav-scroll {
             width: 100%;
             display: flex;
-            border-bottom: 2px solid var(--td-search-brand-color-1);
+            border-bottom: 1px solid var(--new-border-8);
             .t-tabs__nav-wrap {
               width: 100% !important;
               .t-tabs__bar {
@@ -430,6 +441,13 @@ watch(
               }
             }
           }
+          .t-tabs__header {
+            .t-tabs__nav-container {
+              &::after {
+                background-color: var(--new-border-9) !important;
+              }
+            }
+          }
         }
       }
     }

views/token/SecurityCheck.vue

@@ -210,17 +210,21 @@ const getList = (token: string, Obj: any) => {
 @import '@/style/variables.less';
 .field-list_SecurityCheck {
   margin-top: 8px;
-  border: 1px solid var(--td-Search-info-border-bottom-2);
-  background-color: var(--td-bg-color-container);
+  background-color: var(--td--right-back-color-2);
   border-radius: @border-radius;
+  border-top: var(--new-border-2);
+  border-bottom: var(--new-border-2);
+  border-left: 1px solid var(--new-border-8);
+  border-right: 1px solid var(--new-border-8);
   .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);
+    border-bottom: var(--new-border-2);
     color: var(--td-search-btn-back-1);
+    font-family: 'Medium';
+    font-weight: 500;
+    font-size: 14px;
   }
   .field-list-status {
     .field-header {
@@ -228,9 +232,10 @@ const getList = (token: string, Obj: any) => {
       font-size: var(--font-size-l);
       color: var(--td--main-btn-color-1);
       margin-top: 5px;
+      width: 80%;
       .label {
-        width: 78%;
         .dj(space-between);
+        font-family: 'Medium';
       }
     }
     .field-row {
@@ -243,11 +248,11 @@ const getList = (token: string, Obj: any) => {
       }
       .label {
         color: var(--td-text-color-secondary);
-        font-family: fiveFont;
+        font-family: 'Regular';
       }
       .value {
         color: var(--td-text-color-primary);
-        font-family: fiveFont;
+        font-family: 'Medium';
       }
     }
   }

views/token/SubmitSocialInfo/index.less

 .custom-submit-social-box {
   height: 38px;
-  border: var(--new-border-2);
-  border-top: none;
+  border-bottom: var(--new-border-2);
+  border-left: 1px solid var(--new-border-8);
+  border-right: 1px solid var(--new-border-8);
   box-sizing: border-box;
-  background-color: var(--td-bg-color-container);
+  background-color: var(--td--right-back-color-2);
   font-size: 14px;
   color: var(--new-color-3);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  font-family: 'Medium';
   .span1 {
     padding-left: 4px;
   }

views/token/TimeTab.vue

@@ -132,10 +132,8 @@ const getTimeList = async (PoolAddress) => {
   margin-top: 8px;
   border-radius: 3px;
   border-left: none;
-  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;
@@ -144,6 +142,7 @@ const getTimeList = async (PoolAddress) => {
       background: var(--td--right-back-color-2);
       border-radius: 0;
       margin: 0;
+      font-family: 'bold';
     }
     .active {
       background: #287eff;
@@ -166,17 +165,20 @@ const getTimeList = async (PoolAddress) => {
     border-top: none;
     border-bottom-left-radius: @border-radius;
     border-bottom-right-radius: @border-radius;
+    background: var(--td--right-back-color-2);
     .label {
       padding-top: 12px;
       color: var(--td-text-color-secondary);
       font-size: 12px;
       margin-bottom: 6px;
+      font-family: 'Light';
     }
     .value {
       color: var(--td-text-color-primary);
       font-size: 12px;
       text-align: center;
       margin-bottom: 6px;
+      font-family: 'Medium';
       &.new {
         color: #23ab94;
       }

views/token/TokenFilter.vue

@@ -38,7 +38,7 @@
             <t-radio-group
               v-model="formData.date"
               :options="TIME_RANGE_OPTIONS"
-              class="custom-group-type-1"
+              class="custom-group-type-1 Medium"
             >
               <t-radio-button
                 v-for="item of TIME_RANGE_OPTIONS"
@@ -476,6 +476,7 @@ watch(formData, (v) => {
             background: var(--td-brand-color-btn-1);
             border: none;
             --ripple-color: rgb(230, 230, 244);
+            font-family: 'Regular';
             .icon {
               margin-right: 6px;
               fill: var(--td-brand-color-icon-1);
@@ -527,6 +528,7 @@ watch(formData, (v) => {
           padding-left: 8px;
           white-space: nowrap;
           .da();
+          font-family: 'Normal';
           & > :nth-child(1) {
             padding-right: 12px;
             cursor: pointer;
@@ -542,6 +544,7 @@ watch(formData, (v) => {
               width: 90px;
               height: 24px;
               .dja();
+              font-family: 'Regular';
             }
             .custom-value-type-1:nth-child(1) {
               width: 63px;
@@ -598,10 +601,18 @@ watch(formData, (v) => {
           .pre-switch {
             width: 63px;
             background-color: var(--td--main-btn-color-1);
+            .t-switch__content {
+              font-family: 'Regular';
+            }
           }
           .t-radio-group__outline {
             flex-wrap: nowrap;
           }
+          .Medium {
+            .t-radio-button__label {
+              font-family: 'Medium';
+            }
+          }
         }
       }
     }

views/token/TokenInfo.vue

@@ -90,12 +90,12 @@ watch(
         width: 40%;
         flex-shrink: 0;
         color: var(--td-text-color-secondary);
-        font-family: fiveFont;
+        font-family: 'Regular';
       }
       .value {
         width: 50%;
         color: var(--td-Search-info-color-1);
-        font-family: fiveFont;
+        font-family: 'Medium';
         text-align: right;
         padding-right: 12px;
       }

views/token/TokenList.vue

@@ -17,7 +17,9 @@
         id="table-height-auto"
       >
         <template #index="{ row }">
-          <span>{{ row.index + 100 * (pageNum - 1) }}</span>
+          <span>
+            {{ row.index + 100 * (pageNum - 1) }}
+          </span>
         </template>
         <template #Pool>
           <span>{{ $t('TableList.pool') + HeadTokenType }}</span>
@@ -365,6 +367,11 @@ const onCurrentChange = (v) => {
   pageNum.value = v;
   GlbFilter.value.page = v;
   // next();
+  if (currentRequestType.value == 1) {
+    getTableList();
+  } else {
+    getNewTableList();
+  }
 };
 const sort = ref({});
 const sortChange = (v, options) => {
@@ -540,6 +547,7 @@ const columns = computed(() => {
             white-space: nowrap;
             border: none;
             box-sizing: border-box;
+            background: var(--td--right-back-color-2);
           }
         }
         & > :nth-child(1) {
@@ -547,6 +555,7 @@ const columns = computed(() => {
             color: var(--td--main-btn-color-1);
             font-weight: bold;
             white-space: nowrap;
+            font-family: 'bold';
           }
           .t-align-center {
             height: 30px !important;
@@ -566,7 +575,7 @@ const columns = computed(() => {
         & > :nth-child(2) {
           th {
             font-size: 14px;
-            font-family: fiveFont;
+            font-family: 'Medium';
             border-bottom: 1px solid var(--new-border-4);
           }
           & > * {
@@ -637,22 +646,27 @@ const columns = computed(() => {
           td {
             border: none;
             border-bottom: 1px solid var(--new-border-3);
+            background: var(--new-background-5);
+            font-family: 'Regular';
           }
         }
         .custom-third-class-name {
-          background: var(--td-table-tr-click-back-color);
+          td {
+            background: var(--td-table-tr-click-back-color);
+          }
         }
       }
       .name-block {
         .tn {
           color: var(--main-theme-color);
-          font-size: 15px;
-          font-weight: bold;
+          font-weight: 700;
+          font-size: 16px;
+          font-family: 'bold';
         }
         .symbol {
           color: var(--td-search-btn-back-1);
           margin-top: 2px;
-          font-size: 13px;
+          font-size: 14px;
         }
       }
       .up {

views/token/TokenPool.vue

@@ -195,6 +195,7 @@ const switchPool = (item, index) => {
       font-size: @font-size-s;
       white-space: nowrap;
       border-bottom: 1px solid var(--td-component-border);
+      font-family: 'Medium';
       .Mating-pool {
         width: 28%;
         padding-left: 10px;
@@ -218,6 +219,7 @@ const switchPool = (item, index) => {
       font-size: @font-size-s;
       padding: 0 6px;
       position: relative;
+      font-family: 'Regular';
       .dot-box {
         width: 10px;
         height: 10px;

views/token/TokenSocialList.vue

@@ -157,12 +157,13 @@ const changeLink = (chain: string) => {
 .social-info-wrapper {
   width: 100%;
   height: 40px;
-  border: 1px solid var(--td-component-border);
-  border-top: none;
+  border-bottom: var(--new-border-2);
+  border-left: 1px solid var(--new-border-8);
+  border-right: 1px solid var(--new-border-8);
   .dja(space-between,center);
   padding: 4px 12px;
   box-sizing: border-box;
-  background-color: var(--td-bg-color-container);
+  background-color: var(--td--right-back-color-2);
   .social-item {
     width: 22px;
     height: 22px;

views/token/choseChain/index.less

@@ -16,6 +16,7 @@
     font-weight: 700;
     font-size: 13px;
     user-select: none;
+    font-family: 'bold';
   }
   .right-icon {
     .select-icon {
@@ -66,6 +67,9 @@
       border: 1px solid #f0f1f5;
       box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
       border-radius: 10px;
+      .t-input__inner {
+        font-family: 'Medium';
+      }
     }
   }
   .chain-box-body {
@@ -96,6 +100,7 @@
       cursor: pointer;
       font-size: 12px;
       white-space: nowrap;
+      font-family: 'bold';
     }
   }
 }

views/token/collection/index.less

 @import '@/style/variables.less';
 .custom-home-collection-box {
-  background-color: var(--td-bg-color-container);
+  background-color: var(--td--right-back-color-2);
   border: var(--new-border-2);
   border-radius: 0 0 @border-radius @border-radius;
   position: relative;
@@ -15,9 +15,10 @@
     position: sticky;
     top: 0;
     z-index: 100;
-    background-color: var(--td-bg-color-container);
+    background-color: var(--td--right-back-color-2);
     .title {
       font-size: 15px;
+      font-family: 'Medium';
     }
     .edit-icon {
       display: flex;
@@ -26,6 +27,7 @@
       .Finish-text {
         font-weight: 400;
         font-size: 12px;
+        font-family: 'Regular';
         color: #287eff;
       }
     }
@@ -37,12 +39,13 @@
       border-spacing: 0;
       thead {
         tr {
-          background: #f4f5f7;
+          background: var(--new-background-6);
           border-radius: 10px;
           th {
             color: #8e8a8a;
             font-weight: 500;
             font-size: 12px;
+            font-family: 'Medium';
             .r24h-th-sort {
               display: flex;
               justify-content: center;
@@ -82,7 +85,7 @@
       tr {
         transition: background 0.3s;
         &:hover {
-          background: rgb(245, 245, 245);
+          background: rgba(240, 240, 240, 0.2);
           transition: background 0.3s;
         }
         td {
@@ -96,6 +99,7 @@
               font-weight: 600;
               font-size: 12px;
               text-align: left;
+              font-family: 'Medium';
             }
             .pair {
               font-weight: 400;
@@ -104,6 +108,7 @@
               text-align: left;
               transform: scale(0.8);
               transform-origin: 0 0;
+              font-family: 'Regular';
             }
             .token-icon {
               display: flex;
@@ -115,6 +120,7 @@
           .r24h {
             font-weight: 600;
             font-size: 14px;
+            font-family: 'Medium';
           }
           .up {
             color: #5ab055;
@@ -143,6 +149,7 @@
         .col-holder-tx-td {
           font-weight: 600;
           font-size: 12px;
+          font-family: 'Medium';
           .sticky-top-icon {
             cursor: pointer;
           }
@@ -161,7 +168,6 @@
     bottom: 0;
     height: 47px;
     border-top: 1px solid #d7dce4;
-    background-color: var(--td-bg-color-container);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -175,6 +181,7 @@
           font-weight: 400;
           font-size: 12px;
           color: #4d4d4d;
+          font-family: 'Regular';
         }
       }
       .t-is-checked {
@@ -190,6 +197,7 @@
       align-items: center;
       .delete-text {
         padding-left: 6px;
+        font-family: 'Medium';
       }
     }
   }

views/token/rightDetailHeader/index.less

 @import '@/style/flex.less';
 .header-token-box {
   margin-top: -1px;
+  box-sizing: border-box;
   .header-token-info {
-    border: 1px solid var(--td-component-border);
+    border-top: var(--new-border-2);
+    border-bottom: var(--new-border-2);
+    border-left: 1px solid var(--new-border-8);
+    border-right: 1px solid var(--new-border-8);
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
     padding: 8px 12px;
-    background-color: var(--td-bg-color-container);
+    background-color: var(--td--right-back-color-2);
     .filled-star-box {
       .dja(flex-end);
       .filled-star {
@@ -26,15 +30,16 @@
         .token-name-child {
           .da();
           max-width: 176px;
-          font-size: 26px;
           color: var(--td-right-detail-font-color-1);
           line-height: 47px;
           min-height: 47px;
           .title {
-            font-weight: bold;
+            font-weight: 700;
+            font-size: 26px;
             overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            font-family: 'bold';
           }
           img {
             width: 38px;
@@ -48,6 +53,7 @@
         .address-info {
           display: flex;
           color: var(--new-color-3);
+          font-family: 'Normal';
           .address-info-item {
             font-size: var(--font-size);
             .address {
@@ -78,12 +84,14 @@
             font-weight: 700;
             font-size: 28px;
             min-height: 50px;
+            font-family: 'bold';
           }
           .r24h-cl {
             font-size: var(--font-size-s);
             font-weight: normal;
             margin-top: -3px;
             text-align: right;
+            font-family: 'Medium';
           }
         }
         .kline-btn {

views/user/index.vue

@@ -179,6 +179,7 @@ const getUserInfo = async () => {
     height: 150px;
     border: 1px solid var(--td-Search-info-border-bottom-2);
     .da();
+    margin-top: 20px;
     .userinfo-img {
       .dja();
       width: 100px;
@@ -201,6 +202,7 @@ const getUserInfo = async () => {
   :deep(.t-tabs) {
     overflow: visible;
     display: flex;
+    background: none;
     .tab-label {
       width: 320px;
       height: 100%;