Skip to content

D
dexfilter-web-nuxt3
Commit 37081707 by haojie
Options

1

parent 3bc7e4c9
Showing with 70 additions and 38 deletions
app/router.options.ts
...@@ -11,7 +11,7 @@ export default <RouterConfig>{ ...@@ -11,7 +11,7 @@ export default <RouterConfig>{
{ {
name: 'tokenlistDefault', name: 'tokenlistDefault',
path: '/', path: '/',
component: () => import('~/views/token/TokenList.vue'), component: () => import('~/views/token/CustomTokenList.vue'),
meta: { hasSearch: true, hasRollToken: true, footer: true }, meta: { hasSearch: true, hasRollToken: true, footer: true },
}, },
{ {
......
components/Animation.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
const props = defineProps({ const props = defineProps({
background: { background: {
type: String, type: String,
default: 'var(--theme-color17)', default: 'rgba(230,230,230,0.2)',
}, },
position: { position: {
type: String, type: String,
......
language/cn.ts
...@@ -34,6 +34,8 @@ const cn = { ...@@ -34,6 +34,8 @@ const cn = {
r24hVolume: '最大交易', r24hVolume: '最大交易',
CustomFilter: '高级筛选', CustomFilter: '高级筛选',
Collection: '收藏', Collection: '收藏',
asc: '升序排列',
desc: '降序排列',
}, },
login: { login: {
h1: '区块链监控专家', h1: '区块链监控专家',
......
language/en.ts
...@@ -35,6 +35,8 @@ const cn = { ...@@ -35,6 +35,8 @@ const cn = {
r24hVolume: '24h Volume', r24hVolume: '24h Volume',
CustomFilter: 'Custom filters', CustomFilter: 'Custom filters',
Collection: 'Collection', Collection: 'Collection',
asc: 'Ascending order',
desc: 'Descending order',
}, },
login: { login: {
h1: 'On-chain intelligent screening', h1: 'On-chain intelligent screening',
......
style/default.css
...@@ -101,6 +101,9 @@ ...@@ -101,6 +101,9 @@
--new-color-2: #287eff; --new-color-2: #287eff;
--new-color-3: #7b7d87; --new-color-3: #7b7d87;
--new-color-4: #5ab055; --new-color-4: #5ab055;
--new-color-5: #16c784;
--new-color-6: #ea3943;
--new-color-7: rgb(108, 108, 108);
} }
:root[theme-mode='dark'] { :root[theme-mode='dark'] {
...@@ -170,6 +173,9 @@ ...@@ -170,6 +173,9 @@
--new-color-2: #28b2ff; --new-color-2: #28b2ff;
--new-color-3: #848e9c; --new-color-3: #848e9c;
--new-color-4: #5ab055; --new-color-4: #5ab055;
--new-color-5: #19de92;
--new-color-6: #ec5058;
--new-color-7: #cfcfcf;
} }
/* 主题按钮*/ /* 主题按钮*/
.custom_button_back_border { .custom_button_back_border {
......
style/line.less
...@@ -19,5 +19,6 @@ ...@@ -19,5 +19,6 @@
-o-transform: scale(0.5); -o-transform: scale(0.5);
-ms-transform: scale(0.5); -ms-transform: scale(0.5);
-moz-transform: scale(0.5); -moz-transform: scale(0.5);
pointer-events: none;
} }
} }
views/token/FilterBtn/index.less
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
align-items: center; align-items: center;
height: 44px; height: 44px;
padding-left: 8px; padding-left: 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: var(--td--right-back-color-2);
.table-filter-btn { .table-filter-btn {
height: 30px; height: 30px;
border: none; border: none;
......
views/token/SecurityCheck.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="header-box">{{ $t('securityCheck.securityCheck') }}</div> <div class="header-box">{{ $t('securityCheck.securityCheck') }}</div>
<div class="field-list-status" v-show="ChainObj.honeypot.request"> <div class="field-list-status" v-show="ChainObj.honeypot.request">
<div class="field-header"> <div class="field-header">
<div class="label"> <div class="label">{{ $t('securityCheck.honeypot') }}：</div>
{{ $t('securityCheck.honeypot') }}： <div class="value">
<a :href="honeypotLink" target="_blank"> <a :href="honeypotLink" target="_blank">
<Share></Share> <Share></Share>
</a> </a>
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
</div> </div>
<div class="field-list-status"> <div class="field-list-status">
<div class="field-header"> <div class="field-header">
<div class="label"> <div class="label">{{ $t('securityCheck.gopluslabs') }}：</div>
{{ $t('securityCheck.gopluslabs') }}： <div class="value">
<a :href="gopluslabsLink" target="_blank"> <a :href="gopluslabsLink" target="_blank">
<Share></Share> <Share></Share>
</a> </a>
...@@ -217,7 +217,7 @@ const getList = (token: string, Obj: any) => { ...@@ -217,7 +217,7 @@ const getList = (token: string, Obj: any) => {
border-left: 1px solid var(--new-border-8); border-left: 1px solid var(--new-border-8);
border-right: 1px solid var(--new-border-8); border-right: 1px solid var(--new-border-8);
.header-box { .header-box {
padding: 4px 12px; padding: 4px 16px;
.dja(); .dja();
height: 40px; height: 40px;
border-bottom: var(--new-border-2); border-bottom: var(--new-border-2);
...@@ -228,31 +228,34 @@ const getList = (token: string, Obj: any) => { ...@@ -228,31 +228,34 @@ const getList = (token: string, Obj: any) => {
} }
.field-list-status { .field-list-status {
.field-header { .field-header {
padding: 4px 12px; padding: 4px 16px;
font-size: var(--font-size-l); font-size: var(--font-size-l);
color: var(--td--main-btn-color-1); color: var(--td--main-btn-color-1);
margin-top: 5px; margin-top: 5px;
width: 80%; .dj(space-between);
.label { .label {
.dj(space-between);
font-family: 'Medium'; font-family: 'Medium';
} }
.value {
padding-right: 12px;
}
} }
.field-row { .field-row {
padding: 4px 12px; padding: 4px 16px;
font-size: 12px; font-size: 13px;
.dj(space-between); .dj(space-between);
width: 80%;
&:hover { &:hover {
background-color: var(--td-bg-color-secondarycontainer-hover); background-color: var(--td-bg-color-secondarycontainer-hover);
} }
.label { .label {
color: var(--td-text-color-secondary); color: var(--new-color-7);
font-family: 'Regular'; font-family: 'Regular';
} }
.value { .value {
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
font-family: 'Medium'; font-family: 'Medium';
text-align: right;
padding-right: 12px;
} }
} }
} }
......
views/token/TimeTab.vue
...@@ -168,10 +168,10 @@ const getTimeList = async (PoolAddress) => { ...@@ -168,10 +168,10 @@ const getTimeList = async (PoolAddress) => {
background: var(--td--right-back-color-2); background: var(--td--right-back-color-2);
.label { .label {
padding-top: 12px; padding-top: 12px;
color: var(--td-text-color-secondary); color: var(--new-color-7);
font-size: 12px; font-size: 12px;
margin-bottom: 6px; margin-bottom: 6px;
font-family: 'Light'; font-family: 'Regular';
} }
.value { .value {
color: var(--td-text-color-primary); color: var(--td-text-color-primary);
......
views/token/TokenInfo.vue
...@@ -76,11 +76,11 @@ watch( ...@@ -76,11 +76,11 @@ watch(
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import '@/style/flex.less';
.token-info-wrapper { .token-info-wrapper {
margin-top: 12px; margin: 12px 0;
.field-list { .field-list {
.field-row { .field-row {
padding: 4px 16px; padding: 4px 16px;
font-size: 12px; font-size: 13px;
.dj(space-between); .dj(space-between);
&:hover { &:hover {
background-color: var(--td-bg-color-secondarycontainer-hover); background-color: var(--td-bg-color-secondarycontainer-hover);
...@@ -89,8 +89,8 @@ watch( ...@@ -89,8 +89,8 @@ watch(
padding-left: 10px; padding-left: 10px;
width: 40%; width: 40%;
flex-shrink: 0; flex-shrink: 0;
color: var(--td-text-color-secondary); color: var(--new-color-7);
font-family: 'Regular'; font-family: 'Medium';
} }
.value { .value {
width: 50%; width: 50%;
......
views/token/rightDetailHeader/index.less
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
background-color: var(--td--right-back-color-2); background-color: var(--td--right-back-color-2);
.filled-star-box { .filled-star-box {
.dja(flex-end); .dja(flex-end);
margin-top: 4px;
.filled-star { .filled-star {
color: var(--td-brand-color); color: var(--td-brand-color);
cursor: pointer; cursor: pointer;
...@@ -52,8 +53,9 @@ ...@@ -52,8 +53,9 @@
} }
.address-info { .address-info {
display: flex; display: flex;
color: var(--new-color-3); color: var(--new-color-7);
font-family: 'Normal'; font-family: 'Regular';
margin-top: 1px;
.address-info-item { .address-info-item {
font-size: var(--font-size); font-size: var(--font-size);
.address { .address {
...@@ -61,6 +63,9 @@ ...@@ -61,6 +63,9 @@
} }
} }
} }
.margin {
margin-top: 2px;
}
:hover.address-info { :hover.address-info {
cursor: pointer; cursor: pointer;
} }
...@@ -75,9 +80,9 @@ ...@@ -75,9 +80,9 @@
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
.price { .price {
color: var(--new-color-4);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: var(--new-color-4);
.price-box { .price-box {
.dja(flex-end); .dja(flex-end);
height: 50px; height: 50px;
...@@ -85,9 +90,10 @@ ...@@ -85,9 +90,10 @@
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);
} }
.r24h-cl { .r24h-cl {
font-size: var(--font-size-s); font-size: 13px;
font-weight: normal; font-weight: normal;
margin-top: -3px; margin-top: -3px;
text-align: right; text-align: right;
......
views/token/rightDetailHeader/index.tsx
...@@ -73,7 +73,7 @@ export default defineComponent({ ...@@ -73,7 +73,7 @@ export default defineComponent({
</span> </span>
</span> </span>
</div> </div>
<div class="address-info"> <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">：{props.tokenInfo.tbnameSub}</span> <span class="address">：{props.tokenInfo.tbnameSub}</span>
......
views/token/tableSort.vue
<template> <template>
<div class="custom-sort-th"> <div class="custom-sort-th">
<AscSvg <t-tooltip :content="$t('filter.asc')">
:class="{ active: sorttype === 'asc' }" <AscSvg
class="sort-icon asc" :class="{ active: sorttype === 'asc' }"
@click="sortChange('asc')" class="sort-icon asc"
></AscSvg> @click="sortChange('asc')"
<DescSvg ></AscSvg>
:class="{ active: sorttype === 'desc' }" </t-tooltip>
class="sort-icon desc" <t-tooltip :content="$t('filter.desc')">
@click="sortChange('desc')" <DescSvg
></DescSvg> :class="{ active: sorttype === 'desc' }"
class="sort-icon desc"
@click="sortChange('desc')"
></DescSvg>
</t-tooltip>
</div> </div>
</template> </template>
...@@ -26,7 +30,7 @@ const emit = defineEmits(['submitSort']); ...@@ -26,7 +30,7 @@ const emit = defineEmits(['submitSort']);
// 当前排序状态 // 当前排序状态
const sorttype = ref('all'); const sorttype = ref('all');
const sortChange = (value: string) => { const sortChange = (value: string) => {
const { options, field } = props; const { field } = props;
if (value == sorttype.value) { if (value == sorttype.value) {
// 代表重复点击--恢复表格初始状态 // 代表重复点击--恢复表格初始状态
sorttype.value = 'all'; sorttype.value = 'all';
...@@ -39,9 +43,14 @@ const sortChange = (value: string) => { ...@@ -39,9 +43,14 @@ const sortChange = (value: string) => {
}); });
}; };
watch( watch(
() => props.options[props.options.field], () => props.options,
(v) => { (v) => {
console.log(v); if (!v.status) {
sorttype.value = 'all';
}
},
{
deep: true,
} }
); );
</script> </script>
......
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