Skip to content

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

1

parent 18c19665
Showing with 382 additions and 142 deletions
composables/useToken.ts
...@@ -55,3 +55,8 @@ export const UsePreRenderList = () => { ...@@ -55,3 +55,8 @@ export const UsePreRenderList = () => {
export const useUserAddress = () => { export const useUserAddress = () => {
return useState('walletAddress', () => ''); return useState('walletAddress', () => '');
}; };
// 当前k线的价格
export const useCurrentKLinePrice = () => {
return useState('CurrentKLinePrice', () => 0);
};
language/cn.ts
...@@ -6,22 +6,34 @@ ...@@ -6,22 +6,34 @@
const cn = { const cn = {
tips: { tips: {
title1: '温馨提示', title1: '温馨提示',
title2: '所有筛选条件都可组合进行筛选，如果筛选不出项目，则链上没有配对的项目！', title2:
'所有筛选条件都可组合进行筛选，如果筛选不出项目，则链上没有配对的项目！',
contentTitle1: '过去时段', contentTitle1: '过去时段',
contentvalue1: contentvalue1:
'过去24个小时内的流动池的交易汇总。例如：选择5M表示的是过去5分钟内整个链接所有流动池的交易汇总、选择1小时，则是过去1小时内整个链上所有流动池的交易汇总。', '过去24个小时内的流动池的交易汇总。例如：选择5M表示的是过去5分钟内整个链接所有流动池的交易汇总、选择1小时，则是过去1小时内整个链上所有流动池的交易汇总。',
poolSizeTitle: '流动池大小', poolSizeTitle: '流动池大小',
poolSizeValue: '交易配对流动池的大小，点击“USD”或 “WBNB”切换到相对应的计算单位。', poolSizeValue:
'交易配对流动池的大小，点击“USD”或 “WBNB”切换到相对应的计算单位。',
PirceRange: '涨跌幅度', PirceRange: '涨跌幅度',
PirceRangeValue: PirceRangeValue:
'交易配对在某个时间段内的涨跌幅度，可通过“时间区间”的筛选条件进行组合筛选，点击“+”或“-”查看涨或跌。', '交易配对在某个时间段内的涨跌幅度，可通过“时间区间”的筛选条件进行组合筛选，点击“+”或“-”查看涨或跌。',
NewHolder: '新增持有人', NewHolder: '新增持有人',
NewHolderValue: '第一次购买某项目代币则为新持有人，但代币转让则不包含为新增持有人。', NewHolderValue:
'第一次购买某项目代币则为新持有人，但代币转让则不包含为新增持有人。',
Volume: '成交量', Volume: '成交量',
VolumeValue: '指一个时间单位内对某项交易成交的数量，可通过“时间区间”的筛选条件进行组合筛选。', VolumeValue:
'指一个时间单位内对某项交易成交的数量，可通过“时间区间”的筛选条件进行组合筛选。',
txn: '交易笔数', txn: '交易笔数',
txnValue: '买或卖各为一笔交易，则是交易笔数。', txnValue: '买或卖各为一笔交易，则是交易笔数。',
}, },
filter: {
pairs: '交易配对',
updated: '最新上币',
gainers: '最大涨幅',
losers: '最大跌幅',
r24hVolume: '最大交易',
CustomFilter: '高级筛选',
},
login: { login: {
h1: '区块链监控专家', h1: '区块链监控专家',
h2: '一站式监控服务', h2: '一站式监控服务',
...@@ -343,11 +355,14 @@ const cn = { ...@@ -343,11 +355,14 @@ const cn = {
InvitationEmail: '邮箱号', InvitationEmail: '邮箱号',
// 邀请规则 // 邀请规则
InvitationRules: '邀请规则', InvitationRules: '邀请规则',
Rule1: '需至少购买一月的会员时长，系统会自动生成"邀请码" "邀请链接" "邀请二维码"。', Rule1:
Rule2: '没有通过“邀请链接”注册的好友，可以告知好友在“会员中心-会员”页面里，绑定我的邀请码，可以绑定推荐关系。', '需至少购买一月的会员时长，系统会自动生成"邀请码" "邀请链接" "邀请二维码"。',
Rule2:
'没有通过“邀请链接”注册的好友，可以告知好友在“会员中心-会员”页面里，绑定我的邀请码，可以绑定推荐关系。',
Rule3: Rule3:
'与我的 "邀请码" 绑定推荐关系后，好友每购买一个月的会员时长，系统将会奖励一天会员使用或15天的返佣奖励，可在奖励领取内自行选择奖励。', '与我的 "邀请码" 绑定推荐关系后，好友每购买一个月的会员时长，系统将会奖励一天会员使用或15天的返佣奖励，可在奖励领取内自行选择奖励。',
Rule4: '通过邀请获得的积分可以在奖励领取内兑换奖励，奖励有 "会员天数" "现金"。', Rule4:
'通过邀请获得的积分可以在奖励领取内兑换奖励，奖励有 "会员天数" "现金"。',
Rule5: '邀请码不能绑定自己的账号。', Rule5: '邀请码不能绑定自己的账号。',
// 账单明细页面--表格 // 账单明细页面--表格
Packages: '套餐', Packages: '套餐',
...@@ -361,7 +376,8 @@ const cn = { ...@@ -361,7 +376,8 @@ const cn = {
}, },
Announcement: { Announcement: {
title: '自定义定制开发功能', title: '自定义定制开发功能',
content: '支持区块链多种自定义需求功能开发，例如：智能警报自定义开发、智能夹子自定义开发、自动抢币等开发。', content:
'支持区块链多种自定义需求功能开发，例如：智能警报自定义开发、智能夹子自定义开发、自动抢币等开发。',
}, },
footer: { footer: {
Introduce: Introduce:
......
language/en.ts
...@@ -24,7 +24,16 @@ const cn = { ...@@ -24,7 +24,16 @@ const cn = {
VolumeValue: 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.', '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', 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: { login: {
h1: 'On-chain intelligent screening', h1: 'On-chain intelligent screening',
...@@ -204,7 +213,8 @@ const cn = { ...@@ -204,7 +213,8 @@ const cn = {
LargeOrderTracking: 'Whales Tracking', LargeOrderTracking: 'Whales Tracking',
PriceAlert: 'Price Alert', 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-min
max: 'Max', max: 'Max',
min: 'Min', min: 'Min',
...@@ -306,7 +316,8 @@ const cn = { ...@@ -306,7 +316,8 @@ const cn = {
enterUserName: 'Please Enter User Name', enterUserName: 'Please Enter User Name',
WalletAddress: 'Wallet Address', WalletAddress: 'Wallet Address',
enterWalletAddress: 'Your 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', Password: 'Password',
changePwd: 'Change Password', changePwd: 'Change Password',
Increase: 'Increase your security with high-strength passwords.', Increase: 'Increase your security with high-strength passwords.',
......
package-lock.json
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
"nuxt-svgo": "^1.1.0", "nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.5", "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-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2" "vue-i18n": "^9.2.2"
}, },
...@@ -2280,9 +2280,9 @@ ...@@ -2280,9 +2280,9 @@
"integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==" "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ=="
}, },
"node_modules/@types/validator": { "node_modules/@types/validator": {
"version": "13.7.11", "version": "13.7.12",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.11.tgz", "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.12.tgz",
"integrity": "sha512-WqTos+CnAKN64YwyBMhgUYhb5VsTNKwUY6AuzG5qu9/pFZJar/RJFMZBXwX7VS+uzYi+lIAr3WkvuWqEI9F2eg==" "integrity": "sha512-YVtyAPqpefU+Mm/qqnOANW6IkqKpCSrarcyV269C8MA8Ux0dbkEuQwM/4CjL47kVEM2LgBef/ETfkH+c6+moFA=="
}, },
"node_modules/@unhead/dom": { "node_modules/@unhead/dom": {
"version": "1.0.20", "version": "1.0.20",
...@@ -9306,9 +9306,9 @@ ...@@ -9306,9 +9306,9 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
}, },
"node_modules/tdesign-icons-vue-next": { "node_modules/tdesign-icons-vue-next": {
"version": "0.1.5", "version": "0.1.7",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.5.tgz", "resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.7.tgz",
"integrity": "sha512-pfOMQTgaJpRUWaLerYqwCGFCZCGHRWRYSR267dDLyCiwVgXFaZEmzr4T0ROK223zANUVp9MZJU1rRS0Uf/VCAQ==", "integrity": "sha512-4BwPIo0K1EHPhy0YToc1I2GUnr6SLmiP6vxyNuC993+x0xv2C2jMXzOcDiJGX5QsgicJ7UEHMIfs+fvtDLgbng==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.16.3" "@babel/runtime": "^7.16.3"
}, },
...@@ -9317,9 +9317,9 @@ ...@@ -9317,9 +9317,9 @@
} }
}, },
"node_modules/tdesign-vue-next": { "node_modules/tdesign-vue-next": {
"version": "0.24.5", "version": "0.24.9",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.5.tgz", "resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz",
"integrity": "sha512-JKbRtYVYZzKZDbW4QFpTxT9knLtMJrhRP5g59q7opkomhe37w/IEl1RbKcCt7L25HhEy1nzHMlsfmLQJgG5RZQ==", "integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.14.8", "@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3", "@popperjs/core": "^2.9.3",
...@@ -9412,9 +9412,9 @@ ...@@ -9412,9 +9412,9 @@
"dev": true "dev": true
}, },
"node_modules/tinycolor2": { "node_modules/tinycolor2": {
"version": "1.5.2", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.2.tgz", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-h80m9GPFGbcLzZByXlNSEhp1gf8Dy+VX/2JCGUZsWLo7lV1mnE/XlxGYgRBoMLJh1lIDXP0EMC4RPTjlRaV+Bg==" "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
}, },
"node_modules/tmp": { "node_modules/tmp": {
"version": "0.0.33", "version": "0.0.33",
...@@ -12705,9 +12705,9 @@ ...@@ -12705,9 +12705,9 @@
"integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==" "integrity": "sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ=="
}, },
"@types/validator": { "@types/validator": {
"version": "13.7.11", "version": "13.7.12",
"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.11.tgz", "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.7.12.tgz",
"integrity": "sha512-WqTos+CnAKN64YwyBMhgUYhb5VsTNKwUY6AuzG5qu9/pFZJar/RJFMZBXwX7VS+uzYi+lIAr3WkvuWqEI9F2eg==" "integrity": "sha512-YVtyAPqpefU+Mm/qqnOANW6IkqKpCSrarcyV269C8MA8Ux0dbkEuQwM/4CjL47kVEM2LgBef/ETfkH+c6+moFA=="
}, },
"@unhead/dom": { "@unhead/dom": {
"version": "1.0.20", "version": "1.0.20",
...@@ -17940,17 +17940,17 @@ ...@@ -17940,17 +17940,17 @@
} }
}, },
"tdesign-icons-vue-next": { "tdesign-icons-vue-next": {
"version": "0.1.5", "version": "0.1.7",
"resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.5.tgz", "resolved": "https://registry.npmjs.org/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.1.7.tgz",
"integrity": "sha512-pfOMQTgaJpRUWaLerYqwCGFCZCGHRWRYSR267dDLyCiwVgXFaZEmzr4T0ROK223zANUVp9MZJU1rRS0Uf/VCAQ==", "integrity": "sha512-4BwPIo0K1EHPhy0YToc1I2GUnr6SLmiP6vxyNuC993+x0xv2C2jMXzOcDiJGX5QsgicJ7UEHMIfs+fvtDLgbng==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3" "@babel/runtime": "^7.16.3"
} }
}, },
"tdesign-vue-next": { "tdesign-vue-next": {
"version": "0.24.5", "version": "0.24.9",
"resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.5.tgz", "resolved": "https://registry.npmjs.org/tdesign-vue-next/-/tdesign-vue-next-0.24.9.tgz",
"integrity": "sha512-JKbRtYVYZzKZDbW4QFpTxT9knLtMJrhRP5g59q7opkomhe37w/IEl1RbKcCt7L25HhEy1nzHMlsfmLQJgG5RZQ==", "integrity": "sha512-If4dTQCkMLN4u1GqlNKUjrt9WPEaDVcI4yD4lukzSObb9SXza2UBBcWFJHp4pqcNRZNtszHmRgogylozeZGK8w==",
"requires": { "requires": {
"@babel/runtime": "^7.14.8", "@babel/runtime": "^7.14.8",
"@popperjs/core": "^2.9.3", "@popperjs/core": "^2.9.3",
...@@ -18015,9 +18015,9 @@ ...@@ -18015,9 +18015,9 @@
"dev": true "dev": true
}, },
"tinycolor2": { "tinycolor2": {
"version": "1.5.2", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.5.2.tgz", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
"integrity": "sha512-h80m9GPFGbcLzZByXlNSEhp1gf8Dy+VX/2JCGUZsWLo7lV1mnE/XlxGYgRBoMLJh1lIDXP0EMC4RPTjlRaV+Bg==" "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
}, },
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
......
package.json
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
"nuxt-svgo": "^1.1.0", "nuxt-svgo": "^1.1.0",
"qrcode": "^1.5.1", "qrcode": "^1.5.1",
"tdesign-icons-vue-next": "^0.1.5", "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-clipboard3": "^1.0.1",
"vue-i18n": "^9.2.2" "vue-i18n": "^9.2.2"
} }
......
plugins/Tdesign.ts
...@@ -33,7 +33,7 @@ import { ...@@ -33,7 +33,7 @@ import {
Checkbox as TCheckbox, Checkbox as TCheckbox,
Divider as TDivider, Divider as TDivider,
Swiper as TSwiper, Swiper as TSwiper,
Upload as TUpload, SwiperItem as TSwiperItem,
} from 'tdesign-vue-next'; } from 'tdesign-vue-next';
const components = [ const components = [
THeadMenu, THeadMenu,
...@@ -68,7 +68,7 @@ const components = [ ...@@ -68,7 +68,7 @@ const components = [
TCheckbox, TCheckbox,
TDivider, TDivider,
TSwiper, TSwiper,
TUpload, TSwiperItem,
]; ];
// 无法循环挂载的组件--单独拎出来 // 无法循环挂载的组件--单独拎出来
const oncomponents = [TTable]; 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 @@ ...@@ -82,9 +82,15 @@
/* */ /* */
--new-background-1: white; --new-background-1: white;
--new-background-2: #eff2f5;
--new-background-3: #f1f6fe;
--new-border-1: #dcdcdc; --new-border-1: #dcdcdc;
--new-border-2: 1px solid #e0e3ea; --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'] { :root[theme-mode='dark'] {
...@@ -133,9 +139,15 @@ ...@@ -133,9 +139,15 @@
/* */ /* */
--new-background-1: #142028; --new-background-1: #142028;
--new-background-2: #1a1a1a;
--new-background-3: #002d72;
--new-border-1: none; --new-border-1: none;
--new-border-2: 1px solid #0b1217; --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 { .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 { ...@@ -291,13 +291,17 @@ export class Widget {
this.widget = window.tvWidget = new TradingView.widget(this.options); this.widget = window.tvWidget = new TradingView.widget(this.options);
} }
public CustomPriceScaleMode(this: any, symbolInfo: any, minTick: string) { public CustomPriceScaleMode(this: any, symbolInfo: any, minTick: string) {
console.log(this.options); let currentPrice = useCurrentKLinePrice();
let maxLength = 0; let maxLength = 0;
return { return {
format(price: number) { format(price: number) {
if (price >= 0.1) {
// 保留四位小数即可
return price.toFixed(4);
}
let newprice = ''; let newprice = '';
// 统一价格小数点位数 // 统一价格小数点位数
let priceNum = PriceAccuracy(price); let priceNum = PriceAccuracy(currentPrice.value);
if (priceNum > maxLength) { if (priceNum > maxLength) {
maxLength = priceNum; maxLength = priceNum;
} }
...@@ -307,15 +311,14 @@ export class Widget { ...@@ -307,15 +311,14 @@ export class Widget {
if (test && test.length) { if (test && test.length) {
// 这里将价格精度改为同样的长度 // 这里将价格精度改为同样的长度
newprice = price.toFixed(test.length); newprice = price.toFixed(test.length);
//
if (parseFloat(newprice) > 0.0001) {
return newprice;
}
newprice = parseCoinAmount(newprice); newprice = parseCoinAmount(newprice);
return newprice; return newprice;
} }
if (price >= 0.1) {
console.log('我执行了');
// 保留四位小数即可
return price.toFixed(4);
}
newprice = parseCoinAmount(price); newprice = parseCoinAmount(price);
return newprice; return newprice;
}, },
......
views/detail/index.vue
...@@ -82,6 +82,7 @@ const currentPath = ref(route.params.chain + ''); ...@@ -82,6 +82,7 @@ const currentPath = ref(route.params.chain + '');
// 先取出对应链的接口id // 先取出对应链的接口id
let Obj = filterChainObj('name', currentPath.value.toUpperCase()); let Obj = filterChainObj('name', currentPath.value.toUpperCase());
currentPath.value = Obj.value; currentPath.value = Obj.value;
const CurrentKPrice = useCurrentKLinePrice();
// token---接口得到 // token---接口得到
const token = ref(''); const token = ref('');
// symbol--接口 // symbol--接口
...@@ -110,6 +111,8 @@ onBeforeMount(() => { ...@@ -110,6 +111,8 @@ onBeforeMount(() => {
if (res.is_token) { if (res.is_token) {
tb.value = res.pair; tb.value = res.pair;
} }
CurrentKPrice.value = res.up;
//
r24h.value = res.r24h + ''; r24h.value = res.r24h + '';
symbol.value = res.sy; symbol.value = res.sy;
token.value = res.token; token.value = res.token;
......
views/layout/LoginDropdown.vue
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
--> -->
<template> <template>
<div> <div>
<ClientOnly>
<t-popup <t-popup
class="" class=""
placement="left-bottom" placement="left-bottom"
...@@ -18,7 +19,9 @@ ...@@ -18,7 +19,9 @@
<div class="small-logo"> <div class="small-logo">
<userOneSvg></userOneSvg> <userOneSvg></userOneSvg>
<p class="small-logo-p1">{{ userInfo.name ?? '-----' }}</p> <p class="small-logo-p1">{{ userInfo.name ?? '-----' }}</p>
<p class="small-logo-p2">{{ userInfo.vip_type ?? '免费会员' }}</p> <p class="small-logo-p2">
{{ userInfo.vip_type ?? '免费会员' }}
</p>
<div class="post-box"> <div class="post-box">
<div class="small-item"> <div class="small-item">
<p class="small-p1">{{ $t('header.email') }}</p> <p class="small-p1">{{ $t('header.email') }}</p>
...@@ -31,7 +34,10 @@ ...@@ -31,7 +34,10 @@
</div> </div>
</div> </div>
<div class="small-info"> <div class="small-info">
<div class="small-iconData" @click="gotoMember('/user/personal')"> <div
class="small-iconData"
@click="gotoMember('/user/personal')"
>
<userTwo class="icon"></userTwo> <userTwo class="icon"></userTwo>
<p>{{ $t('user.PersonalInfo') }}</p> <p>{{ $t('user.PersonalInfo') }}</p>
</div> </div>
...@@ -68,6 +74,7 @@ ...@@ -68,6 +74,7 @@
<upDownSvg class="up-icon"></upDownSvg> <upDownSvg class="up-icon"></upDownSvg>
</div> </div>
</t-popup> </t-popup>
</ClientOnly>
</div> </div>
</template> </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> <template>
<div class="Advertisement-box"> <div class="Advertisement-box">
<t-upload <ClientOnly>
v-model="files" <div class="custom-home-swiper">
method="PUT" <t-swiper
:requestMethod="requestSuccessMethod" class="tdesign-demo-block--swiper"
:action="actionUrl" :duration="300"
:headers="{ :interval="2000"
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"> <t-swiper-item v-for="item in picList.list" :key="item">
<div class="title">选择视频</div> <img
<div class="title2">或拖视频到此处上传</div> :src="item.picture_link"
<t-button class="custom-chose-file">选择文件</t-button> alt=""
class="img"
@click="goDetail(item)"
/>
</t-swiper-item>
</t-swiper>
</div> </div>
</t-upload> </ClientOnly>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ohterRequest from '@/utils/otherRequest'; const picList = reactive({
const files = ref([]); list: [],
const actionUrl = ref(''); });
const requestSuccessMethod = async (file: any) => { const goDetail = (item: any) => {
return new Promise((resolve) => { if (item.goto_link) {
let uuid = 'aofjoaioeiw-vaofo-nawgoaow1-w'; window.open(item.goto_link);
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) => { const getPicList = async () => {
// resolve 参数为关键代码 try {
if (res == 201) { let res: any = await request.get('/v1/picture');
console.log('1111'); picList.list = res;
// UploadSuccessCallback(uuid); } catch (e) {
resolve({ console.log(e);
status: 'success',
response: { url: '22222.png' },
});
} else {
console.log(222);
// UploadErrorCallback();
} }
});
}, 1000);
});
}; };
onBeforeMount(() => {
getPicList();
});
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import '@/style/flex.less';
.Advertisement-box { .Advertisement-box {
flex: 1; flex: 1;
background: var(--td--right-back-color-2);
padding-left: 6px; padding-left: 6px;
.dj();
box-sizing: border-box;
.custom-home-swiper {
.t-swiper {
height: 100%; height: 100%;
max-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> </style>
views/token/RightDetail.vue
...@@ -128,6 +128,7 @@ ...@@ -128,6 +128,7 @@
:tb="props.tb" :tb="props.tb"
></time-tab> ></time-tab>
<div class="select-box_collect"> <div class="select-box_collect">
<ClientOnly>
<t-select <t-select
empty=" " empty=" "
:placeholder="$t('collection.Focus')" :placeholder="$t('collection.Focus')"
...@@ -147,6 +148,7 @@ ...@@ -147,6 +148,7 @@
<CollectionTable></CollectionTable> <CollectionTable></CollectionTable>
</template> </template>
</t-select> </t-select>
</ClientOnly>
<collection-drawer <collection-drawer
v-model:visible="collectionVisible" v-model:visible="collectionVisible"
></collection-drawer> ></collection-drawer>
......
views/token/TokenFilter.vue
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<div class="filter-block-wrapper"> <div class="filter-block-wrapper">
<div class="custom-form"> <div class="custom-form">
<div class="select-box-chain"> <div class="select-box-chain">
<ClientOnly>
<t-select <t-select
v-model="chain" v-model="chain"
@change="selectChange" @change="selectChange"
...@@ -29,6 +30,7 @@ ...@@ -29,6 +30,7 @@
</div> </div>
</t-option> </t-option>
</t-select> </t-select>
</ClientOnly>
<t-radio-group <t-radio-group
v-model="formData.isNewchain" v-model="formData.isNewchain"
class="custom-group3" class="custom-group3"
...@@ -146,7 +148,8 @@ ...@@ -146,7 +148,8 @@
size="large" size="large"
:label="['+', '-']" :label="['+', '-']"
></t-switch> ></t-switch>
<t-select <ClientOnly
><t-select
v-model="formData.priceRangeTime" v-model="formData.priceRangeTime"
:popup-props="{ overlayClassName: 'select_home_range_box' }" :popup-props="{ overlayClassName: 'select_home_range_box' }"
> >
...@@ -161,6 +164,7 @@ ...@@ -161,6 +164,7 @@
</div> </div>
</t-option> </t-option>
</t-select> </t-select>
</ClientOnly>
<t-radio-button <t-radio-button
v-for="item in PRICE_RANGE_OPTIONS" v-for="item in PRICE_RANGE_OPTIONS"
:value="item.value" :value="item.value"
...@@ -613,6 +617,7 @@ watch(formData, (v) => { ...@@ -613,6 +617,7 @@ watch(formData, (v) => {
.da(); .da();
& > :nth-child(1) { & > :nth-child(1) {
padding-right: 12px; padding-right: 12px;
cursor: pointer;
} }
} }
.value { .value {
......
views/token/TokenList.vue
<template> <template>
<div class="token-list-wrapper-fa">
<FilterBtns></FilterBtns>
<div class="token-list-wrapper"> <div class="token-list-wrapper">
<t-table <t-table
row-key="index" row-key="index"
...@@ -41,6 +43,9 @@ ...@@ -41,6 +43,9 @@
</template> </template>
</JumpOther> </JumpOther>
</template> </template>
<template #sortIcon>
<SortSvg></SortSvg>
</template>
</t-table> </t-table>
<div class="page-footer"> <div class="page-footer">
<CustPagination <CustPagination
...@@ -51,6 +56,7 @@ ...@@ -51,6 +56,7 @@
></CustPagination> ></CustPagination>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool'; import { parsePercent, parseCoinAmount, parseNumberToK } from '@/utils/tool';
...@@ -61,7 +67,9 @@ import { filterChainObj } from '@/constants/UnifiedManagementChain'; ...@@ -61,7 +67,9 @@ import { filterChainObj } from '@/constants/UnifiedManagementChain';
import JumpOther from './JumpOther.vue'; import JumpOther from './JumpOther.vue';
import KLink from '/public/images/svg/table/k_link.svg'; import KLink from '/public/images/svg/table/k_link.svg';
import analysisSvg from '/public/images/svg/table/media.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 { webLogo } from '@/constants/logo';
import FilterBtns from './FilterBtn';
const route = useRoute(); const route = useRoute();
// 当前链 // 当前链
const chain = useChain(); const chain = useChain();
...@@ -168,29 +176,6 @@ const TableFilter = (result: any) => { ...@@ -168,29 +176,6 @@ const TableFilter = (result: any) => {
resultData.list = []; 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() { function next() {
loading.value = true; loading.value = true;
refresh(); refresh();
...@@ -323,6 +308,7 @@ const columns = computed(() => { ...@@ -323,6 +308,7 @@ const columns = computed(() => {
{ {
title: t('TableList.tokenbase'), title: t('TableList.tokenbase'),
align: 'center', align: 'center',
className: 'custom-before-line',
children: [ children: [
{ {
colKey: 'index', colKey: 'index',
...@@ -338,6 +324,7 @@ const columns = computed(() => { ...@@ -338,6 +324,7 @@ const columns = computed(() => {
{ {
title: t('TableList.basic'), title: t('TableList.basic'),
align: 'center', align: 'center',
className: 'custom-before-line',
children: [ children: [
{ {
colKey: 'up', colKey: 'up',
...@@ -370,6 +357,7 @@ const columns = computed(() => { ...@@ -370,6 +357,7 @@ const columns = computed(() => {
{ {
title: t('TableList.priceChange'), title: t('TableList.priceChange'),
align: 'center', align: 'center',
className: 'custom-before-line',
children: [ children: [
{ {
colKey: 'r5m', colKey: 'r5m',
...@@ -408,6 +396,7 @@ const columns = computed(() => { ...@@ -408,6 +396,7 @@ const columns = computed(() => {
{ {
title: t('TableList.others'), title: t('TableList.others'),
align: 'center', align: 'center',
className: 'custom-before-line',
children: [ children: [
{ {
colKey: 'operation', colKey: 'operation',
...@@ -425,8 +414,22 @@ const columns = computed(() => { ...@@ -425,8 +414,22 @@ const columns = computed(() => {
}); });
</script> </script>
<style lang="less"> <style lang="less">
.token-list-wrapper { @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 { #table-height-auto {
.t-table__content {
background: var(--main-theme-color-2);
}
.t-table__affixed-header-elm-wrap {
.scrollbar {
overflow: hidden;
}
}
th, th,
td { td {
padding: 10px 12px; padding: 10px 12px;
...@@ -437,28 +440,95 @@ const columns = computed(() => { ...@@ -437,28 +440,95 @@ const columns = computed(() => {
thead { thead {
tr { tr {
th { th {
border: 1px solid var(--td-Search-info-border-bottom-2);
white-space: nowrap; white-space: nowrap;
border: none;
box-sizing: border-box;
} }
} }
:nth-child(1) { & > :nth-child(1) {
th { th {
color: var(--td--main-btn-color-1); color: var(--td--main-btn-color-1);
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
border-bottom: none;
border-right: none;
} }
.t-align-center { .t-align-center {
height: 30px !important; height: 30px !important;
padding: 0; padding: 0;
} }
& > :nth-child(1) {
&::before {
border-left: none;
}
} }
:nth-child(2) { & > :last-child {
&::before {
border-right: none;
}
}
}
& > :nth-child(2) {
th { th {
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-family: fiveFont; font-family: fiveFont;
border-right: none; 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);
}
}
} }
} }
} }
...@@ -468,8 +538,8 @@ const columns = computed(() => { ...@@ -468,8 +538,8 @@ const columns = computed(() => {
background: var(--td-table-tr-back-color); background: var(--td-table-tr-back-color);
transition: background-color 0s ease-in; transition: background-color 0s ease-in;
td { td {
border-left: none; border: none;
border-right: none; border-bottom: 1px solid var(--new-border-3);
} }
} }
.custom-third-class-name { .custom-third-class-name {
...@@ -507,5 +577,6 @@ const columns = computed(() => { ...@@ -507,5 +577,6 @@ const columns = computed(() => {
padding: 0 24px; padding: 0 24px;
border-bottom: 1px solid var(--td-Search-info-border-bottom-2); border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
} }
}
} }
</style> </style>
views/token/index.vue
...@@ -15,14 +15,8 @@ ...@@ -15,14 +15,8 @@
<div> <div>
<TokenFilter></TokenFilter> <TokenFilter></TokenFilter>
</div> </div>
<div
class="result-container"
id="resullt-container"
ref="tokenContainer"
>
<NuxtPage></NuxtPage> <NuxtPage></NuxtPage>
</div> </div>
</div>
<RightDetail <RightDetail
:token="token" :token="token"
:tb="TbName" :tb="TbName"
...@@ -77,11 +71,12 @@ const changeChain = (chain) => { ...@@ -77,11 +71,12 @@ const changeChain = (chain) => {
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less';
.home-wrapper { .home-wrapper {
width: 100vw; width: 100vw;
display: flex; display: flex;
min-height: calc(100vh - 70px); min-height: calc(100vh - 70px);
padding: 12px; padding: 12px 0 12px 12px;
box-sizing: border-box; box-sizing: border-box;
background: var(--main-theme-color-2); background: var(--main-theme-color-2);
.token-page-wrapper { .token-page-wrapper {
...@@ -91,9 +86,6 @@ const changeChain = (chain) => { ...@@ -91,9 +86,6 @@ const changeChain = (chain) => {
.scroll-Replacement { .scroll-Replacement {
height: 45px; height: 45px;
} }
.result-container {
background: var(--td--right-back-color-2);
}
} }
} }
</style> </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