1

views/token/ChoseChain.vue

@@ -6,17 +6,15 @@
     :content="popupContent"
     :VisibleChange="onVisibleChange"
   >
-    <div class="custom-chose-chain-box" @click="ChangeDialog">
+    <div class="custom-chose-chain-box">
       <img :src="chain_options[ChainImgIndex].img" alt="" class="left-icon" />
       <span class="current-chain-text">{{ chainName }}</span>
       <span class="right-icon">
         <ChevronDownIcon
           :class="[
             'select-icon',
-            DialogVisible.value ? 'active' : '',
-            DialogVisible.value
-              ? 't-fake-arrow--active'
-              : 't-fake-arrow--leave',
+            DialogVisible ? 'active' : '',
+            DialogVisible ? 't-fake-arrow--active' : 't-fake-arrow--leave',
           ]"
         ></ChevronDownIcon>
       </span>
@@ -28,29 +26,29 @@
 import {
   chain_options,
   filterChainObj,
-} from '@/constants/UnifiedManagementChain';
-import ChainSearch from '/public/images/svg/filter/chainSearch.svg';
-import { ChevronDownIcon } from 'tdesign-icons-vue-next';
-import { useI18n } from 'vue-i18n';
+} from "@/constants/UnifiedManagementChain";
+import ChainSearch from "/public/images/svg/filter/chainSearch.svg";
+import { ChevronDownIcon } from "tdesign-icons-vue-next";
+import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const ChainImgIndex = ref(0);
 const ChainObj = ref<any>({});
 const chain = useChain();
-const chainName = ref('');
+const chainName = ref("");
 // 筛选后的列表
 const filterList = reactive({
   list: chain_options,
 });
 // 弹窗是否打开
 const DialogVisible = ref<boolean>(false);
-let Scopedchain = '';
-if (typeof route.params.chain == 'string') {
+let Scopedchain = "";
+if (typeof route.params.chain == "string") {
   Scopedchain = route.params.chain;
 }
 if (Scopedchain) {
-  let Obj = filterChainObj('name', Scopedchain, true);
+  let Obj = filterChainObj("name", Scopedchain, true);
   if (Obj) {
     ChainObj.value = Obj;
     chainName.value = ChainObj.value.name;
@@ -58,14 +56,11 @@ if (Scopedchain) {
     chain.value = Obj.value;
   }
 } else {
-  ChainObj.value = filterChainObj('value', chain.value, true);
+  ChainObj.value = filterChainObj("value", chain.value, true);
   chainName.value = ChainObj.value.name;
   ChainImgIndex.value = ChainObj.value.index;
   chain.value = ChainObj.value.value;
 }
-const ChangeDialog = () => {
-  //   DialogVisible.value = !DialogVisible.value;
-};
 const onVisibleChange = (visible: any, e: any) => {
   DialogVisible.value = visible;
 };
@@ -75,9 +70,9 @@ const ClosePopup = () => {
 };
 // 切换事件
 const selectChange = (v: string) => {
-  ChainObj.value = filterChainObj('value', v, true);
+  ChainObj.value = filterChainObj("value", v, true);
   // 当前链保存到本地
-  window.localStorage.setItem('chain', v);
+  window.localStorage.setItem("chain", v);
   chain.value = ChainObj.value.value;
   chainName.value = ChainObj.value.name;
   ChainImgIndex.value = ChainObj.value.index;
@@ -119,7 +114,7 @@ const popupContent = () => {
     <div class="custom-chose-chain-content">
       <div class="search-box">
         <t-input
-          placeholder={t('Search.search')}
+          placeholder={t("Search.search")}
           prefixIcon={() => <ChainSearch></ChainSearch>}
           onChange={InputChange}
         ></t-input>
@@ -138,8 +133,8 @@ const popupContent = () => {
 </script>
 
 <style lang="less">
-@import '@/style/variables.less';
-@import '@/style/flex.less';
+@import "@/style/variables.less";
+@import "@/style/flex.less";
 .custom-chose-chain-box {
   display: flex;
   justify-content: space-between;
@@ -156,7 +151,7 @@ const popupContent = () => {
     font-weight: 700;
     font-size: 15px;
     user-select: none;
-    font-family: 'bold';
+    font-family: "bold";
   }
   .right-icon {
     .select-icon {
@@ -167,22 +162,7 @@ const popupContent = () => {
       stroke: var(--td--main-btn-color-1);
       color: var(--td--main-btn-color-1);
     }
-    @keyframes customAnimation1 {
-      0% {
-        transform: rotateX(180deg);
-      }
-      100% {
-        transform: rotateX(0deg);
-      }
-    }
-    @keyframes customAnimation2 {
-      0% {
-        transform: rotateX(180deg);
-      }
-      100% {
-        transform: rotateX(0deg);
-      }
-    }
+
     // 旋转样式
     .t-fake-arrow--active {
       animation: customAnimation1 400ms;
@@ -208,7 +188,7 @@ const popupContent = () => {
       box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
       border-radius: 10px;
       .t-input__inner {
-        font-family: 'Medium';
+        font-family: "Medium";
       }
     }
   }
@@ -220,7 +200,7 @@ const popupContent = () => {
     max-height: 500px;
     overflow-y: auto;
     &::after {
-      content: '';
+      content: "";
       display: block;
       flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
       margin: 10px;
@@ -240,7 +220,7 @@ const popupContent = () => {
       cursor: pointer;
       font-size: 12px;
       white-space: nowrap;
-      font-family: 'bold';
+      font-family: "bold";
       img {
         width: 27px;
         height: 27px;
@@ -248,4 +228,20 @@ const popupContent = () => {
     }
   }
 }
+@keyframes customAnimation1 {
+  0% {
+    transform: rotateX(180deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+@keyframes customAnimation2 {
+  0% {
+    transform: rotateX(180deg);
+  }
+  100% {
+    transform: rotateX(0deg);
+  }
+}
 </style>