Skip to content

D
dexfilter-web-nuxt3
Commit 44423901 by lei
Options

1

parent e8094c7a
Showing with 358 additions and 190 deletions
.output.zip
No preview for this file type
app/router.options.ts
...@@ -32,7 +32,7 @@ export default <RouterConfig>{ ...@@ -32,7 +32,7 @@ export default <RouterConfig>{
}, },
{ {
name: "tokenDetail", name: "tokenDetail",
path: "/:chain/:tb([a-zA-Z0-9_]{10,100})", path: "/:chain/:tb([a-zA-Z0-9_]{10,152})",
component: () => import("@/views/detail/index.vue"), component: () => import("@/views/detail/index.vue"),
meta: { hasSearch: true, hasRollToken: true, footer: false }, meta: { hasSearch: true, hasRollToken: true, footer: false },
}, },
......
style/layout.less
...@@ -72,12 +72,10 @@ ...@@ -72,12 +72,10 @@
.s-header { .s-header {
padding: 0 24px; padding: 0 24px;
.t-menu__logo { .t-menu__logo {
img { img {
cursor: pointer; cursor: pointer;
} }
.logo-text { .logo-text {
margin-left: 18px; margin-left: 18px;
font-size: 12px; font-size: 12px;
...@@ -85,7 +83,6 @@ ...@@ -85,7 +83,6 @@
line-height: 20px; line-height: 20px;
} }
} }
.t-menu { .t-menu {
& > .t-menu__item { & > .t-menu__item {
min-width: unset; min-width: unset;
......
utils/plugin/PopupTool.ts 0 → 100644
import { Add } from "./PopupTool_Interface";
/**
*
* @param child 子元素
* @param parent 要检查的父元素
* @returns
*/
export function isChildOf(child: HTMLElement, parent: HTMLElement) {
if (child && parent) {
let parentNode = child.parentNode;
while (parentNode) {
if (parent === parentNode) {
return true;
}
parentNode = parentNode.parentNode;
}
}
return false;
}
/**
*
* @param parent
* @returns
*/
// 获取popup元素定位的top和left
export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
let params = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
if (parent) {
let client = parent.getBoundingClientRect();
params.top = client.top + client.height;
params.left = client.left;
// 最后判断是否要增加一定距离--一般定位元素都要下移一点才能看
if (add) {
if (add.top) {
params.top += add.top;
}
if (add.left) {
params.top += add.left;
}
if (add.right) {
params.right = add.right;
}
if (add.bottom) {
params.bottom = add.bottom;
}
}
}
return params;
};
utils/plugin/PopupTool_Interface.ts 0 → 100644
export interface Add {
top?: number;
right?: number;
bottom?: number;
left?: number;
}
views/analysis/index.vue
...@@ -121,6 +121,7 @@ import { filterChainObj } from "@/constants/UnifiedManagementChain"; ...@@ -121,6 +121,7 @@ import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { webLogo } from "@/constants/logo"; import { webLogo } from "@/constants/logo";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { Row as TRow, Col as TCol } from "tdesign-vue-next"; import { Row as TRow, Col as TCol } from "tdesign-vue-next";
import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const theme = useCurTheme(); const theme = useCurTheme();
const { locale } = useI18n(); const { locale } = useI18n();
// 初始化折线图 // 初始化折线图
......
views/detail/index.vue
...@@ -50,30 +50,31 @@ ...@@ -50,30 +50,31 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue'; import MyLayout from "@/views/layout/layout.vue";
import HistoryList from '@/views/token/HistoryList.vue'; import HistoryList from "@/views/token/HistoryList.vue";
import RightDetail from '@/views/token/RightDetail.vue'; import RightDetail from "@/views/token/RightDetail.vue";
import { ArrowUpIcon, ArrowDownIcon } from 'tdesign-icons-vue-next'; import { ArrowUpIcon, ArrowDownIcon } from "tdesign-icons-vue-next";
import { DataFeed, Widget } from '@/utils/tradingview'; import { DataFeed, Widget } from "@/utils/tradingview";
import request from '@/utils/request'; import request from "@/utils/request";
import { WebS } from '@/utils/TokenTrans'; import { WebS } from "@/utils/TokenTrans";
import { filterChainObj } from '@/constants/UnifiedManagementChain'; import { filterChainObj } from "@/constants/UnifiedManagementChain";
import { webLogo } from '@/constants/logo'; import { webLogo } from "@/constants/logo";
import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const route = useRoute(); const route = useRoute();
const tb = ref(route.params.tb + ''); const tb = ref(route.params.tb + "");
const chain = useChain(); const chain = useChain();
const chartContainer = ref(null); const chartContainer = ref(null);
useHead({ useHead({
title: `Dexfilter | ${tb.value}`, title: `Dexfilter | ${tb.value}`,
script: [ script: [
{ {
src: '/charting_library/charting_library.standalone2.js', src: "/charting_library/charting_library.standalone2.js",
}, },
], ],
link: [webLogo], link: [webLogo],
meta: [ meta: [
{ {
name: 'description', name: "description",
content: `Dexfilter-${tb.value}-实时的K线平台`, content: `Dexfilter-${tb.value}-实时的K线平台`,
}, },
], ],
...@@ -81,22 +82,22 @@ useHead({ ...@@ -81,22 +82,22 @@ useHead({
// 当前主题 // 当前主题
const mode = useCurTheme(); const mode = useCurTheme();
const currentPath = ref(route.params.chain + ''); const currentPath = ref(route.params.chain + "");
// 先取出对应链的接口id // 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value.toUpperCase()); let Obj = filterChainObj("name", currentPath.value.toUpperCase());
currentPath.value = Obj.value; currentPath.value = Obj.value;
const CurrentKPrice = useCurrentKLinePrice(); const CurrentKPrice = useCurrentKLinePrice();
// token---接口得到 // token---接口得到
const token = ref(''); const token = ref("");
// symbol--接口 // symbol--接口
const symbol = ref(''); const symbol = ref("");
// r24h--接口 // r24h--接口
const r24h = ref(null); const r24h = ref(null);
// k线价格精度 // k线价格精度
const KPirce = ref(); const KPirce = ref();
// mt---是否主流币 // mt---是否主流币
const mt = ref(''); const mt = ref("");
const PoolAddress = ref(''); const PoolAddress = ref("");
let datafeed = null; let datafeed = null;
let widget: any = null; let widget: any = null;
watch( watch(
...@@ -112,11 +113,11 @@ watch( ...@@ -112,11 +113,11 @@ watch(
watch( watch(
() => mode.value, () => mode.value,
(v) => { (v) => {
let mode = ''; let mode = "";
if (v === 'light') { if (v === "light") {
mode = 'Light'; mode = "Light";
} else { } else {
mode = 'Dark'; mode = "Dark";
} }
if (process.client) { if (process.client) {
widget.widget.onChartReady(function () { widget.widget.onChartReady(function () {
...@@ -132,7 +133,7 @@ const openInterval = () => { ...@@ -132,7 +133,7 @@ const openInterval = () => {
try { try {
if (widget?.widget?.onChartReady) { if (widget?.widget?.onChartReady) {
widget.widget.onChartReady(function () { widget.widget.onChartReady(function () {
widget.widget.changeTheme(mode.value == 'light' ? 'Light' : 'Dark'); widget.widget.changeTheme(mode.value == "light" ? "Light" : "Dark");
}); });
clearInterval(Interval); clearInterval(Interval);
} }
...@@ -142,31 +143,31 @@ const openInterval = () => { ...@@ -142,31 +143,31 @@ const openInterval = () => {
}, 100); }, 100);
}; };
const drag = () => { const drag = () => {
let oBox = document.getElementById('resize-block'); let oBox = document.getElementById("resize-block");
let historyTable = document.getElementById('history-table'); let historyTable = document.getElementById("history-table");
oBox.onmousedown = function (ev) { oBox.onmousedown = function (ev) {
var iEvent = ev as MouseEvent; var iEvent = ev as MouseEvent;
var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。 var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
var boxH = historyTable.offsetHeight; //存储默认的div的高度。 var boxH = historyTable.offsetHeight; //存储默认的div的高度。
// 获取表格固钉--当拖动时，隐藏固钉 // 获取表格固钉--当拖动时，隐藏固钉
let Histab: any = document.querySelector( let Histab: any = document.querySelector(
'.t-table__affixed-header-elm-wrap' ".t-table__affixed-header-elm-wrap"
); );
document.getElementById('tv_chart_container').setAttribute('class', 'mask'); document.getElementById("tv_chart_container").setAttribute("class", "mask");
document.onmousemove = function (ev) { document.onmousemove = function (ev) {
var iEvent = ev as MouseEvent; var iEvent = ev as MouseEvent;
historyTable.style.height = boxH - (iEvent.clientY - startY) + 'px'; historyTable.style.height = boxH - (iEvent.clientY - startY) + "px";
Histab.style.display = 'none'; Histab.style.display = "none";
}; };
document.onmouseup = function () { document.onmouseup = function () {
document.onmousedown = null; document.onmousedown = null;
document.onmousemove = null; document.onmousemove = null;
document.getElementById('tv_chart_container').setAttribute('class', ''); document.getElementById("tv_chart_container").setAttribute("class", "");
}; };
return false; return false;
}; };
}; };
const tableHeight = ref('100px'); const tableHeight = ref("100px");
watch( watch(
() => KPirce.value, () => KPirce.value,
(v) => { (v) => {
...@@ -197,11 +198,11 @@ onMounted(() => { ...@@ -197,11 +198,11 @@ onMounted(() => {
symbol.value = res.sy; symbol.value = res.sy;
token.value = res.token; token.value = res.token;
KPirce.value = res.up; KPirce.value = res.up;
mt.value = res.p + ''; mt.value = res.p + "";
}); });
// 开启k线轮询 // 开启k线轮询
openInterval(); openInterval();
tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + 'px'; tableHeight.value = Math.floor((window.innerHeight - 64) * 0.4) + "px";
nextTick(() => { nextTick(() => {
drag(); drag();
}); });
...@@ -222,9 +223,9 @@ onBeforeUnmount(() => { ...@@ -222,9 +223,9 @@ onBeforeUnmount(() => {
}); });
const getKLine = (tb) => { const getKLine = (tb) => {
if (!symbol.value) { if (!symbol.value) {
symbol.value = 'any'; symbol.value = "any";
} }
let symbolName = (symbol.value + '').toLocaleUpperCase(); let symbolName = (symbol.value + "").toLocaleUpperCase();
datafeed = new DataFeed( datafeed = new DataFeed(
{ {
name: symbol.value, name: symbol.value,
...@@ -246,8 +247,8 @@ const getPoll = (PoolValue) => { ...@@ -246,8 +247,8 @@ const getPoll = (PoolValue) => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import "@/style/flex.less";
@import '@/style/variables.less'; @import "@/style/variables.less";
.token-detail-wrapper { .token-detail-wrapper {
padding: 12px 0 0 12px; padding: 12px 0 0 12px;
box-sizing: border-box; box-sizing: border-box;
...@@ -275,7 +276,7 @@ const getPoll = (PoolValue) => { ...@@ -275,7 +276,7 @@ const getPoll = (PoolValue) => {
height: 100%; height: 100%;
&.mask { &.mask {
&:after { &:after {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
......
views/layout/Header.vue
...@@ -34,6 +34,7 @@ import HomeLogo from "/public/images/svg/header/homeLogoLight.svg"; ...@@ -34,6 +34,7 @@ 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";
import ChangeTheme from "@/views/CustomComponent/changeTheme.vue"; import ChangeTheme from "@/views/CustomComponent/changeTheme.vue";
import SwitchLanguage from "@/views/CustomComponent/SwitchLanguage.vue";
import { HeadMenu as THeadMenu } from "tdesign-vue-next"; import { HeadMenu as THeadMenu } from "tdesign-vue-next";
const Search = defineAsyncComponent(() => import("./Search.vue")); const Search = defineAsyncComponent(() => import("./Search.vue"));
const LoginDropdown = defineAsyncComponent(() => import("./LoginDropdown.vue")); const LoginDropdown = defineAsyncComponent(() => import("./LoginDropdown.vue"));
......
views/login/index.vue
...@@ -51,6 +51,7 @@ import rightLogoLightSvg from "/public/images/svg/login/favicon-light.svg"; ...@@ -51,6 +51,7 @@ import rightLogoLightSvg from "/public/images/svg/login/favicon-light.svg";
import rightLogoDarkSvg from "/public/images/svg/login/rightdarkLogo.svg"; import rightLogoDarkSvg from "/public/images/svg/login/rightdarkLogo.svg";
import { webLogo } from "@/constants/logo"; import { webLogo } from "@/constants/logo";
import ChangeTheme from "@/views/CustomComponent/changeTheme.vue"; import ChangeTheme from "@/views/CustomComponent/changeTheme.vue";
import SwitchLanguage from "@/views/CustomComponent/SwitchLanguage.vue";
useHead({ useHead({
title: "Dexfilter | Login", title: "Dexfilter | Login",
link: [webLogo], link: [webLogo],
......
views/token/ChoseChain.vue
<template> <template>
<t-popup <div class="custom-chose-chain-box">
placement="bottom-left" <div class="custom-outer-layer" @click="PopupChange" ref="outerlayer">
trigger="click"
overlayClassName="custom-select-home-chain"
v-model:visible="DialogVisible"
:content="popupContent"
:VisibleChange="onVisibleChange"
>
<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 ? 'active' : '', PopupVisible ? 'active' : '',
DialogVisible ? 't-fake-arrow--active' : 't-fake-arrow--leave', PopupVisible ? 't-fake-arrow--active' : 't-fake-arrow--leave',
]" ]"
></ChevronDownIcon> ></ChevronDownIcon>
</span> </span>
</div> </div>
</t-popup> <Teleport to="body">
<div class="custom-chain-popup" v-show="PopupVisible">
<div
class="custom-popup-centent"
:style="{
transform: `translate3d(${PopupClient.left + 'px'}, ${
PopupClient.top + 'px'
}, 0px)`,
}"
>
<popupContent v-hide-el></popupContent>
</div>
</div>
</Teleport>
</div>
</template> </template>
<script lang="tsx" setup> <script lang="tsx" setup>
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";
import { isChildOf, getPopupFixedSite } from "@/utils/plugin/PopupTool";
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
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 PopupVisible = ref(false);
const outerlayer = ref<HTMLDivElement>();
// 筛选后的列表 // 筛选后的列表
const filterList = reactive({ const filterList = reactive({
list: chain_options, list: chain_options,
}); });
// 弹窗是否打开 const PopupClient = reactive({
const DialogVisible = ref<boolean>(false); top: 0,
let Scopedchain = ''; left: 0,
if (typeof route.params.chain == 'string') { oldTop: 0,
oldLeft: 0,
});
// 滚动元素
const ScrollElement = ref<HTMLElement | null>(null);
// 最好每次点击都获取一次
const getPopupSeat = () => {
console.log(
"0x40fb0516ac8ff93b48bcf9da7717e523e78c34f70001000000000000000004dc_0x4cc19356f2d37338b9802aa8e8fc58b0373296e7_0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
.length
);
if (outerlayer.value) {
let client = getPopupFixedSite(outerlayer.value, {
top: 4,
});
PopupClient.top = client.top;
PopupClient.oldTop = client.top;
PopupClient.left = client.left;
PopupClient.oldLeft = client.left;
}
};
// 滚动处理事件
const scrollEvent = (e: any) => {
if (ScrollElement.value && PopupVisible.value) {
PopupClient.top = PopupClient.oldTop + (0 - ScrollElement.value.scrollTop);
}
};
// 监听滚动
const openScroll = () => {
let scroll_id = document.getElementById("layout-scroll");
if (scroll_id) {
ScrollElement.value = scroll_id;
ScrollElement.value.addEventListener("scroll", scrollEvent);
}
};
onMounted(() => {
getPopupSeat();
openScroll();
});
onBeforeUnmount(() => {
if (ScrollElement.value) {
console.log("销毁滚动监听");
ScrollElement.value.removeEventListener("scroll", scrollEvent);
}
});
const PopupChange = () => {
PopupVisible.value = !PopupVisible.value;
if (PopupVisible.value) {
getPopupSeat();
}
};
let Scopedchain = "";
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;
...@@ -57,31 +119,45 @@ if (Scopedchain) { ...@@ -57,31 +119,45 @@ 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 onVisibleChange = (visible: any, e: any) => { const Fun = (parent: any, e: any) => {
DialogVisible.value = visible; // 先判断点击的元素是否为父元素
if (outerlayer.value) {
let beforeStatus = isChildOf(e.target, outerlayer.value);
if (beforeStatus) {
PopupVisible.value = true;
return;
}
// dom-元素
let status = isChildOf(e.target, parent);
if (!status) {
PopupVisible.value = status;
}
}
}; };
// 关闭弹窗 // 自定义指令
const ClosePopup = () => { const vHideEl = {
DialogVisible.value = false; mounted: (el: HTMLDivElement, e2: any, e3: any) => {
document.addEventListener("click", Fun.bind(this, el));
},
beforeUnmount: (el: HTMLDivElement) => {
console.log("销毁监听");
document.removeEventListener("click", Fun.bind(this, el));
},
}; };
// 切换事件 // 切换事件
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;
// 跳转路由 PopupVisible.value = false;
router.push({
path: `/${ChainObj.value.name}/1`,
});
ClosePopup();
}; };
// 输入框内容改变 // 输入框内容改变
const InputChange = (value: string) => { const InputChange = (value: string) => {
...@@ -109,23 +185,31 @@ const InputChange = (value: string) => { ...@@ -109,23 +185,31 @@ const InputChange = (value: string) => {
filterList.list = JSON.parse(JSON.stringify(chain_options)); filterList.list = JSON.parse(JSON.stringify(chain_options));
} }
}; };
const getChainHref = (item: any) => {
return `/${item.name}/1`;
};
// 弹窗内容 // 弹窗内容
const popupContent = () => { const popupContent = () => {
return ( return (
<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>
</div> </div>
<div class="chain-box-body narrow-scrollbar"> <div class="chain-box-body narrow-scrollbar">
{filterList.list.map((item: any) => ( {filterList.list.map((item: any) => (
<div class="chain-box" onClick={selectChange.bind(this, item.value)}> <NuxtLink to={getChainHref(item)} class="chain-box">
<img src={item.img} alt="" /> <div
<span>{item.fullName}</span> class="chain-box-child"
</div> onClick={selectChange.bind(this, item.value)}
>
<img src={item.img} alt="" />
<span>{item.fullName}</span>
</div>
</NuxtLink>
))} ))}
</div> </div>
</div> </div>
...@@ -134,107 +218,124 @@ const popupContent = () => { ...@@ -134,107 +218,124 @@ 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;
justify-content: space-between;
align-items: center;
height: 34px; height: 34px;
border: var(--new-border-2); border: var(--new-border-2);
border-radius: @border-radius; border-radius: @border-radius;
padding: 0 10px;
cursor: pointer; cursor: pointer;
.left-icon { position: relative;
height: 70%; padding: 0 10px;
} .custom-outer-layer {
.current-chain-text { height: 100%;
font-weight: 700; display: flex;
font-size: 15px; justify-content: space-between;
user-select: none; align-items: center;
font-family: 'bold'; .left-icon {
} height: 70%;
.right-icon {
.select-icon {
stroke: #838383;
color: #838383;
} }
.active { .current-chain-text {
stroke: var(--td--main-btn-color-1); font-weight: 700;
color: var(--td--main-btn-color-1); font-size: 15px;
user-select: none;
font-family: "bold";
} }
.right-icon {
.select-icon {
stroke: #838383;
color: #838383;
}
.active {
stroke: var(--td--main-btn-color-1);
color: var(--td--main-btn-color-1);
}
// 旋转样式 // 旋转样式
.t-fake-arrow--active { .t-fake-arrow--active {
animation: customAnimation1 400ms; animation: customAnimation1 400ms;
// animation-fill-mode: forwards; // animation-fill-mode: forwards;
}
// 恢复
.t-fake-arrow--leave {
animation: customAnimation2 400ms;
// animation-fill-mode: forwards;
}
} }
// 恢复 & > * {
.t-fake-arrow--leave { padding: 0 4px;
animation: customAnimation2 400ms;
// animation-fill-mode: forwards;
} }
} }
& > * {
padding: 0 4px;
}
} }
.custom-select-home-chain { .custom-chain-popup {
.t-popup__content { position: absolute;
top: 0;
left: 0;
.custom-popup-centent {
border-radius: 14px;
border: 1px solid var(--new-border-6);
padding: 20px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 380px;
background: var(--new-background-8); background: var(--new-background-8);
.custom-chose-chain-content { .search-box {
width: 380px; .t-input {
padding: 12px; background: var(--new-background-9);
.search-box { border: var(--new-border-10);
.t-input { box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
background: var(--new-background-9); border-radius: 10px;
border: var(--new-border-10); .t-input__inner::placeholder {
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25); font-family: "Medium";
border-radius: 10px; color: var(--new-color-9);
.t-input__inner::placeholder { }
font-family: 'Medium'; .t-input__prefix {
color: var(--new-color-9); svg {
} stroke: var(--new-color-9);
.t-input__prefix {
svg {
stroke: var(--new-color-9);
}
} }
} }
} }
.chain-box-body { }
display: flex; .chain-box-body {
flex-wrap: wrap; display: flex;
justify-content: space-between; flex-wrap: wrap;
margin-top: 12px; justify-content: space-between;
max-height: 500px; margin-top: 12px;
overflow-y: auto; max-height: 400px;
&::after { overflow-y: auto;
content: ''; &::after {
display: block; content: "";
flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/ display: block;
margin: 10px; flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
} margin: 10px;
.chain-box { }
box-sizing: border-box; .chain-box {
width: 27%; box-sizing: border-box;
height: 80px; width: 27%;
margin: 10px; height: 80px;
background: var(--new-background-4); margin: 10px;
border: 1px solid var(--new-border-6); background: var(--new-background-4);
border-radius: 14px; border: 1px solid var(--new-border-6);
border-radius: 14px;
font-weight: 700;
color: var(--home-page-color-1);
cursor: pointer;
font-size: 12px;
white-space: nowrap;
font-family: "bold";
text-decoration: none;
.chain-box-child {
width: 100%;
height: 100%;
.dja(space-evenly,center); .dja(space-evenly,center);
flex-direction: column; flex-direction: column;
font-weight: 700; }
color: var(--home-page-color-1); img {
cursor: pointer; width: 27px;
font-size: 12px; height: 27px;
white-space: nowrap;
font-family: 'bold';
img {
width: 27px;
height: 27px;
}
} }
} }
} }
......
views/token/index.vue
...@@ -31,7 +31,7 @@ import MyLayout from "@/views/layout/layout.vue"; ...@@ -31,7 +31,7 @@ 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(); import FixedJoinUs from "@/views/CustomComponent/FixedJoinUs.vue";
const token = ref(); const token = ref();
const TbName = ref(); const TbName = ref();
const r24h = ref(); const r24h = ref();
......
views/user/InvitedDialog.vue
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Divider as TDivider } from "tdesign-vue-next"; import { Divider as TDivider } from "tdesign-vue-next";
import comfirmDialog from "@/views/CustomComponent/comfirmDialog.vue";
const props = defineProps({ const props = defineProps({
InvitedVisible: Boolean, InvitedVisible: Boolean,
}); });
......
views/user/PersonalCenter.vue
<template> <template>
<div class="personal-details"> <div class="personal-details">
<div class="personal-title"> <div class="personal-title">
<h2>{{ $t('user.PersonalInfo') }}</h2> <h2>{{ $t("user.PersonalInfo") }}</h2>
<div class="personal-userinfo"> <div class="personal-userinfo">
<div class="head-portrait"> <div class="head-portrait">
<img src="/images/svg/header/toux.svg" alt="tx" /> <img src="/images/svg/header/toux.svg" alt="tx" />
</div> </div>
<div class="replace-box"> <div class="replace-box">
<t-button class="custom_button_back_border">{{ <t-button class="custom_button_back_border">{{
$t('user.ChangeAvatar') $t("user.ChangeAvatar")
}}</t-button> }}</t-button>
<p>JPEG、PNG 或 GIF，并且不能超过 10MB。</p> <p>JPEG、PNG 或 GIF，并且不能超过 10MB。</p>
</div> </div>
...@@ -16,16 +16,16 @@ ...@@ -16,16 +16,16 @@
</div> </div>
<div class="box-line"> <div class="box-line">
<div class="redact-data" v-show="hasChangePass"> <div class="redact-data" v-show="hasChangePass">
<h2>{{ $t('user.EditProfile') }}</h2> <h2>{{ $t("user.EditProfile") }}</h2>
<div class="redact-item"> <div class="redact-item">
<p>{{ $t('user.userName') }}</p> <p>{{ $t("user.userName") }}</p>
<t-input <t-input
type="text" type="text"
:maxlength="30" :maxlength="30"
v-model="user_name" v-model="user_name"
:placeholder="$t('user.enterUserName')" :placeholder="$t('user.enterUserName')"
/> />
<p>{{ $t('user.WalletAddress') }}</p> <p>{{ $t("user.WalletAddress") }}</p>
<div class="money-item"> <div class="money-item">
<t-input <t-input
:disabled="true" :disabled="true"
...@@ -38,22 +38,22 @@ ...@@ -38,22 +38,22 @@
<CopySvg></CopySvg> <CopySvg></CopySvg>
</t-tooltip> </t-tooltip>
</div> </div>
<p class="warm-text">{{ $t('user.updateWallet') }}</p> <p class="warm-text">{{ $t("user.updateWallet") }}</p>
</div> </div>
<h2>{{ $t('user.Password') }}</h2> <h2>{{ $t("user.Password") }}</h2>
<div class="password-btn"> <div class="password-btn">
<t-button <t-button
@click="hasChangePass = false" @click="hasChangePass = false"
class="custom_button_back_border" class="custom_button_back_border"
>{{ $t('user.changePwd') }}</t-button >{{ $t("user.changePwd") }}</t-button
> >
<p>{{ $t('user.Increase') }}</p> <p>{{ $t("user.Increase") }}</p>
</div> </div>
<div class="change-btn"> <div class="change-btn">
<t-button <t-button
@click="confirmDialog = true" @click="confirmDialog = true"
class="custom_button_back_border" class="custom_button_back_border"
>{{ $t('user.KeepChanges') }}</t-button >{{ $t("user.KeepChanges") }}</t-button
> >
</div> </div>
</div> </div>
...@@ -67,20 +67,21 @@ ...@@ -67,20 +67,21 @@
@comfimawal="comfimawal" @comfimawal="comfimawal"
@closeComfrimDialog="closeComfrimDialog" @closeComfrimDialog="closeComfrimDialog"
> >
<template #header> {{ $t('user.ConfirmChangeName') }}? </template> <template #header> {{ $t("user.ConfirmChangeName") }}? </template>
</comfirmDialog> </comfirmDialog>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CopySvg from '/public/images/svg/header/copy.svg'; import CopySvg from "/public/images/svg/header/copy.svg";
import ChangePassword from './ChangePassword.vue'; import comfirmDialog from "@/views/CustomComponent/comfirmDialog.vue";
import request from '@/utils/request'; import ChangePassword from "./ChangePassword.vue";
import { MessagePlugin } from 'tdesign-vue-next'; import request from "@/utils/request";
import { MessagePlugin } from "tdesign-vue-next";
const route = useRoute(); const route = useRoute();
const userInfo = useTokenInfo(); const userInfo = useTokenInfo();
const Cookie = useCookie('userCookie'); const Cookie = useCookie("userCookie");
const user_name = ref(''); const user_name = ref("");
const wallet_address = ref(''); const wallet_address = ref("");
const confirmDialog = ref(false); const confirmDialog = ref(false);
// 修改密码模块的显示隐藏 // 修改密码模块的显示隐藏
const hasChangePass = ref(true); const hasChangePass = ref(true);
...@@ -98,7 +99,7 @@ const backPersonal = (value: boolean) => { ...@@ -98,7 +99,7 @@ const backPersonal = (value: boolean) => {
onMounted(() => { onMounted(() => {
// 此时routename还没有切换，等待一毫秒 // 此时routename还没有切换，等待一毫秒
setTimeout(() => { setTimeout(() => {
if (route.name === 'personal' && Object.keys(userInfo.value).length) { if (route.name === "personal" && Object.keys(userInfo.value).length) {
user_name.value = userInfo.value.name; user_name.value = userInfo.value.name;
} }
}, 10); }, 10);
...@@ -118,7 +119,7 @@ watch( ...@@ -118,7 +119,7 @@ watch(
// 修改用户名 // 修改用户名
const changeUserName = async () => { const changeUserName = async () => {
const res: any = await request.post( const res: any = await request.post(
'/api/user/edit', "/api/user/edit",
{ {
name: user_name.value, name: user_name.value,
}, },
...@@ -129,7 +130,7 @@ const changeUserName = async () => { ...@@ -129,7 +130,7 @@ const changeUserName = async () => {
} }
); );
if (res.code === 0) { if (res.code === 0) {
MessagePlugin.success('修改成功！'); MessagePlugin.success("修改成功！");
// 同步修改左上角的用户信息 // 同步修改左上角的用户信息
userInfo.value.name = user_name.value; userInfo.value.name = user_name.value;
} else if (res.code === 2) { } else if (res.code === 2) {
...@@ -139,8 +140,8 @@ const changeUserName = async () => { ...@@ -139,8 +140,8 @@ const changeUserName = async () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.personal-details { .personal-details {
width: calc(100vw - 410px); width: calc(100vw - 410px);
.box-line { .box-line {
......
views/user/invitation.vue
...@@ -140,6 +140,7 @@ import RecordDialog from "./recordDialog.vue"; ...@@ -140,6 +140,7 @@ import RecordDialog from "./recordDialog.vue";
import request from "@/utils/request"; import request from "@/utils/request";
import useCopy from "@/hooks/useCopy"; import useCopy from "@/hooks/useCopy";
import { InputNumber as TInputNumber } from "tdesign-vue-next"; import { InputNumber as TInputNumber } from "tdesign-vue-next";
import QrCodeDialog from "@/views/CustomComponent/QrCodeDialog.vue";
const { doCopy } = useCopy(); const { doCopy } = useCopy();
const Cookie = useCookie("userCookie"); const Cookie = useCookie("userCookie");
const Imgs = { const Imgs = {
......
views/user/recordDialog.vue
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next"; import { Table as TTable } from "tdesign-vue-next";
import QrCodeDialog from "@/views/CustomComponent/QrCodeDialog.vue";
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
recordVisible: Boolean, recordVisible: Boolean,
......
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