Skip to content

D
dexfilter-web-nuxt3
Commit 302f989e by lei
Options

1

parent de6ee3bb
Showing with 38 additions and 42 deletions
views/token/ChoseChain.vue
...@@ -6,17 +6,15 @@ ...@@ -6,17 +6,15 @@
:content="popupContent" :content="popupContent"
:VisibleChange="onVisibleChange" :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" /> <img :src="chain_options[ChainImgIndex].img" alt="" class="left-icon" />
<span class="current-chain-text">{{ chainName }}</span> <span class="current-chain-text">{{ chainName }}</span>
<span class="right-icon"> <span class="right-icon">
<ChevronDownIcon <ChevronDownIcon
:class="[ :class="[
'select-icon', 'select-icon',
DialogVisible.value ? 'active' : '', DialogVisible ? 'active' : '',
DialogVisible.value DialogVisible ? 't-fake-arrow--active' : 't-fake-arrow--leave',
? 't-fake-arrow--active'
: 't-fake-arrow--leave',
]" ]"
></ChevronDownIcon> ></ChevronDownIcon>
</span> </span>
...@@ -28,29 +26,29 @@ ...@@ -28,29 +26,29 @@
import { import {
chain_options, chain_options,
filterChainObj, filterChainObj,
} from '@/constants/UnifiedManagementChain'; } from "@/constants/UnifiedManagementChain";
import ChainSearch from '/public/images/svg/filter/chainSearch.svg'; import ChainSearch from "/public/images/svg/filter/chainSearch.svg";
import { ChevronDownIcon } from 'tdesign-icons-vue-next'; import { ChevronDownIcon } from "tdesign-icons-vue-next";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const ChainImgIndex = ref(0); const ChainImgIndex = ref(0);
const ChainObj = ref<any>({}); const ChainObj = ref<any>({});
const chain = useChain(); const chain = useChain();
const chainName = ref(''); const chainName = ref("");
// 筛选后的列表 // 筛选后的列表
const filterList = reactive({ const filterList = reactive({
list: chain_options, list: chain_options,
}); });
// 弹窗是否打开 // 弹窗是否打开
const DialogVisible = ref<boolean>(false); const DialogVisible = ref<boolean>(false);
let Scopedchain = ''; let Scopedchain = "";
if (typeof route.params.chain == 'string') { if (typeof route.params.chain == "string") {
Scopedchain = route.params.chain; Scopedchain = route.params.chain;
} }
if (Scopedchain) { if (Scopedchain) {
let Obj = filterChainObj('name', Scopedchain, true); let Obj = filterChainObj("name", Scopedchain, true);
if (Obj) { if (Obj) {
ChainObj.value = Obj; ChainObj.value = Obj;
chainName.value = ChainObj.value.name; chainName.value = ChainObj.value.name;
...@@ -58,14 +56,11 @@ if (Scopedchain) { ...@@ -58,14 +56,11 @@ if (Scopedchain) {
chain.value = Obj.value; chain.value = Obj.value;
} }
} else { } else {
ChainObj.value = filterChainObj('value', chain.value, true); ChainObj.value = filterChainObj("value", chain.value, true);
chainName.value = ChainObj.value.name; chainName.value = ChainObj.value.name;
ChainImgIndex.value = ChainObj.value.index; ChainImgIndex.value = ChainObj.value.index;
chain.value = ChainObj.value.value; chain.value = ChainObj.value.value;
} }
const ChangeDialog = () => {
// DialogVisible.value = !DialogVisible.value;
};
const onVisibleChange = (visible: any, e: any) => { const onVisibleChange = (visible: any, e: any) => {
DialogVisible.value = visible; DialogVisible.value = visible;
}; };
...@@ -75,9 +70,9 @@ const ClosePopup = () => { ...@@ -75,9 +70,9 @@ const ClosePopup = () => {
}; };
// 切换事件 // 切换事件
const selectChange = (v: string) => { 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; chain.value = ChainObj.value.value;
chainName.value = ChainObj.value.name; chainName.value = ChainObj.value.name;
ChainImgIndex.value = ChainObj.value.index; ChainImgIndex.value = ChainObj.value.index;
...@@ -119,7 +114,7 @@ const popupContent = () => { ...@@ -119,7 +114,7 @@ const popupContent = () => {
<div class="custom-chose-chain-content"> <div class="custom-chose-chain-content">
<div class="search-box"> <div class="search-box">
<t-input <t-input
placeholder={t('Search.search')} placeholder={t("Search.search")}
prefixIcon={() => <ChainSearch></ChainSearch>} prefixIcon={() => <ChainSearch></ChainSearch>}
onChange={InputChange} onChange={InputChange}
></t-input> ></t-input>
...@@ -138,8 +133,8 @@ const popupContent = () => { ...@@ -138,8 +133,8 @@ const popupContent = () => {
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.custom-chose-chain-box { .custom-chose-chain-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -156,7 +151,7 @@ const popupContent = () => { ...@@ -156,7 +151,7 @@ const popupContent = () => {
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
user-select: none; user-select: none;
font-family: 'bold'; font-family: "bold";
} }
.right-icon { .right-icon {
.select-icon { .select-icon {
...@@ -167,22 +162,7 @@ const popupContent = () => { ...@@ -167,22 +162,7 @@ const popupContent = () => {
stroke: var(--td--main-btn-color-1); stroke: var(--td--main-btn-color-1);
color: 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 { .t-fake-arrow--active {
animation: customAnimation1 400ms; animation: customAnimation1 400ms;
...@@ -208,7 +188,7 @@ const popupContent = () => { ...@@ -208,7 +188,7 @@ const popupContent = () => {
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px; border-radius: 10px;
.t-input__inner { .t-input__inner {
font-family: 'Medium'; font-family: "Medium";
} }
} }
} }
...@@ -220,7 +200,7 @@ const popupContent = () => { ...@@ -220,7 +200,7 @@ const popupContent = () => {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
&::after { &::after {
content: ''; content: "";
display: block; display: block;
flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/ flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
margin: 10px; margin: 10px;
...@@ -240,7 +220,7 @@ const popupContent = () => { ...@@ -240,7 +220,7 @@ const popupContent = () => {
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
font-family: 'bold'; font-family: "bold";
img { img {
width: 27px; width: 27px;
height: 27px; height: 27px;
...@@ -248,4 +228,20 @@ const popupContent = () => { ...@@ -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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment