Skip to content

D
dexfilter-web-nuxt3
Commit 630fedca by haojie
Options

1

parent 18c19665
Showing with 602 additions and 362 deletions
composables/useToken.ts
......@@ -55,3 +55,8 @@ export const UsePreRenderList = () => {
export const useUserAddress = () => {
return useState('walletAddress', () => '');
};
// 当前k线的价格
export const useCurrentKLinePrice = () => {
return useState('CurrentKLinePrice', () => 0);
};
language/cn.ts
......@@ -6,22 +6,34 @@
const cn = {
tips: {
title1: '温馨提示',
title2: '所有筛选条件都可组合进行筛选，如果筛选不出项目，则链上没有配对的项目！',
title2:
'所有筛选条件都可组合进行筛选，如果筛选不出项目，则链上没有配对的项目！',
contentTitle1: '过去时段',
contentvalue1:
'过去24个小时内的流动池的交易汇总。例如：选择5M表示的是过去5分钟内整个链接所有流动池的交易汇总、选择1小时，则是过去1小时内整个链上所有流动池的交易汇总。',
poolSizeTitle: '流动池大小',
poolSizeValue: '交易配对流动池的大小，点击“USD”或 “WBNB”切换到相对应的计算单位。',
poolSizeValue:
'交易配对流动池的大小，点击“USD”或 “WBNB”切换到相对应的计算单位。',
PirceRange: '涨跌幅度',
PirceRangeValue:
'交易配对在某个时间段内的涨跌幅度，可通过“时间区间”的筛选条件进行组合筛选，点击“+”或“-”查看涨或跌。',
NewHolder: '新增持有人',
NewHolderValue: '第一次购买某项目代币则为新持有人，但代币转让则不包含为新增持有人。',
NewHolderValue:
'第一次购买某项目代币则为新持有人，但代币转让则不包含为新增持有人。',
Volume: '成交量',
VolumeValue: '指一个时间单位内对某项交易成交的数量，可通过“时间区间”的筛选条件进行组合筛选。',
VolumeValue:
'指一个时间单位内对某项交易成交的数量，可通过“时间区间”的筛选条件进行组合筛选。',
txn: '交易笔数',
txnValue: '买或卖各为一笔交易，则是交易笔数。',
},
filter: {
pairs: '交易配对',
updated: '最新上币',
gainers: '最大涨幅',
losers: '最大跌幅',
r24hVolume: '最大交易',
CustomFilter: '高级筛选',
},
login: {
h1: '区块链监控专家',
h2: '一站式监控服务',
......@@ -343,11 +355,14 @@ const cn = {
InvitationEmail: '邮箱号',
// 邀请规则
InvitationRules: '邀请规则',
Rule1: '需至少购买一月的会员时长，系统会自动生成"邀请码" "邀请链接" "邀请二维码"。',
Rule2: '没有通过“邀请链接”注册的好友，可以告知好友在“会员中心-会员”页面里，绑定我的邀请码，可以绑定推荐关系。',
Rule1:
'需至少购买一月的会员时长，系统会自动生成"邀请码" "邀请链接" "邀请二维码"。',
Rule2:
'没有通过“邀请链接”注册的好友，可以告知好友在“会员中心-会员”页面里，绑定我的邀请码，可以绑定推荐关系。',
Rule3:
'与我的 "邀请码" 绑定推荐关系后，好友每购买一个月的会员时长，系统将会奖励一天会员使用或15天的返佣奖励，可在奖励领取内自行选择奖励。',
Rule4: '通过邀请获得的积分可以在奖励领取内兑换奖励，奖励有 "会员天数" "现金"。',
Rule4:
'通过邀请获得的积分可以在奖励领取内兑换奖励，奖励有 "会员天数" "现金"。',
Rule5: '邀请码不能绑定自己的账号。',
// 账单明细页面--表格
Packages: '套餐',
......@@ -361,7 +376,8 @@ const cn = {
},
Announcement: {
title: '自定义定制开发功能',
content: '支持区块链多种自定义需求功能开发，例如：智能警报自定义开发、智能夹子自定义开发、自动抢币等开发。',
content:
'支持区块链多种自定义需求功能开发，例如：智能警报自定义开发、智能夹子自定义开发、自动抢币等开发。',
},
footer: {
Introduce:
......
language/en.ts
......@@ -24,7 +24,16 @@ const cn = {
VolumeValue:
'This refers to the number of transactions executed within a time unit, and can be filtered by a combination of the "time interval" filter.',
txn: 'Txns',
txnValue: 'If you buy or sell one transaction each, then it is the number of transactions.',
txnValue:
'If you buy or sell one transaction each, then it is the number of transactions.',
},
filter: {
pairs: 'Pairs',
updated: 'Updated',
gainers: 'Gainers',
losers: 'Losers',
r24hVolume: '24h Volume',
CustomFilter: 'Custom filters',
},
login: {
h1: 'On-chain intelligent screening',
......@@ -204,7 +213,8 @@ const cn = {
LargeOrderTracking: 'Whales Tracking',
PriceAlert: 'Price Alert',
// 定制提示
customtitle: 'This feature is a custom development feature, please contact customer service for customization.',
customtitle:
'This feature is a custom development feature, please contact customer service for customization.',
// max-min
max: 'Max',
min: 'Min',
......@@ -306,7 +316,8 @@ const cn = {
enterUserName: 'Please Enter User Name',
WalletAddress: 'Wallet Address',
enterWalletAddress: 'Your Wallet Address',
updateWallet: 'To update your address, simply change the account in your wallet.',
updateWallet:
'To update your address, simply change the account in your wallet.',
Password: 'Password',
changePwd: 'Change Password',
Increase: 'Increase your security with high-strength passwords.',
......
package-lock.json
......@@ -15,7 +15,7 @@
"nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.5",
"tdesign-vue-next": "^0.24.5",
"tdesign-vue-next": "^0.24.9",
"vue-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2"
},
......@@ -2280,9 +2280,9 @@
"integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ=="
},
"node_modules/@types/validator": {
"version": "13.7.11",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.11.tgz",
"integrity": "sha512-WqTos+CnAKN64YwyBMhgUYhb5VsTNKwUY6AuzG5qu9/pFZJar/RJFMZBXwX7VS+uzYi+lIAr3WkvuWqEI9F2eg=="
"version": "13.7.12",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.12.tgz",
"integrity": "sha512-YVtyAPqpefU+Mm/qqnOANW6IkqKpCSrarcyV269C8MA8Ux0dbkEuQwM/4CjL47kVEM2LgBef/ETfkH+c6+moFA=="
},
"node_modules/@unhead/dom": {
"version": "1.0.20",
......@@ -9306,9 +9306,9 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
},
"node_modules/tdesign-icons-vue-next": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.5.tgz",
"integrity": "sha512-pfOMQTgaJpRUWaLerYqwCGFCZCGHRWRYSR267dDLyCiwVgXFaZEmzr4T0ROK223zANUVp9MZJU1rRS0Uf/VCAQ==",
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.7.tgz",
"integrity": "sha512-4BwPIo0K1EHPhy0YToc1I2GUnr6SLmiP6vxyNuC993+x0xv2C2jMXzOcDiJGX5QsgicJ7UEHMIfs+fvtDLgbng==",
"dependencies": {
"@babel/runtime": "^7.16.3"
},
......@@ -9317,9 +9317,9 @@
}
},
"node_modules/tdesign-vue-next": {
"version": "0.24.5",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.5.tgz",
"integrity": "sha512-JKbRtYVYZzKZDbW4QFpTxT9knLtMJrhRP5g59q7opkomhe37w/IEl1RbKcCt7L25HhEy1nzHMlsfmLQJgG5RZQ==",
"version": "0.24.9",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz",
"integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==",
"dependencies": {
"@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3",
......@@ -9412,9 +9412,9 @@
"dev": true
},
"node_modules/tinycolor2": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.2.tgz",
"integrity": "sha512-h80m9GPFGbcLzZByXlNSEhp1gf8Dy+VX/2JCGUZsWLo7lV1mnE/XlxGYgRBoMLJh1lIDXP0EMC4RPTjlRaV+Bg=="
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
},
"node_modules/tmp": {
"version": "0.0.33",
......@@ -12705,9 +12705,9 @@
"integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ=="
},
"@types/validator": {
"version": "13.7.11",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.11.tgz",
"integrity": "sha512-WqTos+CnAKN64YwyBMhgUYhb5VsTNKwUY6AuzG5qu9/pFZJar/RJFMZBXwX7VS+uzYi+lIAr3WkvuWqEI9F2eg=="
"version": "13.7.12",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.12.tgz",
"integrity": "sha512-YVtyAPqpefU+Mm/qqnOANW6IkqKpCSrarcyV269C8MA8Ux0dbkEuQwM/4CjL47kVEM2LgBef/ETfkH+c6+moFA=="
},
"@unhead/dom": {
"version": "1.0.20",
......@@ -17940,17 +17940,17 @@
}
},
"tdesign-icons-vue-next": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.5.tgz",
"integrity": "sha512-pfOMQTgaJpRUWaLerYqwCGFCZCGHRWRYSR267dDLyCiwVgXFaZEmzr4T0ROK223zANUVp9MZJU1rRS0Uf/VCAQ==",
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.7.tgz",
"integrity": "sha512-4BwPIo0K1EHPhy0YToc1I2GUnr6SLmiP6vxyNuC993+x0xv2C2jMXzOcDiJGX5QsgicJ7UEHMIfs+fvtDLgbng==",
"requires": {
"@babel/runtime": "^7.16.3"
}
},
"tdesign-vue-next": {
"version": "0.24.5",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.5.tgz",
"integrity": "sha512-JKbRtYVYZzKZDbW4QFpTxT9knLtMJrhRP5g59q7opkomhe37w/IEl1RbKcCt7L25HhEy1nzHMlsfmLQJgG5RZQ==",
"version": "0.24.9",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz",
"integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==",
"requires": {
"@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3",
......@@ -18015,9 +18015,9 @@
"dev": true
},
"tinycolor2": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.2.tgz",
"integrity": "sha512-h80m9GPFGbcLzZByXlNSEhp1gf8Dy+VX/2JCGUZsWLo7lV1mnE/XlxGYgRBoMLJh1lIDXP0EMC4RPTjlRaV+Bg=="
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
},
"tmp": {
"version": "0.0.33",
......
package.json
......@@ -27,7 +27,7 @@
"nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.5",
"tdesign-vue-next": "^0.24.5",
"tdesign-vue-next": "^0.24.9",
"vue-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2"
}
......
plugins/Tdesign.ts
......@@ -33,7 +33,7 @@ import {
Checkbox as TCheckbox,
Divider as TDivider,
Swiper as TSwiper,
Upload as TUpload,
SwiperItem as TSwiperItem,
} from 'tdesign-vue-next';
const components = [
THeadMenu,
......@@ -68,7 +68,7 @@ const components = [
TCheckbox,
TDivider,
TSwiper,
TUpload,
TSwiperItem,
];
// 无法循环挂载的组件--单独拎出来
const oncomponents = [TTable];
......
public/images/svg/table/sort.svg 0 → 100644
<svg width="12" height="8" viewBox="0 0 12 8" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M6.86342 7.26726C6.54366 7.64922 5.95634 7.64922 5.63658 7.26726L1.07095 1.81353C0.635017 1.2928 1.00526 0.5 1.68437 0.5L10.8156 0.5C11.4947 0.5 11.865 1.2928 11.4291 1.81353L6.86342 7.26726Z" fill=""/>
</svg>
\ No newline at end of file
style/default.css
......@@ -82,9 +82,15 @@
/* */
--new-background-1: white;
--new-background-2: #eff2f5;
--new-background-3: #f1f6fe;
--new-border-1: #dcdcdc;
--new-border-2: 1px solid #e0e3ea;
--new-border-3: rgb(239, 242, 245);
--new-color-1: #6d6d6d;
--new-color-2: #287eff;
}
:root[theme-mode='dark'] {
......@@ -133,9 +139,15 @@
/* */
--new-background-1: #142028;
--new-background-2: #1a1a1a;
--new-background-3: #002d72;
--new-border-1: none;
--new-border-2: 1px solid #0b1217;
--new-border-3: rgb(20, 32, 40);
--new-color-1: #a9a9a9;
--new-color-2: #28b2ff;
}
/* 主题按钮*/
.custom_button_back_border {
......
style/line.less 0 → 100644
.custom-before-line {
position: relative !important;
box-sizing: border-box;
&::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
border: 1px solid var(--new-border-1);
top: 0;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
}
}
utils/tradingview.ts
......@@ -291,13 +291,17 @@ export class Widget {
this.widget = window.tvWidget = new TradingView.widget(this.options);
}
public CustomPriceScaleMode(this: any, symbolInfo: any, minTick: string) {
console.log(this.options);
let currentPrice = useCurrentKLinePrice();
let maxLength = 0;
return {
format(price: number) {
if (price >= 0.1) {
// 保留四位小数即可
return price.toFixed(4);
}
let newprice = '';
// 统一价格小数点位数
let priceNum = PriceAccuracy(price);
let priceNum = PriceAccuracy(currentPrice.value);
if (priceNum > maxLength) {
maxLength = priceNum;
}
......@@ -307,15 +311,14 @@ export class Widget {
if (test && test.length) {
// 这里将价格精度改为同样的长度
newprice = price.toFixed(test.length);
//
if (parseFloat(newprice) > 0.0001) {
return newprice;
}
newprice = parseCoinAmount(newprice);
return newprice;
}
if (price >= 0.1) {
console.log('我执行了');
// 保留四位小数即可
return price.toFixed(4);
}
newprice = parseCoinAmount(price);
return newprice;
},
......
views/detail/index.vue
......@@ -82,6 +82,7 @@ const currentPath = ref(route.params.chain + '');
// 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value.toUpperCase());
currentPath.value = Obj.value;
const CurrentKPrice = useCurrentKLinePrice();
// token---接口得到
const token = ref('');
// symbol--接口
......@@ -110,6 +111,8 @@ onBeforeMount(() => {
if (res.is_token) {
tb.value = res.pair;
}
CurrentKPrice.value = res.up;
//
r24h.value = res.r24h + '';
symbol.value = res.sy;
token.value = res.token;
......
views/layout/LoginDropdown.vue
......@@ -5,69 +5,76 @@
-->
<template>
<div>
<t-popup
class=""
placement="left-bottom"
show-arrow
destroy-on-close
trigger="click"
>
<template #content>
<div class="s-header-user-info-dropdown">
<div class="small-userinfo">
<div class="small-logo">
<userOneSvg></userOneSvg>
<p class="small-logo-p1">{{ userInfo.name ?? '-----' }}</p>
<p class="small-logo-p2">{{ userInfo.vip_type ?? '免费会员' }}</p>
<div class="post-box">
<div class="small-item">
<p class="small-p1">{{ $t('header.email') }}</p>
<p class="small-p2">-------</p>
<ClientOnly>
<t-popup
class=""
placement="left-bottom"
show-arrow
destroy-on-close
trigger="click"
>
<template #content>
<div class="s-header-user-info-dropdown">
<div class="small-userinfo">
<div class="small-logo">
<userOneSvg></userOneSvg>
<p class="small-logo-p1">{{ userInfo.name ?? '-----' }}</p>
<p class="small-logo-p2">
{{ userInfo.vip_type ?? '免费会员' }}
</p>
<div class="post-box">
<div class="small-item">
<p class="small-p1">{{ $t('header.email') }}</p>
<p class="small-p2">-------</p>
</div>
<div class="small-item">
<p class="small-p1">{{ $t('header.wallets') }}</p>
<p class="small-p2">-------</p>
</div>
</div>
<div class="small-item">
<p class="small-p1">{{ $t('header.wallets') }}</p>
<p class="small-p2">-------</p>
</div>
</div>
</div>
<div class="small-info">
<div class="small-iconData" @click="gotoMember('/user/personal')">
<userTwo class="icon"></userTwo>
<p>{{ $t('user.PersonalInfo') }}</p>
</div>
<div class="small-iconData" @click="gotoMember('/user/member')">
<VipSvg class="icon"></VipSvg>
<p>{{ $t('user.MemberCenter') }}</p>
</div>
<div
class="small-iconData"
@click="gotoMember('/user/InviteWelfare')"
>
<InvitationSvg class="icon"></InvitationSvg>
<p>{{ $t('user.InvitationCenter') }}</p>
</div>
<div class="small-iconData" @click="gotoMember('install')">
<InstallSvg class="icon"></InstallSvg>
<p>{{ $t('header.settings') }}</p>
</div>
<div class="small-iconData" @click="logout">
<logoutSvg
v-if="mode === 'light'"
class="icon last-icon"
></logoutSvg>
<HomeLogoutSvg v-else class="icon last-icon"></HomeLogoutSvg>
<p v-if="Cookie">{{ $t('header.logout') }}</p>
<p v-else>{{ $t('header.goLogin') }}</p>
<div class="small-info">
<div
class="small-iconData"
@click="gotoMember('/user/personal')"
>
<userTwo class="icon"></userTwo>
<p>{{ $t('user.PersonalInfo') }}</p>
</div>
<div class="small-iconData" @click="gotoMember('/user/member')">
<VipSvg class="icon"></VipSvg>
<p>{{ $t('user.MemberCenter') }}</p>
</div>
<div
class="small-iconData"
@click="gotoMember('/user/InviteWelfare')"
>
<InvitationSvg class="icon"></InvitationSvg>
<p>{{ $t('user.InvitationCenter') }}</p>
</div>
<div class="small-iconData" @click="gotoMember('install')">
<InstallSvg class="icon"></InstallSvg>
<p>{{ $t('header.settings') }}</p>
</div>
<div class="small-iconData" @click="logout">
<logoutSvg
v-if="mode === 'light'"
class="icon last-icon"
></logoutSvg>
<HomeLogoutSvg v-else class="icon last-icon"></HomeLogoutSvg>
<p v-if="Cookie">{{ $t('header.logout') }}</p>
<p v-else>{{ $t('header.goLogin') }}</p>
</div>
</div>
</div>
</div>
</template>
<div class="user-info">
<DefaultAvatar></DefaultAvatar>
<upDownSvg class="up-icon"></upDownSvg>
</div>
</template>
<div class="user-info">
<DefaultAvatar></DefaultAvatar>
<upDownSvg class="up-icon"></upDownSvg>
</div>
</t-popup>
</t-popup>
</ClientOnly>
</div>
</template>
......
views/token/FilterBtn/index.less 0 → 100644
.custom-table-filter-btns {
display: flex;
align-items: center;
height: 44px;
padding-left: 8px;
.table-filter-btn {
height: 30px;
border: none;
border-radius: 10px;
font-weight: 400;
font-size: 13px;
background: var(--new-background-2);
color: var(--new-color-1);
--ripple-color: none !important;
transition: all 0.3s;
&:hover {
background: var(--new-background-2);
}
}
.active {
background: var(--new-background-3);
color: var(--new-color-2);
font-weight: 500;
transition: all 0.3s;
&:hover {
background: var(--new-background-3);
}
}
}
views/token/FilterBtn/index.tsx 0 → 100644
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import './index.less';
export default defineComponent({
setup() {
const { t } = useI18n();
const currentBtn = ref('default');
const btns = computed(() => {
return [
{
label: t('filter.pairs'),
value: 'default',
},
{
label: t('filter.updated'),
value: 'new',
},
{
label: t('filter.gainers'),
value: 'max-up',
},
{
label: t('filter.losers'),
value: 'max-down',
},
{
label: t('filter.r24hVolume'),
value: 'max-tx',
},
];
});
const btnChange = (value: string) => {
currentBtn.value = value;
// 更新筛选条件
};
return () => (
<div class="custom-table-filter-btns">
{btns.value.map((item: any) => (
<t-button
class={[
'table-filter-btn',
currentBtn.value == item.value ? 'active' : '',
]}
onClick={btnChange.bind(this, item.value)}
>
{item.label}
</t-button>
))}
</div>
);
},
});
views/token/FilterTips.vue
<template>
<div class="Advertisement-box">
<t-upload
v-model="files"
method="PUT"
:requestMethod="requestSuccessMethod"
:action="actionUrl"
:headers="{
authorization: `Bearer ${'ddd'}`,
}"
accept="video"
theme="custom"
:before-upload="beforeUpload"
multiple
:max="1"
:draggable="true"
:formatResponse="formatResponseOne"
:onfail="handleFail"
>
<div class="custom-upload-click-box">
<div class="title">选择视频</div>
<div class="title2">或拖视频到此处上传</div>
<t-button class="custom-chose-file">选择文件</t-button>
<ClientOnly>
<div class="custom-home-swiper">
<t-swiper
class="tdesign-demo-block--swiper"
:duration="300"
:interval="2000"
>
<t-swiper-item v-for="item in picList.list" :key="item">
<img
:src="item.picture_link"
alt=""
class="img"
@click="goDetail(item)"
/>
</t-swiper-item>
</t-swiper>
</div>
</t-upload>
</ClientOnly>
</div>
</template>
<script lang="ts" setup>
import ohterRequest from '@/utils/otherRequest';
const files = ref([]);
const actionUrl = ref('');
const requestSuccessMethod = async (file: any) => {
return new Promise((resolve) => {
let uuid = 'aofjoaioeiw-vaofo-nawgoaow1-w';
let url = '';
if (1) {
// 线上地址使用完整url
url = `http://192.168.1.19:5000/video/` + uuid + '.mp4';
} else {
url = '/video/' + uuid + '.mp4';
}
const timer = setTimeout(() => {
ohterRequest.put(url, file[0].raw).then((res: any) => {
// resolve 参数为关键代码
if (res == 201) {
console.log('1111');
// UploadSuccessCallback(uuid);
resolve({
status: 'success',
response: { url: '22222.png' },
});
} else {
console.log(222);
// UploadErrorCallback();
}
});
}, 1000);
});
const picList = reactive({
list: [],
});
const goDetail = (item: any) => {
if (item.goto_link) {
window.open(item.goto_link);
}
};
const getPicList = async () => {
try {
let res: any = await request.get('/v1/picture');
picList.list = res;
} catch (e) {
console.log(e);
}
};
onBeforeMount(() => {
getPicList();
});
</script>
<style lang="less">
@import '@/style/flex.less';
.Advertisement-box {
flex: 1;
background: var(--td--right-back-color-2);
padding-left: 6px;
height: 100%;
max-height: 100%;
.dj();
box-sizing: border-box;
.custom-home-swiper {
.t-swiper {
height: 100%;
width: 100%;
.img {
height: 305px;
max-width: 100%;
min-width: 500px;
border-radius: 12px;
cursor: pointer;
}
.t-swiper__arrow {
& > * {
border-radius: 50%;
border: 2px solid white;
.t-icon {
color: #287eff;
}
}
}
}
}
}
</style>
views/token/RightDetail.vue
......@@ -128,25 +128,27 @@
:tb="props.tb"
></time-tab>
<div class="select-box_collect">
<t-select
empty=" "
:placeholder="$t('collection.Focus')"
:popup-props="{ overlayClassName: 'attention-list-box' }"
@popup-visible-change="selectOpenClose"
>
<template #panelTopContent>
<div class="select-header-btn">
<span>{{ $t('collection.header') }}</span>
<t-button
size="small"
@click="showCollection"
class="custom_button_back_border"
>{{ $t('collection.allcollection') }}</t-button
>
</div>
<CollectionTable></CollectionTable>
</template>
</t-select>
<ClientOnly>
<t-select
empty=" "
:placeholder="$t('collection.Focus')"
:popup-props="{ overlayClassName: 'attention-list-box' }"
@popup-visible-change="selectOpenClose"
>
<template #panelTopContent>
<div class="select-header-btn">
<span>{{ $t('collection.header') }}</span>
<t-button
size="small"
@click="showCollection"
class="custom_button_back_border"
>{{ $t('collection.allcollection') }}</t-button
>
</div>
<CollectionTable></CollectionTable>
</template>
</t-select>
</ClientOnly>
<collection-drawer
v-model:visible="collectionVisible"
></collection-drawer>
......
views/token/TokenFilter.vue
......@@ -7,28 +7,30 @@
<div class="filter-block-wrapper">
<div class="custom-form">
<div class="select-box-chain">
<t-select
v-model="chain"
@change="selectChange"
:popup-props="{ overlayClassName: 'select_chain_box' }"
>
<template #prefixIcon>
<img :src="chain_options[ChainImgIndex].img" alt="" />
</template>
<t-option
v-for="item in chain_options"
:key="item.value"
:value="item.value"
:label="item.label"
<ClientOnly>
<t-select
v-model="chain"
@change="selectChange"
:popup-props="{ overlayClassName: 'select_chain_box' }"
>
<div class="item-box">
<div class="img-box">
<img :src="item.img" alt="" />
<template #prefixIcon>
<img :src="chain_options[ChainImgIndex].img" alt="" />
</template>
<t-option
v-for="item in chain_options"
:key="item.value"
:value="item.value"
:label="item.label"
>
<div class="item-box">
<div class="img-box">
<img :src="item.img" alt="" />
</div>
<div>{{ item.label }}</div>
</div>
<div>{{ item.label }}</div>
</div>
</t-option>
</t-select>
</t-option>
</t-select>
</ClientOnly>
<t-radio-group
v-model="formData.isNewchain"
class="custom-group3"
......@@ -146,21 +148,23 @@
size="large"
:label="['+', '-']"
></t-switch>
<t-select
v-model="formData.priceRangeTime"
:popup-props="{ overlayClassName: 'select_home_range_box' }"
>
<t-option
v-for="item in Time_price_range_options"
:key="item.value"
:value="item.value"
:label="item.label"
<ClientOnly
><t-select
v-model="formData.priceRangeTime"
:popup-props="{ overlayClassName: 'select_home_range_box' }"
>
<div class="item-box">
<div>{{ item.label }}</div>
</div>
</t-option>
</t-select>
<t-option
v-for="item in Time_price_range_options"
:key="item.value"
:value="item.value"
:label="item.label"
>
<div class="item-box">
<div>{{ item.label }}</div>
</div>
</t-option>
</t-select>
</ClientOnly>
<t-radio-button
v-for="item in PRICE_RANGE_OPTIONS"
:value="item.value"
......@@ -613,6 +617,7 @@ watch(formData, (v) => {
.da();
& > :nth-child(1) {
padding-right: 12px;
cursor: pointer;
}
}
.value {
......
views/token/TokenList.vue
<template>
<div class="token-list-wrapper">
<t-table
row-key="index"
hover
:onRowClick="handleRowClick"
:row-class-name="getRowClassName"
:sort="sort"
:headerAffixedTop="TableScroll"
@sort-change="sortChange"
:data="resultData.list"
:loading="loading"
table-layout="auto"
:columns="columns"
id="table-height-auto"
>
<template #index="{ row }">
<span>{{ row.index + 100 * (pageNum - 1) }}</span>
</template>
<template #Pool>
<span>{{ $t('TableList.pool') + HeadTokenType }}</span>
</template>
<template #pb="{ row }">
<span>{{ Judgment() + row.pb }}</span>
</template>
<template #tn="{ row }">
<div class="name-block">
<div class="tn">{{ row.tn }}</div>
<div class="symbol">{{ row.sy }}/{{ row.ps }}</div>
</div>
</template>
<template #operation="{ row }">
<JumpOther :tb="row.tbname" type="detail" content="K Line">
<template #svg> <KLink class="k-link"></KLink> </template
></JumpOther>
</template>
<template #media="{ row }">
<JumpOther :tb="row.tbname" type="analysis" content="analysis">
<template #svg>
<analysisSvg class="to-analysis"></analysisSvg>
</template>
</JumpOther>
</template>
</t-table>
<div class="page-footer">
<CustPagination
:pageNum="pageNum"
:total="resultData.total"
:continues="8"
@pageChange="onCurrentChange"
></CustPagination>
<div class="token-list-wrapper-fa">
<FilterBtns></FilterBtns>
<div class="token-list-wrapper">
<t-table
row-key="index"
hover
:onRowClick="handleRowClick"
:row-class-name="getRowClassName"
:sort="sort"
:headerAffixedTop="TableScroll"
@sort-change="sortChange"
:data="resultData.list"
:loading="loading"
table-layout="auto"
:columns="columns"
id="table-height-auto"
>
<template #index="{ row }">
<span>{{ row.index + 100 * (pageNum - 1) }}</span>
</template>
<template #Pool>
<span>{{ $t('TableList.pool') + HeadTokenType }}</span>
</template>
<template #pb="{ row }">
<span>{{ Judgment() + row.pb }}</span>
</template>
<template #tn="{ row }">
<div class="name-block">
<div class="tn">{{ row.tn }}</div>
<div class="symbol">{{ row.sy }}/{{ row.ps }}</div>
</div>
</template>
<template #operation="{ row }">
<JumpOther :tb="row.tbname" type="detail" content="K Line">
<template #svg> <KLink class="k-link"></KLink> </template
></JumpOther>
</template>
<template #media="{ row }">
<JumpOther :tb="row.tbname" type="analysis" content="analysis">
<template #svg>
<analysisSvg class="to-analysis"></analysisSvg>
</template>
</JumpOther>
</template>
<template #sortIcon>
<SortSvg></SortSvg>
</template>
</t-table>
<div class="page-footer">
<CustPagination
:pageNum="pageNum"
:total="resultData.total"
:continues="8"
@pageChange="onCurrentChange"
></CustPagination>
</div>
</div>
</div>
</template>
......@@ -61,7 +67,9 @@ import { filterChainObj } 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 SortSvg from '/public/images/svg/table/sort.svg';
import { webLogo } from '@/constants/logo';
import FilterBtns from './FilterBtn';
const route = useRoute();
// 当前链
const chain = useChain();
......@@ -168,29 +176,6 @@ const TableFilter = (result: any) => {
resultData.list = [];
}
};
// 预取数据
// const { data, refresh } = await useFetch(
// `http://156.247.9.93:9501/v1/${chain.value}/index`,
// {
// method: 'get',
// params: GlbFilter.value,
// onResponse({ request, response, options }) {
// try {
// loading.value = false;
// if (response._data.data) {
// TableFilter(toRaw(response._data.data));
// }
// } catch (e) {
// resultData.list = [];
// console.log(e);
// }
// return response._data;
// },
// onRequestError({ error }) {
// console.log(error);
// },
// }
// );
function next() {
loading.value = true;
refresh();
......@@ -323,6 +308,7 @@ const columns = computed(() => {
{
title: t('TableList.tokenbase'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'index',
......@@ -338,6 +324,7 @@ const columns = computed(() => {
{
title: t('TableList.basic'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'up',
......@@ -370,6 +357,7 @@ const columns = computed(() => {
{
title: t('TableList.priceChange'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'r5m',
......@@ -408,6 +396,7 @@ const columns = computed(() => {
{
title: t('TableList.others'),
align: 'center',
className: 'custom-before-line',
children: [
{
colKey: 'operation',
......@@ -425,87 +414,169 @@ const columns = computed(() => {
});
</script>
<style lang="less">
.token-list-wrapper {
#table-height-auto {
th,
td {
padding: 10px 12px;
}
tr {
cursor: pointer;
}
thead {
tr {
th {
border: 1px solid var(--td-Search-info-border-bottom-2);
white-space: nowrap;
@import '@/style/variables.less';
@import '@/style/line.less';
.token-list-wrapper-fa {
margin-top: 8px;
background: var(--td--right-back-color-2);
border-radius: @border-radius;
.token-list-wrapper {
#table-height-auto {
.t-table__content {
background: var(--main-theme-color-2);
}
.t-table__affixed-header-elm-wrap {
.scrollbar {
overflow: hidden;
}
}
:nth-child(1) {
th {
color: var(--td--main-btn-color-1);
font-weight: bold;
white-space: nowrap;
border-bottom: none;
border-right: none;
th,
td {
padding: 10px 12px;
}
tr {
cursor: pointer;
}
thead {
tr {
th {
white-space: nowrap;
border: none;
box-sizing: border-box;
}
}
.t-align-center {
height: 30px !important;
padding: 0;
& > :nth-child(1) {
th {
color: var(--td--main-btn-color-1);
font-weight: bold;
white-space: nowrap;
}
.t-align-center {
height: 30px !important;
padding: 0;
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
& > :last-child {
&::before {
border-right: none;
}
}
}
}
:nth-child(2) {
th {
font-size: var(--font-size-s);
font-family: fiveFont;
border-right: none;
& > :nth-child(2) {
th {
font-size: var(--font-size-s);
font-family: fiveFont;
border-bottom: 1px solid rgb(224, 227, 234);
}
& > * {
position: relative !important;
box-sizing: border-box;
&::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
border: 1px solid var(--new-border-1);
top: 0;
left: 0;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
}
}
& > :nth-child(1) {
&::before {
border-left: none;
}
}
.t-table__double-icons {
.t-table-sort-asc {
padding-top: 8px;
svg {
fill: #7b7d87;
opacity: 1;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table-sort-desc {
padding-bottom: 0px;
svg {
fill: #7b7d87;
}
&:hover {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
.t-table__sort-icon--active {
svg {
fill: var(--td--main-btn-color-1);
}
}
}
}
}
}
.t-table__body {
font-size: var(--font-size-s);
tr {
background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in;
td {
border-left: none;
border-right: none;
.t-table__body {
font-size: var(--font-size-s);
tr {
background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in;
td {
border: none;
border-bottom: 1px solid var(--new-border-3);
}
}
.custom-third-class-name {
background: var(--td-table-tr-click-back-color);
}
}
.custom-third-class-name {
background: var(--td-table-tr-click-back-color);
.name-block {
.tn {
color: var(--main-theme-color);
font-size: 15px;
font-weight: bold;
}
.symbol {
color: var(--td-search-btn-back-1);
margin-top: 2px;
font-size: 13px;
}
}
}
.name-block {
.tn {
color: var(--main-theme-color);
font-size: 15px;
font-weight: bold;
.up {
color: #23ab94;
}
.symbol {
color: var(--td-search-btn-back-1);
margin-top: 2px;
font-size: 13px;
.down {
color: #f85260;
}
}
.up {
color: #23ab94;
.temp-name {
width: 20px;
height: 20px;
background: var(--td--table-icon-color-1);
margin-left: -12px;
-webkit-clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
}
.down {
color: #f85260;
.page-footer {
padding: 0 24px;
border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
}
}
.temp-name {
width: 20px;
height: 20px;
background: var(--td--table-icon-color-1);
margin-left: -12px;
-webkit-clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0, 68% 50%, 100% 100%, 0% 100%);
}
.page-footer {
padding: 0 24px;
border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
}
}
</style>
views/token/index.vue
......@@ -15,13 +15,7 @@
<div>
<TokenFilter></TokenFilter>
</div>
<div
class="result-container"
id="resullt-container"
ref="tokenContainer"
>
<NuxtPage></NuxtPage>
</div>
<NuxtPage></NuxtPage>
</div>
<RightDetail
:token="token"
......@@ -77,11 +71,12 @@ const changeChain = (chain) => {
</script>
<style lang="less">
@import '@/style/variables.less';
.home-wrapper {
width: 100vw;
display: flex;
min-height: calc(100vh - 70px);
padding: 12px;
padding: 12px 0 12px 12px;
box-sizing: border-box;
background: var(--main-theme-color-2);
.token-page-wrapper {
......@@ -91,9 +86,6 @@ const changeChain = (chain) => {
.scroll-Replacement {
height: 45px;
}
.result-container {
background: var(--td--right-back-color-2);
}
}
}
</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