1

public/images/svg/filter/CloseScrollToken.svg

+<svg width="10" height="45" viewBox="0 0 10 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 -1C5.52285 -1 10 3.47715 10 9H8C8 4.58172 4.41828 1 0 1V-1ZM10 36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36H10ZM0 45V0V45ZM0 -1C5.52285 -1 10 3.47715 10 9V36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36V9C8 4.58172 4.41828 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_3031_9687)"/>
+    <path d="M4.4875 16.5622C4.56568 16.7243 4.60905 16.9361 4.60905 17.1559C4.60905 17.3758 4.56568 17.5876 4.4875 17.7497L1.9875 22.4997L4.4875 27.2497C4.53368 27.4157 4.55065 27.6055 4.53591 27.7912C4.52118 27.977 4.47551 28.1488 4.40562 28.2816C4.33572 28.4144 4.24527 28.5012 4.14753 28.5292C4.04979 28.5572 3.9499 28.5249 3.8625 28.4372L1.0125 23.1291C0.926767 22.9594 0.877693 22.7348 0.875 22.4997C0.876078 22.2674 0.925514 22.0454 1.0125 21.8822L3.83125 16.5622C3.87424 16.48 3.92536 16.4147 3.98167 16.3702C4.03799 16.3257 4.09838 16.3027 4.15938 16.3027C4.22037 16.3027 4.28076 16.3257 4.33708 16.3702C4.39339 16.4147 4.44451 16.48 4.4875 16.5622Z" fill="#838383"/>
+    <path d="M6.9875 16.5622C7.06568 16.7243 7.10905 16.9361 7.10905 17.1559C7.10905 17.3758 7.06568 17.5876 6.9875 17.7497L4.4875 22.4997L6.9875 27.2497C7.03368 27.4157 7.05065 27.6055 7.03591 27.7912C7.02118 27.977 6.97551 28.1488 6.90562 28.2816C6.83572 28.4144 6.74527 28.5012 6.64753 28.5292C6.54979 28.5572 6.4499 28.5249 6.3625 28.4372L3.5125 23.1291C3.42677 22.9594 3.37769 22.7348 3.375 22.4997C3.37608 22.2674 3.42551 22.0454 3.5125 21.8822L6.33125 16.5622C6.37424 16.48 6.42536 16.4147 6.48167 16.3702C6.53799 16.3257 6.59838 16.3027 6.65938 16.3027C6.72037 16.3027 6.78076 16.3257 6.83708 16.3702C6.89339 16.4147 6.94451 16.48 6.9875 16.5622Z" fill="#838383"/>
+    </svg>
+    
\ No newline at end of file

public/images/svg/selectChain/bsc.svg

-<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.6898 0L5.46631 4.74687L8.48958 6.49992L13.6898 3.50688L18.8901 6.49992L21.9141 4.74687L13.6898 0ZM18.8909 8.97915L21.9134 10.733V14.2406L16.7131 17.2337V23.2198L13.6906 24.9736L10.6666 23.2198V17.2337L5.46631 14.2406V10.733L8.48958 8.97915L13.6898 11.973L18.8901 8.97915H18.8909Z" fill="#F0B90B"/>
-    <path d="M21.9144 16.7191V20.2275L18.8911 21.9805V18.4737L21.9136 16.7198L21.9144 16.7191Z" fill="#F0B90B"/>
-    <path d="M18.86 24.459L24.0602 21.4659V15.4798L27.0843 13.726V23.2198L18.8607 27.9666V24.459H18.86ZM24.061 9.49373L21.0369 7.73991L24.061 5.98608L27.0835 7.73991V11.2468L24.061 13.0006V9.49373ZM10.6667 29.2361V25.73L13.6899 27.4838L16.714 25.73V29.2369L13.6899 30.9907L10.6674 29.2369L10.6667 29.2361ZM8.48969 21.9798L5.46641 20.2275V16.7198L8.48969 18.4737V21.9805V21.9798ZM13.6899 9.49373L10.6674 7.73991L13.6899 5.98608L16.714 7.73991L13.6899 9.49373ZM6.34294 7.73991L3.32044 9.49373V13.0006L0.296387 11.2468V7.73991L3.31966 5.98608L6.34294 7.73991Z" fill="#F0B90B"/>
-    <path d="M0.296387 13.726L3.31966 15.4798V21.4659L8.51991 24.459V27.9666L0.296387 23.219V13.7252V13.726Z" fill="#F0B90B"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.6684 13.661C20.1993 19.5539 14.2307 23.1402 8.33711 21.6707C2.44597 20.2015 -1.14034 14.2326 0.329434 8.34017C1.79792 2.44661 7.76649 -1.13997 13.6583 0.329158C19.5515 1.79829 23.1376 7.76788 21.6683 13.6611L21.6684 13.661H21.6684Z" fill="#F3BA2F"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.9998 6.98166L8.15151 9.82992L6.49424 8.17259L10.9998 3.66699L15.5069 8.17394L13.8496 9.83127L10.9998 6.98166ZM5.32389 9.3427L3.6665 11.0003L5.32378 12.6574L6.98117 11L5.32389 9.3427ZM8.15145 12.1708L10.9998 15.019L13.8495 12.1694L15.5077 13.8259L15.5069 13.8268L10.9998 18.3337L6.49424 13.8281L6.49189 13.8257L8.15145 12.1708ZM16.6759 9.34364L15.0185 11.001L16.6758 12.6583L18.3332 11.0009L16.6759 9.34364Z" fill="white"/>
+    <path d="M12.6809 10.9991H12.6816L11 9.31738L9.75703 10.56V10.56L9.61424 10.7029L9.31973 10.9974L9.31738 10.9997L9.31973 11.0021L11 12.6826L12.6817 11.0009L12.6826 10.9999L12.681 10.9991" fill="white"/>
     </svg>
     
