Skip to content

D
dexfilter-web-nuxt3
Commit 7c606977 by lei
Options

1

parent d0ad903e
Showing with 187 additions and 138 deletions
app.vue
<template>
<NuxtPage></NuxtPage>
</template>
<script lang="ts" setup>
// window.devicePixelRatio--系统缩放比例
</script>
<style>
@import '@/style/reset.css';
@import 'tdesign-vue-next/es/style/index.css';
@import "@/style/reset.css";
@import "tdesign-vue-next/es/style/index.css";
</style>
public/images/svg/collection/asc.svg
<svg width="12" height="8" viewBox="0 0 12 8" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M5.19212 0.732744C5.51188 0.350785 6.0992 0.350784 6.41896 0.732743L10.9846 6.18647C11.4205 6.7072 11.0503 7.5 10.3712 7.5H1.23991C0.560795 7.5 0.190556 6.7072 0.626488 6.18647L5.19212 0.732744Z" fill=""/>
</svg>
\ No newline at end of file
<path d="M0.228243 6.46246L5.36518 0.312312C5.71065 -0.104105 6.31146 -0.104105 6.64191 0.312312L11.7788 6.46246C12.2745 7.05505 11.884 8 11.133 8L0.859095 8C0.123101 8 -0.282447 7.05505 0.228243 6.46246Z" fill=""/>
</svg>
public/images/svg/collection/desc.svg
<svg width="12" height="8" viewBox="0 0 12 8" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M6.86355 7.26726C6.54379 7.64922 5.95646 7.64922 5.6367 7.26726L1.07107 1.81353C0.635141 1.2928 1.00538 0.5 1.68449 0.5L10.8158 0.5C11.4949 0.5 11.8651 1.2928 11.4292 1.81353L6.86355 7.26726Z" fill=""/>
</svg>
\ No newline at end of file
<path d="M11.7718 1.53754L6.63482 7.68769C6.28935 8.1041 5.68854 8.1041 5.35809 7.68769L0.221155 1.53754C-0.274515 0.944945 0.116012 0 0.867027 0H11.1409C11.8769 0 12.2824 0.944945 11.7718 1.53754Z" fill=""/>
</svg>
style/layout.less
@import './variables.less';
@import "./variables.less";
// layout rewrite
.t-layout__sider {
......@@ -59,7 +59,6 @@
background-color: @brand-color;
.s-header {
// width: 1280px;
.t-menu {
background-color: @brand-color;
color: #fff;
......@@ -107,7 +106,7 @@
font-weight: 500;
&::after {
content: '';
content: "";
position: absolute;
bottom: 0px;
height: 2px;
......
style/reset.css
@import './default.css';
@import './ui.css';
@import "./default.css";
@import "./ui.css";
body {
padding: 0;
margin: 0;
}
html {
font-size: 14px;
}
@media screen and (max-width: 1550px) {
#__nuxt {
height: 100vh;
}
.t-layout {
zoom: 0.8;
height: 100%;
}
.t-layout .t-layout__content {
height: calc(100vh - 70px);
}
.home-wrapper {
width: 100% !important;
}
.token-page-wrapper {
flex: 1;
}
.filter-block-wrapper {
/* transform: scale(0.8);
transform-origin: 0 0;
height: 290px; */
}
/* 右侧 */
.home-wrapper .right-detail-wrapper {
/* transform: scale(0.8);
transform-origin: 0 0; */
width: 320px !important;
height: calc((100vh - 70px) * 1.25);
flex: none;
}
.right-detail-wrapper .details-title-box {
height: calc(100% - 40px);
display: flex;
flex-direction: column;
}
.right-body-scroll {
flex: 1;
}
.right-body-scroll .right-body {
}
}
views/layout/Header.vue
......@@ -29,20 +29,20 @@
</template>
<script setup lang="ts">
import LoginDropdown from './LoginDropdown.vue';
import Foxwallet from './Foxwallet.vue';
import Search from './Search.vue';
import HomeLogo from '/public/images/svg/header/homeLogoLight.svg';
import HomeLogo2 from '/public/images/svg/header/homeLogoDark.svg';
import { tgUrl } from '@/utils/open';
import LoginDropdown from "./LoginDropdown.vue";
import Foxwallet from "./Foxwallet.vue";
import Search from "./Search.vue";
import HomeLogo from "/public/images/svg/header/homeLogoLight.svg";
import HomeLogo2 from "/public/images/svg/header/homeLogoDark.svg";
import { tgUrl } from "@/utils/open";
const mode = useCurTheme();
const route = useRoute();
</script>
<style lang="less">
@import '../style/flex.less';
@import "../style/flex.less";
.s-header {
height: 100%;
border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
border-bottom: var(--new-border-2);
background: var(--td--right-back-color-2);
.t-menu {
background: var(--td--right-back-color-2);
......@@ -59,7 +59,7 @@ const route = useRoute();
text-decoration: none;
span {
padding-left: 10px;
font-family: 'Medium';
font-family: "Medium";
}
}
:hover .home-logo {
......
views/layout/layout.vue
......@@ -17,11 +17,19 @@
</template>
<script lang="ts" setup>
import Header from './Header.vue';
import Footer from './Footer.vue';
import Header from "./Header.vue";
import Footer from "./Footer.vue";
const route = useRoute();
</script>
<style lang="less">
@import '@/style/layout.less';
@import "@/style/layout.less";
// @media screen and (max-width: 1550px) {
// .t-layout {
// transform: scale(0.9);
// width: 100%;
// height: 100%;
// transform-origin: 0 0;
// }
// }
</style>
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/filterRadio.vue
......@@ -27,27 +27,27 @@ const props = withDefaults(
}>(),
{
options: [],
class: '',
class: "",
margin: false,
}
);
const emit = defineEmits(['update:modelValue', 'change']);
const emit = defineEmits(["update:modelValue", "change"]);
const parentclass = ref(props.class);
const currentBtn = ref(props.modelValue);
const btnChange = (item: any) => {
if (item.value == currentBtn.value) {
currentBtn.value = '';
currentBtn.value = "";
} else {
currentBtn.value = item.value;
}
// 请求接口
emit('update:modelValue', currentBtn.value);
emit('change', currentBtn.value);
emit("update:modelValue", currentBtn.value);
emit("change", currentBtn.value);
};
</script>
<style lang="less">
@import '@/style/flex.less';
@import "@/style/flex.less";
.custom-filter-radio-box {
.da();
.filter-radio-button {
......@@ -58,7 +58,7 @@ const btnChange = (item: any) => {
width: 105px;
height: 24px;
line-height: 22px;
font-family: 'Regular';
font-family: "Regular";
cursor: pointer;
color: var(--td-Search-info-color-1);
.dja();
......@@ -72,7 +72,7 @@ const btnChange = (item: any) => {
background: var(--td--main-btn-color-1);
color: white;
font-weight: 500;
font-family: 'Medium';
font-family: "Medium";
&:hover {
background: var(--td--main-btn-color-1);
color: white;
......
views/token/index.vue
......@@ -6,9 +6,7 @@
<ClientOnly>
<RollToken></RollToken>
</ClientOnly>
<div>
<TokenFilter></TokenFilter>
</div>
<TokenFilter></TokenFilter>
<NuxtPage></NuxtPage>
</div>
<RightDetail
......@@ -29,17 +27,17 @@
</template>
<script setup lang="ts">
import MyLayout from '@/views/layout/layout.vue';
import RightDetail from '@/views/token/RightDetail.vue';
import TokenFilter from '@/views/token/TokenFilter.vue';
import RollToken from '@/views/layout/rollToken.vue';
import MyLayout from "@/views/layout/layout.vue";
import RightDetail from "@/views/token/RightDetail.vue";
import TokenFilter from "@/views/token/TokenFilter.vue";
import RollToken from "@/views/layout/rollToken.vue";
const route = useRoute();
const token = ref();
const TbName = ref();
const r24h = ref();
const up = ref();
const chain = useChain();
const currentPath = ref('');
const currentPath = ref("");
onMounted(() => {
currentPath.value = chain.value;
});
......@@ -56,7 +54,7 @@ const changeChain = (chain) => {
</script>
<style lang="less">
@import '@/style/variables.less';
@import "@/style/variables.less";
.home-wrapper {
width: 100vw;
display: flex;
......
views/token/tableSort.vue
<template>
<div class="custom-sort-th">
<t-tooltip :content="$t('filter.asc')">
<AscSvg
:class="{ active: sorttype === 'asc' }"
class="sort-icon asc"
@click="sortChange('asc')"
></AscSvg>
<div @click="sortChange('asc')" class="sort-icon">
<AscSvg :class="{ active: sorttype === 'asc' }" class="asc"></AscSvg>
</div>
</t-tooltip>
<t-tooltip :content="$t('filter.desc')">
<DescSvg
:class="{ active: sorttype === 'desc' }"
class="sort-icon desc"
@click="sortChange('desc')"
></DescSvg>
<div @click="sortChange('desc')" class="sort-icon">
<DescSvg
:class="{ active: sorttype === 'desc' }"
class="desc"
></DescSvg>
</div>
</t-tooltip>
</div>
</template>
<script lang="ts" setup>
import AscSvg from '/public/images/svg/collection/asc.svg';
import DescSvg from '/public/images/svg/collection/desc.svg';
import AscSvg from "/public/images/svg/collection/asc.svg";
import DescSvg from "/public/images/svg/collection/desc.svg";
const props = defineProps({
sort: String,
field: String,
options: Object as any,
});
const emit = defineEmits(['submitSort']);
const emit = defineEmits(["submitSort"]);
// 当前排序状态
const sorttype = ref('all');
const sorttype = ref("all");
const sortChange = (value: string) => {
const { field } = props;
if (value == sorttype.value) {
// 代表重复点击--恢复表格初始状态
sorttype.value = 'all';
sorttype.value = "all";
} else {
sorttype.value = value;
}
emit('submitSort', {
emit("submitSort", {
sort: sorttype.value,
field: field,
});
......@@ -46,7 +45,7 @@ watch(
() => props.options,
(v) => {
if (!v.status) {
sorttype.value = 'all';
sorttype.value = "all";
}
},
{
......@@ -57,22 +56,24 @@ watch(
<style lang="less">
.custom-sort-th {
padding-left: 4px;
margin-left: 4px;
.sort-icon {
display: block;
fill: #7b7d87;
cursor: pointer;
transition: all 0.2s;
&:hover {
fill: var(--td--main-btn-color-1);
height: 10px;
line-height: 10px;
svg {
fill: #7b7d87;
transition: all 0.2s;
}
}
.asc {
padding: 2px 0;
}
.active {
fill: var(--td--main-btn-color-1);
.active {
fill: var(--td--main-btn-color-1);
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
transition: all 0.2s;
}
}
}
}
</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