1

app/router.options.ts

@@ -11,7 +11,7 @@ export default <RouterConfig>{
         {
           name: 'tokenlistDefault',
           path: '/',
-          component: () => import('~/views/token/TokenList.vue'),
+          component: () => import('~/views/token/CustomTokenList.vue'),
           meta: { hasSearch: true, hasRollToken: true, footer: true },
         },
         {

components/Animation.vue

@@ -25,7 +25,7 @@
 const props = defineProps({
   background: {
     type: String,
-    default: 'var(--theme-color17)',
+    default: 'rgba(230,230,230,0.2)',
   },
   position: {
     type: String,

language/cn.ts

@@ -34,6 +34,8 @@ const cn = {
     r24hVolume: '最大交易',
     CustomFilter: '高级筛选',
     Collection: '收藏',
+    asc: '升序排列',
+    desc: '降序排列',
   },
   login: {
     h1: '区块链监控专家',

language/en.ts

@@ -35,6 +35,8 @@ const cn = {
     r24hVolume: '24h Volume',
     CustomFilter: 'Custom filters',
     Collection: 'Collection',
+    asc: 'Ascending order',
+    desc: 'Descending order',
   },
   login: {
     h1: 'On-chain intelligent screening',

style/default.css

@@ -101,6 +101,9 @@
   --new-color-2: #287eff;
   --new-color-3: #7b7d87;
   --new-color-4: #5ab055;
+  --new-color-5: #16c784;
+  --new-color-6: #ea3943;
+  --new-color-7: rgb(108, 108, 108);
 }
 
 :root[theme-mode='dark'] {
@@ -170,6 +173,9 @@
   --new-color-2: #28b2ff;
   --new-color-3: #848e9c;
   --new-color-4: #5ab055;
+  --new-color-5: #19de92;
+  --new-color-6: #ec5058;
+  --new-color-7: #cfcfcf;
 }
 /* 主题按钮*/
 .custom_button_back_border {

style/line.less

@@ -19,5 +19,6 @@
     -o-transform: scale(0.5);
     -ms-transform: scale(0.5);
     -moz-transform: scale(0.5);
+    pointer-events: none;
   }
 }

views/token/FilterBtn/index.less

@@ -3,6 +3,9 @@
   align-items: center;
   height: 44px;
   padding-left: 8px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  background-color: var(--td--right-back-color-2);
   .table-filter-btn {
     height: 30px;
     border: none;

views/token/SecurityCheck.vue

@@ -3,8 +3,8 @@
     <div class="header-box">{{ $t('securityCheck.securityCheck') }}</div>
     <div class="field-list-status" v-show="ChainObj.honeypot.request">
       <div class="field-header">
-        <div class="label">
-          {{ $t('securityCheck.honeypot') }}：
+        <div class="label">{{ $t('securityCheck.honeypot') }}：</div>
+        <div class="value">
           <a :href="honeypotLink" target="_blank">
             <Share></Share>
           </a>
@@ -45,8 +45,8 @@
     </div>
     <div class="field-list-status">
       <div class="field-header">
-        <div class="label">
-          {{ $t('securityCheck.gopluslabs') }}：
+        <div class="label">{{ $t('securityCheck.gopluslabs') }}：</div>
+        <div class="value">
           <a :href="gopluslabsLink" target="_blank">
             <Share></Share>
           </a>
@@ -217,7 +217,7 @@ const getList = (token: string, Obj: any) => {
   border-left: 1px solid var(--new-border-8);
   border-right: 1px solid var(--new-border-8);
   .header-box {
-    padding: 4px 12px;
+    padding: 4px 16px;
     .dja();
     height: 40px;
     border-bottom: var(--new-border-2);
@@ -228,31 +228,34 @@ const getList = (token: string, Obj: any) => {
   }
   .field-list-status {
     .field-header {
-      padding: 4px 12px;
+      padding: 4px 16px;
       font-size: var(--font-size-l);
       color: var(--td--main-btn-color-1);
       margin-top: 5px;
-      width: 80%;
+      .dj(space-between);
       .label {
-        .dj(space-between);
         font-family: 'Medium';
       }
+      .value {
+        padding-right: 12px;
+      }
     }
     .field-row {
-      padding: 4px 12px;
-      font-size: 12px;
+      padding: 4px 16px;
+      font-size: 13px;
       .dj(space-between);
-      width: 80%;
       &:hover {
         background-color: var(--td-bg-color-secondarycontainer-hover);
       }
       .label {
-        color: var(--td-text-color-secondary);
+        color: var(--new-color-7);
         font-family: 'Regular';
       }
       .value {
         color: var(--td-text-color-primary);
         font-family: 'Medium';
+        text-align: right;
+        padding-right: 12px;
       }
     }
   }

views/token/TimeTab.vue

@@ -168,10 +168,10 @@ const getTimeList = async (PoolAddress) => {
     background: var(--td--right-back-color-2);
     .label {
       padding-top: 12px;
-      color: var(--td-text-color-secondary);
+      color: var(--new-color-7);
       font-size: 12px;
       margin-bottom: 6px;
-      font-family: 'Light';
+      font-family: 'Regular';
     }
     .value {
       color: var(--td-text-color-primary);

views/token/TokenInfo.vue

@@ -76,11 +76,11 @@ watch(
 <style lang="less">
 @import '@/style/flex.less';
 .token-info-wrapper {
-  margin-top: 12px;
+  margin: 12px 0;
   .field-list {
     .field-row {
       padding: 4px 16px;
-      font-size: 12px;
+      font-size: 13px;
       .dj(space-between);
       &:hover {
         background-color: var(--td-bg-color-secondarycontainer-hover);
@@ -89,8 +89,8 @@ watch(
         padding-left: 10px;
         width: 40%;
         flex-shrink: 0;
-        color: var(--td-text-color-secondary);
-        font-family: 'Regular';
+        color: var(--new-color-7);
+        font-family: 'Medium';
       }
       .value {
         width: 50%;

views/token/rightDetailHeader/index.less

@@ -13,6 +13,7 @@
     background-color: var(--td--right-back-color-2);
     .filled-star-box {
       .dja(flex-end);
+      margin-top: 4px;
       .filled-star {
         color: var(--td-brand-color);
         cursor: pointer;
@@ -52,8 +53,9 @@
         }
         .address-info {
           display: flex;
-          color: var(--new-color-3);
-          font-family: 'Normal';
+          color: var(--new-color-7);
+          font-family: 'Regular';
+          margin-top: 1px;
           .address-info-item {
             font-size: var(--font-size);
             .address {
@@ -61,6 +63,9 @@
             }
           }
         }
+        .margin {
+          margin-top: 2px;
+        }
         :hover.address-info {
           cursor: pointer;
         }
@@ -75,9 +80,9 @@
         display: flex;
         white-space: nowrap;
         .price {
-          color: var(--new-color-4);
           font-size: 16px;
           font-weight: bold;
+          color: var(--new-color-4);
           .price-box {
             .dja(flex-end);
             height: 50px;
@@ -85,9 +90,10 @@
             font-size: 28px;
             min-height: 50px;
             font-family: 'bold';
+            color: var(--td-Search-info-color-1);
           }
           .r24h-cl {
-            font-size: var(--font-size-s);
+            font-size: 13px;
             font-weight: normal;
             margin-top: -3px;
             text-align: right;

views/token/rightDetailHeader/index.tsx

@@ -73,7 +73,7 @@ export default defineComponent({
                   </span>
                 </span>
               </div>
-              <div class="address-info">
+              <div class="address-info margin">
                 <span class="address-info-item">
                   <span>{t('TableList.pool')}</span>
                   <span class="address">：{props.tokenInfo.tbnameSub}</span>

views/token/tableSort.vue

 <template>
   <div class="custom-sort-th">
-    <AscSvg
-      :class="{ active: sorttype === 'asc' }"
-      class="sort-icon asc"
-      @click="sortChange('asc')"
-    ></AscSvg>
-    <DescSvg
-      :class="{ active: sorttype === 'desc' }"
-      class="sort-icon desc"
-      @click="sortChange('desc')"
-    ></DescSvg>
+    <t-tooltip :content="$t('filter.asc')">
+      <AscSvg
+        :class="{ active: sorttype === 'asc' }"
+        class="sort-icon asc"
+        @click="sortChange('asc')"
+      ></AscSvg>
+    </t-tooltip>
+    <t-tooltip :content="$t('filter.desc')">
+      <DescSvg
+        :class="{ active: sorttype === 'desc' }"
+        class="sort-icon desc"
+        @click="sortChange('desc')"
+      ></DescSvg>
+    </t-tooltip>
   </div>
 </template>
 
@@ -26,7 +30,7 @@ const emit = defineEmits(['submitSort']);
 // 当前排序状态
 const sorttype = ref('all');
 const sortChange = (value: string) => {
-  const { options, field } = props;
+  const { field } = props;
   if (value == sorttype.value) {
     // 代表重复点击--恢复表格初始状态
     sorttype.value = 'all';
@@ -39,9 +43,14 @@ const sortChange = (value: string) => {
   });
 };
 watch(
-  () => props.options[props.options.field],
+  () => props.options,
   (v) => {
-    console.log(v);
+    if (!v.status) {
+      sorttype.value = 'all';
+    }
+  },
+  {
+    deep: true,
   }
 );
 </script>