\ No newline at end of file

views/CustomComponent/CheckBox2.vue

+<template>
+  <div :class="['custom-check-box', propsClass]">
+    <button
+      v-for="item in options"
+      :key="item.value"
+      :class="[
+        'check-box-button',
+        isSelected(item.value) ? 'check-box-active' : '',
+      ]"
+      @click="ChoseCurBtn(item.value)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    options?: any[];
+    modelValue: any[];
+    class?: string;
+  }>(),
+  {
+    options: [],
+    class: '',
+  }
+);
+const emit = defineEmits(['update:modelValue']);
+const propsClass = ref(props.class);
+
+const ChoseCurBtn = (value: string) => {
+  const { modelValue } = props;
+  let list: any = JSON.parse(JSON.stringify(modelValue));
+  if (!modelValue.length) {
+    list.push(value);
+  } else {
+    // 循环当前已有的列表,判断是插入数据还是删除数据
+    let index = list.findIndex((item: any) => item == value);
+    if (index == -1) {
+      // 未找到-插入
+      list.push(value);
+    } else {
+      list.splice(index, 1);
+    }
+  }
+  emit('update:modelValue', list);
+};
+// 判断是否选中
+const isSelected = (value: string) => {
+  const { modelValue } = props;
+  let index = modelValue.findIndex((item: any) => item == value);
+  if (index == -1) {
+    // 不存在
+    return false;
+  }
+  // 存在
+  return true;
+};
+</script>
+
+<style lang="less">
+.custom-check-box {
+  white-space: nowrap;
+  .check-box-button {
+    border: none;
+    height: 28px;
+    background: none;
+    font-family: 'Regular';
+    width: 104px;
+    border-radius: 16px;
+    cursor: pointer;
+    outline: none;
+    font-size: 12px;
+  }
+  .check-box-active {
+    background: var(--td--main-btn-color-1);
+    color: #fff;
+  }
+}
+</style>

views/token/FilterBtn/index.less → views/CustomComponent/radio.vue

