Skip to content

D
dexfilter-web-nuxt3
Commit 2ed4b6b8 by haojie
Options

1

parent c701a547
Showing with 368 additions and 313 deletions
a-disst.zip 0 → 100644
File added
a-dist.zip deleted 100644 → 0
File deleted
language/en.ts
......@@ -29,7 +29,7 @@ const cn = {
},
filter: {
pairs: 'Pairs',
updated: 'Updated',
updated: 'New Pairs',
gainers: 'Gainers',
losers: 'Losers',
r24hVolume: '24h Volume',
......
middleware/index.global.ts
export default defineNuxtRouteMiddleware(() => {
try {
if (process.client) {
export default defineNuxtRouteMiddleware((context: any) => {
const headers = useRequestHeaders();
let userAgent = process.server ? headers['user-agent'] : navigator.userAgent;
if (userAgent) {
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
userAgent
)
) {
if (process.server) {
navigateTo('http://m.dexfilter.com', {
external: true,
});
} else {
window.location.href = 'http://m.dexfilter.com';
}
}
} catch (e) {
window.location.href = 'http://m.dexfilter.com';
console.log(e);
}
});
public/images/svg/filter/chainSearch.svg
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5003 17.5L13.8753 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.5003 17.5L13.8753 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
\ No newline at end of file
style/default.css
......@@ -87,6 +87,8 @@
--new-background-5: white;
--new-background-6: #f4f5f7;
--new-background-7: rgba(40, 126, 255, 0.3);
--new-background-8: #ffffff;
--new-background-9: #f9fafb;
--new-border-1: #dcdcdc;
--new-border-2: 1px solid #e0e3ea;
......@@ -97,6 +99,7 @@
--new-border-7: #f5f8fc;
--new-border-8: #e0e3ea;
--new-border-9: #e0e3ea;
--new-border-10: 1px solid #f0f1f5;
--new-color-1: #6d6d6d;
--new-color-2: #287eff;
......@@ -105,6 +108,8 @@
--new-color-5: #16c784;
--new-color-6: #ea3943;
--new-color-7: rgb(108, 108, 108);
--new-color-8: #9b96b6;
--new-color-9: #1a1a1a;
}
:root[theme-mode='dark'] {
......@@ -158,6 +163,8 @@
--new-background-5: #0b1217;
--new-background-6: #0b1217;
--new-background-7: rgba(40, 126, 255, 0.3);
--new-background-8: #1c222b;
--new-background-9: #29353d;
--new-border-1: none;
/* 有颜色的 */
......@@ -170,6 +177,7 @@
--new-border-6: #151515;
--new-border-7: #0b1217;
--new-border-9: #0b1217;
--new-border-10: 2px solid #23323c;
--new-color-1: #a9a9a9;
--new-color-2: #28b2ff;
......@@ -178,6 +186,8 @@
--new-color-5: #19de92;
--new-color-6: #ec5058;
--new-color-7: #cfcfcf;
--new-color-8: #dde1ec;
--new-color-9: #dfdfdf;
}
/* 主题按钮*/
.custom_button_back_border {
......
views/layout/rollToken.vue
......@@ -96,15 +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 Closeleft from "/public/images/svg/filter/Closeleft.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(
......@@ -114,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';
}
};
// 获取滚动代币
......@@ -147,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);
});
......@@ -162,28 +162,28 @@ 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;
......@@ -223,18 +223,18 @@ 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";
color: #9b96b6;
font-family: 'Medium';
color: var(--new-color-8);
}
}
}
......@@ -275,6 +275,33 @@ const leaveAn = () => {
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes scroll-token-box {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@-moz-keyframes scroll-token-box {
0% {
-moz-transform: translate3d(0, 0, 0);
}
100% {
-moz-transform: translate3d(-100%, 0, 0);
}
}
@-o-keyframes scroll-token-box {
0% {
-o-transform: translate3d(0, 0, 0);
}
100% {
-o-transform: translate3d(-100%, 0, 0);
}
}
.scroll-change-leave-active {
animation: move2 0.7s ease;
}
......
views/token/ChoseChain.vue
......@@ -2,6 +2,7 @@
<t-popup
placement="bottom-left"
trigger="click"
overlayClassName="custom-select-home-chain"
v-model:visible="DialogVisible"
:content="popupContent"
:VisibleChange="onVisibleChange"
......@@ -26,29 +27,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;
......@@ -56,7 +57,7 @@ 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;
......@@ -70,9 +71,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;
......@@ -114,7 +115,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>
......@@ -133,8 +134,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;
......@@ -151,7 +152,7 @@ const popupContent = () => {
font-weight: 700;
font-size: 15px;
user-select: none;
font-family: "bold";
font-family: 'bold';
}
.right-icon {
.select-icon {
......@@ -178,17 +179,26 @@ const popupContent = () => {
padding: 0 4px;
}
}
.custom-chose-chain-content {
.custom-select-home-chain {
.t-popup__content {
background: var(--new-background-8);
.custom-chose-chain-content {
width: 380px;
padding: 12px;
.search-box {
.t-input {
background: #f9fafb;
border: 1px solid #f0f1f5;
background: var(--new-background-9);
border: var(--new-border-10);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
.t-input__inner {
font-family: "Medium";
.t-input__inner::placeholder {
font-family: 'Medium';
color: var(--new-color-9);
}
.t-input__prefix {
svg {
stroke: var(--new-color-9);
}
}
}
}
......@@ -200,7 +210,7 @@ const popupContent = () => {
max-height: 500px;
overflow-y: auto;
&::after {
content: "";
content: '';
display: block;
flex: 1; /* 与flex: auto;等效都是自适应剩余空间*/
margin: 10px;
......@@ -220,14 +230,17 @@ const popupContent = () => {
cursor: pointer;
font-size: 12px;
white-space: nowrap;
font-family: "bold";
font-family: 'bold';
img {
width: 27px;
height: 27px;
}
}
}
}
}
}
@keyframes customAnimation1 {
0% {
transform: rotateX(180deg);
......
views/token/CustomTokenList.vue
......@@ -42,7 +42,7 @@
<th class="custom-before-line">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t("TableList.pool") + HeadTokenType }}
{{ $t('TableList.pool') + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
......@@ -77,7 +77,7 @@
<th class="custom-before-line" ref="tableTrOne">
<div class="thead-sort-box">
<template v-if="item.title == 'Pool'">
{{ $t("TableList.pool") + HeadTokenType }}
{{ $t('TableList.pool') + HeadTokenType }}
</template>
<template v-else>
{{ item.title }}
......@@ -169,7 +169,7 @@
<template v-if="!resultData.list.length">
<tr>
<td colspan="12">
<div class="custom-no-list">{{ $t("filter.noList") }}</div>
<div class="custom-no-list">{{ $t('filter.noList') }}</div>
</td>
</tr>
</template>
......@@ -189,23 +189,23 @@
</template>
<script lang="ts" setup>
import { parsePercent, parseCoinAmount, parseNumberToK } from "@/utils/tool";
import { useI18n } from "vue-i18n";
import CustPagination from "./CustPagination.vue";
import request from "@/utils/request";
import { filterChainObj, getSwap } from "@/constants/UnifiedManagementChain";
import JumpOther from "./JumpOther.vue";
import KLink from "/public/images/svg/table/k_link.svg";
import analysisSvg from "/public/images/svg/table/media.svg";
import { webLogo } from "@/constants/logo";
import CustomTableSort from "./tableSort.vue";
import { TableSort, TableSortAsc } from "@/utils/tool";
import CustomRadio from "../CustomComponent/radio.vue";
import BscChain from "/public/images/svg/selectChain/bsc.svg";
import SwapSvg from "/public/images/svg/socialInfoWrapper/bscTransaction.svg";
import CustomAvatar from "./avatar.vue";
import TokenAvatar from "./tokenAvatar.vue";
import useSwap from "@/hooks/useSwap";
import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
import CustPagination from './CustPagination.vue';
import request from '@/utils/request';
import { filterChainObj, getSwap } from '@/constants/UnifiedManagementChain';
import JumpOther from './JumpOther.vue';
import KLink from '/public/images/svg/table/k_link.svg';
import analysisSvg from '/public/images/svg/table/media.svg';
import { webLogo } from '@/constants/logo';
import CustomTableSort from './tableSort.vue';
import { TableSort, TableSortAsc } from '@/utils/tool';
import CustomRadio from '../CustomComponent/radio.vue';
import BscChain from '/public/images/svg/selectChain/bsc.svg';
import SwapSvg from '/public/images/svg/socialInfoWrapper/bscTransaction.svg';
import CustomAvatar from './avatar.vue';
import TokenAvatar from './tokenAvatar.vue';
import useSwap from '@/hooks/useSwap';
const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
const route = useRoute();
const LoadHead = ref(false);
......@@ -223,7 +223,7 @@ const GlbFilter = useCurFilter();
const CurrentTime = useCurrentTimeChange();
// 吸顶元素
const affixedHeadRef = ref<HTMLDivElement | null>(null);
const affixedTableWidth = ref("");
const affixedTableWidth = ref('');
// 当前选中的行数
const CurLineIndex = ref(0);
// 表格数据轮询
......@@ -244,121 +244,121 @@ const colGroupList = reactive<{
const RightInfo = useCurrentRightInfo();
// 吸顶表头左右跟随滑动
const affixedHead = reactive({
left: "",
top: "",
height: "",
width: "",
left: '',
top: '',
height: '',
width: '',
});
// 当前排序状态
const SortOptions = reactive<any>({
up: {
field: "up",
type: "all",
field: 'up',
type: 'all',
status: false,
},
pb: {
field: "pb",
type: "all",
field: 'pb',
type: 'all',
status: false,
},
vn: {
field: "vn",
type: "all",
field: 'vn',
type: 'all',
status: false,
},
txn: {
field: "txn",
type: "all",
field: 'txn',
type: 'all',
status: false,
},
r5m: {
field: "r5m",
type: "all",
field: 'r5m',
type: 'all',
status: false,
},
r1h: {
field: "r1h",
type: "all",
field: 'r1h',
type: 'all',
status: false,
},
r4h: {
field: "r4h",
type: "all",
field: 'r4h',
type: 'all',
status: false,
},
r24h: {
field: "r24h",
type: "all",
field: 'r24h',
type: 'all',
status: false,
},
});
const currentBtn = ref("default");
const currentBtn = ref('default');
const btns = computed(() => [
{
label: t("filter.pairs"),
value: "default",
label: t('filter.pairs'),
value: 'default',
},
{
label: t("filter.updated"),
value: "new",
label: t('filter.updated'),
value: 'new',
},
{
label: t("filter.gainers"),
value: "max-up",
label: t('filter.gainers'),
value: 'max-up',
},
{
label: t("filter.losers"),
value: "max-down",
label: t('filter.losers'),
value: 'max-down',
},
{
label: t("filter.r24hVolume"),
value: "txn",
label: t('filter.r24hVolume'),
value: 'txn',
},
]);
const onFilterChange = (value: string) => {
if (value == "new") {
if (value == 'new') {
GlbFilter.value.nt = 1;
} else if (value == "default") {
} else if (value == 'default') {
GlbFilter.value.nt = 0;
}
// 永远请求第一页
pageNum.value = 1;
if (value == "txn") {
GlbFilter.value.date_orderby = "txn";
GlbFilter.value.sort = "desc";
} else if (value == "max-up") {
if (value == 'txn') {
GlbFilter.value.date_orderby = 'txn';
GlbFilter.value.sort = 'desc';
} else if (value == 'max-up') {
// 最大涨幅
GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = "desc";
} else if (value == "max-down") {
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'desc';
} else if (value == 'max-down') {
// 最大跌幅
GlbFilter.value.date_orderby = "r" + GlbFilter.value.range_date;
GlbFilter.value.sort = "asc";
GlbFilter.value.date_orderby = 'r' + GlbFilter.value.range_date;
GlbFilter.value.sort = 'asc';
}
getTableList();
};
// 获取涨跌幅
const getUpDown = (value: string) => {
if (value && value[0] == "-") {
if (value && value[0] == '-') {
return `${value}%`;
}
return `+${value}%`;
};
// 获取涨跌幅颜色
const getUpDownColor = (value: string) => {
if (value && value[0] == "-") {
if (value && value[0] == '-') {
// down
return "#f23645";
return '#f23645';
}
// up
return "#23ab94";
return '#23ab94';
};
// 获取表格可视区域宽度
const getTableWidth = () => {
if (CustomTable.value) {
// 获取元素可视区域宽度
let width = CustomTable.value.clientWidth;
affixedHead.width = width + "px";
affixedHead.width = width + 'px';
}
};
// 排序事件
......@@ -369,15 +369,15 @@ const submitSort = ({ sort, field }: any) => {
SortOptions[item].type = sort;
SortOptions[item].status = true;
} else {
SortOptions[item].type = "all";
SortOptions[item].type = 'all';
SortOptions[item].status = false;
}
});
// 开始排序
if (sort === "asc") {
if (sort === 'asc') {
// 升序
resultData.value.list = TableSortAsc(resultData.value.list, field);
} else if (sort === "desc") {
} else if (sort === 'desc') {
// 降序
resultData.value.list = TableSort(resultData.value.list, field);
} else {
......@@ -390,21 +390,21 @@ const submitSort = ({ sort, field }: any) => {
// 获取head的宽度赋给吸顶表头
const getMinWidth = () => {
if (CustomHead.value) {
affixedTableWidth.value = CustomHead.value.clientWidth + "px";
affixedTableWidth.value = CustomHead.value.clientWidth + 'px';
}
};
// 表格数据过滤方法
const TableFilter = (result: any) => {
if ("list" in result && result.list.length) {
if ('list' in result && result.list.length) {
result.list.forEach((item: any, index: number) => {
item.index = index + 1;
item.n_up = "$" + parseCoinAmount(item.up);
item.n_vn = "$" + parseNumberToK(item.vn);
item.n_up = '$' + parseCoinAmount(item.up);
item.n_vn = '$' + parseNumberToK(item.vn);
item.n_pb = parseNumberToK(item.pb);
item.n_r5m = parseFloat(item.r5m * 100 + "").toFixed(2);
item.n_r1h = parseFloat(item.r1h * 100 + "").toFixed(2);
item.n_r4h = parseFloat(item.r4h * 100 + "").toFixed(2);
item.n_r24h = parseFloat(item.r24h * 100 + "").toFixed(2);
item.n_r5m = parseFloat(item.r5m * 100 + '').toFixed(2);
item.n_r1h = parseFloat(item.r1h * 100 + '').toFixed(2);
item.n_r4h = parseFloat(item.r4h * 100 + '').toFixed(2);
item.n_r24h = parseFloat(item.r24h * 100 + '').toFixed(2);
//
item.n_r5m = getUpDown(item.n_r5m);
item.n_r1h = getUpDown(item.n_r1h);
......@@ -431,7 +431,7 @@ const getParams = () => {
};
if (CurrentTime.value) {
params.date = CurrentTime.value;
} else if ("date" in params) {
} else if ('date' in params) {
delete params.date;
}
return params;
......@@ -439,27 +439,27 @@ const getParams = () => {
// 获取host
const getBaseUrl = () => {
if (process.server) {
// if (process.dev) {
// return "http://156.247.9.93:9501";
// }
return "https://apiv1.dexfilter.com/";
if (process.dev) {
return 'http://156.247.9.93:9501';
}
return 'https://dexfilter.com';
} else {
return "/v1";
return '/v1';
}
};
//创建AbortController对象
const abortController = new AbortController();
// 预取数据
const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
params: getParams(),
lazy: true,
method: "GET",
mode: "cors",
credentials: "include",
// method: "GET",
// mode: "cors",
// credentials: "include",
baseURL: getBaseUrl(),
signal: abortController.signal,
onRequest(context: any) {},
onResponse({ request, response, options }) {
console.log(response.url);
console.log(response.status);
try {
loading.value = false;
if (response._data.data) {
......@@ -472,10 +472,10 @@ const { data, refresh } = await useFetch(() => `/v1${chain.value}/indexV1`, {
return response._data;
},
onRequestError({ error }) {
console.log(error, "请求错误");
console.log(error, '请求错误');
},
onResponseError(error) {
console.log(error, "返回的error");
console.log(error, '返回的error');
},
});
......@@ -492,18 +492,18 @@ const getDefaultList = () => {
}
};
const CustomgetRoute = () => {
if (route.params.chain && typeof route.params.chain == "string") {
let Obj = filterChainObj("name", route.params.chain);
if (route.params.chain && typeof route.params.chain == 'string') {
let Obj = filterChainObj('name', route.params.chain);
if (Obj) {
ChainObj.value = Obj;
chain.value = Obj.value;
HeadTokenType.value = ChainObj.value.Currency[0];
}
} else {
ChainObj.value = filterChainObj("value", chain.value);
ChainObj.value = filterChainObj('value', chain.value);
}
if (route.params.page && typeof route.params.page == "string") {
if (typeof parseInt(route.params.page) === "number")
if (route.params.page && typeof route.params.page == 'string') {
if (typeof parseInt(route.params.page) === 'number')
pageNum.value = parseInt(route.params.page);
GlbFilter.value.page = parseInt(route.params.page);
}
......@@ -516,9 +516,9 @@ useHead({
link: [webLogo],
meta: [
{
name: "description",
name: 'description',
content:
"DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。",
'DexFilter是一个链上过滤器，它对链上的所有数据进行统计、监控。可以通过过滤功能过滤出相应的链上项目。每个资金池都做了数据分析，深入分析资金池的涨跌趋势，方便用户做出判断，也方便用户查看资金池是否为貔貅。',
},
],
});
......@@ -529,7 +529,7 @@ const getColGroupWidth = () => {
// 动态改变吸顶表头的th宽度
colGroupList.list.forEach((it: any) => {
tableTrOne.value.forEach((item: any, index: number) => {
colGroupList.list[index] = item.clientWidth + "px";
colGroupList.list[index] = item.clientWidth + 'px';
});
});
};
......@@ -540,7 +540,7 @@ const getTableList = async () => {
let result: any = await request.get(`/v1${chain.value}/indexV1`, {
params: getParams(),
});
if (Object.prototype.toString.call(result) == "[object Array]") {
if (Object.prototype.toString.call(result) == '[object Array]') {
resultData.value.list = [];
resultData.value.filterList = [];
resultData.value.total = 0;
......@@ -564,16 +564,16 @@ watch(
CurLineIndex.value = 0;
pageNum.value = 1;
// 修改title
ChainObj.value = filterChainObj("value", chain.value);
ChainObj.value = filterChainObj('value', chain.value);
getTableList();
}
);
// 判断是否需要加$
const Judgment = () => {
if (HeadTokenType.value === "USDT") {
return "$";
if (HeadTokenType.value === 'USDT') {
return '$';
} else {
return "";
return '';
}
};
// tbName---流动池折线图传递参数
......@@ -588,11 +588,11 @@ const handleRowClick = (item: any, index: number) => {
};
// 监听是否切出页面
const listenerWindow = (fn: any) => {
document.addEventListener("visibilitychange", fn);
document.addEventListener('visibilitychange', fn);
};
// 取消监听
const closeListener = (fn: any) => {
document.removeEventListener("visibilitychange", fn);
document.removeEventListener('visibilitychange', fn);
};
// 有数据，开启定时器
const Intervalfun = () => {
......@@ -612,7 +612,7 @@ const closeInterVal = () => {
const windowOpenFn = (e: any) => {
// ==visible代表在当前窗口
let isExist = e.target.visibilityState;
if (isExist === "visible") {
if (isExist === 'visible') {
// 先关再开
closeInterVal();
Intervalfun();
......@@ -629,9 +629,9 @@ const onCurrentChange = (v: number) => {
};
const onScrollEvent = () => {
// 获取滚动元素dom
BodyscrollDom.value = document.getElementById("layout-scroll");
BodyscrollDom.value = document.getElementById('layout-scroll');
if (BodyscrollDom.value && CustomHead.value) {
affixedHead.top = BodyscrollDom.value.offsetTop + "px";
affixedHead.top = BodyscrollDom.value.offsetTop + 'px';
let Newclient = CustomHead.value.getBoundingClientRect();
if (Newclient.top <= BodyscrollDom.value.offsetTop) {
// 显示吸顶表头
......@@ -669,7 +669,7 @@ const onTableScroll = () => {
};
const setColGroupList = () => {
columnsChild.value.forEach((item: any) => {
colGroupList.list.push("0px");
colGroupList.list.push('0px');
});
};
onMounted(() => {
......@@ -727,79 +727,79 @@ onUnmounted(() => {
const columns = computed(() => {
return [
{
title: t("TableList.tokenbase"),
title: t('TableList.tokenbase'),
children: [
{
colKey: "index",
width: "auto",
title: "#",
colKey: 'index',
width: 'auto',
title: '#',
},
{
colKey: "tn",
title: t("TableList.token"),
colKey: 'tn',
title: t('TableList.token'),
},
],
},
{
title: t("TableList.basic"),
title: t('TableList.basic'),
children: [
{
colKey: "up",
title: t("TableList.price"),
colKey: 'up',
title: t('TableList.price'),
sort: true,
},
{
colKey: "pb",
title: "Pool",
colKey: 'pb',
title: 'Pool',
sort: true,
},
{
colKey: "vn",
title: t("TableList.volume"),
colKey: 'vn',
title: t('TableList.volume'),
sort: true,
},
{
colKey: "txn",
title: t("TableList.txns"),
colKey: 'txn',
title: t('TableList.txns'),
sort: true,
},
],
},
{
title: t("TableList.priceChange"),
title: t('TableList.priceChange'),
children: [
{
colKey: "r5m",
title: t("TableList.time1"),
colKey: 'r5m',
title: t('TableList.time1'),
sort: true,
},
{
colKey: "r1h",
title: t("TableList.time2"),
colKey: 'r1h',
title: t('TableList.time2'),
sort: true,
},
{
colKey: "r4h",
title: t("TableList.time3"),
colKey: 'r4h',
title: t('TableList.time3'),
sort: true,
},
{
colKey: "r24h",
title: t("TableList.time4"),
colKey: 'r24h',
title: t('TableList.time4'),
sort: true,
},
],
},
{
title: t("TableList.others"),
title: t('TableList.others'),
children: [
{
colKey: "operation",
title: t("TableList.k_line"),
colKey: 'operation',
title: t('TableList.k_line'),
},
{
colKey: "media",
title: t("TableList.mediaData"),
colKey: 'media',
title: t('TableList.mediaData'),
},
],
},
......@@ -819,21 +819,21 @@ const columnsChild = computed(() => {
let arr1 = new Array(100);
for (let i = 0; i < arr1.length; i++) {
arr1[i] = {
one: "1",
two: "2",
three: "3",
four: "4",
five: "5",
sex: "6",
seven: "7",
one: '1',
two: '2',
three: '3',
four: '4',
five: '5',
sex: '6',
seven: '7',
};
}
</script>
<style lang="less">
@import "@/style/variables.less";
@import "@/style/line.less";
@import "@/style/flex.less";
@import '@/style/variables.less';
@import '@/style/line.less';
@import '@/style/flex.less';
.custom-token-list {
margin-top: 8px;
box-sizing: border-box;
......@@ -876,7 +876,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: "bold";
font-family: 'bold';
padding: 4px 12px;
}
.t-align-center {
......@@ -899,7 +899,7 @@ for (let i = 0; i < arr1.length; i++) {
th {
font-weight: 500;
font-size: 14px;
font-family: "Medium";
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
padding: 20px 12px;
.thead-sort-box {
......@@ -941,7 +941,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
color: var(--td--main-btn-color-1);
white-space: nowrap;
font-family: "bold";
font-family: 'bold';
padding: 4px 12px;
}
.t-align-center {
......@@ -964,7 +964,7 @@ for (let i = 0; i < arr1.length; i++) {
th {
font-weight: 500;
font-size: 14px;
font-family: "Medium";
font-family: 'Medium';
border-bottom: 1px solid var(--new-border-4);
padding: 20px 12px;
.thead-sort-box {
......@@ -989,7 +989,7 @@ for (let i = 0; i < arr1.length; i++) {
border: none;
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: "Regular";
font-family: 'Regular';
padding: 16px 12px;
.custom-no-list {
.dja();
......@@ -1020,7 +1020,7 @@ for (let i = 0; i < arr1.length; i++) {
color: var(--main-theme-color);
font-weight: 700;
font-size: 16px;
font-family: "bold";
font-family: 'bold';
}
.symbol {
color: var(--td-search-btn-back-1);
......
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 { parsePercent, parseCoinAmount } from "@/utils/tool";
import TimeTab from "./TimeTab.vue";
import SecurityCheck from "./SecurityCheck.vue";
import TokenInfo from "./TokenInfo.vue";
import TokenPool from "./TokenPool.vue";
import TokenSocialList from "./TokenSocialList.vue";
import * as Cache from "@/utils/cache";
import { MessagePlugin } from "tdesign-vue-next";
import DetailsEcharts from "../analysis/detailsEcharts.vue";
import Detailsicon from "/public/images/svg/rightDetail/detailsicon.svg";
import Favo from "/public/images/svg/rightDetail/favo.svg";
import CollectionSvg from "/public/images/svg/rightDetail/colection.svg";
import { useI18n } from "vue-i18n";
import RightDetailHeader from "./rightDetailHeader.vue";
import SubmitSocialInfo from "./SubmitSocialInfo";
import Collection from "./collection";
import request from '@/utils/request';
import { parsePercent, parseCoinAmount } from '@/utils/tool';
import TimeTab from './TimeTab.vue';
import SecurityCheck from './SecurityCheck.vue';
import TokenInfo from './TokenInfo.vue';
import TokenPool from './TokenPool.vue';
import TokenSocialList from './TokenSocialList.vue';
import * as Cache from '@/utils/cache';
import { MessagePlugin } from 'tdesign-vue-next';
import DetailsEcharts from '../analysis/detailsEcharts.vue';
import Detailsicon from '/public/images/svg/rightDetail/detailsicon.svg';
import Favo from '/public/images/svg/rightDetail/favo.svg';
import CollectionSvg from '/public/images/svg/rightDetail/colection.svg';
import { useI18n } from 'vue-i18n';
import RightDetailHeader from './rightDetailHeader.vue';
import SubmitSocialInfo from './SubmitSocialInfo';
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"),
value: "details",
label: t('securityCheck.details'),
value: 'details',
},
{
label: t("filter.Collection"),
value: "collection",
label: t('filter.Collection'),
value: 'collection',
},
{
label: t("securityCheck.analysis"),
value: "echart",
label: t('securityCheck.analysis'),
value: 'echart',
},
]);
const props = defineProps({
......@@ -154,52 +154,52 @@ const props = defineProps({
mt: String,
up: Number,
});
const emit = defineEmits(["update:setPool", "SettwitterRul"]);
const r24h = ref("");
const numR24h = ref("");
const emit = defineEmits(['update:setPool', 'SettwitterRul']);
const r24h = 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: "",
token: "",
avatar: '',
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 + "");
if (r24h.value[0] !== "-") {
r24h.value = "+" + r24h.value;
r24h.value = parsePercent(proR24h + '');
if (r24h.value[0] !== '-') {
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.tokenSub = "";
result.marketCap = parseFloat(result.supply * result.up + '').toFixed(1);
result.tokenSub = '';
if (result.token) {
result.tokenSub =
result.token.substr(0, 6) +
"..." +
'...' +
result.token.substr(result.token.length - 4, 4);
}
// tbname-掩码
result.tbnameSub = "";
result.n_tb = "";
result.tbnameSub = '';
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) {
emit("SettwitterRul", result.chat.twitter);
if ('chat' in result) {
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/variables.less";
@import '@/style/flex.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);
......
views/token/avatar.vue
......@@ -13,13 +13,13 @@
<script lang="ts" setup>
const props = withDefaults(
defineProps<{
value: string;
value?: string;
width?: string;
height?: string;
}>(),
{
width: "30px",
height: "30px",
width: '30px',
height: '30px',
}
);
// 获取token首字母
......@@ -28,12 +28,12 @@ const getTokenInitials = () => {
if (value) {
return value[0];
}
return "";
return '';
};
</script>
<style lang="less">
@import "@/style/flex.less";
@import '@/style/flex.less';
.avatar-icon {
border-radius: 50%;
background: #5f6e78;
......@@ -41,7 +41,7 @@ const getTokenInitials = () => {
.dja();
font-weight: 500;
font-size: 17px;
font-family: "Medium";
font-family: 'Medium';
margin-right: 12px;
}
</style>
views/token/rightDetailHeader.vue
......@@ -19,7 +19,7 @@
</div>
<div class="address-info">
<span class="address-info-item">
<span>{{ $t("TableList.token") }}</span>
<span>{{ $t('TableList.token') }}</span>
<span class="address">：{{ tokenInfo.tokenSub }}</span>
<span @click="doCopy(tokenInfo.token)">
<CopySvg></CopySvg>
......@@ -28,7 +28,7 @@
</div>
<div class="address-info margin">
<span class="address-info-item">
<span>{{ $t("TableList.pool") }}</span>
<span>{{ $t('TableList.pool') }}</span>
<span class="address">：{{ tokenInfo.tbnameSub }}</span>
<span @click="doCopy(tokenInfo.n_tb)">
<CopySvg></CopySvg>
......@@ -75,15 +75,15 @@
</template>
<script lang="ts" setup>
import { defineComponent, computed } from "vue";
import { useI18n } from "vue-i18n";
import CopySvg from "/public/images/svg/rightDetail/copy.svg";
import useCopy from "@/hooks/useCopy";
import * as Cache from "@/utils/cache";
import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
import { parseCoinAmount } from "@/utils/tool";
import AvatarVue from "./avatar.vue";
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CopySvg from '/public/images/svg/rightDetail/copy.svg';
import useCopy from '@/hooks/useCopy';
import * as Cache from '@/utils/cache';
import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
import { parseCoinAmount } from '@/utils/tool';
import AvatarVue from './avatar.vue';
const props = defineProps<{
tokenInfo: any;
numR24h: string;
......@@ -92,7 +92,7 @@ const props = defineProps<{
tb: string;
currentPath: string;
}>();
const emit = defineEmits(["update:isInCollection"]);
const emit = defineEmits(['update:isInCollection']);
const { t } = useI18n();
// 收藏表格是否更新
const CollectionCl = CollectionChange();
......@@ -101,19 +101,19 @@ const getPrice = () => {
try {
const { tokenInfo } = props;
if (tokenInfo) {
if ("up" in tokenInfo) {
if ('up' in tokenInfo) {
let up = parseCoinAmount(tokenInfo.up);
if (up.indexOf("{") !== -1) {
if (up.indexOf('{') !== -1) {
up = up.slice(0, up.length - 2);
}
return up;
} else {
return "";
return '';
}
}
} catch (e) {
console.log(e);
return "";
return '';
}
};
const collectData = () => {
......@@ -126,24 +126,24 @@ const collectData = () => {
},
]);
}
emit("update:isInCollection", false);
emit('update:isInCollection', false);
} else {
Cache.setCollection({
hash: tb,
symbol: tokenInfo.symbol,
path: currentPath,
});
emit("update:isInCollection", true);
emit('update:isInCollection', true);
}
// 通知select中的收藏数据更新
CollectionCl.value += 1;
};
const r24hColor = () => {
if (props.r24h) {
if (props.r24h[0] === "-") {
return "#f85260";
if (props.r24h[0] === '-') {
return '#f85260';
} else {
return "#23ab94";
return '#23ab94';
}
}
};
......@@ -151,21 +151,21 @@ const getImg = computed(() => {
const { tokenInfo } = props;
try {
if (Object.keys(tokenInfo).length) {
if ("chat" in tokenInfo) {
if ('chat' in tokenInfo) {
return tokenInfo.chat.img;
} else {
return "";
return '';
}
}
} catch (e) {
console.log(e);
return "";
return '';
}
});
</script>
<style lang="less">
@import "@/style/flex.less";
@import '@/style/flex.less';
.header-token-box {
margin-top: -1px;
box-sizing: border-box;
......@@ -198,17 +198,18 @@ const getImg = computed(() => {
height: 100%;
.token-name-child {
.da();
max-width: 176px;
color: var(--td-right-detail-font-color-1);
line-height: 47px;
min-height: 47px;
.title {
max-width: 100px;
font-weight: 700;
font-size: 26px;
overflow-x: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "bold";
font-family: 'bold';
}
img {
width: 38px;
......@@ -226,7 +227,7 @@ const getImg = computed(() => {
.address-info {
display: flex;
color: var(--new-color-7);
font-family: "Regular";
font-family: 'Regular';
margin-top: 1px;
.address-info-item {
font-size: var(--font-size);
......@@ -259,7 +260,7 @@ const getImg = computed(() => {
font-weight: 700;
font-size: 28px;
min-height: 50px;
font-family: "bold";
font-family: 'bold';
color: var(--td-Search-info-color-1);
}
.r24h-cl {
......@@ -267,7 +268,7 @@ const getImg = computed(() => {
font-weight: normal;
margin-top: -3px;
text-align: right;
font-family: "Medium";
font-family: 'Medium';
}
}
.kline-btn {
......
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