1

7c606977 · lei · d0ad903e · 7c606977 · 7c606977 · 7c606977
Commit 7c606977 authored Feb 23, 2023 by lei
12 changed files
--- a/app.vue
+++ b/app.vue
 <template>
  <NuxtPage></NuxtPage>
 </template>
+<script lang="ts" setup>
+// window.devicePixelRatio--系统缩放比例
+</script>
 <style>
-@import '@/style/reset.css';
+@import "@/style/reset.css";
-@import 'tdesign-vue-next/es/style/index.css';
+@import "tdesign-vue-next/es/style/index.css";
 </style>
--- a/public/images/svg/collection/asc.svg
+++ b/public/images/svg/collection/asc.svg
 <svg width="12" height="8" viewBox="0 0 12 8" fill="" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.19212 0.732744C5.51188 0.350785 6.0992 0.350784 6.41896 0.732743L10.9846 6.18647C11.4205 6.7072 11.0503 7.5 10.3712 7.5H1.23991C0.560795 7.5 0.190556 6.7072 0.626488 6.18647L5.19212 0.732744Z" fill=""/>
+<path d="M0.228243 6.46246L5.36518 0.312312C5.71065 -0.104105 6.31146 -0.104105 6.64191 0.312312L11.7788 6.46246C12.2745 7.05505 11.884 8 11.133 8L0.859095 8C0.123101 8 -0.282447 7.05505 0.228243 6.46246Z" fill=""/>
-    </svg>
+</svg>
\ No newline at end of file
--- a/public/images/svg/collection/desc.svg
+++ b/public/images/svg/collection/desc.svg
 <svg width="12" height="8" viewBox="0 0 12 8" fill="" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.86355 7.26726C6.54379 7.64922 5.95646 7.64922 5.6367 7.26726L1.07107 1.81353C0.635141 1.2928 1.00538 0.5 1.68449 0.5L10.8158 0.5C11.4949 0.5 11.8651 1.2928 11.4292 1.81353L6.86355 7.26726Z" fill=""/>