-.custom-table-filter-btns {
+<template>
+  <div class="custom-radio">
+    <button
+      class="custom-radio-button"
+      :class="{
+        'radio-button-active': currentBtn == item.value,
+      }"
+      v-for="item in options"
+      :key="item.value"
+      @click="btnChange(item)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    options?: any[];
+    modelValue: string;
+  }>(),
+  {
+    options: [],
+  }
+);
+const emit = defineEmits(['update:modelValue', 'change']);
+const currentBtn = ref(props.modelValue);
+const btnChange = (item: any) => {
+  currentBtn.value = item.value;
+  // 请求接口
+  emit('update:modelValue', item.value);
+  emit('change', item.value);
+};
+</script>
+
+<style lang="less">
+.custom-radio {
   display: flex;
   align-items: center;
   height: 44px;
@@ -6,22 +43,28 @@
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color: var(--td--right-back-color-2);
-  .table-filter-btn {
-    height: 30px;
+  & > :not(:first-child) {
+    margin-left: 6px;
+  }
+  .custom-radio-button {
+    height: 32px;
     border: none;
     border-radius: 10px;
     font-weight: 400;
     font-size: 13px;
     background: var(--new-background-2);
     color: var(--new-color-1);
-    --ripple-color: none !important;
     transition: all 0.3s;
     font-family: 'Regular';
+    cursor: pointer;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
     &:hover {
       background: var(--new-background-2);
     }
   }
-  .active {
+  .radio-button-active {
     background: var(--new-background-3);
     color: var(--new-color-2);
     font-weight: 500;
@@ -32,3 +75,4 @@
     }
   }
 }
+</style>

views/detail/index.vue

@@ -5,12 +5,8 @@
         <template #content>
           <div class="token-detail-wrapper">
             <div class="left-wrapper">
+              <div class="custom-tv">
                 <div id="tv_chart_container" ref="chartContainer"></div>
-              <div
-                class="history-table narrow-scrollbar"
-                :style="{ height: tableHeight }"
-                id="history-table"
-              >
                 <div class="resize-block" id="resize-block">
                   <div class="resize-icon">
                     <arrow-up-icon></arrow-up-icon>
@@ -18,6 +14,12 @@
                     <arrow-down-icon></arrow-down-icon>
                   </div>
                 </div>
+              </div>
+              <div
+                class="history-table narrow-scrollbar"
+                :style="{ height: tableHeight }"
+                id="history-table"
+              >
                 <HistoryList
                   :mt="mt"
                   :currentPath="currentPath"
@@ -32,6 +34,7 @@
                 scene="detail"
                 :token="token"
                 :tb="tb"
+                :up="KPirce"
                 :r24h="r24h"
                 :currentPath="currentPath"
                 @update:setPool="getPoll"
@@ -88,7 +91,7 @@ const token = ref('');
 // symbol--接口
 const symbol = ref('');
 // r24h--接口
-const r24h = ref('');
+const r24h = ref(null);
 // k线价格精度
 const KPirce = ref();
 // mt---是否主流币
@@ -96,34 +99,10 @@ const mt = ref('');
 const PoolAddress = ref('');
 let datafeed = null;
 let widget: any = null;
-onBeforeMount(() => {
-  if (currentPath.value) {
-    chain.value = currentPath.value;
-  }
-  request
-    .get(`/v1/${currentPath.value}/getConfig`, {
-      params: {
-        tag: WebS(tb.value),
-      },
-    })
-    .then((res: any) => {
-      // 当url为token时
-      if (res.is_token) {
-        tb.value = res.pair;
-      }
-      CurrentKPrice.value = res.up;
-      //
-      r24h.value = res.r24h + '';
-      symbol.value = res.sy;
-      token.value = res.token;
-      KPirce.value = res.up;
-      mt.value = res.p + '';
-    });
-});
 watch(
   () => PoolAddress.value,
   (v) => {
-    if (v) {
+    if (v && process.client) {
       datafeed.clearIntervalGetBars();
       datafeed = null;
       getKLine(v);
@@ -139,10 +118,12 @@ watch(
     } else {
       mode = 'Dark';
     }
+    if (process.client) {
       widget.widget.onChartReady(function () {
         widget.widget.changeTheme(mode);
       });
     }
+  }
 );
 let Interval = null;
 // 轮询获取k线是否加载
@@ -195,6 +176,28 @@ watch(
   }
 );
 onMounted(() => {
+  if (currentPath.value) {
+    chain.value = currentPath.value;
+  }
+  request
+    .get(`/v1/${currentPath.value}/getConfig`, {
+      params: {
+        tag: WebS(tb.value),
+      },
+    })
+    .then((res: any) => {
+      // 当url为token时
+      if (res.is_token) {
+        tb.value = res.pair;
+      }
+      CurrentKPrice.value = res.up;
+      //
+      r24h.value = res.r24h;
+      symbol.value = res.sy;
+      token.value = res.token;
+      KPirce.value = res.up;
+      mt.value = res.p + '';
+    });
   // 开启k线轮询
   openInterval();
   tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + 'px';
@@ -236,24 +239,27 @@ const getPoll = (PoolValue) => {
 <style lang="less" scoped>
 @import '@/style/flex.less';
 .token-detail-wrapper {
+  padding: 12px 0 0 12px;
   box-sizing: border-box;
-  padding: 6px 0 0 6px;
   position: relative;
   height: calc(100vh - 70px);
   overflow: hidden;
   display: flex;
-  background: var(--main-theme-color-2);
   .left-wrapper {
     width: calc(100vw - 380px);
     height: 100%;
     display: flex;
     flex-direction: column;
     margin-right: 12px;
-    #tv_chart_container {
+    .custom-tv {
+      position: relative;
       flex: 1;
       min-height: 200px;
-      position: relative;
       // height: calc((100vh - 70px) * 0.4);
+      border-radius: 10px;
+      overflow: hidden;
+      #tv_chart_container {
+        height: 100%;
         &.mask {
           &:after {
             content: ' ';
@@ -266,32 +272,24 @@ const getPoll = (PoolValue) => {
           }
         }
       }
-    .history-table {
-      z-index: 10;
-      min-height: 90px;
-      position: relative;
-      background-color: var(--td-bg-color-container);
-      display: flex;
-      height: calc(33vh + 23px) !important;
       .resize-block {
         position: absolute;
         user-select: none;
         width: 100%;
         height: 15px;
-        top: -15px;
+        bottom: 2px;
         left: 0px;
-        z-index: 90;
         cursor: row-resize;
+        z-index: 100;
         .resize-icon {
           width: 100%;
           position: relative;
-          top: 0px;
           text-align: center;
           flex-direction: column;
           .da();
           .t-icon {
             color: var(--td-brand-color-6);
-            z-index: 200;
+            z-index: 1000;
           }
           .line {
             width: 100%;
@@ -301,6 +299,17 @@ const getPoll = (PoolValue) => {
         }
       }
     }
+    .history-table {
+      margin-top: 12px;
+      z-index: 10;
+      min-height: 90px;
+      position: relative;
+      background-color: var(--td-bg-color-container);
+      display: flex;
+      height: calc(33vh + 23px);
+      border-radius: 10px;
+      overflow: hidden;
+    }
   }
   .right-wrapper {
     flex: 1;

views/layout/Header.vue

@@ -54,6 +54,7 @@ const route = useRoute();
   .join-us {
     margin-left: 1vw;
     color: var(--td-Search-info-color-1);
+    white-space: nowrap;
     .dja();
     text-decoration: none;
     span {

views/layout/rollToken.vue

 <template>
-  <div class="header-scroll_box-fa">
-    <div class="header-scroll_box" @mouseenter="stopAn" @mouseleave="leaveAn">
+  <div>
+    <span class="close-scroll_box" @click="changeScrollBox">
+      <CloseScrollToken></CloseScrollToken>
+    </span>
+    <div
+      v-show="!ScrollList.list.length"
+      class="custom-substitute-scroll"
+    ></div>
+    <transition name="scroll-change">
+      <div class="header-scroll_box-fa" v-show="srcollType == 'open'">
+        <div
+          class="header-scroll_box"
+          @mouseenter="stopAn"
+          @mouseleave="leaveAn"
+        >
           <div
             class="scroll-box-fa"
             ref="scroll_box_1"
@@ -50,15 +63,20 @@
         </div>
         <ScrollTest></ScrollTest>
       </div>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import request from '@/utils/request';
 import { publicTokenImg } from '@/constants/UnifiedManagementChain';
 import ScrollTest from './ScrollTest.vue';
+import CloseScrollToken from '/public/images/svg/filter/CloseScrollToken.svg';
 const ScrollList = reactive({
   list: [],
 });
+// 滚动代币当前状态--默认展开
+const srcollType = ref('open');
 // 获取当前链
 const chain = useChain();
 watch(
@@ -74,6 +92,13 @@ onMounted(() => {
     getPublicToken();
   }
 });
+const changeScrollBox = () => {
+  if (srcollType.value == 'open') {
+    srcollType.value = 'close';
+  } else {
+    srcollType.value = 'open';
+  }
+};
 // 获取滚动代币
 const getPublicToken = async () => {
   try {
@@ -126,11 +151,12 @@ const leaveAn = () => {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/variables.less';
 @import '@/style/flex.less';
 .header-scroll_box-fa {
-  padding-bottom: 12px;
+  user-select: none;
+  height: 57px;
   .header-scroll_box {
     width: 100%;
     box-sizing: border-box;
@@ -185,6 +211,15 @@ const leaveAn = () => {
     }
   }
 }
+.custom-substitute-scroll {
+  height: 57px;
+}
+.close-scroll_box {
+  position: fixed;
+  top: 82px;
+  left: 0;
+  cursor: pointer;
+}
 </style>
 
 <style lang="less">
@@ -198,4 +233,40 @@ const leaveAn = () => {
     transform: translate3d(-100%, 0, 0);
   }
 }
+
+.scroll-change-leave-active {
+  // ok
+  transition: all 0.7s ease-in-out;
+}
+.scroll-change-enter-active {
+  //
+  animation: move 0.7s ease-in;
+}
+.scroll-change-leave {
+  opacity: 1;
+  height: 57px;
+}
+.scroll-change-leave-to {
+  opacity: 0;
+  height: 0px;
+}
+// ------------
+// .scroll-change-enter {
+//   opacity: 0;
+//   height: 0px;
+// }
+// .scroll-change-enter-to {
+//   opacity: 1;
+//   height: 57px;
+// }
+@keyframes move {
+  from {
+    height: 0px;
+    opacity: 0;
+  }
+  to {
+    height: 57px;
+    opacity: 1;
+  }
+}
 </style>

views/token/CustomTokenList.vue

 <template>
   <div class="custom-token-list">
-    <FilterBtns @filterChange="filterChange"></FilterBtns>
+    <CustomRadio
+      :options="btns"
+      v-model="currentBtn"
+      @change="onFilterChange"
+    ></CustomRadio>
     <div
       class="custom-affixed-head"
       ref="affixedHeadRef"
@@ -115,10 +119,20 @@
           >
             <td align="center" class="index">{{ item.index }}</td>
             <td class="tn">
+              <div class="token-name">
+                <template v-if="item.swap">
+                  {{ item.swap }}
+                </template>
+                <template v-else>
+                  <div class="avatar-icon">
+                    {{ getTokenInitials(item.tn) }}
+                  </div>
+                </template>
                 <div class="name-block">
                   <div class="tn">{{ item.tn }}</div>
                   <div class="symbol">{{ item.sy }}/{{ item.ps }}</div>
                 </div>
+              </div>
             </td>
             <td class="up fs" align="center">{{ item.n_up }}</td>
             <td class="pb fs" align="center">{{ item.n_pb }}</td>
@@ -198,13 +212,10 @@ import { filterChainObj } from '@/constants/UnifiedManagementChain';
 import JumpOther from './JumpOther.vue';
 import KLink from '/public/images/svg/table/k_link.svg';
 import analysisSvg from '/public/images/svg/table/media.svg';
-import 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';
 import CustomTableSort from './tableSort.vue';
 import { TableSort, TableSortAsc } from '@/utils/tool';
+import CustomRadio from '../CustomComponent/radio.vue';
 const route = useRoute();
 const LoadHead = ref(false);
 const CustomHead = ref(null);
@@ -212,8 +223,6 @@ const CustomTable = ref(null);
 const BodyscrollDom = ref(null);
 const loading = ref(false);
 const pageNum = ref(1);
-// 当前请求哪个接口
-const currentRequestType = ref(1);
 // 当前链
 const chain = useChain();
 const { t } = useI18n();
@@ -246,8 +255,6 @@ const colGroupList = reactive({
 });
 // 右侧数据
 const RightInfo = useCurrentRightInfo();
-// 新接口当前参数
-const NewParams = ref({});
 // 吸顶表头左右跟随滑动
 const affixedHead = reactive({
   left: '',
@@ -298,6 +305,51 @@ const SortOptions = reactive({
     status: false,
   },
 });
+const currentBtn = ref('default');
+const btns = computed(() => [
+  {
+    label: t('filter.pairs'),
+    value: 'default',
+  },
+  {
+    label: t('filter.updated'),
+    value: 'new',
+  },
+  {
+    label: t('filter.gainers'),
+    value: 'max-up',
+  },
+  {
+    label: t('filter.losers'),
+    value: 'max-down',
+  },
+  {
+    label: t('filter.r24hVolume'),
+    value: 'txn',
+  },
+]);
+const onFilterChange = (value: string) => {
+  if (value == 'new') {
+    GlbFilter.value.nt = 1;
+  } else if (value == 'default') {
+    GlbFilter.value.nt = 0;
+  }
+  // 永远请求第一页
+  pageNum.value = 1;
+  if (value == 'txn') {
+    GlbFilter.value.date_orderby = 'txn';
+    GlbFilter.value.sort = 'desc';
+  } else if (value == 'max-up') {
+    // 最大涨幅
+    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+    GlbFilter.value.sort = 'desc';
+  } else if (value == 'max-down') {
+    // 最大跌幅
+    GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+    GlbFilter.value.sort = 'asc';
+  }
+  getTableList();
+};
 // 获取涨跌幅
 const getUpDown = (value: string) => {
   if (value && value[0] == '-') {
@@ -322,6 +374,13 @@ const getTableWidth = () => {
     affixedHead.width = width + 'px';
   }
 };
+// 获取token首字母
+const getTokenInitials = (value: string) => {
+  if (value) {
+    return value[0];
+  }
+  return '';
+};
 // 排序事件
 const submitSort = ({ sort, field }: any) => {
   // 先将其他th的筛选关闭
@@ -352,29 +411,6 @@ const getMinWidth = () => {
     affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
   }
 };
-const filterChange = (value: number, txn: string) => {
-  pageNum.value = 1;
-  currentRequestType.value = value;
-  if (value == 1) {
-    if (txn == 'txn') {
-      GlbFilter.value.date_orderby = 'txn';
-      GlbFilter.value.sort = 'desc';
-    } else if (txn == 'max-up') {
-      // 最大涨幅
-      GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-      GlbFilter.value.sort = 'desc';
-    } else if (txn == 'max-down') {
-      // 最大跌幅
-      GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
-      GlbFilter.value.sort = 'asc';
-    }
-    // 旧接口
-    getTableList();
-  } else {
-    NewParams.value = JSON.parse(JSON.stringify({}));
-    getNewTableList();
-  }
-};
 // 表格数据过滤方法
 const TableFilter = (result: any) => {
   if ('list' in result && result.list.length) {
@@ -416,7 +452,7 @@ const getParams = () => {
 };
 // 预取数据
 const { data, refresh } = await useFetch(
-  () => `http://156.247.9.93:9501/v1${chain.value}/index`,
+  () => `http://156.247.9.93:9501/v1${chain.value}/indexV1`,
   {
     params: getParams(),
     onResponse({ request, response, options }) {
@@ -492,7 +528,7 @@ const getColGroupWidth = () => {
 const getTableList = async () => {
   try {
     loading.value = true;
-    let result: any = await request.get(`/v1${chain.value}/index`, {
+    let result: any = await request.get(`/v1${chain.value}/indexV1`, {
       params: getParams(),
     });
     if (result.list.length) {
@@ -505,38 +541,10 @@ const getTableList = async () => {
     loading.value = false;
   }
 };
-// 新接口
-const getNewTableList = async () => {
-  try {
-    loading.value = true;
-    let params = JSON.parse(JSON.stringify(GlbFilter.value));
-    if ('nt' in params) {
-      delete params.nt;
-    }
-    let res: any = await request.get(`/v1${chain.value}/phone/index`, {
-      params: {
-        ...params,
-        page: pageNum.value,
-        ...NewParams.value,
-      },
-    });
-    loading.value = false;
-    TableFilter(res);
-  } catch (e) {
-    console.log(e);
-    loading.value = false;
-  } finally {
-    loading.value = false;
-  }
-};
 watch(
   () => ChangeTable.value,
   (v) => {
-    if (currentRequestType.value == 1) {
     getTableList();
-    } else {
-      getNewTableList();
-    }
   }
 );
 watch(
@@ -546,8 +554,6 @@ watch(
     pageNum.value = 1;
     // 修改title
     ChainObj.value = filterChainObj('value', chain.value);
-    // 请求数据
-    currentRequestType.value = 1;
     getTableList();
   }
 );
@@ -579,11 +585,7 @@ const closeListener = (fn: any) => {
 // 有数据，开启定时器
 const Intervalfun = () => {
   listInterval = setInterval(() => {
-    if (currentRequestType.value == 1) {
     getTableList();
-    } else {
-      getNewTableList();
-    }
   }, 10000);
 };
 // 关闭定时器
@@ -609,11 +611,7 @@ const onCurrentChange = (v) => {
   pageNum.value = v;
   GlbFilter.value.page = v;
   // next();
-  if (currentRequestType.value == 1) {
   getTableList();
-  } else {
-    getNewTableList();
-  }
 };
 const onScrollEvent = () => {
   // 获取滚动元素dom
@@ -985,6 +983,20 @@ for (let i = 0; i < arr1.length; i++) {
           }
         }
       }
+      .token-name {
+        .da();
+        .avatar-icon {
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          background: #5f6e78;
+          color: white;
+          .dja();
+          font-weight: 500;
+          font-size: 17px;
+          font-family: 'Medium';
+          margin-right: 12px;
+        }
         .name-block {
           .tn {
             color: var(--main-theme-color);
@@ -998,6 +1010,8 @@ for (let i = 0; i < arr1.length; i++) {
             font-size: 14px;
           }
         }
+      }
+
       .up {
         color: #23ab94;
       }

views/token/FilterBtn/index.tsx

-import { defineComponent, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import './index.less';
-export default defineComponent({
-  emits: ['filterChange'],
-  setup(props, { emit }) {
-    const { t } = useI18n();
-    const currentBtn = ref('default');
-    // 筛选条件
-    const GlbFilter = useCurFilter();
-    const btns = computed(() => {
-      return [
-        {
-          label: t('filter.pairs'),
-          value: 'default',
-          type: 1,
-        },
-        {
-          label: t('filter.updated'),
-          value: 'new',
-          type: 1,
-        },
-        {
-          label: t('filter.gainers'),
-          value: 'max-up',
-          type: 1,
-        },
-        {
-          label: t('filter.losers'),
-          value: 'max-down',
-          type: 1,
-        },
-        {
-          label: t('filter.r24hVolume'),
-          value: 'txn',
-          type: 1,
-        },
-        {
-          label: 'Coingecko',
-          value: 'Coingecko',
-          type: 2,
-        },
-        {
-          label: 'Coinmarketcap',
-          value: 'Coinmarketcap',
-          type: 2,
-        },
-      ];
-    });
-    const btnChange = (item: any) => {
-      currentBtn.value = item.value;
-      //   更新筛选条件
-      if (currentBtn.value == 'new') {
-        GlbFilter.value.nt = 1;
-      } else if (currentBtn.value == 'default') {
-        GlbFilter.value.nt = 0;
-      }
-      // 请求接口
-      emit('filterChange', item.type, item.value);
-    };
-    return () => (
-      <div class="custom-table-filter-btns">
-        {btns.value.map((item: any) => (
-          <t-button
-            class={[
-              'table-filter-btn',
-              currentBtn.value == item.value ? 'active' : '',
-            ]}
-            onClick={btnChange.bind(this, item)}
-          >
-            {item.label}
-          </t-button>
-        ))}
-      </div>
-    );
-  },
-});

views/token/RightDetail.vue

@@ -179,10 +179,7 @@ const tokenInfo: any = ref({
   token: '',
   pool: [],
 });
-watch(
-  () => props.tb,
-  (v) => {
-    if (v) {
+const getPriceRange = () => {
   const { up, r24h: proR24h } = props;
   if ((proR24h + '')[0] == '-') {
     // -，跌
@@ -204,6 +201,20 @@ watch(
   if (r24h.value[0] !== '-') {
     r24h.value = '+' + r24h.value;
   }
+};
+watch(
+  () => props.tb,
+  (v) => {
+    if (v) {
+      getPriceRange();
+    }
+  }
+);
+watch(
+  () => props.r24h,
+  (v) => {
+    if (typeof v !== 'undefined' && typeof v !== 'null') {
+      getPriceRange();
     }
   }
 );

views/token/TokenFilter.vue

@@ -35,20 +35,11 @@
             {{ $t('home.timeRange') }}：
           </div>
           <div class="value">
-            <t-radio-group
+            <FilterRadio
+              :margin="true"
               v-model="formData.date"
               :options="TIME_RANGE_OPTIONS"
-              class="custom-group-type-1 Medium"
-            >
-              <t-radio-button
-                v-for="item of TIME_RANGE_OPTIONS"
-                :key="item.value"
-                :value="item.value"
-                class="custom-value-type-1"
-                @click="ReverseBtn('date', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
+            ></FilterRadio>
           </div>
         </div>
         <div class="custom-form-item">
@@ -66,32 +57,18 @@
               :label="PoolSize"
               @change="SwitchChange"
             ></t-switch>
-            <t-radio-group
+            <FilterRadio
               v-show="formData.isWbnb"
-              class="custom-group-type-2"
-              v-model="formData.poolSize"
-            >
-              <t-radio-button
-                v-for="item in POOL_SIZE_OPTIONS"
-                :value="item.value"
-                :key="item"
-                @click="ReverseBtn('poolSize', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
-            <t-radio-group
+              v-model="formData.poolSize_wb"
+              :options="POOL_SIZE_OPTIONS"
+              class="change-group"
+            ></FilterRadio>
+            <FilterRadio
               v-show="!formData.isWbnb"
-              class="custom-group-type-2"
-              v-model="formData.poolSize"
-            >
-              <t-radio-button
-                v-for="item in POOL_SIZE_USD_OPTIONS"
-                :value="item.value"
-                :key="item"
-                @click="ReverseBtn('poolSize', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
+              v-model="formData.poolSize_ub"
+              :options="POOL_SIZE_USD_OPTIONS"
+              class="change-group"
+            ></FilterRadio>
           </div>
         </div>
         <div class="custom-form-item">
@@ -113,8 +90,7 @@
                 :label="['+', '-']"
               ></t-switch>
               <div>
-                <ClientOnly
-                  ><t-select
+                <t-select
                   class="custom-select-home-range"
                   v-model="formData.priceRangeTime"
                   :popup-props="{ overlayClassName: 'select_home_range_box' }"
@@ -130,23 +106,13 @@
                     </div>
                   </t-option>
                 </t-select>
-                </ClientOnly>
               </div>
             </div>
-            <div>
-              <t-radio-group
-                class="custom-group-type-3"
+            <FilterRadio
               v-model="formData.range"
-              >
-                <t-radio-button
-                  v-for="item in PRICE_RANGE_OPTIONS"
-                  :value="item.value"
-                  :key="item"
-                  @click="ReverseBtn('range', item.value)"
-                  >{{ item.label }}</t-radio-button
-                >
-              </t-radio-group>
-            </div>
+              :options="PRICE_RANGE_OPTIONS"
+              class="change-group2"
+            ></FilterRadio>
           </div>
         </div>
         <div class="custom-form-item">
@@ -160,19 +126,11 @@
             {{ $t('home.newHolder') }}：
           </div>
           <div class="value">
-            <t-radio-group
+            <FilterRadio
+              :margin="true"
               v-model="formData.newHolder"
-              class="custom-group-type-1"
-            >
-              <t-radio-button
-                v-for="item in NEW_HOLDER_OPTIONS"
-                :value="item.value"
-                :key="item"
-                class="custom-button custom-value-type-1"
-                @click="ReverseBtn('newHolder', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
+              :options="NEW_HOLDER_OPTIONS"
+            ></FilterRadio>
           </div>
         </div>
         <div class="custom-form-item">
@@ -183,19 +141,11 @@
             {{ $t('home.volume') }}：
           </div>
           <div class="value">
-            <t-radio-group
+            <FilterRadio
+              :margin="true"
               v-model="formData.volume"
-              class="custom-group-type-1"
-            >
-              <t-radio-button
-                v-for="item in VOLUME_OPTIONS"
-                :value="item.value"
-                :key="item"
-                class="custom-button custom-value-type-1"
-                @click="ReverseBtn('volume', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
+              :options="VOLUME_OPTIONS"
+            ></FilterRadio>
           </div>
         </div>
         <div class="custom-form-item">
@@ -206,16 +156,11 @@
             {{ $t('home.txns') }}：
           </div>
           <div class="value">
-            <t-radio-group v-model="formData.txns" class="custom-group-type-1">
-              <t-radio-button
-                v-for="item in TXNS_OPTIONS"
-                :value="item.value"
-                :key="item"
-                class="custom-button custom-value-type-1"
-                @click="ReverseBtn('txns', item.value)"
-                >{{ item.label }}</t-radio-button
-              >
-            </t-radio-group>
+            <FilterRadio
+              :margin="true"
+              v-model="formData.txns"
+              :options="TXNS_OPTIONS"
+            ></FilterRadio>
           </div>
         </div>
         <!-- hpt -->
@@ -230,12 +175,12 @@
             <t-button
               class="all-hpt-btn"
               :class="{
-                active: formData.isHptall,
+                active: !Cur_hpt_list.length,
               }"
+              @click="allHpt"
               >ALL</t-button
             >
-            <ClientOnly
-              ><t-select
+            <t-select
               class="custom-select-home-range"
               v-model="formData.iSHpt"
               :popup-props="{ overlayClassName: 'select_home_range_box' }"
@@ -251,7 +196,6 @@
                 </div>
               </t-option>
             </t-select>
-            </ClientOnly>
             <CustomCheckBox
               class="cust-check-box"
               :options="ContractDetection"
@@ -289,7 +233,8 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import SmartAlerts from './SmartAlerts.vue';
 import { useI18n } from 'vue-i18n';
 import ChoseChain from './choseChain';
-import CustomCheckBox from '../CustomComponent/CheckBox';
+import CustomCheckBox from '../CustomComponent/CheckBox2.vue';
+import FilterRadio from './filterRadio.vue';
 const { t } = useI18n();
 // 当前链
 const chain = useChain();
@@ -301,7 +246,8 @@ const formData = reactive({
   date: '5m',
   isWbnb: true,
   isRise: true,
-  poolSize: '',
+  poolSize_wb: '',
+  poolSize_ub: '',
   range: '',
   newHolder: '',
   volume: '',
@@ -317,27 +263,27 @@ const Cur_hpt_list = ref([]);
 const ContractDetection = computed(() => [
   {
     label: t('filter.Honeypot'),
-    value: '1',
+    value: 'is_honeypot',
   },
   {
     label: t('filter.OpenSource'),
-    value: '2',
+    value: 'is_open_source',
   },
   {
     label: t('filter.TradingSwitch'),
-    value: '3',
+    value: 'transfer_pausable',
   },
   {
     label: t('filter.AgencyContract'),
-    value: '4',
+    value: 'is_proxy',
   },
   {
     label: t('filter.ModifySlippage'),
-    value: '5',
+    value: 'slippage_modifiable',
   },
   {
     label: t('filter.StopTrading'),
-    value: '6',
+    value: 'take_back_ownership',
   },
 ]);
 
@@ -358,7 +304,8 @@ const visible = ref(false);
 // 重置
 const Reset = () => {
   formData.date = '5m';
-  formData.poolSize = '';
+  formData.poolSize_wb = '';
+  formData.poolSize_ub = '';
   formData.range = '';
   formData.newHolder = '';
   formData.volume = '';
@@ -372,6 +319,9 @@ const ReverseBtn = (label: string, value: string) => {
     formData[label] = '';
   }
 };
+const allHpt = () => {
+  Cur_hpt_list.value = [];
+};
 // 打开弹出框
 const openSmart = () => {
   visible.value = true;
@@ -413,11 +363,39 @@ const SwitchChange = (v: any) => {
 
 // 条件过滤方法
 const filterFn = async () => {
+  try {
+    // 是否加入貔貅检测
+    if (Cur_hpt_list.value.length) {
+      Cur_hpt_list.value.forEach((item: any) => {
+        if (formData.iSHpt == 'yes') {
+          GlbFilter.value[item] = '1';
+        } else {
+          GlbFilter.value[item] = '0';
+        }
+      });
+      // 判断哪个参数没有
+      ContractDetection.value.forEach((it: any) => {
+        let index = Cur_hpt_list.value.findIndex(
+          (item: any) => item == it.value
+        );
+        if (index == -1) {
+          // 没找到
+          delete GlbFilter.value[it.value];
+        }
+      });
+      // 开启检测
+      GlbFilter.value.filter_troops = '1';
+    } else {
+      // 关闭检测
+      GlbFilter.value.filter_troops = '0';
+    }
     GlbFilter.value.pool_column = formData.isWbnb ? 'wb' : 'ub';
     GlbFilter.value.nt = parseInt(formData.isNewchain);
     GlbFilter.value.range_date = formData.priceRangeTime;
-  if (formData.poolSize) {
-    GlbFilter.value.pool_range = formData.poolSize;
+    if (formData.isWbnb && formData.poolSize_wb) {
+      GlbFilter.value.pool_range = formData.poolSize_wb;
+    } else if (!formData.isWbnb && formData.poolSize_ub) {
+      GlbFilter.value.pool_range = formData.poolSize_ub;
     }
     // 加
     if (formData.isRise) {
@@ -441,9 +419,11 @@ const filterFn = async () => {
     if (formData.txns) {
       GlbFilter.value.txn = formData.txns;
     }
+  } catch (e) {
+    console.log(e);
+  }
 };
-
-watch(formData, async (v) => {
+const filterEvent = async () => {
   await filterFn();
   // 筛选条件改变，永远请求第一页
   GlbFilter.value.page = 1;
@@ -456,6 +436,15 @@ watch(formData, async (v) => {
   router.push({
     path: `/${ChainObj.value.name}/1`,
   });
+};
+watch(
+  () => Cur_hpt_list.value,
+  (v) => {
+    filterEvent();
+  }
+);
+watch(formData, (v) => {
+  filterEvent();
 });
 </script>
 <style lang="less">
@@ -614,6 +603,13 @@ watch(formData, async (v) => {
           .cust-check-box {
             margin-left: 14px;
           }
+          // 修改margin
+          .change-group {
+            margin-left: 72px;
+          }
+          .change-group2 {
+            margin-left: 10px;
+          }
           .all-hpt-btn {
             width: 63px;
             border: none;
@@ -634,8 +630,9 @@ watch(formData, async (v) => {
             margin-left: 12px;
             width: 50px;
             border-radius: 5px;
-            .t-input__wrap {
             height: 20px;
+            .t-input__wrap {
+              height: 100%;
               .t-input {
                 height: 100%;
                 border-radius: 5px;
@@ -658,54 +655,6 @@ watch(formData, async (v) => {
               color: #287eff;
             }
           }
-          .t-radio-group {
-            .t-radio-button {
-              border: none;
-              border-radius: 16px;
-              font-size: 12px;
-              width: 105px;
-              height: 24px;
-              .dja();
-              font-family: 'Regular';
-            }
-            .custom-value-type-1:nth-child(1) {
-              width: 63px;
-            }
-            .custom-value-type-1:nth-child(2) {
-              margin-left: 74px;
-            }
-            .custom-button:nth-child(1) {
-              width: 63px;
-            }
-
-            .t-is-checked {
-              background: var(--td--main-btn-color-1);
-              color: white;
-            }
-            .t-select__wrap {
-              width: 60px;
-              height: 28px;
-              margin-left: 12px;
-              .t-input__wrap {
-                height: 100%;
-                .t-input {
-                  height: 100%;
-                }
-              }
-              .t-input__inner {
-                text-align: center;
-              }
-            }
-          }
-          .last {
-            margin-left: 12px;
-          }
-          .custom-group-type-1 {
-            margin-left: -2px;
-          }
-          .custom-group-type-2 {
-            margin-left: 72px;
-          }
           .custom-form-item3 {
             display: flex;
             align-items: center;
@@ -753,10 +702,6 @@ watch(formData, async (v) => {
               }
             }
           }
-          .custom-group-type-3 {
-            margin-left: 10px;
-            margin-bottom: 6px;
-          }
           .pre-switch {
             width: 63px;
             background-color: var(--td--main-btn-color-1);
@@ -772,11 +717,6 @@ watch(formData, async (v) => {
           .t-radio-group__outline {
             flex-wrap: nowrap;
           }
-          .Medium {
-            .t-radio-button__label {
-              font-family: 'Medium';
-            }
-          }
         }
       }
     }

views/token/choseChain/index.less

@@ -14,7 +14,7 @@
   }
   .current-chain-text {
     font-weight: 700;
-    font-size: 13px;
+    font-size: 15px;
     user-select: none;
     font-family: 'bold';
   }
@@ -101,6 +101,10 @@
       font-size: 12px;
       white-space: nowrap;
       font-family: 'bold';
+      img {
+        width: 27px;
+        height: 27px;
+      }
     }
   }
 }

views/token/filterRadio.vue

+<template>
+  <div
+    class="custom-filter-radio-box"
+    :class="[parentclass, margin ? 'filter-radio-margin' : '']"
+  >
+    <button
+      class="filter-radio-button"
+      :class="{
+        'radio-button-active': item.value == currentBtn,
+      }"
+      v-for="item in options"
+      :key="item.value"
+      @click="btnChange(item)"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    options?: any[];
+    modelValue: string;
+    class?: string;
+    margin?: boolean;
+  }>(),
+  {
+    options: [],
+    class: '',
+    margin: false,
+  }
+);
+const emit = defineEmits(['update:modelValue', 'change']);
+const parentclass = ref(props.class);
+const currentBtn = ref(props.modelValue);
+const btnChange = (item: any) => {
+  if (item.value == currentBtn.value) {
+    currentBtn.value = '';
+  } else {
+    currentBtn.value = item.value;
+  }
+  // 请求接口
+  emit('update:modelValue', currentBtn.value);
+  emit('change', currentBtn.value);
+};
+</script>
+
+<style lang="less">
+@import '@/style/flex.less';
+.custom-filter-radio-box {
+  .da();
+  .filter-radio-button {
+    background: transparent;
+    border: none;
+    border-radius: 16px;
+    font-size: 12px;
+    width: 105px;
+    height: 24px;
+    line-height: 22px;
+    font-family: 'Regular';
+    cursor: pointer;
+    color: var(--td-Search-info-color-1);
+    .dja();
+    outline: none;
+    &:hover {
+      color: var(--td--main-btn-color-1);
+      transition: all 0.2s;
+    }
+  }
+  .radio-button-active {
+    background: var(--td--main-btn-color-1);
+    color: white;
+    font-weight: 500;
+    font-family: 'Medium';
+    &:hover {
+      background: var(--td--main-btn-color-1);
+      color: white;
+      transition: all 0.2s;
+    }
+  }
+}
+.filter-radio-margin {
+  & > :first-child {
+    width: 63px;
+  }
+  & > :nth-child(2) {
+    margin-left: 72px;
+  }
+}
+</style>

views/token/index.vue

@@ -2,16 +2,10 @@
   <MyLayout>
     <template #content>
       <div class="home-wrapper">
-        <div
-          class="token-page-wrapper narrow-scrollbar"
-          id="token-page-wrapper"
-        >
-          <div v-if="pageloading" class="scroll-Replacement"></div>
-          <template v-else>
+        <div class="token-page-wrapper">
           <ClientOnly>
             <RollToken></RollToken>
           </ClientOnly>
-          </template>
           <div>
             <TokenFilter></TokenFilter>
           </div>
@@ -46,8 +40,6 @@ const r24h = ref();
 const up = ref();
 const chain = useChain();
 const currentPath = ref('');
-// div是否隐藏
-const pageloading = ref(true);
 const getUa = () => {
   if (
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -61,7 +53,6 @@ onBeforeMount(() => {
   getUa();
 });
 onMounted(() => {
-  pageloading.value = false;
   currentPath.value = chain.value;
 });
 const RightInfo = useCurrentRightInfo();
@@ -89,9 +80,6 @@ const changeChain = (chain) => {
     width: calc(100vw - 368px);
     padding-right: 12px;
     box-sizing: border-box;
-    .scroll-Replacement {
-      height: 45px;
-    }
   }
 }
 </style>