Skip to content

D
dexfilter-web-nuxt3
Commit de6ee3bb by lei
Options

1

parent 2a246fa2
Showing with 130 additions and 74 deletions
components/Animation.vue
......@@ -6,6 +6,7 @@
height: height,
background: background,
position: position,
zIndex: zIndex,
}"
:class="{ 'custom-is-table-box': !isTable }"
>
......@@ -31,26 +32,27 @@ const props = withDefaults(
left?: string;
top?: string;
isTable?: boolean;
zIndex?: number;
}>(),
{
background: 'rgba(230,230,230,0.2)',
position: 'absolute',
width: '100%',
height: '100%',
left: '0px',
top: '0px',
background: "rgba(230,230,230,0.2)",
position: "absolute",
width: "100%",
height: "100%",
left: "0px",
top: "0px",
isTable: false,
zIndex: 100,
}
);
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import "@/style/flex.less";
.custom-loading-box {
top: 0;
// -webkit-transform: translateY(-50%) translateX(-50%);
// transform: translateY(-50%) translateX(-50%);
z-index: 100;
box-sizing: border-box;
.ball-beat {
position: sticky;
......
composables/useTable.ts
/*
* @Author: lei 2897821407@qq.com
* @Date: 2023-02-20 19:44:53
* @LastEditors: lei 2897821407@qq.com
* @LastEditTime: 2023-02-22 18:10:45
* @FilePath: \dexfilter-web-nuxt3\composables\useTable.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import {
DefaultChain,
filterChainObj,
} from '@/constants/UnifiedManagementChain';
} from "@/constants/UnifiedManagementChain";
// 表格需要展示的币种名称
export const useTableHeadToken = () => {
return useState('TableHeadTokenType', () => {
let Obj = filterChainObj('value', DefaultChain);
return useState("TableHeadTokenType", () => {
let Obj = filterChainObj("value", DefaultChain);
return Obj.Currency[0];
});
};
// 通知收藏内容更新
export const CollectionChange = () => {
return useState('CollectionTable', () => 0);
return useState("CollectionTable", () => 0);
};
// 通知右侧详情，取消收藏
export const CollectionDelete = () => {
return useState('CollectionListDetele', () => 1);
return useState("CollectionListDetele", () => 1);
};
// 折线图是否重载
export const useWatchEcharts = () => {
return useState('WatchEchartsInit', () => 1);
return useState("WatchEchartsInit", () => 1);
};
// loading
export const useTableLoading = () => {
return useState('TableLoading', () => false);
return useState("TableLoading", () => false);
};
// table数组及dataCount
export const useTableListAndCount = () => {
return useState("TableListAndCount", () => {
return {
list: [] as any[],
filterList: [] as any[],
total: 0,
};
});
};
composables/useToken.ts
import { useState } from '#app';
import { DefaultChain } from '@/constants/UnifiedManagementChain';
import { useState } from "#app";
import { DefaultChain } from "@/constants/UnifiedManagementChain";
const tokenName = 'token';
let filter = {
pool_column: 'wb',
const tokenName = "token";
interface filterfield {
pool_column?: string;
nt?: number;
range_date?: string;
rise_or_fall?: string;
page?: number;
page_size?: number;
date_orderby?: string;
sort?: string;
}
let filter: filterfield = {
pool_column: "wb",
nt: 0,
range_date: '5m',
rise_or_fall: 'up',
range_date: "5m",
rise_or_fall: "up",
page: 1,
page_size: 100,
};
// 获取当前交易token
export const useCurToken = () => {
return useState(tokenName, () => 'bar');
return useState(tokenName, () => "bar");
};
// 当前链
export const useChain = () => {
return useState('chain', () => DefaultChain);
return useState("chain", () => DefaultChain);
};
// 当前筛选条件
export const useCurFilter = () => {
return useState('filterParams', () => filter);
return useState("filterParams", () => filter);
};
// 当前时间筛选条件
export const useCurrentTimeChange = () => {
return useState('CurrentTimeChange', () => '5m');
return useState("CurrentTimeChange", () => "5m");
};
// 通知表格请求数据
export const useChangeTable = () => {
return useState('filterChange', () => 1);
return useState("filterChange", () => 1);
};
// 当前右侧的token和tb等数据
export const useCurrentRightInfo = () => {
return useState('RightInfo', () => ({
token: '',
tb: '',
r24h: '',
return useState("RightInfo", () => ({
token: "",
tb: "",
r24h: "",
up: null,
swap: "",
}));
};
// 当前主题
export const useCurTheme = () => {
return useState('theme', () => 'light');
};
// 预渲染的数据列表
export const UsePreRenderList = () => {
return useState('preRenderList', () => ({
list: [],
total: 0,
}));
return useState("theme", () => "light");
};
// 用户钱包地址
export const useUserAddress = () => {
return useState('walletAddress', () => '');
return useState("walletAddress", () => "");
};
// 当前k线的价格
export const useCurrentKLinePrice = () => {
return useState('CurrentKLinePrice', () => 0);
return useState("CurrentKLinePrice", () => 0);
};
// 全局loading
export const useGlbLogin = () => {
return useState('GlbLogin', () => false);
return useState("GlbLogin", () => false);
};
public/images/svg/filter/CloseScrollToken.svg
<svg width="10" height="45" viewBox="0 0 10 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 -1C5.52285 -1 10 3.47715 10 9H8C8 4.58172 4.41828 1 0 1V-1ZM10 36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36H10ZM0 45V0V45ZM0 -1C5.52285 -1 10 3.47715 10 9V36C10 41.5228 5.52285 46 0 46V44C4.41828 44 8 40.4183 8 36V9C8 4.58172 4.41828 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_3031_9687)"/>
<path d="M4.4875 16.5622C4.56568 16.7243 4.60905 16.9361 4.60905 17.1559C4.60905 17.3758 4.56568 17.5876 4.4875 17.7497L1.9875 22.4997L4.4875 27.2497C4.53368 27.4157 4.55065 27.6055 4.53591 27.7912C4.52118 27.977 4.47551 28.1488 4.40562 28.2816C4.33572 28.4144 4.24527 28.5012 4.14753 28.5292C4.04979 28.5572 3.9499 28.5249 3.8625 28.4372L1.0125 23.1291C0.926767 22.9594 0.877693 22.7348 0.875 22.4997C0.876078 22.2674 0.925514 22.0454 1.0125 21.8822L3.83125 16.5622C3.87424 16.48 3.92536 16.4147 3.98167 16.3702C4.03799 16.3257 4.09838 16.3027 4.15938 16.3027C4.22037 16.3027 4.28076 16.3257 4.33708 16.3702C4.39339 16.4147 4.44451 16.48 4.4875 16.5622Z" fill="#838383"/>
<path d="M6.9875 16.5622C7.06568 16.7243 7.10905 16.9361 7.10905 17.1559C7.10905 17.3758 7.06568 17.5876 6.9875 17.7497L4.4875 22.4997L6.9875 27.2497C7.03368 27.4157 7.05065 27.6055 7.03591 27.7912C7.02118 27.977 6.97551 28.1488 6.90562 28.2816C6.83572 28.4144 6.74527 28.5012 6.64753 28.5292C6.54979 28.5572 6.4499 28.5249 6.3625 28.4372L3.5125 23.1291C3.42677 22.9594 3.37769 22.7348 3.375 22.4997C3.37608 22.2674 3.42551 22.0454 3.5125 21.8822L6.33125 16.5622C6.37424 16.48 6.42536 16.4147 6.48167 16.3702C6.53799 16.3257 6.59838 16.3027 6.65938 16.3027C6.72037 16.3027 6.78076 16.3257 6.83708 16.3702C6.89339 16.4147 6.94451 16.48 6.9875 16.5622Z" fill="#838383"/>
</svg>
\ No newline at end of file
<path d="M0 -1C6.07513 -1 11 3.92487 11 10H9C9 5.02944 4.97056 1 0 1V-1ZM11 35C11 41.0751 6.07513 46 0 46V44C4.97056 44 9 39.9706 9 35H11ZM0 45V0V45ZM0 -1C6.07513 -1 11 3.92487 11 10V35C11 41.0751 6.07513 46 0 46V44C4.97056 44 9 39.9706 9 35V10C9 5.02944 4.97056 1 0 1V-1Z" fill="#DCDCDC" mask="url(#path-1-inside-1_2996_6270)"/>
</svg>
public/images/svg/filter/Closeleft.svg 0 → 100644
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.03625 0.562677C4.12225 0.72474 4.16995 0.936591 4.16995 1.15643C4.16995 1.37626 4.12225 1.58811 4.03625 1.75018L1.28625 6.50018L4.03625 11.2502C4.08705 11.4162 4.10571 11.606 4.0895 11.7917C4.07329 11.9774 4.02306 12.1493 3.94618 12.2821C3.86929 12.4149 3.7698 12.5017 3.66228 12.5297C3.55477 12.5577 3.44489 12.5254 3.34875 12.4377L0.21375 7.12955C0.119443 6.95992 0.0654621 6.7353 0.0625 6.50018C0.063686 6.26791 0.118066 6.04589 0.21375 5.88268L3.31438 0.562677C3.36166 0.480456 3.41789 0.415203 3.47984 0.370675C3.54178 0.326147 3.60822 0.303223 3.67531 0.303223C3.74241 0.303223 3.80884 0.326147 3.87079 0.370675C3.93273 0.415203 3.98896 0.480456 4.03625 0.562677Z" fill="#838383"/>
<path d="M6.78625 0.562677C6.87225 0.72474 6.91995 0.936591 6.91995 1.15643C6.91995 1.37626 6.87225 1.58811 6.78625 1.75018L4.03625 6.50018L6.78625 11.2502C6.83705 11.4162 6.85571 11.606 6.8395 11.7917C6.82329 11.9774 6.77306 12.1493 6.69618 12.2821C6.61929 12.4149 6.5198 12.5017 6.41228 12.5297C6.30477 12.5577 6.19489 12.5254 6.09875 12.4377L2.96375 7.12955C2.86944 6.95992 2.81546 6.7353 2.8125 6.50018C2.81369 6.26791 2.86807 6.04589 2.96375 5.88268L6.06437 0.562677C6.11166 0.480456 6.16789 0.415203 6.22984 0.370675C6.29178 0.326147 6.35822 0.303223 6.42531 0.303223C6.49241 0.303223 6.55884 0.326147 6.62079 0.370675C6.68273 0.415203 6.73896 0.480456 6.78625 0.562677Z" fill="#838383"/>
</svg>
public/images/svg/filter/Closeright.svg 0 → 100644
<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.96375 12.4373C2.87775 12.2753 2.83005 12.0634 2.83005 11.8436C2.83005 11.6237 2.87775 11.4119 2.96375 11.2498L5.71375 6.49982L2.96375 1.74982C2.91295 1.58377 2.89429 1.39398 2.9105 1.20827C2.92671 1.02256 2.97694 0.850703 3.05382 0.717902C3.13071 0.585101 3.2302 0.49834 3.33772 0.470342C3.44523 0.442343 3.55511 0.474579 3.65125 0.562324L6.78625 5.87045C6.88056 6.04008 6.93454 6.2647 6.9375 6.49982C6.93631 6.73209 6.88193 6.95411 6.78625 7.11732L3.68562 12.4373C3.63834 12.5195 3.58211 12.5848 3.52016 12.6293C3.45822 12.6739 3.39178 12.6968 3.32469 12.6968C3.25759 12.6968 3.19116 12.6739 3.12921 12.6293C3.06727 12.5848 3.01103 12.5195 2.96375 12.4373Z" fill="#838383"/>
<path d="M0.21375 12.4373C0.127754 12.2753 0.0800495 12.0634 0.0800495 11.8436C0.0800495 11.6237 0.127754 11.4119 0.21375 11.2498L2.96375 6.49982L0.21375 1.74982C0.162951 1.58377 0.144288 1.39398 0.160497 1.20827C0.176707 1.02256 0.226937 0.850703 0.303821 0.717902C0.380706 0.585101 0.480201 0.49834 0.587717 0.470342C0.695233 0.442343 0.805115 0.474579 0.90125 0.562324L4.03625 5.87045C4.13056 6.04008 4.18454 6.2647 4.1875 6.49982C4.18631 6.73209 4.13193 6.95411 4.03625 7.11732L0.935625 12.4373C0.88834 12.5195 0.832105 12.5848 0.77016 12.6293C0.708215 12.6739 0.641783 12.6968 0.574687 12.6968C0.507592 12.6968 0.441159 12.6739 0.379214 12.6293C0.317269 12.5848 0.261035 12.5195 0.21375 12.4373Z" fill="#838383"/>
</svg>
views/layout/rollToken.vue
<template>
<div class="custom-scroll-token">
<span class="close-scroll_box" @click="changeScrollBox">
<CloseScrollToken></CloseScrollToken>
<div class="custom-close-scroll-box">
<CloseScrollToken></CloseScrollToken>
<span
class="left"
:class="{
'revolve-box': srcollType == 'close',
}"
>
<Closeleft></Closeleft>
</span>
</div>
</span>
<transition name="scroll-change">
<div class="header-scroll_box-fa" v-show="srcollType == 'open'">
......@@ -86,14 +96,15 @@
</template>
<script lang="ts" setup>
import request from '@/utils/request';
import { publicTokenImg } from '@/constants/UnifiedManagementChain';
import CloseScrollToken from '/public/images/svg/filter/CloseScrollToken.svg';
import request from "@/utils/request";
import { publicTokenImg } from "@/constants/UnifiedManagementChain";
import CloseScrollToken from "/public/images/svg/filter/CloseScrollToken.svg";
import Closeleft from "/public/images/svg/filter/Closeleft.svg";
const ScrollList = reactive({
list: [],
});
// 滚动代币当前状态--默认展开
const srcollType = ref('open');
const srcollType = ref("open");
// 获取当前链
const chain = useChain();
watch(
......@@ -103,17 +114,17 @@ watch(
}
);
// 动画速度
const animationSpeed = ref('');
const animationSpeed = ref("");
onMounted(() => {
if (!ScrollList.list.length) {
getPublicToken();
}
});
const changeScrollBox = () => {
if (srcollType.value == 'open') {
srcollType.value = 'close';
if (srcollType.value == "open") {
srcollType.value = "close";
} else {
srcollType.value = 'open';
srcollType.value = "open";
}
};
// 获取滚动代币
......@@ -136,8 +147,8 @@ const getPublicToken = async () => {
// 检测图片是否存在
// console.log(Obj.sy);
Obj.img = CurImgObj.img;
if (Obj.sy.indexOf('.e') !== -1) {
Obj.sy = Obj.sy.replace('.e', 'E');
if (Obj.sy.indexOf(".e") !== -1) {
Obj.sy = Obj.sy.replace(".e", "E");
}
list.push(Obj);
});
......@@ -151,32 +162,33 @@ const getPublicToken = async () => {
};
// 图片
const doubt = {
img: '/images/svg/header/doubt.svg',
img: "/images/svg/header/doubt.svg",
};
const scroll_box_1 = ref(null);
const scroll_box_2 = ref(null);
const scroll_box_3 = ref(null);
// 鼠标移入暂停
const stopAn = () => {
scroll_box_1.value.style.animationPlayState = 'paused';
scroll_box_2.value.style.animationPlayState = 'paused';
scroll_box_3.value.style.animationPlayState = 'paused';
scroll_box_1.value.style.animationPlayState = "paused";
scroll_box_2.value.style.animationPlayState = "paused";
scroll_box_3.value.style.animationPlayState = "paused";
};
// 鼠标移出继续滚动
const leaveAn = () => {
scroll_box_1.value.style.animationPlayState = 'running';
scroll_box_2.value.style.animationPlayState = 'running';
scroll_box_3.value.style.animationPlayState = 'running';
scroll_box_1.value.style.animationPlayState = "running";
scroll_box_2.value.style.animationPlayState = "running";
scroll_box_3.value.style.animationPlayState = "running";
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.custom-scroll-token {
.header-scroll_box-fa {
user-select: none;
height: 57px;
margin-left: 2px;
.header-scroll_box {
width: 100%;
box-sizing: border-box;
......@@ -211,17 +223,17 @@ const leaveAn = () => {
.span-1 {
padding-left: 6px;
font-weight: 500;
font-family: 'Medium';
font-family: "Medium";
}
}
.right-info {
.da();
.span-2 {
font-weight: 600;
font-family: 'Regular';
font-family: "Regular";
}
.span-3 {
font-family: 'Medium';
font-family: "Medium";
color: #9b96b6;
}
}
......@@ -234,6 +246,20 @@ const leaveAn = () => {
top: 82px;
left: 0;
cursor: pointer;
.custom-close-scroll-box {
position: relative;
.left {
position: absolute;
top: 14px;
left: 1px;
transform: rotateY(0);
transition: transform 0.3s;
}
.revolve-box {
transform: rotateY(180deg);
transition: transform 0.3s;
}
}
}
}
</style>
......
views/token/RightDetail.vue
<template>
<div class="right-detail-wrapper">
<!-- <div class="right-detail-wrapper">
<div class="right-header">
<template v-for="item in headerBtns" :key="item.value">
<t-button
......@@ -105,7 +105,8 @@
></details-echarts>
</div>
</template>
</div>
</div> -->
<div></div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
......
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