+<path d="M11.7718 1.53754L6.63482 7.68769C6.28935 8.1041 5.68854 8.1041 5.35809 7.68769L0.221155 1.53754C-0.274515 0.944945 0.116012 0 0.867027 0H11.1409C11.8769 0 12.2824 0.944945 11.7718 1.53754Z" fill=""/>
-    </svg>
+</svg>
\ No newline at end of file
--- a/style/layout.less
+++ b/style/layout.less
-@import './variables.less';
+@import "./variables.less";
 // layout rewrite
 .t-layout__sider {
@@ -59,7 +59,6 @@
    background-color: @brand-color;
    .s-header {
-      // width: 1280px;
      .t-menu {
        background-color: @brand-color;
        color: #fff;
@@ -107,7 +106,7 @@
          font-weight: 500;
          &::after {
-            content: '';
+            content: "";
            position: absolute;
            bottom: 0px;
            height: 2px;

--- a/style/reset.css
+++ b/style/reset.css
-@import './default.css';
+@import "./default.css";
-@import './ui.css';
+@import "./ui.css";
 body {
  padding: 0;
  margin: 0;
 }
+html {
+  font-size: 14px;
+}
+@media screen and (max-width: 1550px) {
+  #__nuxt {
+    height: 100vh;
+  }
+  .t-layout {
+    zoom: 0.8;
+    height: 100%;
+  }
+  .t-layout .t-layout__content {
+    height: calc(100vh - 70px);
+  }
+  .home-wrapper {
+    width: 100% !important;
+  }
+  .token-page-wrapper {
+    flex: 1;
+  }
+  .filter-block-wrapper {
+    /* transform: scale(0.8);
+    transform-origin: 0 0;
+    height: 290px; */
+  }
+  /* 右侧 */
+  .home-wrapper .right-detail-wrapper {
+    /* transform: scale(0.8);
+    transform-origin: 0 0; */
+    width: 320px !important;
+    height: calc((100vh - 70px) * 1.25);
+    flex: none;
+  }
+  .right-detail-wrapper .details-title-box {
+    height: calc(100% - 40px);
+    display: flex;
+    flex-direction: column;
+  }
+  .right-body-scroll {
+    flex: 1;
+  }
+  .right-body-scroll .right-body {
+  }
+}
--- a/views/layout/Header.vue
+++ b/views/layout/Header.vue
@@ -29,20 +29,20 @@
 </template>
 <script setup lang="ts">
-import LoginDropdown from './LoginDropdown.vue';
+import LoginDropdown from "./LoginDropdown.vue";
-import Foxwallet from './Foxwallet.vue';
+import Foxwallet from "./Foxwallet.vue";
-import Search from './Search.vue';
+import Search from "./Search.vue";
-import HomeLogo from '/public/images/svg/header/homeLogoLight.svg';
+import HomeLogo from "/public/images/svg/header/homeLogoLight.svg";
-import HomeLogo2 from '/public/images/svg/header/homeLogoDark.svg';
+import HomeLogo2 from "/public/images/svg/header/homeLogoDark.svg";
-import { tgUrl } from '@/utils/open';
+import { tgUrl } from "@/utils/open";
 const mode = useCurTheme();
 const route = useRoute();
 </script>
 <style lang="less">
-@import '../style/flex.less';
+@import "../style/flex.less";
 .s-header {
  height: 100%;
-  border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
+  border-bottom: var(--new-border-2);
  background: var(--td--right-back-color-2);
  .t-menu {
    background: var(--td--right-back-color-2);
@@ -59,7 +59,7 @@ const route = useRoute();
    text-decoration: none;
    span {
      padding-left: 10px;
-      font-family: 'Medium';
+      font-family: "Medium";
    }
  }
  :hover .home-logo {

--- a/views/layout/layout.vue
+++ b/views/layout/layout.vue
@@ -17,11 +17,19 @@
 </template>
 <script lang="ts" setup>
-import Header from './Header.vue';
+import Header from "./Header.vue";
-import Footer from './Footer.vue';
+import Footer from "./Footer.vue";
 const route = useRoute();
 </script>
 <style lang="less">
-@import '@/style/layout.less';
+@import "@/style/layout.less";
+// @media screen and (max-width: 1550px) {
+//   .t-layout {
+//     transform: scale(0.9);
+//     width: 100%;
+//     height: 100%;
+//     transform-origin: 0 0;
+//   }
+// }
 </style>
--- a/views/token/RightDetail.vue
+++ b/views/token/RightDetail.vue
@@ -46,7 +46,7 @@
            :currentPath="currentPath"
            :chat="tokenInfo.chat"
          ></token-social-list>
-          <submit-social-info></submit-social-info>
+          <!-- <submit-social-info></submit-social-info> -->
          <t-tabs
            class="info-tabs"
            v-model="currentTab"
@@ -91,7 +91,7 @@
    </div>
    <template v-if="CollectionOnload">
      <div v-show="defaBtn == 'collection'">
-        <Collection></Collection>
+        <!-- <Collection></Collection> -->
      </div>
    </template>
    <template v-if="ifDetails">
@@ -108,23 +108,23 @@
  </div>
 </template>
 <script setup lang="tsx">
-import request from '@/utils/request';
+import request from "@/utils/request";
-import { parsePercent, parseCoinAmount } from '@/utils/tool';
+import { parsePercent, parseCoinAmount } from "@/utils/tool";
-import TimeTab from './TimeTab.vue';
+import TimeTab from "./TimeTab.vue";
-import SecurityCheck from './SecurityCheck.vue';
+import SecurityCheck from "./SecurityCheck.vue";
-import TokenInfo from './TokenInfo.vue';
+import TokenInfo from "./TokenInfo.vue";
-import TokenPool from './TokenPool.vue';
+import TokenPool from "./TokenPool.vue";
-import TokenSocialList from './TokenSocialList.vue';
+import TokenSocialList from "./TokenSocialList.vue";
-import * as Cache from '@/utils/cache';
+import * as Cache from "@/utils/cache";
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin } from "tdesign-vue-next";
-import DetailsEcharts from '../analysis/detailsEcharts.vue';
+import DetailsEcharts from "../analysis/detailsEcharts.vue";
-import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
+import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
-import Favo from '/public/images/svg/rightDetail/favo.svg';
+import Favo from "/public/images/svg/rightDetail/favo.svg";
-import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
+import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
-import RightDetailHeader from './rightDetailHeader.vue';
+import RightDetailHeader from "./rightDetailHeader.vue";
-import SubmitSocialInfo from './SubmitSocialInfo';
+import SubmitSocialInfo from "./SubmitSocialInfo";
-import Collection from './collection';
+import Collection from "./collection";
 const router = useRouter();
 const { t, locale } = useI18n();
 // 通知表格收藏图表取消收藏
@@ -133,16 +133,16 @@ const CollectionDe = CollectionDelete();
 // const initEchart = computed(() => store.getters['echart/gethasInit']);
 const headerBtns = computed(() => [
  {
-    label: t('securityCheck.details'),
+    label: t("securityCheck.details"),
-    value: 'details',
+    value: "details",
  },
  {
-    label: t('filter.Collection'),
+    label: t("filter.Collection"),
-    value: 'collection',
+    value: "collection",
  },
  {
-    label: t('securityCheck.analysis'),
+    label: t("securityCheck.analysis"),
-    value: 'echart',
+    value: "echart",
  },
 ]);
 const props = defineProps({
@@ -154,52 +154,52 @@ const props = defineProps({
  mt: String,
  up: Number,
 });
-const emit = defineEmits(['update:setPool', 'SettwitterRul']);
+const emit = defineEmits(["update:setPool", "SettwitterRul"]);
-const r24h = ref('');
+const r24h = ref("");
-const numR24h = ref('');
+const numR24h = ref("");
 // 收藏列表是否首次加载
 const CollectionOnload = ref(false);
 // 判断当前路由，隐藏右侧详情box中的折线图模块
 const currentRouter = router.currentRoute.value.name;
-const currentTab = ref('info');
+const currentTab = ref("info");
 const isInCollection = ref(false);
 // 默认选择detail按钮
-const defaBtn = ref('details');
+const defaBtn = ref("details");
 const ifDetails = ref(false);
 const WatchEcharts = useWatchEcharts();
 // 传给详情折线图的tbname
-const tb = ref('');
+const tb = ref("");
 // 点击pool才加载
 const isPool = ref(false);
-const PoolAddress = ref('');
+const PoolAddress = ref("");
 // 当前链
 const chain = useChain();
 const tokenInfo: any = ref({
-  avatar: '',
+  avatar: "",
-  token: '',
+  token: "",
  pool: [],
 });
 const getPriceRange = () => {
  const { up, r24h: proR24h } = props;
-  if ((proR24h + '')[0] == '-') {
+  if ((proR24h + "")[0] == "-") {
    // -，跌
-    let newR24h = parseFloat((proR24h + '').replace('-', ''));
+    let newR24h = parseFloat((proR24h + "").replace("-", ""));
    // 原价
    let oldPrice = props.up / (1 - newR24h);
    numR24h.value = oldPrice - props.up;
-    numR24h.value = '-' + parseCoinAmount(numR24h.value);
+    numR24h.value = "-" + parseCoinAmount(numR24h.value);
  } else if (proR24h == 0) {
-    numR24h.value = '+0';
+    numR24h.value = "+0";
  } else {
    // +,涨
    // 原价
    let oldPrice = props.up / (proR24h + 1);
    numR24h.value = props.up - oldPrice;
-    numR24h.value = '+' + parseCoinAmount(numR24h.value);
+    numR24h.value = "+" + parseCoinAmount(numR24h.value);
  }
-  r24h.value = parsePercent(proR24h + '');
+  r24h.value = parsePercent(proR24h + "");
-  if (r24h.value[0] !== '-') {
+  if (r24h.value[0] !== "-") {
-    r24h.value = '+' + r24h.value;
+    r24h.value = "+" + r24h.value;
  }
 };
 watch(
@@ -213,13 +213,13 @@ watch(
 watch(
  () => props.r24h,
  (v) => {
-    if (typeof v !== 'undefined') {
+    if (typeof v !== "undefined") {
      getPriceRange();
    }
  }
 );
 const btnLoad = (value: string) => {
-  if (currentRouter == 'tokenAnalysis' && value == 'echart') {
+  if (currentRouter == "tokenAnalysis" && value == "echart") {
    return false;
  }
  return true;
@@ -235,7 +235,7 @@ watch(
 );
 // 流动池tab改变
 const changeTab = (value) => {
-  if (value === 'pool') {
+  if (value === "pool") {
    isPool.value = true;
  }
 };
@@ -249,31 +249,31 @@ const getTokenInfo = async () => {
      },
    });
-    result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
+    result.marketCap = parseFloat(result.supply * result.up + "").toFixed(1);
-    result.tokenSub = '';
+    result.tokenSub = "";
    if (result.token) {
      result.tokenSub =
        result.token.substr(0, 6) +
-        '...' +
+        "..." +
        result.token.substr(result.token.length - 4, 4);
    }
    // tbname-掩码
-    result.tbnameSub = '';
+    result.tbnameSub = "";
-    result.n_tb = '';
+    result.n_tb = "";
    if (props.tb) {
      // 先将d去掉
      result.n_tb =
-        props.tb[0] == 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
+        props.tb[0] == "d" ? props.tb.slice(1, props.tb.length) : props.tb;
      result.tbnameSub =
        result.n_tb.substr(0, 6) +
-        '...' +
+        "..." +
        result.n_tb.substr(result.n_tb.length - 4, 4);
    }
    isInCollection.value = Cache.hasSet(props.tb);
    Object.assign(tokenInfo.value, result);
    // 如果有推特链接，提交给twitter组件解析
-    if ('chat' in result) {
+    if ("chat" in result) {
-      emit('SettwitterRul', result.chat.twitter);
+      emit("SettwitterRul", result.chat.twitter);
    }
  } catch (e) {
    console.log(e);
@@ -283,7 +283,7 @@ const getTokenInfo = async () => {
 watch(
  () => locale.value,
  (v) => {
-    if (defaBtn.value == 'echart') {
+    if (defaBtn.value == "echart") {
      WatchEcharts.value += 1;
    }
  }
@@ -291,16 +291,16 @@ watch(
 // 点击查看token详情信息
 // v-if v-show同时使用，折线图第一次加载后，不在使用v-if，减少请求
 const gotoDetail = (value) => {
-  if (value == 'collection' && !CollectionOnload.value) {
+  if (value == "collection" && !CollectionOnload.value) {
    CollectionOnload.value = true;
  }
  // 先判断是否有token,没有则禁止打开折线图模块
-  if (!props.tb && value === 'echart') {
+  if (!props.tb && value === "echart") {
    MessagePlugin.closeAll();
-    MessagePlugin.warning(t('MessagePlugin.plToken'));
+    MessagePlugin.warning(t("MessagePlugin.plToken"));
    return;
  }
-  if (value === 'echart') {
+  if (value === "echart") {
    tb.value = props.tb;
    ifDetails.value = true;
  }
@@ -315,14 +315,14 @@ const monitor = computed((value) => {
 // 接收右侧详情流动池address
 const changePool = (PoolValue) => {
  PoolAddress.value = PoolValue;
-  emit('update:setPool', PoolValue);
+  emit("update:setPool", PoolValue);
 };
 watch(
  () => props.token,
  (v) => {
    if (v) {
      //如果折线图为隐藏状态，需注销折线图模块
-      if (defaBtn.value != 'echart') {
+      if (defaBtn.value != "echart") {
        ifDetails.value = false;
      }
      tb.value = props.tb;
@@ -332,8 +332,8 @@ watch(
 );
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
-@import '@/style/variables.less';
+@import "@/style/variables.less";
 .right-detail-wrapper {
  height: calc(100vh - 70px);
  flex: 1;
@@ -361,7 +361,7 @@ watch(
      font-size: 14px;
      margin: 0;
      padding: 0;
-      font-family: 'Regular';
+      font-family: "Regular";
      .details-icon-cl {
        width: 30px;
        fill: var(--td-search-btn-back-1);
@@ -437,7 +437,7 @@ watch(
          border-bottom-left-radius: @border-radius;
          border-bottom-right-radius: @border-radius;
          .t-tabs__nav-item-text-wrapper {
-            font-family: 'Medium';
+            font-family: "Medium";
          }
          .t-tabs__header {
            background-color: var(--td--right-back-color-2);

--- a/views/token/TokenFilter.vue
+++ b/views/token/TokenFilter.vue
@@ -10,13 +10,13 @@
                <template #icon>
                  <SmartSvg class="icon"></SmartSvg>
                </template>
-                {{ $t('Customized.SmartAlerts') }}</t-button
+                {{ $t("Customized.SmartAlerts") }}</t-button
              >
              <t-button class="reset-btn" @click="Reset">
                <template #icon>
                  <ResetSvg class="icon"></ResetSvg>
                </template>
-                {{ $t('Customized.reset') }}</t-button
+                {{ $t("Customized.reset") }}</t-button
              >
            </div>
          </ClientOnly>
@@ -32,7 +32,7 @@
            <t-tooltip :content="$t('tips.contentvalue1')" placement="left-top">
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.timeRange') }}：
+            {{ $t("home.timeRange") }}：
          </div>
          <div class="value">
            <FilterRadio
@@ -47,7 +47,7 @@
            <t-tooltip :content="$t('tips.poolSizeValue')" placement="left-top">
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.poolSize') }}：
+            {{ $t("home.poolSize") }}：
          </div>
          <div class="value">
            <t-switch
@@ -79,7 +79,7 @@
            >
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.pirceRange') }}：
+            {{ $t("home.pirceRange") }}：
          </div>
          <div class="value">
            <div class="custom-form-item3">
@@ -123,7 +123,7 @@
            >
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.newHolder') }}：
+            {{ $t("home.newHolder") }}：
          </div>
          <div class="value">
            <FilterRadio
@@ -138,7 +138,7 @@
            <t-tooltip :content="$t('tips.VolumeValue')" placement="left-top">
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.volume') }}：
+            {{ $t("home.volume") }}：
          </div>
          <div class="value">
            <FilterRadio
@@ -153,7 +153,7 @@
            <t-tooltip :content="$t('tips.VolumeValue')" placement="left-top">
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('home.txns') }}：
+            {{ $t("home.txns") }}：
          </div>
          <div class="value">
            <FilterRadio
@@ -169,7 +169,7 @@
            <t-tooltip :content="$t('tips.VolumeValue')" placement="left-top">
              <QuestionSvg></QuestionSvg>
            </t-tooltip>
-            {{ $t('filter.ContractDetection') }}：
+            {{ $t("filter.ContractDetection") }}：
          </div>
          <div class="value">
            <t-button
@@ -219,22 +219,22 @@ import {
  TXNS_OPTIONS,
  Time_price_range_options,
  IS_HPT_LIST,
-} from '@/constants/token';
+} from "@/constants/token";
 import {
  chain_options,
  filterChainObj,
  SwitchCurrency,
-} from '@/constants/UnifiedManagementChain';
+} from "@/constants/UnifiedManagementChain";
-import FilterTips from './FilterTips.vue';
+import FilterTips from "./FilterTips.vue";
-import ResetSvg from '/public/images/svg/filter/reset.svg';
+import ResetSvg from "/public/images/svg/filter/reset.svg";
-import SmartSvg from '/public/images/svg/filter/Smart.svg';
+import SmartSvg from "/public/images/svg/filter/Smart.svg";
-import QuestionSvg from '/public/images/svg/filter/Question.svg';
+import QuestionSvg from "/public/images/svg/filter/Question.svg";
-import { MessagePlugin } from 'tdesign-vue-next';
+import { MessagePlugin } from "tdesign-vue-next";
-import SmartAlerts from './SmartAlerts.vue';
+import SmartAlerts from "./SmartAlerts.vue";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
-import ChoseChain from './ChoseChain.vue';
+import ChoseChain from "./ChoseChain.vue";
-import CustomCheckBox from '../CustomComponent/CheckBox2.vue';
+import CustomCheckBox from "../CustomComponent/CheckBox2.vue";
-import FilterRadio from './filterRadio.vue';
+import FilterRadio from "./filterRadio.vue";
 const { t } = useI18n();
 // 当前链
 const chain = useChain();
@@ -243,18 +243,18 @@ const route = useRoute();
 // 表格要切换的数据
 const HeadTokenType = useTableHeadToken();
 const formData = reactive({
-  date: '5m',
+  date: "5m",
  isWbnb: true,
  isRise: true,
-  poolSize_wb: '',
+  poolSize_wb: "",
-  poolSize_ub: '',
+  poolSize_ub: "",
-  range: '',
+  range: "",
-  newHolder: '',
+  newHolder: "",
-  volume: '',
+  volume: "",
-  txns: '',
+  txns: "",
-  priceRangeTime: '5m',
+  priceRangeTime: "5m",
-  isNewchain: '0',
+  isNewchain: "0",
-  iSHpt: 'yes',
+  iSHpt: "yes",
  // 是否选择hpt的all
  isHptall: true,
 });
@@ -262,61 +262,61 @@ const formData = reactive({
 const Cur_hpt_list = ref([]);
 const ContractDetection = computed(() => [
  {
-    label: t('filter.Honeypot'),
+    label: t("filter.Honeypot"),
-    value: 'is_honeypot',
+    value: "is_honeypot",
  },
  {
-    label: t('filter.OpenSource'),
+    label: t("filter.OpenSource"),
-    value: 'is_open_source',
+    value: "is_open_source",
  },
  {
-    label: t('filter.TradingSwitch'),
+    label: t("filter.TradingSwitch"),
-    value: 'transfer_pausable',
+    value: "transfer_pausable",
  },
  {
-    label: t('filter.AgencyContract'),
+    label: t("filter.AgencyContract"),
-    value: 'is_proxy',
+    value: "is_proxy",
  },
  {
-    label: t('filter.ModifySlippage'),
+    label: t("filter.ModifySlippage"),
-    value: 'slippage_modifiable',
+    value: "slippage_modifiable",
  },
  {
-    label: t('filter.StopTrading'),
+    label: t("filter.StopTrading"),
-    value: 'take_back_ownership',
+    value: "take_back_ownership",
  },
 ]);
 // 当前链整个对象数据
 const ChainObj = ref();
 if (route.params.chain) {
-  let Obj = filterChainObj('name', route.params.chain, true);
+  let Obj = filterChainObj("name", route.params.chain, true);
  if (Obj) {
    ChainObj.value = Obj;
    chain.value = Obj.value;
  }
 } else {
-  ChainObj.value = filterChainObj('value', chain.value, true);
+  ChainObj.value = filterChainObj("value", chain.value, true);
 }
 // 弹出框状态
 const visible = ref(false);
 // 重置
 const Reset = () => {
-  formData.date = '5m';
+  formData.date = "5m";
-  formData.poolSize_wb = '';
+  formData.poolSize_wb = "";
-  formData.poolSize_ub = '';
+  formData.poolSize_ub = "";
-  formData.range = '';
+  formData.range = "";
-  formData.newHolder = '';
+  formData.newHolder = "";
-  formData.volume = '';
+  formData.volume = "";
-  formData.txns = '';
+  formData.txns = "";
  MessagePlugin.closeAll();
-  MessagePlugin.success(t('MessagePlugin.resetSuccess'));
+  MessagePlugin.success(t("MessagePlugin.resetSuccess"));
 };
 // 反选按钮
 const ReverseBtn = (label: string, value: string) => {
  if (formData[label] === value) {
-    formData[label] = '';
+    formData[label] = "";
  }
 };
 const allHpt = () => {
@@ -345,7 +345,7 @@ watch(
  () => chain.value,
  (v) => {
    if (v) {
-      ChainObj.value = filterChainObj('value', v, true);
+      ChainObj.value = filterChainObj("value", v, true);
      PoolSize.value = SwitchCurrency(v);
    }
  }
@@ -353,7 +353,7 @@ watch(
 const SwitchChange = (v: any) => {
  // 过滤出当前需要展示的代币名称
-  let Obj = filterChainObj('value', chain.value);
+  let Obj = filterChainObj("value", chain.value);
  let bname = [];
  if (Obj) {
    bname = Obj.Currency;
@@ -367,10 +367,10 @@ const filterFn = async () => {
    // 是否加入貔貅检测
    if (Cur_hpt_list.value.length) {
      Cur_hpt_list.value.forEach((item: any) => {
-        if (formData.iSHpt == 'yes') {
+        if (formData.iSHpt == "yes") {
-          GlbFilter.value[item] = '1';
+          GlbFilter.value[item] = "1";
        } else {
-          GlbFilter.value[item] = '0';
+          GlbFilter.value[item] = "0";
        }
      });
      // 判断哪个参数没有
@@ -384,12 +384,12 @@ const filterFn = async () => {
        }
      });
      // 开启检测
-      GlbFilter.value.filter_troops = '1';
+      GlbFilter.value.filter_troops = "1";
    } else {
      // 关闭检测
-      GlbFilter.value.filter_troops = '0';
+      GlbFilter.value.filter_troops = "0";
    }
-    GlbFilter.value.pool_column = formData.isWbnb ? 'wb' : 'ub';
+    GlbFilter.value.pool_column = formData.isWbnb ? "wb" : "ub";
    GlbFilter.value.nt = parseInt(formData.isNewchain);
    GlbFilter.value.range_date = formData.priceRangeTime;
    if (formData.isWbnb && formData.poolSize_wb) {
@@ -402,13 +402,13 @@ const filterFn = async () => {
      if (formData.range) {
        GlbFilter.value.range = formData.range;
      }
-      GlbFilter.value.rise_or_fall = 'up';
+      GlbFilter.value.rise_or_fall = "up";
    } else {
      // 减
      if (formData.range) {
        GlbFilter.value.range = formData.range;
      }
-      GlbFilter.value.rise_or_fall = 'down';
+      GlbFilter.value.rise_or_fall = "down";
    }
    if (formData.newHolder) {
      GlbFilter.value.new_holder = formData.newHolder;
@@ -448,7 +448,7 @@ watch(formData, (v) => {
 });
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .select_chain_box {
  width: 100px;
  user-select: none;
@@ -492,8 +492,8 @@ watch(formData, (v) => {
 </style>
 <style lang="less">
 // flex布局
-@import '@/style/flex.less';
+@import "@/style/flex.less";
-@import '@/style/variables.less';
+@import "@/style/variables.less";
 .filter-block-wrapper {
  display: flex;
  width: 100%;
@@ -514,7 +514,7 @@ watch(formData, (v) => {
        position: relative;
        box-sizing: border-box;
        &::before {
-          content: '';
+          content: "";
          height: 1px;
          width: 200%;
          position: absolute;
@@ -539,7 +539,7 @@ watch(formData, (v) => {
            background: var(--td-brand-color-btn-1);
            border: none;
            --ripple-color: rgb(230, 230, 244);
-            font-family: 'Regular';
+            font-family: "Regular";
            .icon {
              margin-right: 6px;
              fill: var(--td-brand-color-icon-1);
@@ -557,12 +557,12 @@ watch(formData, (v) => {
      .custom-form-item {
        min-height: auto;
        padding: 0;
-        height: 42px;
+        height: 3rem;
        background: var(--td--right-back-color-2);
        .da();
        position: relative;
        &::before {
-          content: '';
+          content: "";
          height: 1px;
          width: 200%;
          position: absolute;
@@ -591,7 +591,7 @@ watch(formData, (v) => {
          padding-left: 8px;
          white-space: nowrap;
          .da();
-          font-family: 'Normal';
+          font-family: "Normal";
          & > :nth-child(1) {
            padding-right: 12px;
            cursor: pointer;
@@ -617,7 +617,7 @@ watch(formData, (v) => {
            font-size: 12px;
            height: 24px;
            .dja();
-            font-family: 'Regular';
+            font-family: "Regular";
            background: none;
            color: var(--td-Search-info-color-1);
            margin-left: -2px;
@@ -706,7 +706,7 @@ watch(formData, (v) => {
            width: 63px;
            background-color: var(--td--main-btn-color-1);
            .t-switch__content {
-              font-family: 'Regular';
+              font-family: "Regular";
            }
          }
          .t-is-checked {

--- a/views/token/filterRadio.vue
+++ b/views/token/filterRadio.vue
@@ -27,27 +27,27 @@ const props = withDefaults(
  }>(),
  {
    options: [],
-    class: '',
+    class: "",
    margin: false,
  }
 );
-const emit = defineEmits(['update:modelValue', 'change']);
+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 = '';
+    currentBtn.value = "";
  } else {
    currentBtn.value = item.value;
  }
  // 请求接口
-  emit('update:modelValue', currentBtn.value);
+  emit("update:modelValue", currentBtn.value);
-  emit('change', currentBtn.value);
+  emit("change", currentBtn.value);
 };
 </script>
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .custom-filter-radio-box {
  .da();
  .filter-radio-button {
@@ -58,7 +58,7 @@ const btnChange = (item: any) => {
    width: 105px;
    height: 24px;
    line-height: 22px;
-    font-family: 'Regular';
+    font-family: "Regular";
    cursor: pointer;
    color: var(--td-Search-info-color-1);
    .dja();
@@ -72,7 +72,7 @@ const btnChange = (item: any) => {
    background: var(--td--main-btn-color-1);
    color: white;
    font-weight: 500;
-    font-family: 'Medium';
+    font-family: "Medium";
    &:hover {
      background: var(--td--main-btn-color-1);
      color: white;

--- a/views/token/index.vue
+++ b/views/token/index.vue
@@ -6,9 +6,7 @@
          <ClientOnly>
            <RollToken></RollToken>
          </ClientOnly>
-          <div>
+          <TokenFilter></TokenFilter>
-            <TokenFilter></TokenFilter>
-          </div>
          <NuxtPage></NuxtPage>
        </div>
        <RightDetail
@@ -29,17 +27,17 @@
 </template>
 <script setup lang="ts">
-import MyLayout from '@/views/layout/layout.vue';
+import MyLayout from "@/views/layout/layout.vue";
-import RightDetail from '@/views/token/RightDetail.vue';
+import RightDetail from "@/views/token/RightDetail.vue";
-import TokenFilter from '@/views/token/TokenFilter.vue';
+import TokenFilter from "@/views/token/TokenFilter.vue";
-import RollToken from '@/views/layout/rollToken.vue';
+import RollToken from "@/views/layout/rollToken.vue";
 const route = useRoute();
 const token = ref();
 const TbName = ref();
 const r24h = ref();
 const up = ref();
 const chain = useChain();
-const currentPath = ref('');
+const currentPath = ref("");
 onMounted(() => {
  currentPath.value = chain.value;
 });
@@ -56,7 +54,7 @@ const changeChain = (chain) => {
 </script>
 <style lang="less">
-@import '@/style/variables.less';
+@import "@/style/variables.less";
 .home-wrapper {
  width: 100vw;
  display: flex;

--- a/views/token/tableSort.vue
+++ b/views/token/tableSort.vue
 <template>
  <div class="custom-sort-th">
    <t-tooltip :content="$t('filter.asc')">
-      <AscSvg
+      <div @click="sortChange('asc')" class="sort-icon">
-        :class="{ active: sorttype === 'asc' }"
+        <AscSvg :class="{ active: sorttype === 'asc' }" class="asc"></AscSvg>
-        class="sort-icon asc"
+      </div>
-        @click="sortChange('asc')"
-      ></AscSvg>
    </t-tooltip>
    <t-tooltip :content="$t('filter.desc')">
-      <DescSvg
+      <div @click="sortChange('desc')" class="sort-icon">
-        :class="{ active: sorttype === 'desc' }"
+        <DescSvg
-        class="sort-icon desc"
+          :class="{ active: sorttype === 'desc' }"
-        @click="sortChange('desc')"
+          class="desc"
-      ></DescSvg>
+        ></DescSvg>
+      </div>
    </t-tooltip>
  </div>
 </template>
 <script lang="ts" setup>
-import AscSvg from '/public/images/svg/collection/asc.svg';
+import AscSvg from "/public/images/svg/collection/asc.svg";
-import DescSvg from '/public/images/svg/collection/desc.svg';
+import DescSvg from "/public/images/svg/collection/desc.svg";
 const props = defineProps({
  sort: String,
  field: String,
  options: Object as any,
 });
-const emit = defineEmits(['submitSort']);
+const emit = defineEmits(["submitSort"]);
 // 当前排序状态
-const sorttype = ref('all');
+const sorttype = ref("all");
 const sortChange = (value: string) => {
  const { field } = props;
  if (value == sorttype.value) {
    // 代表重复点击--恢复表格初始状态
-    sorttype.value = 'all';
+    sorttype.value = "all";
  } else {
    sorttype.value = value;
  }
-  emit('submitSort', {
+  emit("submitSort", {
    sort: sorttype.value,
    field: field,
  });
@@ -46,7 +45,7 @@ watch(
  () => props.options,
  (v) => {
    if (!v.status) {
-      sorttype.value = 'all';
+      sorttype.value = "all";
    }
  },
  {
@@ -57,22 +56,24 @@ watch(
 <style lang="less">
 .custom-sort-th {
-  padding-left: 4px;
+  margin-left: 4px;
  .sort-icon {
-    display: block;
-    fill: #7b7d87;
    cursor: pointer;
-    transition: all 0.2s;
+    height: 10px;
-    &:hover {
+    line-height: 10px;
-      fill: var(--td--main-btn-color-1);
+    svg {
+      fill: #7b7d87;
      transition: all 0.2s;
    }
-  }
+    .active {
-  .asc {
+      fill: var(--td--main-btn-color-1);
-    padding: 2px 0;
+    }
-  }
+    &:hover {
-  .active {
+      svg {
-    fill: var(--td--main-btn-color-1);
+        fill: var(--td--main-btn-color-1);
+        transition: all 0.2s;
+      }
+    }
  }
 }
 </style>