Skip to content

D
dexfilter-web-nuxt3
Commit 02b3d41d by lei
Options

1

parent 7cef0826
Showing with 57 additions and 36 deletions
utils/plugin/LazyImage.ts 0 → 100644
const vImage = {
mounted: async (el: HTMLImageElement) => {
// let imgURL = el.src; //获取图片地址
// if (imgURL) {
// let copyNode = el.cloneNode(true);
// // 给一个默认图片
// let defaultImg = "/images/img/empty.png";
// copyNode.src = defaultImg;
// // 在头部添加一个gif加载动画
// let parent = el.parentNode;
// parent?.insertBefore(copyNode);
// el.style.display = "none";
// el.onerror = () => {
// el.src = defaultImg;
// };
// }
},
};
export default vImage;
utils/plugin/PopupTool.ts
import { Add } from "./PopupTool_Interface"; import { Add } from "../pluginInterface/PopupTool_Interface";
/** /**
* *
......
views/token/avatar.vue
...@@ -18,8 +18,8 @@ const props = withDefaults( ...@@ -18,8 +18,8 @@ const props = withDefaults(
height?: string; height?: string;
}>(), }>(),
{ {
width: '30px', width: "30px",
height: '30px', height: "30px",
} }
); );
// 获取token首字母 // 获取token首字母
...@@ -28,12 +28,12 @@ const getTokenInitials = () => { ...@@ -28,12 +28,12 @@ const getTokenInitials = () => {
if (value) { if (value) {
return value[0]; return value[0];
} }
return ''; return "";
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
.avatar-icon { .avatar-icon {
border-radius: 50%; border-radius: 50%;
background: #5f6e78; background: #5f6e78;
...@@ -41,7 +41,7 @@ const getTokenInitials = () => { ...@@ -41,7 +41,7 @@ const getTokenInitials = () => {
.dja(); .dja();
font-weight: 500; font-weight: 500;
font-size: 17px; font-size: 17px;
font-family: 'Medium'; font-family: "Medium";
margin-right: 12px; margin-right: 12px;
} }
</style> </style>
views/token/rightDetailHeader.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="left-token-name"> <div class="left-token-name">
<div class="token-name-child"> <div class="token-name-child">
<template v-if="getImg"> <template v-if="getImg">
<img :src="getImg" alt="swap" /> <img :src="getImg" alt="swap" v-image />
</template> </template>
<template v-else> <template v-else>
<AvatarVue <AvatarVue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</div> </div>
<div class="address-info"> <div class="address-info">
<span class="address-info-item"> <span class="address-info-item">
<span>{{ $t('TableList.token') }}</span> <span>{{ $t("TableList.token") }}</span>
<span class="address">：{{ tokenInfo.tokenSub }}</span> <span class="address">：{{ tokenInfo.tokenSub }}</span>
<span @click="doCopy(tokenInfo.token)"> <span @click="doCopy(tokenInfo.token)">
<CopySvg></CopySvg> <CopySvg></CopySvg>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<div class="address-info margin"> <div class="address-info margin">
<span class="address-info-item"> <span class="address-info-item">
<span>{{ $t('TableList.pool') }}</span> <span>{{ $t("TableList.pool") }}</span>
<span class="address">：{{ tokenInfo.tbnameSub }}</span> <span class="address">：{{ tokenInfo.tbnameSub }}</span>
<span @click="doCopy(tokenInfo.n_tb)"> <span @click="doCopy(tokenInfo.n_tb)">
<CopySvg></CopySvg> <CopySvg></CopySvg>
...@@ -75,15 +75,16 @@ ...@@ -75,15 +75,16 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, computed } from 'vue'; import { defineComponent, computed } from "vue";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import CopySvg from '/public/images/svg/rightDetail/copy.svg'; import CopySvg from "/public/images/svg/rightDetail/copy.svg";
import useCopy from '@/hooks/useCopy'; import useCopy from "@/hooks/useCopy";
import * as Cache from '@/utils/cache'; import * as Cache from "@/utils/cache";
import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg'; import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg'; import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
import { parseCoinAmount } from '@/utils/tool'; import { parseCoinAmount } from "@/utils/tool";
import AvatarVue from './avatar.vue'; import AvatarVue from "./avatar.vue";
import vImage from "@/utils/plugin/LazyImage";
const props = defineProps<{ const props = defineProps<{
tokenInfo: any; tokenInfo: any;
numR24h: string; numR24h: string;
...@@ -92,7 +93,7 @@ const props = defineProps<{ ...@@ -92,7 +93,7 @@ const props = defineProps<{
tb: string; tb: string;
currentPath: string; currentPath: string;
}>(); }>();
const emit = defineEmits(['update:isInCollection']); const emit = defineEmits(["update:isInCollection"]);
const { t } = useI18n(); const { t } = useI18n();
// 收藏表格是否更新 // 收藏表格是否更新
const CollectionCl = CollectionChange(); const CollectionCl = CollectionChange();
...@@ -101,19 +102,19 @@ const getPrice = () => { ...@@ -101,19 +102,19 @@ const getPrice = () => {
try { try {
const { tokenInfo } = props; const { tokenInfo } = props;
if (tokenInfo) { if (tokenInfo) {
if ('up' in tokenInfo) { if ("up" in tokenInfo) {
let up = parseCoinAmount(tokenInfo.up); let up = parseCoinAmount(tokenInfo.up);
if (up.indexOf('{') !== -1) { if (up.indexOf("{") !== -1) {
up = up.slice(0, up.length - 2); up = up.slice(0, up.length - 2);
} }
return up; return up;
} else { } else {
return ''; return "";
} }
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
return ''; return "";
} }
}; };
const collectData = () => { const collectData = () => {
...@@ -126,24 +127,24 @@ const collectData = () => { ...@@ -126,24 +127,24 @@ const collectData = () => {
}, },
]); ]);
} }
emit('update:isInCollection', false); emit("update:isInCollection", false);
} else { } else {
Cache.setCollection({ Cache.setCollection({
hash: tb, hash: tb,
symbol: tokenInfo.symbol, symbol: tokenInfo.symbol,
path: currentPath, path: currentPath,
}); });
emit('update:isInCollection', true); emit("update:isInCollection", true);
} }
// 通知select中的收藏数据更新 // 通知select中的收藏数据更新
CollectionCl.value += 1; CollectionCl.value += 1;
}; };
const r24hColor = () => { const r24hColor = () => {
if (props.r24h) { if (props.r24h) {
if (props.r24h[0] === '-') { if (props.r24h[0] === "-") {
return '#f85260'; return "#f85260";
} else { } else {
return '#23ab94'; return "#23ab94";
} }
} }
}; };
...@@ -151,21 +152,21 @@ const getImg = computed(() => { ...@@ -151,21 +152,21 @@ const getImg = computed(() => {
const { tokenInfo } = props; const { tokenInfo } = props;
try { try {
if (Object.keys(tokenInfo).length) { if (Object.keys(tokenInfo).length) {
if ('chat' in tokenInfo) { if ("chat" in tokenInfo) {
return tokenInfo.chat.img; return tokenInfo.chat.img;
} else { } else {
return ''; return "";
} }
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
return ''; return "";
} }
}); });
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
.header-token-box { .header-token-box {
margin-top: -1px; margin-top: -1px;
box-sizing: border-box; box-sizing: border-box;
...@@ -209,7 +210,7 @@ const getImg = computed(() => { ...@@ -209,7 +210,7 @@ const getImg = computed(() => {
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-family: 'bold'; font-family: "bold";
} }
img { img {
width: 38px; width: 38px;
...@@ -227,7 +228,7 @@ const getImg = computed(() => { ...@@ -227,7 +228,7 @@ const getImg = computed(() => {
.address-info { .address-info {
display: flex; display: flex;
color: var(--new-color-7); color: var(--new-color-7);
font-family: 'Regular'; font-family: "Regular";
margin-top: 1px; margin-top: 1px;
.address-info-item { .address-info-item {
font-size: var(--font-size); font-size: var(--font-size);
...@@ -260,7 +261,7 @@ const getImg = computed(() => { ...@@ -260,7 +261,7 @@ const getImg = computed(() => {
font-weight: 700; font-weight: 700;
font-size: 28px; font-size: 28px;
min-height: 50px; min-height: 50px;
font-family: 'bold'; font-family: "bold";
color: var(--td-Search-info-color-1); color: var(--td-Search-info-color-1);
} }
.r24h-cl { .r24h-cl {
...@@ -268,7 +269,7 @@ const getImg = computed(() => { ...@@ -268,7 +269,7 @@ const getImg = computed(() => {
font-weight: normal; font-weight: normal;
margin-top: -3px; margin-top: -3px;
text-align: right; text-align: right;
font-family: 'Medium'; font-family: "Medium";
} }
} }
.kline-btn { .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