1

composables/useToken.ts

@@ -2,6 +2,14 @@ import { useState } from '#app';
 import { DefaultChain } from '@/constants/UnifiedManagementChain';
 
 const tokenName = 'token';
+let filter = {
+  pool_column: 'wb',
+  nt: 0,
+  range_date: '5m',
+  rise_or_fall: 'up',
+  page: 1,
+  page_size: 100,
+};
 // 获取当前交易token
 export const useCurToken = () => {
   return useState(tokenName, () => 'bar');
@@ -14,16 +22,13 @@ export const useChain = () => {
 
 // 当前筛选条件
 export const useCurFilter = () => {
-  return useState('filterParams', () => ({
-    pool_column: 'wb',
-    nt: 0,
-    range_date: '5m',
-    date: '5m',
-    rise_or_fall: 'up',
-    page: 1,
-    page_size: 100,
-  }));
+  return useState('filterParams', () => filter);
 };
+// 当前时间筛选条件
+export const useCurrentTimeChange = () => {
+  return useState('CurrentTimeChange', () => '5m');
+};
+
 // 通知表格请求数据
 export const useChangeTable = () => {
   return useState('filterChange', () => 1);

constants/token.ts

+import i18n from '@/language/index';
+
 // 是否选择新链
 export const chooseChainBtns = [
   { label: 'ALL', value: '0' },
@@ -19,19 +21,19 @@ export const Time_price_range_options = [
   { label: '1D', value: '24h' },
 ];
 export const POOL_SIZE_OPTIONS = [
-  { label: '20-50', value: '20_50' },
-  { label: '50-100', value: '50_100' },
-  { label: '100-200', value: '100_200' },
-  { label: '200-500', value: '200_500' },
-  { label: '500-1000', value: '500_1000' },
+  { label: '20+', value: '20_max' },
+  { label: '50+', value: '50_max' },
+  { label: '100+', value: '100_max' },
+  { label: '200+', value: '200_max' },
+  { label: '500+', value: '500_max' },
   { label: '1000+', value: '1000_max' },
 ];
 export const POOL_SIZE_USD_OPTIONS = [
-  { label: '1-10K', value: '1000_10000' },
-  { label: '10-50K', value: '10000_50000' },
-  { label: '50-100K', value: '50000_100000' },
-  { label: '100-500K', value: '100000_500000' },
-  { label: '500K-1M', value: '500000_1000000' },
+  { label: '1K+', value: '1000_max' },
+  { label: '10K+', value: '10000_max' },
+  { label: '50K+', value: '50000_max' },
+  { label: '100K+', value: '100000_max' },
+  { label: '500K+', value: '500000_max' },
   { label: '1M+', value: '1000000_max' },
 ];
 
@@ -53,32 +55,43 @@ export const PRICE_RANGE_OPTIONS = [
 ];
 export const NEW_HOLDER_OPTIONS = [
   { label: 'ALL', value: '' },
-  { label: '0-100', value: '0_100' },
-  { label: '100-500', value: '100_500' },
-  { label: '500-1K', value: '500_1000' },
-  { label: '1-5K', value: '1000_5000' },
-  { label: '5-10K', value: '5000_10000' },
+  { label: '50+', value: '50_max' },
+  { label: '100+', value: '100_max' },
+  { label: '500+', value: '500_max' },
+  { label: '1K+', value: '1000_max' },
+  { label: '5K+', value: '5000_max' },
   { label: '10K+', value: '10000_max' },
 ];
 export const VOLUME_OPTIONS = [
   { label: 'ALL', value: '' },
-  { label: '0-100K', value: '0_100000' },
-  { label: '100-500K', value: '100000_500000' },
-  { label: '500K-1M', value: '500000_1000000' },
-  { label: '1-5M', value: '1000000_5000000' },
-  { label: '5-10M', value: '5000000_10000000' },
+  { label: '50K+', value: '50000_max' },
+  { label: '100K+', value: '100000_max' },
+  { label: '500K+', value: '500000_max' },
+  { label: '1M+', value: '1000000_max' },
+  { label: '5M+', value: '5000000_max' },
   { label: '10M+', value: '10000000_max' },
 ];
 
 export const TXNS_OPTIONS = [
   { label: 'ALL', value: '' },
-  { label: '0-100', value: '0_100' },
-  { label: '100-500', value: '100_500' },
-  { label: '500-1K', value: '500_1000' },
-  { label: '1-5K', value: '1000_5000' },
-  { label: '5-10K', value: '5000_10000' },
+  { label: '50+', value: '50_max' },
+  { label: '100+', value: '100_max' },
+  { label: '500+', value: '500_max' },
+  { label: '1K+', value: '1000_max' },
+  { label: '5K+', value: '5000_max' },
   { label: '10K+', value: '10000_max' },
 ];
+// 是否貔貅
+export const IS_HPT_LIST = [
+  {
+    label: 'Yes',
+    value: 'yes',
+  },
+  {
+    label: 'No',
+    value: 'no',
+  },
+];
 
 export const SOCIAL_OPTIONS = {
   telegram: {

language/cn.ts

@@ -36,6 +36,14 @@ const cn = {
     Collection: '收藏',
     asc: '升序排列',
     desc: '降序排列',
+    ContractDetection: '合约检测',
+    Honeypot: '是否貔貅',
+    OpenSource: '是否开源',
+    TradingSwitch: '交易开关',
+    AgencyContract: '是否代理',
+    ModifySlippage: '修改滑点',
+    StopTrading: '暂停交易',
+    noList: '暂无数据',
   },
   login: {
     h1: '区块链监控专家',

language/en.ts

@@ -37,6 +37,14 @@ const cn = {
     Collection: 'Collection',
     asc: 'Ascending order',
     desc: 'Descending order',
+    ContractDetection: 'Contract detection',
+    Honeypot: 'Honeypot',
+    OpenSource: 'Open Source',
+    TradingSwitch: 'Trading Switch',
+    AgencyContract: 'Agency Contract',
+    ModifySlippage: 'Modify Slippage',
+    StopTrading: 'Stop Trading',
+    noList: 'No data',
   },
   login: {
     h1: 'On-chain intelligent screening',

utils/request.ts

@@ -66,7 +66,15 @@ instance.interceptors.response.use(
   },
   (err) => {
     const { config } = err;
-    const { code, message: msg } = err.response.data;
+    // 只有在生产环境才执行reload
+    if (!process.dev && 'response' in err) {
+      const { status } = err.response;
+      if (status == 503) {
+        location.reload();
+        return;
+      }
+    }
+    const { message: msg } = err.response.data;
     MessagePlugin.closeAll();
     MessagePlugin.error(msg || '请求错误');
     if (!config || !config.retry) return Promise.reject(err);

views/CustomComponent/CheckBox/index.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;
+  }
+}

views/CustomComponent/CheckBox/index.tsx

+import { defineComponent } from 'vue';
+import './index.less';
+export default defineComponent({
+  props: {
+    modelValue: Object as any,
+    options: Object as any,
+    class: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    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;
+    };
+    return () => (
+      <div class={['custom-check-box', props.class]}>
+        {props.options.map((item: any) => (
+          <button
+            class={[
+              'check-box-button',
+              isSelected(item.value) ? 'check-box-active' : '',
+            ]}
+            onClick={ChoseCurBtn.bind(this, item.value)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    );
+  },
+});

views/layout/ScrollTest.vue

+<template>
+  <div class=""></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less"></style>

views/layout/Search.vue

@@ -362,7 +362,7 @@ const goDetail = (row) => {
   };
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/variables.less';
 @import '@/style/flex.less';
 .header-menu-search {
@@ -394,7 +394,7 @@ const goDetail = (row) => {
   }
   .header-search {
     margin-left: 20px;
-    :deep(.t-input) {
+    .t-input {
       border: none;
       outline: none;
       box-shadow: none;
@@ -416,14 +416,14 @@ const goDetail = (row) => {
     }
   }
   // 2
-  :deep(.t-drawer__header) {
+  .t-drawer__header {
     padding: 0 !important;
     flex-direction: column;
   }
 
   .t-drawer {
     .header-search2 {
-      :deep(.t-input) {
+      .t-input {
         height: 50px;
         border: none;
         outline: none;
@@ -445,7 +445,7 @@ const goDetail = (row) => {
     .t-tabs {
       width: 100%;
     }
-    :deep(.t-drawer__content-wrapper) {
+    .t-drawer__content-wrapper {
       margin-top: 64px !important;
       width: 50vw;
       height: calc(100vh - 128px) !important;

views/layout/rollToken.vue

@@ -48,12 +48,14 @@
         </div>
       </div>
     </div>
+    <ScrollTest></ScrollTest>
   </div>
 </template>
 
 <script lang="ts" setup>
 import request from '@/utils/request';
 import { publicTokenImg } from '@/constants/UnifiedManagementChain';
+import ScrollTest from './ScrollTest.vue';
 const ScrollList = reactive({
   list: [],
 });
@@ -99,7 +101,7 @@ const getPublicToken = async () => {
       list.push(Obj);
     });
     animationSpeed.value = `${
-      list.length * 2
+      list.length * 2.4
     }s scroll-token-box linear infinite normal`;
     ScrollList.list = list;
   } catch (e) {
@@ -194,7 +196,6 @@ const leaveAn = () => {
   100% {
     -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
-    display: none;
   }
 }
 </style>

views/token/CustomTokenList.vue

@@ -11,7 +11,11 @@
       }"
     >
       <div class="custom-affixed-header-elm-wrap">
-        <table>
+        <table
+          :style="{
+            minWidth: affixedTableWidth,
+          }"
+        >
           <colgroup>
             <template v-for="(item, index) in colGroupList.list" :key="index">
               <col
@@ -161,11 +165,18 @@
               </JumpOther>
             </td>
           </tr>
+          <template v-if="!resultData.list.length">
+            <tr>
+              <td colspan="12">
+                <div class="custom-no-list">{{ $t('filter.noList') }}</div>
+              </td>
+            </tr>
+          </template>
         </tbody>
-      </table>
         <template v-if="loading">
           <Animation></Animation>
         </template>
+      </table>
     </div>
     <div class="page-footer">
       <CustPagination
@@ -209,8 +220,10 @@ const { t } = useI18n();
 const HeadTokenType = useTableHeadToken();
 // 筛选条件
 const GlbFilter = useCurFilter();
+const CurrentTime = useCurrentTimeChange();
 // 吸顶元素
 const affixedHeadRef = ref(null);
+const affixedTableWidth = ref('');
 const ChainObj = ref();
 // 当前选中的行数
 const CurLineIndex = ref(0);
@@ -233,7 +246,6 @@ const colGroupList = reactive({
 });
 // 右侧数据
 const RightInfo = useCurrentRightInfo();
-const isFirst = ref(true);
 // 新接口当前参数
 const NewParams = ref({});
 // 吸顶表头左右跟随滑动
@@ -334,26 +346,32 @@ const submitSort = ({ sort, field }: any) => {
     resultData.list = JSON.parse(JSON.stringify(resultData.filterList));
   }
 };
+// 获取head的宽度赋给吸顶表头
+const getMinWidth = () => {
+  if (CustomHead.value) {
+    affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
+  }
+};
 const filterChange = (value: number, txn: string) => {
   pageNum.value = 1;
   currentRequestType.value = value;
   if (value == 1) {
-    // 旧接口
-    getTableList();
-  } else {
-    NewParams.value = JSON.parse(JSON.stringify({}));
     if (txn == 'txn') {
-      NewParams.value.date_orderby = txn;
-      NewParams.value.sort = 'desc';
+      GlbFilter.value.date_orderby = 'txn';
+      GlbFilter.value.sort = 'desc';
     } else if (txn == 'max-up') {
       // 最大涨幅
-      NewParams.value.date_orderby = 'radio';
-      NewParams.value.sort = 'desc';
+      GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+      GlbFilter.value.sort = 'desc';
     } else if (txn == 'max-down') {
       // 最大跌幅
-      NewParams.value.date_orderby = 'radio';
-      NewParams.value.sort = 'asc';
+      GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
+      GlbFilter.value.sort = 'asc';
     }
+    // 旧接口
+    getTableList();
+  } else {
+    NewParams.value = JSON.parse(JSON.stringify({}));
     getNewTableList();
   }
 };
@@ -381,12 +399,26 @@ const TableFilter = (result: any) => {
   } else {
     resultData.list = [];
   }
+  if (process.client) {
+    getMinWidth();
+  }
+};
+const getParams = () => {
+  let params: any = {
+    ...GlbFilter.value,
+  };
+  if (CurrentTime.value) {
+    params.date = CurrentTime.value;
+  } else if ('date' in params) {
+    delete params.date;
+  }
+  return params;
 };
 // 预取数据
-const { data, refresh } = await useLazyFetch(
+const { data, refresh } = await useFetch(
   () => `http://156.247.9.93:9501/v1${chain.value}/index`,
   {
-    params: GlbFilter.value,
+    params: getParams(),
     onResponse({ request, response, options }) {
       try {
         loading.value = false;
@@ -410,7 +442,7 @@ const next = () => {
 };
 // 获取默认数据
 const getDefaultList = () => {
-  if (process.client) {
+  if (process.client && data.value) {
     TableFilter(data.value.data);
   }
 };
@@ -445,32 +477,26 @@ useHead({
     },
   ],
 });
+
 // 获取colgroup的宽度
 const getColGroupWidth = () => {
+  getMinWidth();
   // 动态改变吸顶表头的th宽度
   colGroupList.list.forEach((it: any) => {
     tableTrOne.value.forEach((item: any, index: number) => {
       colGroupList.list[index] = item.clientWidth + 'px';
     });
   });
-  console.log(colGroupList.list);
 };
 // 默认接口
 const getTableList = async () => {
   try {
     loading.value = true;
     let result: any = await request.get(`/v1${chain.value}/index`, {
-      params: GlbFilter.value,
+      params: getParams(),
     });
     if (result.list.length) {
       TableFilter(result);
-      if (isFirst.value) {
-        // 通知右侧请求接口
-        RightInfo.value.token = result.list[0].token;
-        RightInfo.value.tb = result.list[0].tbname;
-        RightInfo.value.r24h = result.list[0].r24h + '';
-        isFirst.value = false;
-      }
     }
     loading.value = false;
   } catch (e) {
@@ -539,7 +565,8 @@ const handleRowClick = (item: any, index: number) => {
   // 提交到右侧
   RightInfo.value.token = item.token;
   RightInfo.value.tb = item.tbname;
-  RightInfo.value.r24h = item.r24h.toString();
+  RightInfo.value.r24h = item.r24h;
+  RightInfo.value.up = item.up;
 };
 // 监听是否切出页面
 const listenerWindow = (fn: any) => {
@@ -633,6 +660,8 @@ onMounted(() => {
     window.onresize = function (e: any) {
       getTableWidth();
       getColGroupWidth();
+      // 修改吸顶表头宽度
+      getMinWidth();
     };
     // 开启屏幕监听
     listenerWindow(windowOpenFn);
@@ -645,6 +674,7 @@ onMounted(() => {
       RightInfo.value.token = resultData.list[0].token;
       RightInfo.value.tb = resultData.list[0].tbname;
       RightInfo.value.r24h = resultData.list[0].r24h;
+      RightInfo.value.up = resultData.list[0].up;
     }
     loading.value = false;
     // 获取th的个数并修改ColGroupList
@@ -652,8 +682,12 @@ onMounted(() => {
   });
 });
 onUnmounted(() => {
+  if (BodyscrollDom.value) {
     BodyscrollDom.value.onscroll = null;
+  }
+  if (CustomTable.value) {
     CustomTable.value.onscroll = null;
+  }
   if (process.client) {
     window.onresize = null;
   }
@@ -781,7 +815,7 @@ for (let i = 0; i < arr1.length; i++) {
   padding: 1px;
   .custom-affixed-head {
     position: fixed;
-    z-index: 100;
+    z-index: 200;
     height: 90px;
     overflow-y: auto;
     -ms-overflow-style: none;
@@ -793,15 +827,12 @@ for (let i = 0; i < arr1.length; i++) {
       width: 100%;
       position: absolute;
       top: 0;
-      z-index: 100;
+      z-index: 200;
       table {
-        z-index: 100;
         border-spacing: 0;
         border-width: 1px 0px 0px 1px;
-        border-collapse: collapse;
-        width: 100%;
+        table-layout: fixed;
         color: #909399;
-        min-width: 1000px;
         thead {
           tr {
             th {
@@ -864,7 +895,6 @@ for (let i = 0; i < arr1.length; i++) {
     .filter-table-home {
       border-spacing: 0;
       border-width: 1px 0px 0px 1px;
-      border-collapse: collapse;
       width: 100%;
       color: #909399;
       min-width: 1000px;
@@ -933,6 +963,11 @@ for (let i = 0; i < arr1.length; i++) {
             background: var(--new-background-5);
             font-family: 'Regular';
             padding: 10px 12px;
+            .custom-no-list {
+              .dja();
+              height: 160px;
+              font-size: 16px;
+            }
           }
           .fs {
             font-weight: 500;

views/token/FilterBtn/index.tsx

@@ -23,16 +23,26 @@ export default defineComponent({
         {
           label: t('filter.gainers'),
           value: 'max-up',
-          type: 2,
+          type: 1,
         },
         {
           label: t('filter.losers'),
           value: 'max-down',
-          type: 2,
+          type: 1,
         },
         {
           label: t('filter.r24hVolume'),
           value: 'txn',
+          type: 1,
+        },
+        {
+          label: 'Coingecko',
+          value: 'Coingecko',
+          type: 2,
+        },
+        {
+          label: 'Coinmarketcap',
+          value: 'Coinmarketcap',
           type: 2,
         },
       ];

views/token/FilterTips.vue

 <template>
   <div class="Advertisement-box">
     <ClientOnly>
-      <div class="custom-home-swiper">
-        <t-swiper
-          class="tdesign-demo-block--swiper"
-          :duration="300"
-          :interval="2000"
+      <div
+        :class="{
+          'custom-home-swiper-card': swiperType != 'default',
+          'custom-home-swiper-default': swiperType == 'default',
+        }"
       >
+        <t-swiper :duration="300" :interval="50000" :type="swiperType">
           <t-swiper-item v-for="item in picList.list" :key="item">
             <img
               :src="item.picture_link"
@@ -22,6 +23,8 @@
 </template>
 
 <script lang="ts" setup>
+import request from '@/utils/request';
+const swiperType = ref('default');
 const picList = reactive({
   list: [],
 });
@@ -34,11 +37,25 @@ const getPicList = async () => {
   try {
     let res: any = await request.get('/v1/picture');
     picList.list = res;
+    if (picList.list.length == 1) {
+      picList.list = picList.list.concat(picList.list);
+      picList.list = picList.list.concat(picList.list);
+    }
   } catch (e) {
     console.log(e);
   }
 };
-onBeforeMount(() => {
+const WatchWindow = () => {
+  let windowDom = document.documentElement.clientWidth;
+  if (windowDom > 1955) {
+    // 使用卡片模式
+    swiperType.value = 'card';
+  }
+};
+onMounted(() => {
+  if (process.client) {
+    WatchWindow();
+  }
   getPicList();
 });
 </script>
@@ -50,16 +67,40 @@ onBeforeMount(() => {
   padding-left: 6px;
   .dj();
   box-sizing: border-box;
-  .custom-home-swiper {
+  .custom-home-swiper-card {
+    width: 100%;
+    height: 100%;
     .t-swiper {
       height: 100%;
       width: 100%;
       .img {
-        height: 305px;
-        max-width: 100%;
-        min-width: 500px;
+        height: 349px;
+        max-width: 500px;
+        border-radius: 12px;
+        cursor: pointer;
+      }
+      .t-swiper__arrow {
+        & > * {
+          border-radius: 50%;
+          border: 2px solid white;
+          .t-icon {
+            color: #287eff;
+          }
+        }
+      }
+    }
+  }
+  .custom-home-swiper-default {
+    .t-swiper {
+      max-width: 600px;
+      .t-swiper__container__item {
+        img {
           border-radius: 12px;
           cursor: pointer;
+          height: 349px;
+          max-width: 100%;
+          min-width: 500px;
+        }
       }
       .t-swiper__arrow {
         & > * {

views/token/RightDetail.vue

@@ -109,7 +109,7 @@
 </template>
 <script setup lang="ts">
 import request from '@/utils/request';
-import { parsePercent } from '@/utils/tool';
+import { parsePercent, parseCoinAmount } from '@/utils/tool';
 import TimeTab from './TimeTab.vue';
 import SecurityCheck from './SecurityCheck.vue';
 import TokenInfo from './TokenInfo.vue';
@@ -150,8 +150,9 @@ const props = defineProps({
   scene: String,
   tb: String,
   currentPath: String,
-  r24h: String,
+  r24h: Number,
   mt: String,
+  up: Number,
 });
 const emit = defineEmits(['update:setPool', 'SettwitterRul']);
 const r24h = ref('');
@@ -179,15 +180,27 @@ const tokenInfo: any = ref({
   pool: [],
 });
 watch(
-  () => props.r24h,
+  () => props.tb,
   (v) => {
     if (v) {
-      if (v[0] !== '-') {
-        numR24h.value = '+' + parseFloat(props.r24h).toFixed(3);
+      const { up, r24h: proR24h } = props;
+      if ((proR24h + '')[0] == '-') {
+        // -，跌
+        let newR24h = parseFloat((proR24h + '').replace('-', ''));
+        // 原价
+        let oldPrice = props.up / (1 - newR24h);
+        numR24h.value = oldPrice - props.up;
+        numR24h.value = '-' + parseCoinAmount(numR24h.value);
+      } else if (proR24h == 0) {
+        numR24h.value = '+0';
       } else {
-        numR24h.value = parseFloat(props.r24h).toFixed(3);
+        // +,涨
+        // 原价
+        let oldPrice = props.up / (proR24h + 1);
+        numR24h.value = props.up - oldPrice;
+        numR24h.value = '+' + parseCoinAmount(numR24h.value);
       }
-      r24h.value = parsePercent(parseFloat(v));
+      r24h.value = parsePercent(proR24h + '');
       if (r24h.value[0] !== '-') {
         r24h.value = '+' + r24h.value;
       }

views/token/SmartAlerts.vue

@@ -321,6 +321,7 @@ const closeDialog = () => {
       width: 100%;
       .header-box {
         padding: 0 12px;
+        width: 100%;
         .icon {
           float: right;
           cursor: pointer;
@@ -381,11 +382,24 @@ const closeDialog = () => {
           min-height: 40px;
           .da();
         }
+
         .chain-select-box {
           .da();
           .icon {
             cursor: pointer;
           }
+          .t-select__wrap {
+            width: 140px;
+            .t-input__wrap {
+              width: 100% !important;
+            }
+            .t-input__prefix {
+              img {
+                width: 25px;
+                height: 25px;
+              }
+            }
+          }
         }
         .time-select-box,
         .price-range-select-box {
@@ -397,6 +411,18 @@ const closeDialog = () => {
           .t-input__inner {
             text-align: center;
           }
+          .t-select__wrap {
+            width: 140px;
+            .t-input__wrap {
+              width: 100% !important;
+            }
+            .t-input__prefix {
+              img {
+                width: 25px;
+                height: 25px;
+              }
+            }
+          }
         }
         .price-range-select-box {
           .t-input__wrap {

views/token/TokenFilter.vue

@@ -218,6 +218,47 @@
             </t-radio-group>
           </div>
         </div>
+        <!-- hpt -->
+        <div class="custom-form-item">
+          <div class="title">
+            <t-tooltip :content="$t('tips.VolumeValue')" placement="left-top">
+              <QuestionSvg></QuestionSvg>
+            </t-tooltip>
+            {{ $t('filter.ContractDetection') }}：
+          </div>
+          <div class="value">
+            <t-button
+              class="all-hpt-btn"
+              :class="{
+                active: formData.isHptall,
+              }"
+              >ALL</t-button
+            >
+            <ClientOnly
+              ><t-select
+                class="custom-select-home-range"
+                v-model="formData.iSHpt"
+                :popup-props="{ overlayClassName: 'select_home_range_box' }"
+              >
+                <t-option
+                  v-for="item in IS_HPT_LIST"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                >
+                  <div class="item-box">
+                    <div>{{ item.label }}</div>
+                  </div>
+                </t-option>
+              </t-select>
+            </ClientOnly>
+            <CustomCheckBox
+              class="cust-check-box"
+              :options="ContractDetection"
+              v-model="Cur_hpt_list"
+            ></CustomCheckBox>
+          </div>
+        </div>
       </div>
     </div>
     <FilterTips></FilterTips>
@@ -233,6 +274,7 @@ import {
   VOLUME_OPTIONS,
   TXNS_OPTIONS,
   Time_price_range_options,
+  IS_HPT_LIST,
 } from '@/constants/token';
 import {
   chain_options,
@@ -247,6 +289,7 @@ 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';
 const { t } = useI18n();
 // 当前链
 const chain = useChain();
@@ -265,7 +308,39 @@ const formData = reactive({
   txns: '',
   priceRangeTime: '5m',
   isNewchain: '0',
+  iSHpt: 'yes',
+  // 是否选择hpt的all
+  isHptall: true,
 });
+// 貔貅筛选--当前选中的列表
+const Cur_hpt_list = ref([]);
+const ContractDetection = computed(() => [
+  {
+    label: t('filter.Honeypot'),
+    value: '1',
+  },
+  {
+    label: t('filter.OpenSource'),
+    value: '2',
+  },
+  {
+    label: t('filter.TradingSwitch'),
+    value: '3',
+  },
+  {
+    label: t('filter.AgencyContract'),
+    value: '4',
+  },
+  {
+    label: t('filter.ModifySlippage'),
+    value: '5',
+  },
+  {
+    label: t('filter.StopTrading'),
+    value: '6',
+  },
+]);
+
 // 当前链整个对象数据
 const ChainObj = ref();
 if (route.params.chain) {
@@ -311,6 +386,7 @@ const PoolSize = ref(SwitchCurrency(chain.value));
 
 // 筛选条件
 const GlbFilter = useCurFilter();
+const CurrentTime = useCurrentTimeChange();
 // 通知表格变化
 const ChangeTable = useChangeTable();
 
@@ -336,61 +412,50 @@ const SwitchChange = (v: any) => {
 };
 
 // 条件过滤方法
-const filterFn = () => {
-  let params: any = {
-    pool_column: formData.isWbnb ? 'wb' : 'ub',
-    nt: parseInt(formData.isNewchain),
-    range_date: formData.priceRangeTime,
-  };
-  if (formData.date) {
-    params.date = formData.date;
-  }
+const filterFn = async () => {
+  GlbFilter.value.pool_column = formData.isWbnb ? 'wb' : 'ub';
+  GlbFilter.value.nt = parseInt(formData.isNewchain);
+  GlbFilter.value.range_date = formData.priceRangeTime;
   if (formData.poolSize) {
-    params.pool_range = formData.poolSize;
+    GlbFilter.value.pool_range = formData.poolSize;
   }
   // 加
   if (formData.isRise) {
     if (formData.range) {
-      params.rise_or_fall = 'up';
-      params.range = formData.range;
-    } else {
-      params.rise_or_fall = 'up';
+      GlbFilter.value.range = formData.range;
     }
+    GlbFilter.value.rise_or_fall = 'up';
   } else {
     // 减
     if (formData.range) {
-      params.rise_or_fall = 'down';
-      params.range = formData.range;
-    } else {
-      params.rise_or_fall = 'down';
+      GlbFilter.value.range = formData.range;
     }
+    GlbFilter.value.rise_or_fall = 'down';
   }
   if (formData.newHolder) {
-    params.new_holder = formData.newHolder;
+    GlbFilter.value.new_holder = formData.newHolder;
   }
   if (formData.volume) {
-    params.volume = formData.volume;
+    GlbFilter.value.volume = formData.volume;
   }
   if (formData.txns) {
-    params.txn = formData.txns;
+    GlbFilter.value.txn = formData.txns;
   }
-  return params;
 };
 
-watch(formData, (v) => {
-  let params = filterFn();
+watch(formData, async (v) => {
+  await filterFn();
   // 筛选条件改变，永远请求第一页
-  params.page = 1;
-  params.page_size = 100;
-  if (Object.keys(params).length) {
-    // 提交全局筛选条件
-    GlbFilter.value = params;
+  GlbFilter.value.page = 1;
+  GlbFilter.value.page_size = 100;
   // 还要通知list页面请求数据
   ChangeTable.value += 1;
+
+  // 这里date有问题，换个方式
+  CurrentTime.value = formData.date;
   router.push({
     path: `/${ChainObj.value.name}/1`,
   });
-  }
 });
 </script>
 <style lang="less">
@@ -544,13 +609,61 @@ watch(formData, (v) => {
           }
         }
         .value {
+          height: 100%;
           .da();
+          .cust-check-box {
+            margin-left: 14px;
+          }
+          .all-hpt-btn {
+            width: 63px;
+            border: none;
+            border-radius: 16px;
+            font-size: 12px;
+            height: 24px;
+            .dja();
+            font-family: 'Regular';
+            background: none;
+            color: var(--td-Search-info-color-1);
+            margin-left: -2px;
+          }
+          .active {
+            background: var(--td--main-btn-color-1);
+            color: white;
+          }
+          .custom-select-home-range {
+            margin-left: 12px;
+            width: 50px;
+            border-radius: 5px;
+            .t-input__wrap {
+              height: 20px;
+              .t-input {
+                height: 100%;
+                border-radius: 5px;
+                margin: 0;
+                padding: 0 2px;
+                border: 1px solid #287eff;
+                filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
+              }
+            }
+
+            .t-input__suffix {
+              margin-left: 0;
+              .t-fake-arrow {
+                color: #287eff;
+              }
+            }
+            .t-input__inner {
+              font-size: 12px;
+              text-align: center;
+              color: #287eff;
+            }
+          }
           .t-radio-group {
             .t-radio-button {
               border: none;
               border-radius: 16px;
               font-size: 12px;
-              width: 90px;
+              width: 105px;
               height: 24px;
               .dja();
               font-family: 'Regular';
@@ -584,6 +697,9 @@ watch(formData, (v) => {
               }
             }
           }
+          .last {
+            margin-left: 12px;
+          }
           .custom-group-type-1 {
             margin-left: -2px;
           }
@@ -597,31 +713,49 @@ watch(formData, (v) => {
               background-color: var(--td--main-btn-color-1);
               width: 63px;
               .t-switch__content {
-                padding-left: 20px;
+                width: 100%;
+                padding: 0;
+                .dja();
               }
-              .t-size-l {
-                text-align: center;
+            }
+            .pre-switch2.t-is-checked {
+              .t-switch__content {
+                padding-right: 12px;
               }
             }
             .custom-select-home-range {
               margin-left: 12px;
               width: 50px;
               border-radius: 5px;
+              .t-input__wrap {
+                height: 20px;
                 .t-input {
                   border-radius: 5px;
                   margin: 0;
                   padding: 0 2px;
+                  border: 1px solid #287eff;
+                  height: 100%;
+                  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
+                }
               }
+
               .t-input__suffix {
                 margin-left: 0;
+                .t-fake-arrow {
+                  color: #287eff;
+                }
               }
               .t-input__inner {
+                text-align: center;
+                color: #287eff;
+                font-weight: 500;
                 font-size: 12px;
               }
             }
-            .custom-group-type-3 {
-              margin-left: 20px;
           }
+          .custom-group-type-3 {
+            margin-left: 10px;
+            margin-bottom: 6px;
           }
           .pre-switch {
             width: 63px;
@@ -630,6 +764,11 @@ watch(formData, (v) => {
               font-family: 'Regular';
             }
           }
+          .t-is-checked {
+            .t-switch__content {
+              padding-left: 5px;
+            }
+          }
           .t-radio-group__outline {
             flex-wrap: nowrap;
           }

views/token/index.vue

@@ -22,6 +22,7 @@
           :tb="TbName"
           :currentPath="currentPath"
           :r24h="r24h"
+          :up="up"
           @changeChain="changeChain"
         ></RightDetail>
       </div>
@@ -42,6 +43,7 @@ const route = useRoute();
 const token = ref();
 const TbName = ref();
 const r24h = ref();
+const up = ref();
 const chain = useChain();
 const currentPath = ref('');
 // div是否隐藏
@@ -67,6 +69,7 @@ watch(RightInfo.value, (v) => {
   token.value = v.token;
   TbName.value = v.tb;
   r24h.value = v.r24h;
+  up.value = v.up;
 });
 const changeChain = (chain) => {
   currentPath.value = chain;

views/token/rightDetailHeader/index.less

@@ -72,12 +72,10 @@
       }
     }
     .token-price-cl {
-      .da();
+      flex: 1;
       .left-info {
-        width: 70%;
         font-size: 16px;
         color: var(--td-text-color-secondary);
-        display: flex;
         white-space: nowrap;
         .price {
           font-size: 16px;