Skip to content

D
dexfilter-web-nuxt3
Commit c701a547 by lei
Options

1

parent 7c606977
Showing with 376 additions and 94 deletions
components/SwitchLanguage.vue
<template>
<div class="">
<div class="custom-chose-lang">
<t-select
class="language-select"
:bordered="true"
......@@ -37,16 +37,18 @@ const changeLanguage = (v: string) => {
</script>
<style lang="less" scoped>
.language-select {
margin-right: 16px;
width: 108px;
display: flex;
justify-content: center;
align-items: center;
:deep(.t-input__inner) {
font-weight: 700;
font-size: 15px;
font-family: "bold";
.custom-chose-lang {
.language-select {
margin-right: 16px;
width: 108px;
display: flex;
justify-content: center;
align-items: center;
:deep(.t-input__inner) {
font-weight: 700;
font-size: 15px;
font-family: "bold";
}
}
}
</style>
style/reset.css
......@@ -4,7 +4,7 @@ body {
padding: 0;
margin: 0;
}
html {
/* html {
font-size: 14px;
}
@media screen and (max-width: 1550px) {
......@@ -24,15 +24,7 @@ html {
.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;
......@@ -47,4 +39,7 @@ html {
}
.right-body-scroll .right-body {
}
}
.custom-search-drawer .t-drawer__content-wrapper {
zoom: 0.8;
}
} */
views/CustomComponent/select/index.vue 0 → 100644
<template>
<div
class="t-select"
:style="{ width: width }"
v-clickOutside
:class="{ 't-select-Selected-class': postionShow }"
>
<slot name="prefix"></slot>
<input type="text" :placeholder="placeholder" readonly :value="selectVal" />
<!-- 上下旋转的箭头 -->
<span class="ChevronDown-box" ref="ChevronDown">
<ChevronDownIcon class="icon" />
</span>
<transition name="select-fade">
<div
class="t-position-box"
:style="{ maxHeight: positionMaxHeight }"
v-show="postionShow"
>
<li
v-for="(item, index) in options"
:key="item"
class="item-li"
@click.stop="change(item, index)"
:class="{ active: selectVal === item[filedLabel] }"
>
<span>{{ item[filedLabel] }}</span>
</li>
</div>
</transition>
</div>
</template>
<script lang="tsx" setup>
import { ref } from "@vue/reactivity";
import { ChevronDownIcon } from "tdesign-icons-vue-next";
import { nextTick, onMounted } from "vue";
// props
const props = defineProps({
options: {
type: Array,
default: () => [],
},
filedLabel: {
type: String,
default: "label",
},
filedValue: {
type: String,
default: "value",
},
placeholder: {
type: String,
default: "请选择",
},
value: {
type: String,
},
width: {
type: String,
default: "120px",
},
});
const emit = defineEmits(["change", "update:value"]);
const postionShow = ref(false);
let DefaultLabel = props.options.find(
(item: any) => item.value === props.value
);
const selectVal = ref(DefaultLabel.label);
const ChevronDown: any = ref(null);
const thisEl: any = ref(null);
// dom元素
const domCl = ref(null);
// 下拉菜单最大高度
const positionMaxHeight = ref("");
const handler = (e: any) => {
if (thisEl.value.contains(e.target)) {
if (postionShow.value === true) {
postionShow.value = false;
if (ChevronDown.value) {
ChevronDown.value.children[0].classList.replace(
"t-fake-arrow--active",
"t-fake-arrow--remove"
);
}
} else {
postionShow.value = true;
// 给父盒子添加点击后的样式
// 给箭头添加旋转样式
ChevronDown.value.children[0].classList.remove("t-fake-arrow--remove");
ChevronDown.value.children[0].classList.toggle("t-fake-arrow--active");
}
} else {
postionShow.value = false;
ChevronDown.value.children[0].classList.replace(
"t-fake-arrow--active",
"t-fake-arrow--remove"
);
}
};
// 自定义指令
const vClickOutside = {
beforeMount: (el: any) => {
thisEl.value = el;
// 计算出手机距离屏幕底部的距离，设为maxheight
domCl.value = el;
document.addEventListener("click", handler);
},
beforeUnmount: () => {
// 注销
document.removeEventListener("click", handler);
},
};
onMounted(() => {
nextTick(() => {
try {
if (domCl.value) {
let clientRect = domCl.value.getBoundingClientRect();
if (clientRect.height) {
positionMaxHeight.value =
document.documentElement.clientHeight -
clientRect.height -
clientRect.top -
document.documentElement.clientHeight * 0.08 -
24 +
"px";
}
}
} catch (e) {
console.log(e);
}
});
});
const change = (item, index) => {
selectVal.value = item.label;
postionShow.value = false;
emit("update:value", item[props.filedValue]);
emit("change", item[props.filedValue], index);
};
</script>
<style lang="less" scoped>
@import "@/style/flex.less";
.t-select {
width: 120px;
height: 32px;
position: relative;
.dja();
border: 1px solid #ddd;
border-radius: 4px;
transition: all 0.3s;
input {
border: none;
border-radius: 4px;
outline: none;
width: 100%;
box-sizing: border-box;
line-height: inherit;
flex: 1;
padding: 0;
text-align: center;
font-size: 12px;
background: transparent;
color: black;
}
// 旋转的箭头
.ChevronDown-box {
font-size: 16px;
.icon {
width: 18px;
height: 18px;
color: var(--home-page-color-19);
margin-bottom: 2px;
margin-right: 8px;
}
// 旋转样式
.t-fake-arrow--active {
animation: customAnimation1 400ms;
animation-fill-mode: forwards;
}
@keyframes customAnimation1 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
//点击恢复转动的样式：
.t-fake-arrow--remove {
animation: customAnimation2 500ms;
animation-fill-mode: forwards;
}
@keyframes customAnimation2 {
from {
transform: rotate(180deg);
}
to {
transform: rotate(0deg);
}
}
}
.t-position-box {
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
top: 40px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.1);
z-index: 1000;
background: var(--custom-body-back-color);
border-radius: 4px;
overflow-y: auto;
border: 1px solid var(--home-page-color-19);
li {
height: 32px;
display: flex;
align-items: center;
font-size: 12px;
border-bottom: 1px solid var(--home-page-color-19);
color: var(--home-page-color-1);
.dja();
span {
.icon {
width: 20px;
height: 20px;
}
}
}
.active {
color: var(--home-page-color-19);
}
}
}
// select选中后的样式
.t-select-Selected-class {
border: 1px solid var(--theme-color20);
box-shadow: 0px 0px 5px var(--theme-color20);
transition: all 0.3s;
.ChevronDown-box {
.icon {
color: var(--theme-color20) !important;
}
}
}
//内容打开动画
.select-fade-enter-active {
transition: all 0.15s ease-out;
}
.select-fade-leave-active {
transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}
.select-fade-enter-from,
.select-fade-leave-to {
transform: translateY(-6px);
opacity: 0;
}
</style>
views/layout/searchList.vue
......@@ -8,7 +8,7 @@
></TokenAvatar>
</template>
<template v-else>
<DefaultAvatar :value="item.tn"></DefaultAvatar>
<DefaultAvatar :value="item.name"></DefaultAvatar>
</template>
</div>
<div class="token-information">
......@@ -68,24 +68,24 @@
</template>
<script lang="ts" setup>
import * as Cache from '@/utils/cache';
import { StarIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
import JumpOther from '/views/token/JumpOther.vue';
import analysisSvg from '/public/images/svg/table/media.svg';
import KLink from '/public/images/svg/table/k_link.svg';
import TokenAvatar from '@/views/token/tokenAvatar.vue';
import DefaultAvatar from '@/views/token/avatar.vue';
import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
import * as Cache from "@/utils/cache";
import { StarIcon, StarFilledIcon } from "tdesign-icons-vue-next";
import JumpOther from "/views/token/JumpOther.vue";
import analysisSvg from "/public/images/svg/table/media.svg";
import KLink from "/public/images/svg/table/k_link.svg";
import TokenAvatar from "@/views/token/tokenAvatar.vue";
import DefaultAvatar from "@/views/token/avatar.vue";
import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
import {
chain_options,
filterChainObj,
getSwap,
} from '@/constants/UnifiedManagementChain';
import useSwap from '@/hooks/useSwap';
} from "@/constants/UnifiedManagementChain";
import useSwap from "@/hooks/useSwap";
const { ChainObj, getCurSwap, getCurChainImg } = useSwap();
const chain = useChain();
ChainObj.value = filterChainObj('value', chain.value);
ChainObj.value = filterChainObj("value", chain.value);
const props = withDefaults(
defineProps<{
options: any[];
......@@ -104,7 +104,7 @@ const goDetail = (row) => {
};
const collectData = (item) => {
let chain_id = item.chainId;
let obj = filterChainObj('chain_id', chain_id);
let obj = filterChainObj("chain_id", chain_id);
if (item.isStar) {
Cache.deleteCollection([
{
......@@ -128,17 +128,17 @@ const onCustomClick = (item: any) => {
// 监听正负改变颜色
const monitor = (item) => {
if (item[0] === '-') {
return '#f85260';
if (item[0] === "-") {
return "#f85260";
} else {
return '#23ab94';
return "#23ab94";
}
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
@import "@/style/variables.less";
@import "@/style/flex.less";
.total-token-info {
position: relative;
width: 98%;
......@@ -171,7 +171,7 @@ const monitor = (item) => {
width: 70%;
:nth-child(1) {
color: @td-search-btn-back-1;
font-family: 'Regular';
font-family: "Regular";
}
:nth-child(2) {
overflow: hidden;
......@@ -182,7 +182,7 @@ const monitor = (item) => {
}
& > :not(:first-child) {
font-weight: bold;
font-family: 'Medium';
font-family: "Medium";
}
}
.price-and-time {
......@@ -193,11 +193,11 @@ const monitor = (item) => {
.token {
:nth-child(1) {
color: @td-search-btn-back-1;
font-family: 'Regular';
font-family: "Regular";
}
:nth-child(2) {
font-weight: bold;
font-family: 'Medium';
font-family: "Medium";
}
}
.not_first {
......
views/token/CustomTokenList.vue
......@@ -844,7 +844,7 @@ for (let i = 0; i < arr1.length; i++) {
.custom-affixed-head {
position: fixed;
z-index: 200;
height: 90px;
height: 114px;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
......@@ -901,7 +901,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
font-family: "Medium";
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
padding: 20px 12px;
.thead-sort-box {
.dja();
cursor: pointer;
......@@ -966,7 +966,7 @@ for (let i = 0; i < arr1.length; i++) {
font-size: 14px;
font-family: "Medium";
border-bottom: 1px solid var(--new-border-4);
padding: 10px 12px;
padding: 20px 12px;
.thead-sort-box {
.dja();
cursor: pointer;
......@@ -990,7 +990,7 @@ for (let i = 0; i < arr1.length; i++) {
border-bottom: 1px solid var(--new-border-3);
background: var(--new-background-5);
font-family: "Regular";
padding: 10px 12px;
padding: 16px 12px;
.custom-no-list {
.dja();
height: 160px;
......
views/token/FilterTips.vue
......@@ -23,8 +23,8 @@
</template>
<script lang="ts" setup>
import request from '@/utils/request';
const swiperType = ref('default');
import request from "@/utils/request";
const swiperType = ref("default");
const picList = reactive({
list: [],
});
......@@ -35,7 +35,7 @@ const goDetail = (item: any) => {
};
const getPicList = async () => {
try {
let res: any = await request.get('/v1/picture');
let res: any = await request.get("/v1/picture");
picList.list = res;
if (picList.list.length == 1) {
picList.list = picList.list.concat(picList.list);
......@@ -49,7 +49,7 @@ const WatchWindow = () => {
let windowDom = document.documentElement.clientWidth;
if (windowDom > 1955) {
// 使用卡片模式
swiperType.value = 'card';
swiperType.value = "card";
}
};
onMounted(() => {
......@@ -61,7 +61,7 @@ onMounted(() => {
</script>
<style lang="less">
@import '@/style/flex.less';
@import "@/style/flex.less";
.Advertisement-box {
flex: 1;
padding-left: 6px;
......@@ -74,7 +74,7 @@ onMounted(() => {
height: 100%;
width: 100%;
.img {
height: 349px;
height: 314px;
max-width: 500px;
border-radius: 12px;
cursor: pointer;
......@@ -97,7 +97,7 @@ onMounted(() => {
img {
border-radius: 12px;
cursor: pointer;
height: 349px;
height: 314px;
max-width: 100%;
min-width: 500px;
}
......
views/token/TokenFilter.vue
......@@ -557,7 +557,7 @@ watch(formData, (v) => {
.custom-form-item {
min-height: auto;
padding: 0;
height: 3rem;
height: 37px;
background: var(--td--right-back-color-2);
.da();
position: relative;
......
views/token/avatar.vue
<template>
<div class="avatar-icon">
<div
class="avatar-icon"
:style="{
width: width,
height: height,
}"
>
{{ getTokenInitials() }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
value: string;
}>();
const props = withDefaults(
defineProps<{
value: string;
width?: string;
height?: string;
}>(),
{
width: "30px",
height: "30px",
}
);
// 获取token首字母
const getTokenInitials = () => {
const { value } = props;
if (value) {
return value[0];
}
return '';
return "";
};
</script>
<style lang="less">
@import '@/style/flex.less';
@import "@/style/flex.less";
.avatar-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: #5f6e78;
color: white;
.dja();
font-weight: 500;
font-size: 17px;
font-family: 'Medium';
font-family: "Medium";
margin-right: 12px;
}
</style>
views/token/rightDetailHeader.vue
......@@ -5,12 +5,21 @@
<div class="pro-tokeninfo-header">
<div class="left-token-name">
<div class="token-name-child">
<img :src="getImg" alt="swap" />
<template v-if="getImg">
<img :src="getImg" alt="swap" />
</template>
<template v-else>
<AvatarVue
:value="tokenInfo.name"
width="38px"
height="38px"
></AvatarVue>
</template>
<span class="title">{{ tokenInfo.symbol }}</span>
</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>
......@@ -19,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>
......@@ -66,14 +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 { 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;
......@@ -82,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();
......@@ -91,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 = () => {
......@@ -116,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";
}
}
};
......@@ -141,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 '/images/img/default-avatar.png';
return "";
}
}
} catch (e) {
console.log(e);
return '/images/img/default-avatar.png';
return "";
}
});
</script>
<style lang="less">
@import '@/style/flex.less';
@import "@/style/flex.less";
.header-token-box {
margin-top: -1px;
box-sizing: border-box;
......@@ -198,7 +208,7 @@ const getImg = computed(() => {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'bold';
font-family: "bold";
}
img {
width: 38px;
......@@ -209,11 +219,14 @@ const getImg = computed(() => {
:not(:first-child) {
margin-left: 10px;
}
.avatar-icon {
margin-right: 0;
}
}
.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);
......@@ -246,7 +259,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 {
......@@ -254,7 +267,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