Commit dd213f2c by lei

1

parents
> 1%
last 2 versions
not dead
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# coinnavbrowse
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "coinnavbrowse",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"core-js": "^3.6.5",
"echarts": "^5.3.2",
"postcss-px2rem": "^0.3.0",
"tdesign-icons-vue-next": "^0.1.1",
"tdesign-vue-next": "^0.15.1",
"vue": "^3.0.0",
"vue-i18n": "^9.1.10",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.12",
"@vue/cli-plugin-eslint": "~4.5.12",
"@vue/cli-plugin-router": "~4.5.12",
"@vue/cli-plugin-typescript": "~4.5.12",
"@vue/cli-plugin-vuex": "~4.5.12",
"@vue/cli-service": "~4.5.12",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"typescript": "~4.1.5"
}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<!-- <div id="app"></div> -->
<router-view />
</template>
<script lang="ts" setup>
</script>
<style lang="less">
html,
body {
-webkit-text-size-adjust: none;
}
// #app {
// // 清除默认样式
// display: flex;
// flex-direction: column;
// position: absolute;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// }
</style>
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5832 7.33384L12.6928 6.73967L9.99984 0.395508L7.30692 6.74926L0.416504 7.33384L5.649 11.8668L4.07734 18.6038L9.99984 15.0293L15.9223 18.6038L14.3603 11.8668L19.5832 7.33384ZM9.99984 13.2372L6.3965 15.4126L7.35484 11.3109L4.17317 8.55092L8.37067 8.18676L9.99984 4.32467L11.6386 8.19634L15.8361 8.56051L12.6544 11.3205L13.6128 15.4222L9.99984 13.2372Z" fill="#7B7D87"/>
</svg>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3 4.24871L10.45 0.906158V3.13453H6.05V5.36289H10.45V7.59125L14.3 4.24871ZM3.85001 5.36289L0 8.70544L3.85001 12.0476V9.81962H8.25V7.59125H3.85001V5.36289Z" fill="#0066FF" fill-opacity="0.843137"/>
</svg>
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.07606 2.77496L1.55906 5.13905C1.26306 5.41861 0.715059 5.46724 0.335059 5.24947C-0.043941 5.0317 -0.111935 4.62957 0.185065 4.35102L3.84907 0.907193C4.20807 0.570912 4.67707 0.402771 5.25907 0.402771C5.74107 0.402771 6.13206 0.689424 6.13206 1.04292V14.1062C6.13206 14.4597 5.74108 14.7463 5.26008 14.7463C4.77808 14.7463 4.38807 14.4597 4.38807 14.1062V2.85397C4.38807 2.7932 4.34806 2.75269 4.27006 2.73243C4.19106 2.71318 4.12706 2.72736 4.07606 2.77496ZM9.92408 12.3742L12.4411 10.0091C12.7371 9.73051 13.2851 9.68087 13.6651 9.89864C14.0441 10.1164 14.1121 10.5185 13.8151 10.7981L10.1511 14.2409C9.79207 14.5782 9.32306 14.7463 8.74107 14.7463C8.25906 14.7463 7.86808 14.4597 7.86808 14.1052V1.04292C7.86808 0.689424 8.25906 0.402771 8.74006 0.402771C9.22206 0.402771 9.61207 0.689424 9.61207 1.04292V12.2951C9.61207 12.3559 9.65208 12.3964 9.73008 12.4157C9.80808 12.4359 9.87308 12.4218 9.92408 12.3742Z" fill="white"/>
</svg>
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.04707 0.681091H4.50308C4.10208 0.681091 3.77608 1.0114 3.77608 1.41747V1.54023H3.03708C2.73208 1.54023 2.47208 1.7342 2.36908 2.00666H0.953079C0.552079 2.00666 0.226074 2.33697 0.226074 2.74304V10.5492C0.226074 10.9554 0.552079 11.2856 0.953079 11.2856H7.39908C7.80008 11.2856 8.12608 10.9554 8.12608 10.5492V9.9597H9.04707C9.44807 9.9597 9.77408 9.6295 9.77408 9.22374V1.41747C9.77408 1.0114 9.44807 0.681091 9.04707 0.681091ZM3.03708 2.03118H5.31508C5.44208 2.03118 5.54507 2.13581 5.54507 2.26445C5.54507 2.39298 5.44208 2.49762 5.31508 2.49762H3.03708C2.91008 2.49762 2.80708 2.39298 2.80708 2.26445C2.80708 2.13581 2.91008 2.03118 3.03708 2.03118ZM7.64207 10.5492C7.64207 10.6849 7.53308 10.7943 7.39908 10.7943H0.953079C0.819079 10.7943 0.710075 10.6849 0.710075 10.5492V2.74304C0.710075 2.60772 0.819079 2.49762 0.953079 2.49762H2.36008C2.45608 2.78285 2.72308 2.98857 3.03708 2.98857H5.31508C5.62908 2.98857 5.89608 2.78285 5.99208 2.49762H7.39908C7.53308 2.49762 7.64207 2.60772 7.64207 2.74304V10.5492ZM9.29007 9.22374C9.29007 9.35906 9.18107 9.46946 9.04707 9.46946H8.12608V2.74304C8.12608 2.33697 7.80008 2.00666 7.39908 2.00666H5.98308C5.88008 1.7342 5.62008 1.54023 5.31508 1.54023H4.26108V1.41747C4.26108 1.28215 4.37008 1.17204 4.50308 1.17204H9.04707C9.18107 1.17204 9.29007 1.28215 9.29007 1.41747V9.22374Z" fill="#3A3A3A"/>
<path d="M6.27298 3.87363H2.05598C1.92198 3.87363 1.81299 3.98363 1.81299 4.11929C1.81299 4.25505 1.92198 4.36505 2.05598 4.36505H6.27298C6.40598 4.36505 6.51498 4.25505 6.51498 4.11929C6.51498 3.98363 6.40598 3.87363 6.27298 3.87363Z" fill="#3A3A3A"/>
<path d="M6.27298 5.29736H2.05598C1.92198 5.29736 1.81299 5.40737 1.81299 5.54313C1.81299 5.67878 1.92198 5.78879 2.05598 5.78879H6.27298C6.40598 5.78879 6.51498 5.67878 6.51498 5.54313C6.51498 5.40737 6.40598 5.29736 6.27298 5.29736Z" fill="#3A3A3A"/>
<path d="M4.16399 6.72119H2.05598C1.92198 6.72119 1.81299 6.8312 1.81299 6.96686C1.81299 7.10261 1.92198 7.21262 2.05598 7.21262H4.16399C4.29799 7.21262 4.40599 7.10261 4.40599 6.96686C4.40599 6.8312 4.29799 6.72119 4.16399 6.72119Z" fill="#3A3A3A"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0642 1.18713H9.31421C4.34365 1.18713 0.314209 5.26853 0.314209 10.3032C0.314209 15.3378 4.34365 19.4192 9.31421 19.4192H10.0642C15.0348 19.4192 19.0642 15.3378 19.0642 10.3032C19.0642 5.26853 15.0348 1.18713 10.0642 1.18713Z" fill="#287EFF"/>
<path d="M4.79784 14.2599H6.11284C6.34184 14.2599 6.52783 14.0705 6.52783 13.8386V7.88581C6.52783 7.65285 6.34184 7.46343 6.11284 7.46343H4.79784C4.56884 7.46343 4.38283 7.65285 4.38283 7.88581V13.8376C4.38283 14.0705 4.56884 14.2599 4.79784 14.2599ZM9.02184 14.2599H10.3368C10.5658 14.2599 10.7518 13.9834 10.7518 13.6431V4.94032C10.7518 4.59897 10.5658 4.32346 10.3368 4.32346H9.02184C8.79284 4.32346 8.60683 4.59897 8.60683 4.94032V13.6431C8.60683 13.9834 8.79284 14.2599 9.02184 14.2599ZM13.2448 14.2599H14.5598C14.7888 14.2599 14.9748 14.0037 14.9748 13.6866V5.59971C14.9748 5.28268 14.7888 5.0264 14.5598 5.0264H13.2448C13.0158 5.0264 12.8298 5.28268 12.8298 5.59971V13.6866C12.8298 14.0037 13.0158 14.2599 13.2448 14.2599ZM2.97583 14.9629H16.3078V15.6658H2.97583V14.9629Z" fill="white"/>
<path d="M9.74998 0.611633H9C4.02944 0.611633 0 4.69302 0 9.72767C0 14.7623 4.02944 18.8437 9 18.8437H9.74998C14.7205 18.8437 18.75 14.7623 18.75 9.72767C18.75 4.69302 14.7205 0.611633 9.74998 0.611633Z" fill="#287EFF"/>
<path d="M4.48386 13.6836H5.79886C6.02786 13.6836 6.21387 13.4952 6.21387 13.2623V7.30949C6.21387 7.07652 6.02786 6.88813 5.79886 6.88813H4.48386C4.25486 6.88813 4.06886 7.07652 4.06886 7.30949V13.2623C4.06886 13.4952 4.25486 13.6836 4.48386 13.6836ZM8.70786 13.6836H10.0219C10.2519 13.6836 10.4369 13.4081 10.4369 13.0668V4.36399C10.4369 4.02366 10.2519 3.74713 10.0219 3.74713H8.70786C8.47786 3.74713 8.29187 4.02366 8.29187 4.36399V13.0668C8.29187 13.4081 8.47786 13.6836 8.70786 13.6836ZM12.9309 13.6836H14.2459C14.4749 13.6836 14.6609 13.4274 14.6609 13.1103V5.02339C14.6609 4.70736 14.4749 4.45008 14.2459 4.45008H12.9309C12.7019 4.45008 12.5159 4.70736 12.5159 5.02339V13.1103C12.5159 13.4274 12.7019 13.6836 12.9309 13.6836ZM2.66187 14.3866H15.9929V15.0905H2.66187V14.3866Z" fill="white"/>
</svg>
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99992 0.558044L0.669922 8.15474H9.32993L4.99992 0.558044Z" fill="#23AB94"/>
</svg>
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.891 6.38685L9.56201 6.37066C9.50301 6.39294 9.44701 6.38484 9.39301 6.34534C9.33901 6.30482 9.30299 6.25114 9.28299 6.18327L8.93201 4.89385L7.83301 10.8507C7.82301 11.0664 7.77 11.1738 7.672 11.1738H7.276C7.218 11.1849 7.162 11.1738 7.108 11.1394C7.054 11.1059 7.01799 11.0543 6.99799 10.9864L5.63599 3.21346L4.60999 8.83096C4.59099 8.89882 4.55201 8.95554 4.49301 9.00112C4.43501 9.0467 4.37101 9.06293 4.30301 9.05179H3.95099C3.88299 9.07508 3.81899 9.06597 3.76099 9.02647C3.70199 8.98697 3.66799 8.93329 3.65799 8.86542L2.97 6.38685H1.10901C1.04101 6.38685 0.98501 6.35848 0.94101 6.30277C0.89701 6.24605 0.875 6.18326 0.875 6.11539V5.5725C0.875 5.4935 0.89701 5.42868 0.94101 5.37702C0.98501 5.32638 1.04101 5.30104 1.10901 5.30104L3.409 5.28382C3.585 5.27268 3.683 5.32333 3.702 5.43677L4.06799 6.72718L5.064 0.650845C5.104 0.526259 5.177 0.463462 5.284 0.463462L5.78201 0.447265C5.84101 0.436123 5.89699 0.447254 5.95099 0.480679C6.00399 0.515118 6.041 0.565763 6.061 0.633627L7.40799 8.3387L8.40399 2.80627C8.44299 2.62496 8.52602 2.55104 8.65302 2.58547H9.04901C9.10701 2.56319 9.16601 2.57129 9.22501 2.61079C9.28301 2.65029 9.32201 2.70397 9.34201 2.77184L10.016 5.30104H11.891C11.949 5.30104 12.003 5.32638 12.052 5.37702C12.101 5.42868 12.125 5.4935 12.125 5.5725V6.11539C12.125 6.18326 12.101 6.24605 12.052 6.30277C12.003 6.35848 11.949 6.38685 11.891 6.38685Z" fill="white"/>
</svg>
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5899 6.7359C11.3739 6.26187 11.4499 5.77264 11.5249 5.29962C11.6389 4.5673 11.6089 3.67088 10.4219 3.1462C10.5009 2.86765 10.8569 2.54656 10.6159 2.43311L9.20294 1.76562C8.89494 1.61976 8.08893 1.65118 7.99493 1.84262C7.90093 2.03507 7.64093 2.43516 8.29993 2.58405C8.95993 2.73295 9.57593 3.4916 9.57593 3.4916C9.79793 3.70329 10.072 3.74584 10.252 3.83295C10.916 4.15606 10.8719 4.47411 10.8819 5.17301C10.8899 5.71693 10.6939 6.37835 11.0119 7.07623C11.4409 8.01619 11.6619 8.76269 11.2919 9.11821C10.8379 9.55578 10.2249 9.41701 9.83893 9.1648C9.31693 8.82548 9.11295 8.00301 9.16095 7.00835C9.18795 6.44518 9.21593 5.86276 9.04593 5.36645C8.66993 4.26543 8.06295 4.41739 8.00995 4.41739L7.49695 4.41637V0.512671C7.49695 0.283758 7.29593 0.0973816 7.06293 0.0973816H2.23193C1.99793 0.0973816 1.80795 0.283758 1.80795 0.512671V9.73507H1.23795C1.23795 9.73507 0.814941 9.73508 0.814941 10.1504V10.7328H8.50095V10.1504C8.50095 10.1504 8.51095 9.73507 8.08795 9.73507H7.49695V5.08185H8.00494C8.06694 5.08387 8.25993 5.10817 8.43793 5.62981C8.55793 5.97926 8.53395 6.46037 8.50995 6.96884C8.46295 7.9392 8.40993 9.0392 9.36993 9.66314C9.75493 9.91434 10.1749 10.0379 10.5819 10.0379C11.0639 10.0379 11.3869 9.94576 11.7459 9.60036C12.6939 8.68876 11.8239 7.24741 11.5899 6.7359ZM9.85794 3.29105C9.74094 3.29105 9.64594 3.19886 9.64594 3.08339C9.64594 2.96893 9.74094 2.87576 9.85794 2.87576C9.97494 2.87576 10.0689 2.96893 10.0689 3.08339C10.0689 3.19886 9.97494 3.29105 9.85794 3.29105ZM2.81293 1.47796C2.81293 1.26627 2.98993 1.09306 3.20593 1.09306H6.11093C6.32593 1.09306 6.50293 1.26627 6.50293 1.47796V3.70127C6.50293 3.91296 6.32593 4.08617 6.11093 4.08617H3.20593C2.98993 4.08617 2.81293 3.91296 2.81293 3.70127V1.47796Z" fill="white"/>
</svg>
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.25016 6.99999V11.0927L4.50241 14L7.25016 16.9073V21H11.489L14.5002 23.653L17.5113 21H21.7502V16.9073L24.4979 14L21.7502 11.0927V6.99999H17.5113L14.5002 4.34699L11.489 6.99999H7.25016ZM4.8335 10.1617V4.66666H10.5247L14.5002 1.16666L18.4756 4.66666H24.1668V10.1617L27.7918 14L24.1668 17.8383V23.3333H18.4756L14.5002 26.8333L10.5247 23.3333H4.8335V17.8383L1.2085 14L4.8335 10.1617Z" fill="#7B7D87"/>
<path d="M17.7202 10.5L19.3333 12.117L13.9635 17.5L10.875 14.4048L12.4881 12.7867L13.9623 14.266L17.7202 10.5Z" fill="#7B7D87"/>
</svg>
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 19C4.26251 19 0 14.7375 0 9.49997C0 4.26251 4.26251 0 9.5 0C11.5737 0 13.5449 0.657074 15.1983 1.89871C15.5204 2.14191 15.5865 2.59848 15.3433 2.92276C15.1 3.2449 14.6436 3.31104 14.3193 3.06781C12.9199 2.01819 11.2536 1.4635 9.4978 1.4635C5.06464 1.4635 1.45929 5.06894 1.45929 9.50214C1.45929 13.9353 5.06464 17.5407 9.4978 17.5407C13.931 17.5407 17.5365 13.9353 17.5365 9.50214C17.5365 8.46744 17.3424 7.45834 16.9605 6.50684C16.809 6.13138 16.9925 5.70682 17.3658 5.55536C17.7413 5.40387 18.1658 5.58734 18.3173 5.96069C18.7695 7.08713 19 8.27756 19 9.49997C19 14.7396 14.7396 19 9.5 19Z" fill="#4D4D4D"/>
<path d="M15.4031 4.34567C15.4031 4.90747 15.684 5.18836 16.2458 5.18836C16.8076 5.18836 17.0884 4.90747 17.0884 4.34567C17.0884 3.78388 16.8076 3.50299 16.2458 3.50299C15.684 3.50299 15.4031 3.78388 15.4031 4.34567Z" fill="#287EFF"/>
<path d="M9.72809 18.8763C9.59369 18.8763 9.45941 18.8293 9.34845 18.7354C9.005 18.4431 8.67432 18.1253 8.36493 17.7903C7.39429 16.7471 6.62842 15.5524 6.08655 14.2383C5.50201 12.8238 5.20325 11.3261 5.19263 9.78374V9.7091C5.19263 8.39492 5.40808 7.10207 5.82837 5.86895C6.44281 4.07479 7.49664 2.42995 8.87909 1.11577C8.98364 1.01552 9.09247 0.917381 9.20129 0.821373C9.44238 0.608025 9.81348 0.629356 10.0269 0.872582C10.2402 1.11364 10.2188 1.48485 9.97565 1.69817C9.8775 1.78566 9.77942 1.87523 9.68555 1.96483C8.44177 3.15102 7.49023 4.63158 6.93555 6.24871C6.55585 7.36019 6.36163 8.52504 6.36163 9.7112V9.78161C6.37018 11.1683 6.64124 12.5187 7.16602 13.7924C7.65454 14.9764 8.3457 16.0538 9.2204 16.9946C9.49988 17.2975 9.79852 17.5834 10.1057 17.8458C10.3511 18.0549 10.381 18.424 10.1697 18.6693C10.0588 18.8058 9.89453 18.8763 9.72809 18.8763Z" fill="#4D4D4D"/>
<path d="M8.95595 18.8485C8.77675 18.8485 8.60183 18.7674 8.48659 18.6138C8.2925 18.3557 8.34578 17.9887 8.6061 17.7946C8.94741 17.5407 9.27602 17.2613 9.58535 16.969C10.5198 16.0794 11.2771 15.0446 11.836 13.8905C12.4675 12.5934 12.8238 11.2003 12.8942 9.75382C12.9027 9.57248 12.9069 9.39325 12.9069 9.22046C12.9069 8.29456 12.7896 7.37296 12.5549 6.48758C12.1112 4.79794 11.243 3.22351 10.0483 1.93707C9.96297 1.8432 9.87117 1.74933 9.76662 1.64478C9.53835 1.4165 9.53615 1.04746 9.76449 0.817051C9.99276 0.588779 10.3618 0.586643 10.5922 0.814914C10.7116 0.932254 10.8141 1.04105 10.9102 1.1456C12.2328 2.56857 13.195 4.31369 13.6878 6.19107C13.9459 7.17456 14.0781 8.19431 14.0781 9.2226C14.0781 9.41461 14.0739 9.61301 14.0632 9.81143C13.9843 11.4179 13.5897 12.9625 12.8878 14.4025C12.267 15.6826 11.4263 16.8303 10.3916 17.8159C10.0503 18.1424 9.68551 18.4496 9.30575 18.7311C9.19906 18.8101 9.0776 18.8485 8.95595 18.8485Z" fill="#4D4D4D"/>
<path d="M16.3693 14.4537C16.2563 14.4537 16.1412 14.4217 16.0409 14.3513C14.8014 13.5043 13.436 12.9027 11.9832 12.5614C11.0743 12.3481 10.1356 12.2393 9.19269 12.2393H9.18848C8.48016 12.2393 7.77399 12.299 7.0849 12.4206C5.52753 12.6915 4.05554 13.259 2.71362 14.1039C2.44055 14.2766 2.08002 14.1934 1.90723 13.9203C1.73438 13.6473 1.81763 13.2867 2.0907 13.1139C3.56274 12.188 5.17554 11.5672 6.8844 11.2686C7.63959 11.1363 8.41406 11.0702 9.18848 11.0702H9.19269C10.2252 11.0702 11.2535 11.1896 12.2498 11.4243C13.8434 11.7976 15.3412 12.459 16.7001 13.387C16.9668 13.5683 17.035 13.9331 16.8538 14.1998C16.7385 14.3641 16.5549 14.4537 16.3693 14.4537ZM18.2703 8.76608L1.16479 8.7597C0.842651 8.7597 0.5802 8.49728 0.5802 8.17514C0.5802 7.853 0.842651 7.59058 1.16479 7.59058L18.2703 7.59695C18.5924 7.59695 18.8549 7.85938 18.8549 8.18152C18.8549 8.5058 18.5924 8.76608 18.2703 8.76608Z" fill="#4D4D4D"/>
</svg>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#5865F2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2849 7.34049C17.2061 6.83105 16.0525 6.46082 14.8465 6.25C14.6984 6.52026 14.5253 6.88376 14.406 7.17293C13.124 6.97835 11.8537 6.97835 10.5953 7.17293C10.476 6.88376 10.299 6.52026 10.1496 6.25C8.94225 6.46082 7.78735 6.83241 6.70849 7.34319C4.53241 10.6619 3.94251 13.8982 4.23746 17.0885C5.68075 18.1763 7.07947 18.8371 8.45459 19.2695C8.79411 18.7979 9.09692 18.2966 9.35778 17.7682C8.86096 17.5777 8.38511 17.3426 7.93549 17.0696C8.05477 16.9804 8.17145 16.8872 8.28417 16.7913C11.0265 18.0858 14.0062 18.0858 16.7158 16.7913C16.8299 16.8872 16.9465 16.9804 17.0645 17.0696C16.6135 17.3439 16.1364 17.579 15.6396 17.7696C15.9004 18.2966 16.2019 18.7993 16.5428 19.2708C17.9192 18.8384 19.3192 18.1777 20.7625 17.0885C21.1086 13.3901 20.1713 10.1836 18.2849 7.34049ZM9.73137 15.1265C8.90814 15.1265 8.23302 14.3508 8.23302 13.4063C8.23302 12.4618 8.89372 11.6848 9.73137 11.6848C10.569 11.6848 11.2441 12.4604 11.2297 13.4063C11.231 14.3508 10.569 15.1265 9.73137 15.1265ZM13.7702 13.4063C13.7702 14.3508 14.4454 15.1265 15.2686 15.1265C16.1062 15.1265 16.7669 14.3508 16.7669 13.4063C16.7814 12.4604 16.1062 11.6848 15.2686 11.6848C14.4309 11.6848 13.7702 12.4618 13.7702 13.4063Z" fill="white"/>
</svg>
<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0005 0.565536C11.0005 0.565536 17.4476 0.277257 20.8656 6.73434H10.452C10.452 6.73434 8.48671 6.67123 6.80794 9.04688C6.3257 10.044 5.80734 11.0711 6.38904 13.0954C5.55107 11.6808 1.94025 5.41594 1.94025 5.41594C1.94025 5.41594 4.48712 0.820807 11.0005 0.565536H11.0005Z" fill="#EF3F36"/>
<path d="M20.5309 16.9576C20.5309 16.9576 17.556 22.6668 10.238 22.3845C11.1422 20.8258 15.4462 13.3986 15.4462 13.3986C15.4462 13.3986 16.4861 11.7348 15.2594 9.09792C14.6354 8.18192 13.9994 7.22386 11.9499 6.71324C13.5987 6.69831 20.8475 6.71324 20.8475 6.71324C20.8475 6.71324 23.563 11.2093 20.5309 16.9576Z" fill="#FCD900"/>
<path d="M1.51512 17.0027C1.51512 17.0027 -1.96012 11.5817 1.94609 5.40686C2.84732 6.96561 7.15137 14.3928 7.15137 14.3928C7.15137 14.3928 8.07973 16.1227 10.9822 16.3809C12.0885 16.2999 13.2398 16.2308 14.7108 14.7201C13.8998 16.1498 10.2618 22.3966 10.2618 22.3966C10.2618 22.3966 4.99326 22.4928 1.51503 17.0027H1.51512Z" fill="#61BC5B"/>
<path d="M10.2349 22.4386L11.6997 16.348C11.6997 16.348 13.3093 16.2218 14.6597 14.7472C13.8217 16.2159 10.2349 22.4386 10.2349 22.4386V22.4386Z" fill="#5AB055"/>
<path d="M6.09363 11.5696C6.09363 8.88469 8.27886 6.70728 10.9734 6.70728C13.6679 6.70728 15.8532 8.88469 15.8532 11.5696C15.8532 14.2545 13.6679 16.4319 10.9734 16.4319C8.27886 16.4289 6.09363 14.2545 6.09363 11.5696V11.5696Z" fill="white"/>
<path d="M6.9104 11.5696C6.9104 9.33521 8.72793 7.52118 10.9734 7.52118C13.2159 7.52118 15.0364 9.33222 15.0364 11.5696C15.0364 13.8041 13.2189 15.6182 10.9734 15.6182C8.73093 15.6182 6.9104 13.8041 6.9104 11.5696V11.5696Z" fill="url(#paint0_linear_426_24592)"/>
<path d="M20.8444 6.7163L14.8133 8.47925C14.8133 8.47925 13.903 7.14872 11.947 6.7163C13.6439 6.70726 20.8444 6.7163 20.8444 6.7163V6.7163Z" fill="#EACA05"/>
<path d="M6.27152 12.8732C5.42447 11.4105 1.94025 5.41589 1.94025 5.41589L6.4071 9.81876C6.4071 9.81876 5.94891 10.7588 6.12078 12.1043L6.27143 12.8732H6.27152Z" fill="#DF3A32"/>
<defs>
<linearGradient id="paint0_linear_426_24592" x1="10.9732" y1="7.57834" x2="10.9732" y2="15.3745" gradientUnits="userSpaceOnUse">
<stop stop-color="#86BBE5"/>
<stop offset="1" stop-color="#1072BA"/>
</linearGradient>
</defs>
</svg>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="25" height="25" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_426_24617" transform="scale(0.0125)"/>
</pattern>
<image id="image0_426_24617" width="80" height="80" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAXs0lEQVR4Ad2deZAc9XXHhyOHczpxLv+RylHlSlxxEseVVO5UKiY2oHMlMMgHhDgmLlxy4tgQU2AXduwKchBIq72EkYQAGWEJYWNdOGATy8JGAiHAEhIS6N6d7p7ZuX49u92/45t6r/vX85vZmd2d1a6RvVWvfj3dPd3v9+n33u/9jp7N5d6Yv4vptqUTpTfHI+GfwRMfgFf7HHyxGZ54Cp54EV54LBFxFJ44grzYj7zYgbxYh3x4O/LhIuTFH8L3fy6Xy12UyqW5XI7kx/MPefxs6Jf+pD5Svrk+Uvl6nK++rvO1OvK1CPmahifQjRhfhNoXLytfbNZe+NGoUHs7gJ9IYfJD+rEgiSB8V+TXvjier74YjZRlNFJGnK9qNVIFCfK1RLoHCOULV+rKD/fKgrhlbGTst3/k4SmvtsQUxOPSq0jp1UAS56vGgqNSW3hUdgmQzjd+IhZkHDBQEweiKgvhV8eC2t//yIFEqBajPPasKVLlqtBehS2tFdz5wnOBuyAJogNSR4HYKf3q317wIDE69jemKJ4gcAhqLAQQ+QpbGgFrFRfC+W67EK1FUhkHgixSx4HYFPvinRccSIyO/qIsVVcSOF1IwMEnl6w6IrJYx5Y3A3edLuAOII3yhVGeKGpf3IozeNMFAVKWxbtloXJUFyoyg0fW1wSPQHbXwp7v+RZia5lZpieeijzxRz80iAAo17J/l9CGLldvjoOy1IUKEFSMdduJ8N4YgO5DIJAZvEbDU1Z+7RpbqTkrW+HhBH5aF6tDqlCBCsoKQQXGL3OD0R7eDx9gK7xWS7SflS9i6dXumHN4KcRLUa2+RRUrO8jqUsuD9koMsDO8NwagheTCdLftcYKofLFhziCmF74Ulcovq0LlGRWUCZ5pWF4Z8Mtt4h6Bs/LGxUAXGm1bcC0lQXxkriBewpbXgEcWZ7RXMgyO4F1gAC00F5Ld11o658wJxIsp5qliZTtZHlufV7LwLhiADgS2sFZI9JnOabffHqPjiTuH/bNqidRg2JjnWB7BM/DIdady37mNga3w3M8usKaeD3UdR5r74PZ7BFF74pZZgYhy9WYHHrsug/sRgGeBUDkBnu2DE0QnR7XfIYjjQbjgvCCiXPsHt3dh/KqB1yROI2Ebi+bSKtSpdJWfyTZ1Facj1B8nSe7hjAARQAeiq6fyRTCWL//OjCBSo6ELtUPUu6AbEzwH4JTgbOvrKtRueybQ3O9MBx6dk9aBYSv6XKwn4Bx49rpWT0q8o6C6E8eO/VTXEHVRrDR+VSGoMTgH4LThEUSrTKfSKj3TciYACZ7e9zrM8UKT9VkdXF2VX5VxUP1IVwBpVEV51chCc0trWdMtXWXabVulZ1pa67IuasvJwPLY5G1bob57DAjGmmIg6eHqqXyhZFA9gyB867QgArhYepUnHQVcC+zS+ubOAhuVnF4MtPVhVz7qQS4bgtr0faAYA37YBLFxbU5raBhMxoG4L5fLTTlNcMl4vrRQ+dXY3jC1vixQT9fy+DxSLOgspGjXlkfXTMWtaPN1GlBZjzzH8KQOlRh673HE7xuA/NzXAD8C/GYrdK9LcVAHodLFehW16B2TQsSZM29SfvU7DrwMnN03fYAJHFeZbNurw6TSXPGpgNYBryF8jaSCUIWwIbSPRsHzZS7Z6mxrXddQG/YiWtwHed0QxKuF6QA0qhBKXYkfmhRg5NeuoaDpwrLbbjk1RAHsPwXsP53Ic6cBV/afhX7+NKIXzgEjBGQqcIIDvjlwDvq5sw3Zdxrq2RMset9JkJj9p2COesC5cpooJ6lLor+AGR1DfMtWRPNXQS6+B8N7TyZWmD2YCTGQLBCmUNdmdKwel8N32anTllGqXE4VxXblVzXdzIXkwms91rby2/ZDLR1AfFUv4p5+xItWQS5YDTlvlSN3Q125AnrlN1OrmgxiHfr2x6Dmr4FcQNLPEl3eC5J46VAqA4lr7n4pmYMZHoUeKScAaAzwaMDWJ5fdm15nDeL/2AL99Cno4XHookytsc4NCbkveQ2XhbrRhfp4XGjq5jXGSKNi7Q9s7HPh0XbXAB87gPj6dZA3rOcy/qcvQ1537wSJP7QW5r4907DAOoOOP7gO8kP3ZxK/fz1oX3TTw4g+8hDiD9wHecN9UDtfhqYZP5o2PV6A3rIf8a2PQv7zBkRXD2L8qhT4wj5E8/oQX7Me8l83If7SE5DfeBnqVCmBRjGarC8pjQ7COC6Ex4Qnfp3mnpssUAa1z6okWW6yPgvThWj3JWUHyzlVBkhOjwJnisDpAnC2mMi5UYBkuNo2D2tr1ZmLNWIgx8N8CH22woIzVJYSeNTroMbjO0cgV2yHvO4+jPUMQF2xGnHPIKKr1yLuWYtoQT/G37MK0XtXI7puPeJ7/hfm4FmYwnhTOkMQqTGh2b5otL6sKaWh5RFxUN1n/KpuhtNw5a4A5mswFINYEjfiyvCoNQX2EpAnofhE9+jwEKbYn1oGxSegUIcaLkNZt+UJe4JYSyzxUJ4tU35hV+LuPYOIl96LaNk6yLV7ge+ehD4cQJ6lyS9Ka9KGLnXj1JUppYEshI+mqx8SjrJY/Uvq3lDKMhsAyXXIughi4kpl4OWTCbB0+D8DSBBnOqleqDM8ug9DJIseJtctJ/fiayeWSA0B32dYQH5yK8bn9yK+di3Ug8/DeDF0MAbl16HJol2AKUjax7N6vjBRIM6iWP9Na4UXS792m/KramIDMXML5A46VeiF05C3bE7i321bgZfOcOU0ubSt4BSW1t5C69BPHoW8fw/MM68xHJ7IT6dWmzwmqIEMhCa9zGgMuXYPxq9cjfjafqiDHlDSDI8tj+ClQtBsukUl7TcJQAVfXJ7L5X6SISq/uqNTA2ItskmhbJg+mTTvaEEjIdRd2yHn3Y34ynsgL/sS1N1PwJRqQJmS1/QBdW2BdegtL3BLSo3A+KI+6C3PA6UIZjSEHUHigZB0ntpuUxqjv38C8aJexDc/DFOQWbyzMZVAtcJzASpfaFSjOxkeSqU3S18cMb7QHFMya2hvfa6VUoKaxbEUAl2jcZ065L/dD7l4NdT81ZzOqOUPAmdKyQT8eQBUyzdlAOMr10B9fvsEgKRrMledTICZIo3CCOBsjRsV+eAz0MVGY2EtrxNAhpqkNQajY0+DltXFQfinyhcVW/FG5ZPAnuyfmMpk8PIVg3zF7S8bBGEiBWnU8o0mXrTKqIW9Jl7Ua+RNGw1Olwy1+OnY4gwakTrMTV+BnJekIeoKArib3ZNGWjgecvpBevMEGGgKVqcAKa9TX9wOfeAMxz5bd3fZid3XoTTGF6/DF7+RQ75+rfHqxvV13nZaH+u+HEP8KscTtsThMjBMk0sNgDT8RaKD0JjCeHuA56qzAHBzR4A2dyMdeeyvUIG1PrJAcnMcoxhcy7yFQBHADsDa7a8iX/+LnM7X/9t4dTldgDwQeaYEvHgGZv8JmB8MG5wpGQwnUNiyUoA6GDPxxxsWSFaoyQLPJYOzBH5maQxZoAuwP7NAa32g+EvZQHEM+sgw1LOvsujDI8Cw4FEY7qLZAY10iL8LiBpebUlOe/UHjFfX0wHIT+epw5CfeRQxddWWDlCXzcgPftmoNd8y5vXA6LNFdk1qrciyCaBauIrdNwM4PPcAzbka9OkqohXbEV0/hKjnHo7F8uo1kCt2wrzkgRJvqhM3gilAa5XTsERqif8zZ7yxXVO7MGfh0N84iHjJmqR/S4lozyBUz6CJFveZ6OpBEy/fZMypopFe4sLIhz90gCiMQ5Vi4LmziG58gPvk3C+nPnlPPxTLGsTLVgO7XuK4yRBpaN9CTBvSKSBq7Ym7ciZff26C9VHymPYDbTzBIQ9q+WZWIlo8ACsxAxww0eIBE10zZGTvU8acS2PguRoD1G0skBqQ2XZhlGSSq3l1qBVPIP7HlfyQ6UEnkkJc2ge1tBf6hgHg0AgPNmTwuoCofbExZ7z6kU4ALUTO0jftQ3TZXRk4Ash9SgK3eMDIRUMmXthn5LJ7jT6SNyhJFnLhtgDzlTkDSENe0eIhqPn9kIuGEk9ZQmUzQHXVSqhH92WpDCfsXQA0frhlUoBkfRRodTWGvP3riCl7X5gkrhZgYoFDKcBBQzExeuoVY0ZjY0KwBWJRH8OlGKg+9oAx58qc+lD6076XMVXf2G1EBoy6ot+oz+9OHlpVm3jnK0bO6zNqfr+JFw4a0lEtGWLdSL9Eeo26aqVRq3c23JhctyuAYteUABGMGZQiIz+9zcRXrmYQZGnji/pMtHjIxD1rzfiiQVZULRw0Yz0DRj/xikExNqZiTPyJjUZeNWjM/DVGXr7KyBU7HYA1wwpnyftU4OzxOtTHsjzQAagNhDHYQQAHjF6Q6EUewgAJYgayjwHKFY+D4iZ7Wwqwi5Z4aoCUz1E6or6428jL7soAsrsuGmKICcC1hgDKBf1GP/0aWwPlgWbHIRNfv44bmvj6DQZPHzN6pErgrMwokVZ37GAXjeYNGHl5r9H9ewxKCUDFFjiQ6MM6dgC49B6jNu7NkmnyBptMuw0IeWJb8cNHyQIPtI2B1HlOXJgB6m0vmHjpAAOMFqxJQSZPOF641pAQPPnxR4w5PmpMJTaoSoZkDp41+msHDE6MGpweTWIf92BmaoECODgMfeduqE89ZuSd3zQ4Mpo8tJo25rWKia/faLAwCS1y8QC7MbkyuzO7cZ9RBPB7J5umNlsBtgWXAa0/mDNe+MRkACmfIyukyrMbL+rNIEYL+g0JxRmCR1apt71oTEVxV46tt5BOzBcF9z645U27fxwDKeZ07cIClChz59+PDPyIez3UcPG9qQt53/eMpAfdM2gIIAmlXAnE/iQO3vpVg1PU3UtjXxsLnBRgIfwCJdKbOgFM4wIF+sTdhoVRH3vIyAWrTfzuFawgAZTvvtvIZeuM7Pt2YnG+4O/Q+Jku1Fhs35cA6hGnEZkJQPoOL8kgLxkzLBRzR2Ojy5LjL0Ely1RXrDZ6QV+zLOw18pObDV4nPZz8L30Nw3VfZpBZXKsr1/89h/zY7e0A0sgDmTPHqpGagZUTo0Y9+pxRn91m1PJN7LJy5bcMKO7lQ+pkJ8A9wds8SJsuDyGLO28LtBXmxJfH6xggx9vR2KjSWAKwMM6Wie++bvSdO4361JZUHjF47KCBnw54WOtPr9uuAelohYV6Tw5efUl7gMlLMRm4FKAqJJCoIeDGwKsbXRxnYUsla/UEvc5ldD5xX7u+JlvZ5bqwrUDaAmYW4e5vOcYj3uk+nScQCTS2wGK9AZD2+yRhe+GVZmnL3j3AkN4BzGE4ervy6+EEiOnoRBPAFA4BIjhUssXRyAv1fa315WvJcX7KCcR0wqqR/7mtsLWqbsoUMHVDM4CFOo3TGVDJrt0OXM3Ad6Tl4Vj3deOy3WdLBKFGEB6mFWw5DONntC9esnOg2Un2wuQqVqiCqeJua0Umbr9HpT2HSvrM8xG0iOeccywdzk/mTNrPY2RD/nbon0p23dQ7aFSFGhNamkG5HE0uFWm7ni3/sMtA2pZpXcjqXdd19Xe3nTpK5Ytddk4kpzzxFReg+6UMXqr4BBdzoDZ9zypH5as+1B2PQ330IeCZ1zjzT66TTvjQ5HcqrdBaJ4h4IJeG5fceR3TTJpjPPA4cLwHBeAKOAr5dP+PqMMW2hdOxDs6qLRrS1354W7bMQwfhjTxKm7hhkwVlFySAqRLTuZk9l1Y/6Ueeg1rYB3nZXVAffhB4ZZRTEDtj1wleO5j0HXPgDOIb1iO67G7oBX3A1gOJFQZJ7totwOnWJz2P3reLpFf9K2uBl4z7lbcpP6wR2akuZo9TmUGa7On6Icy3X4W8ai3k4gEa/oJ6/3pgz2s8HtcK0cK0pYVoXd3sP4N4+Waoq+/lgQ16MLTOhqHZdIMscDKdnGO2PlOdb89LpjbDYxz/UoKXALhE+eEeeiWUTpgKjr3YVDfl4+xOYzCb9kFf2csVVz1roa75MvCV/TAnS9DliJdS0ER8Y2K8zPPKHFpqEvrEKOTW5xFdM4Txy+/B2JJBRFfcDXz1xaa1NU26T6NRajrfAdtaN1tnMrJ0rSD9tED2d5EMxKcIXhwIRUq3XsD9bC/m7mu77caiqoa5/3sMTtHQ0pXJQqHowxsgB/4P+vunoF8tgkeSRwRbpzoaQB84B/nwfsS3bON1LbSQKJrfi2jBGsR9TwIjY8kISlr5DEgrPNsQ2tIenwSarZOtbxrmoIJwXkYu3bh0rDT2W7EvCq4VZsq0KjfFSyv2xlRm1xip8fwrdh2G/tB6yHm9PFbHw2K0yGfJIOJ/eRDy449AfWILl+M3PgR97b18jI4zOBqHvH4D9NcOQhNoBwTdK03+G/vt8cnKKSDSdW0bEQfiEE0FtwLk11fjQDxEJpr4uVP58wDIMFl5SjnoZewx4Ngo9No9UO9LrIlWCZDQ0jWyLBJ5+SpeCFTvGWBw4+9ZySDlnbu5ESFQ/JsLzo9W2NQqgzoZNPfYJAAJngVIS32jQu2/stbXUqR10bRYRvq1v4sDEaUAJ8RCe7G2FjaJElmFms6hVVbjkA8/myx4XJY0CjRgayVc2p80Fjc+ANn3beinjyUND40SOQC4gXE+Z/eb7r4mvZrDl4WXhjd/3Bv/XcutteQF1DIQj6dxkAFaaFQ2uaSTF7lA225TRdooydf26uyKNN0onzkO+eQrkLt/AL3rB5DfPATaz6lL5kaNSf6uQXUC2kY3W1cLkK0vEP8zwfosRSRvpF8kvepfpz/SwF2ztIvWEUA7MN3sswrSGmc5Ws+E5p9pXzJ32/yiDE2YS/vmUScorftt42FLe7wDvBaAtCJrZCw/NuVbS4kVFsIt9K4YweM0oqVVZstp2dcNtNZzk+slq6fsIiC7CoIn3m23jxaOOysj6Ht8LYLRCsICmqxs/U7L5+zh+kLLIPxM05pAa3luaa0wKlR/X/miPFljkinfctMJFZnsOC+lcFwyqPFioGRBEC2zSI5R982K3WfLru43mS4tx5KHmrS+sS9edhNnl1m7bV44rb0kL3Qt0EKzF58N5S2Y1pIAtdtnwVE5s2UhzY1EuzrY+lFJWUlE437JD5y149W8z1ohjdIoX3zHvRhtt7vhTPcl125YoAtnOttzAdCtb5r7rWsmNI1PFuJ4UP09u/TNQpotiA1FZwZwruGRftIXh1Eu/9I0kE08JYWYU4F4v/GFnA1wFpp9GBdS2Wrxyq+F6YhL412QiZim3JPEQ1/cShDPp8IW3mw8iPPRo913J8KrIgoq9CrDecGzdPkiyqsNpRBpKH9asdCFdiGCo3q0gycL1U/PFrxmiH64tRuIkwG8EIAm+jViMOWYUVD5/GzD6wqiCy15wo1BidZj07XkuTrPBTjX8JohdnBnF9Bk23MFpJvrNvRLk3V/9t3WQmstmxoWk3T5mmblGsol1ud+7qaSc3Wuq4/xa6GaxQajFVanz2nDEi5WnnhW+UI4SnH/OU1CJ4CdKyiTXdfRrUkfyvNmI1XpBGmq/QyRxseUL3Zwv9nLxhJ5BNdVnCrY+nmySs/GMfd+dts+WOWLjcjXfm2uGoyp4PFxm2zThziZGh1JR7TpR7wySyTlZwPIdK9hYdnSgUa9i1fSXyTiQeRpVXQuT7LdPrpHGIRvjf2wLw5ESD8XkgpNEbD1dQIwW4AtMFtacOn4ZpmG4xEEP58OivIL064RzCWnKa/tgLwoGq29IyqIdXEgShwfPRGl7+JNmCboBLWb/RaYLR1w9Au++bggVqU/zM1WR7paeUNduANVio00SXVR7Ik/jgOxUgXipF18lC5Aop99n3aPZjKYFlo6+EvWzhYfF8RLMgg/64DL1HXgZfsuxA0Cyf8YAMPVX6EfezV+bZvxxQg8oeBx35rKrn9D3wK18FKLk9IXR2NfbKTxOxSLv5A+yAuRTdc6cYtNQHG2+hZ44r3wxJ3wxbfghcfhiXIKNE7hTqfRCY0vDhuffqW89gX6pXKM1H411Sx7eF1reoF/gSpmJXfHHXdcTK+MIl//c3j1HnjiZnjiS/DEBvjiG+m/v9gBL9wCT2yEJ+6CX1vO/wrDF+9Mx+p4Hse5rv01DfvQ5hTJ/wOi6LesH9OVjwAAAABJRU5ErkJggg=="/>
</defs>
</svg>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="url(#paint0_linear_426_24602)"/>
<path d="M5.61842 12.521C9.25347 10.9775 11.6774 9.9599 12.8902 9.46825C16.3531 8.06449 17.0727 7.82064 17.5416 7.81259C17.6448 7.81081 17.8754 7.83573 18.0248 7.95388C18.151 8.05364 18.1857 8.18841 18.2023 8.28299C18.2189 8.37758 18.2396 8.59304 18.2231 8.76141C18.0355 10.683 17.2235 15.3464 16.8104 17.4986C16.6356 18.4093 16.2915 18.7147 15.9583 18.7446C15.2342 18.8095 14.6843 18.2782 13.983 17.8301C12.8855 17.129 12.2655 16.6925 11.2002 16.0083C9.96911 15.2176 10.7672 14.7831 11.4688 14.0728C11.6524 13.887 14.8429 11.0587 14.9046 10.8021C14.9124 10.77 14.9195 10.6504 14.8466 10.5872C14.7737 10.5241 14.6661 10.5457 14.5884 10.5628C14.4784 10.5872 12.7252 11.7166 9.32881 13.951C8.83117 14.2841 8.38042 14.4463 7.97657 14.4378C7.53135 14.4285 6.67493 14.1925 6.03827 13.9908C5.25737 13.7434 4.63674 13.6126 4.69078 13.1924C4.71893 12.9736 5.02814 12.7498 5.61842 12.521Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_426_24602" x1="0.0927078" y1="0" x2="0.0927078" y2="24.8146" gradientUnits="userSpaceOnUse">
<stop stop-color="#2AABEE"/>
<stop offset="1" stop-color="#229ED9"/>
</linearGradient>
</defs>
</svg>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.5" cy="12.5" r="12.5" fill="#1D9BF0"/>
<path d="M19.1271 9.10029C19.1372 9.24721 19.1372 9.39412 19.1372 9.5424C19.1372 14.0603 15.6976 19.2708 9.40807 19.2708V19.2681C7.55013 19.2708 5.73077 18.7386 4.16669 17.7353C4.43685 17.7678 4.70836 17.784 4.98055 17.7847C6.52027 17.786 8.01597 17.2695 9.22729 16.3182C7.76409 16.2905 6.48099 15.3365 6.03276 13.9438C6.54532 14.0427 7.07345 14.0224 7.57653 13.8849C5.9813 13.5627 4.83362 12.1612 4.83362 10.5336C4.83362 10.5187 4.83362 10.5045 4.83362 10.4903C5.30894 10.755 5.84114 10.9019 6.38552 10.9181C4.88305 9.91409 4.41992 7.91547 5.32723 6.35286C7.06329 8.48892 9.62474 9.78748 12.3744 9.92492C12.0988 8.73739 12.4753 7.49299 13.3637 6.6582C14.7409 5.3637 16.9069 5.43005 18.2015 6.80648C18.9673 6.6555 19.7013 6.37452 20.3729 5.97642C20.1177 6.76788 19.5834 7.44019 18.8698 7.8674C19.5476 7.78751 20.2097 7.60606 20.8334 7.32915C20.3743 8.01702 19.796 8.6162 19.1271 9.10029Z" fill="white"/>
</svg>
<svg width="161" height="41" viewBox="0 0 161 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_426_2446)">
<path d="M11.8826 40.9488C9.50458 40.9488 7.42035 40.4324 5.6297 39.3995C3.83911 38.3666 2.45312 36.8984 1.47186 34.9949C0.490601 33.0913 0 30.8634 0 28.3111C0 25.4088 0.504944 22.8821 1.51489 20.731C2.52478 18.58 3.97516 16.9368 5.86609 15.8015C7.7641 14.6662 9.98804 14.0985 12.5379 14.0985C13.9489 14.0985 15.256 14.2564 16.4594 14.5723C17.6627 14.8796 18.6725 15.2978 19.4891 15.8271C19.9618 16.1429 20.3127 16.5825 20.542 17.1459C20.7783 17.7007 20.8965 18.2897 20.8965 18.9129C20.8965 19.8945 20.6673 20.7609 20.2089 21.5121C19.7577 22.2633 19.1811 22.6389 18.4792 22.6389C18.0709 22.6389 17.6591 22.5194 17.2437 22.2804C15.7825 21.5036 14.3751 21.1152 13.0214 21.1152C11.4385 21.1152 10.2137 21.7213 9.34705 22.9334C8.48035 24.137 8.04706 25.857 8.04706 28.0934C8.04706 29.9116 8.42664 31.3372 9.18585 32.37C9.95227 33.4029 11.0266 33.9193 12.409 33.9193C13.1682 33.9193 13.8558 33.8425 14.4718 33.6888C15.0878 33.5266 15.7646 33.2706 16.5023 32.9206C16.9679 32.6389 17.4227 32.498 17.8668 32.498C18.5114 32.498 19.0164 32.7883 19.3817 33.3687C19.7469 33.9406 19.9296 34.6491 19.9296 35.4942C19.9296 36.2283 19.7899 36.9368 19.5106 37.6197C19.2313 38.3026 18.8158 38.8361 18.2643 39.2202C17.4979 39.7068 16.5274 40.1165 15.3528 40.4494C14.1781 40.7823 13.0214 40.9488 11.8826 40.9488ZM33.8857 40.9488C31.4791 40.9488 29.3804 40.4238 27.5898 39.3739C25.7992 38.3239 24.4205 36.8301 23.4535 34.8924C22.4866 32.9462 22.0031 30.6969 22.0031 28.1447C22.0031 25.2424 22.5009 22.737 23.4965 20.6286C24.4921 18.5117 25.8923 16.8941 27.6973 15.7758C29.5022 14.6576 31.608 14.0985 34.0146 14.0985C36.4211 14.0985 38.5198 14.6235 40.3104 15.6734C42.101 16.7148 43.4798 18.2001 44.4467 20.1293C45.4136 22.0499 45.8971 24.2863 45.8971 26.8386C45.8971 29.7751 45.3958 32.3017 44.393 34.4187C43.3974 36.5356 41.9971 38.1532 40.1922 39.2714C38.3944 40.3896 36.2922 40.9488 33.8857 40.9488ZM33.746 34.073C35.3074 34.073 36.4319 33.3773 37.1195 31.9859C37.8071 30.586 38.1509 28.8019 38.1509 26.6338C38.1509 24.7046 37.8214 23.2791 37.1625 22.3572C36.5035 21.4268 35.4972 20.9615 34.1435 20.9615C32.5892 20.9615 31.4683 21.653 30.7807 23.0358C30.0931 24.4186 29.7493 26.1771 29.7493 28.3111C29.7493 30.2659 30.0788 31.717 30.7377 32.6645C31.3967 33.6035 32.3994 34.073 33.746 34.073ZM52.5001 40.8464C51.3828 40.8464 50.4624 40.4793 49.739 39.7452C49.0227 39.0111 48.7112 37.9441 48.8043 36.5442L50.0291 18.5544C50.1508 17.1203 50.6057 16.0362 51.3935 15.3021C52.1885 14.568 53.1447 14.201 54.2621 14.201C55.3723 14.201 56.2783 14.568 56.9802 15.3021C57.6893 16.0362 57.983 17.1203 57.8612 18.5544L56.6364 36.5442C56.5433 37.9441 56.1064 39.0111 55.3257 39.7452C54.5521 40.4793 53.6103 40.8464 52.5001 40.8464ZM76.9203 14.0985C79.3269 14.0985 81.1462 14.9137 82.3781 16.5441C83.61 18.166 84.226 20.5475 84.226 23.6888C84.226 24.4571 84.2117 25.0503 84.183 25.4686L83.431 36.5442C83.3164 37.8672 82.8903 38.9172 82.1525 39.694C81.4219 40.4622 80.455 40.8464 79.2517 40.8464C78.0484 40.8464 77.1101 40.4537 76.4368 39.6684C75.7635 38.8745 75.4843 37.8331 75.5988 36.5442L76.3509 25.7887C76.4368 24.3205 76.2363 23.1937 75.7493 22.4084C75.2693 21.6231 74.5173 21.2304 73.493 21.2304C72.347 21.2304 71.4589 21.6786 70.8286 22.5749C70.1983 23.4626 69.8366 24.6577 69.7435 26.16L69.0022 36.5442C68.9091 37.8672 68.4973 38.9172 67.7667 39.694C67.0361 40.4622 66.0692 40.8464 64.8658 40.8464C63.6339 40.8464 62.6921 40.4622 62.0403 39.694C61.3956 38.9172 61.1056 37.8672 61.17 36.5442L62.3948 18.4519C62.4593 17.1886 62.8854 16.1642 63.6733 15.3789C64.4683 14.5936 65.4675 14.201 66.6708 14.201C67.6664 14.201 68.4578 14.4997 69.0452 15.0972C69.6325 15.6862 69.9548 16.4886 70.0121 17.5044C70.7713 16.4545 71.7526 15.6265 72.9559 15.0204C74.1592 14.4058 75.4807 14.0985 76.9203 14.0985ZM103.544 14.0985C105.951 14.0985 107.77 14.9137 109.002 16.5441C110.234 18.166 110.85 20.5475 110.85 23.6888C110.85 24.4571 110.835 25.0503 110.807 25.4686L110.055 36.5442C109.94 37.8672 109.514 38.9172 108.776 39.694C108.046 40.4622 107.079 40.8464 105.875 40.8464C104.672 40.8464 103.734 40.4537 103.06 39.6684C102.387 38.8745 102.108 37.8331 102.222 36.5442L102.975 25.7887C103.06 24.3205 102.86 23.1937 102.373 22.4084C101.893 21.6231 101.141 21.2304 100.117 21.2304C98.9707 21.2304 98.0826 21.6786 97.4523 22.5749C96.822 23.4626 96.4603 24.6577 96.3671 26.16L95.6259 36.5442C95.5327 37.8672 95.1208 38.9172 94.3903 39.694C93.6597 40.4622 92.6928 40.8464 91.4895 40.8464C90.2576 40.8464 89.3157 40.4622 88.6639 39.694C88.0193 38.9172 87.7292 37.8672 87.7937 36.5442L89.0184 18.4519C89.0829 17.1886 89.5091 16.1642 90.2969 15.3789C91.092 14.5936 92.0912 14.201 93.2944 14.201C94.29 14.201 95.0815 14.4997 95.6688 15.0972C96.2561 15.6862 96.5784 16.4886 96.6357 17.5044C97.395 16.4545 98.3762 15.6265 99.5795 15.0204C100.783 14.4058 102.104 14.0985 103.544 14.0985ZM125.236 14.0985C128.524 14.0985 130.981 14.9564 132.606 16.6721C134.239 18.3794 135.056 20.9658 135.056 24.4315C135.056 25.1656 135.042 25.7417 135.013 26.16L134.304 36.5442C134.218 37.9014 133.82 38.9599 133.111 39.7196C132.409 40.4708 131.485 40.8464 130.339 40.8464C129.373 40.8464 128.581 40.522 127.965 39.8732C127.349 39.2245 127.013 38.3751 126.955 37.3252C126.425 38.4776 125.677 39.3696 124.71 40.0013C123.743 40.6329 122.629 40.9488 121.368 40.9488C119.957 40.9488 118.672 40.6158 117.511 39.9501C116.358 39.2842 115.449 38.3666 114.783 37.1971C114.124 36.0277 113.794 34.726 113.794 33.2919C113.794 31.2945 114.206 29.6939 115.03 28.4904C115.853 27.2868 117.157 26.4076 118.94 25.8527C120.731 25.2893 123.109 25.0076 126.074 25.0076H127.664L127.707 24.6363C127.822 22.1523 126.662 20.9103 124.226 20.9103C123.052 20.9103 121.408 21.367 119.295 22.2804C118.801 22.5194 118.303 22.6389 117.802 22.6389C117.071 22.6389 116.469 22.3444 115.997 21.7554C115.531 21.1579 115.298 20.4579 115.298 19.6555C115.298 19.0238 115.452 18.405 115.76 17.7989C116.068 17.1843 116.545 16.6679 117.189 16.2496C119.359 14.8156 122.042 14.0985 125.236 14.0985ZM123.657 34.7004C124.652 34.7004 125.494 34.2565 126.182 33.3687C126.876 32.4724 127.267 31.3115 127.353 29.886L127.396 29.297H126.203C124.448 29.297 123.195 29.519 122.443 29.9628C121.698 30.3982 121.326 31.1579 121.326 32.242C121.326 32.9761 121.537 33.5693 121.959 34.0218C122.389 34.4742 122.955 34.7004 123.657 34.7004ZM153.933 16.7746C154.284 15.8954 154.753 15.2381 155.34 14.8027C155.927 14.3674 156.558 14.1497 157.231 14.1497C158.169 14.1497 159.004 14.5082 159.734 15.2253C160.472 15.9423 160.841 16.8258 160.841 17.8757C160.841 18.4306 160.708 19.0238 160.443 19.6555L152.525 37.6453C152.052 38.7294 151.404 39.5616 150.581 40.1421C149.764 40.7141 148.915 41 148.034 41C147.153 41 146.337 40.7055 145.585 40.1165C144.84 39.519 144.306 38.6953 143.984 37.6453L138.526 19.5019C138.412 19.186 138.354 18.8147 138.354 18.3879C138.354 17.2355 138.795 16.2325 139.676 15.3789C140.557 14.5253 141.524 14.0985 142.577 14.0985C143.25 14.0985 143.852 14.3162 144.381 14.7515C144.911 15.1869 145.309 15.8399 145.574 16.7106L148.958 29.1946L153.933 16.7746Z" fill="#287EFF"/>
<path d="M59.7301 5.95975C59.7301 9.25122 57.4912 11.9195 54.7294 11.9195C51.9676 11.9195 49.7287 9.25122 49.7287 5.95975C49.7287 2.66827 51.9676 0 54.7294 0C57.4912 0 59.7301 2.66827 59.7301 5.95975Z" fill="#FF6F00"/>
</g>
<defs>
<clipPath id="clip0_426_2446">
<rect width="160.841" height="41" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.89525 3.87622C9.68932 3.43787 9.24035 3.17606 8.6942 3.17606C8.44213 3.17606 8.21105 3.23395 8.01061 3.34515C7.79088 3.03958 7.47741 2.86426 7.07018 2.81921C6.66308 2.77414 6.31017 2.8757 6.01159 3.1239C5.6079 2.78833 5.14831 2.71097 4.6328 2.89182V1.04843C4.63268 0.758881 4.51647 0.511749 4.28429 0.307037C4.05211 0.102356 3.77184 0 3.44347 0C3.1151 0 2.83495 0.102356 2.60265 0.307037C2.37047 0.511749 2.25426 0.758881 2.25414 1.04843V4.29526C1.72204 3.80374 1.1466 3.76059 0.528071 4.1658C-0.0905815 4.57104 -0.209844 5.06931 0.169917 5.66058C0.281855 5.85086 1.8214 8.47308 2.37707 9.35324C2.40624 9.40762 2.44018 9.45956 2.47887 9.50916C2.4851 9.51746 2.49145 9.52545 2.49828 9.53326C2.75402 9.84442 3.09972 10 3.53527 10H7.54784C8.16137 10 8.55199 9.90033 8.81444 9.67688C9.07457 9.45541 9.12865 9.17719 9.17626 8.93182L9.98082 4.55063C10.0247 4.3187 9.99608 4.0939 9.89525 3.87622ZM9.16625 4.43494L8.36339 8.81094C8.32799 8.9895 8.30297 9.10196 8.24193 9.15393C8.18981 9.19839 8.0299 9.27292 7.54833 9.27292H3.53551C3.38183 9.27328 3.25951 9.21884 3.16869 9.10953C3.15233 9.08438 3.13439 9.05643 3.11498 9.0264C3.114 9.02432 3.11278 9.02234 3.11193 9.02026C3.09813 8.98996 3.08019 8.96179 3.05785 8.93576C2.46874 7.99396 0.915522 5.34888 0.898677 5.3201L0.889521 5.30536C0.728511 5.05939 0.787471 4.86539 1.06627 4.72336C1.34386 4.58197 1.56347 4.63333 1.72509 4.87747C1.75524 4.92517 2.09984 5.46768 2.26024 5.71619C2.30163 5.93646 2.44848 6.03751 2.7008 6.01929C2.95311 6.0011 3.07946 5.88034 3.07958 5.65704V1.04843C3.07958 0.834137 3.20104 0.72699 3.44408 0.72699C3.687 0.72699 3.80858 0.834137 3.80858 1.04843V4.97183C3.80858 5.21432 3.94603 5.3356 4.22106 5.3356C4.49596 5.3356 4.63341 5.21432 4.63341 4.97183V3.96375C4.63341 3.67966 4.79455 3.53763 5.11657 3.53763C5.43871 3.53763 5.59972 3.67966 5.59972 3.96375V4.86792C5.59972 5.11041 5.73717 5.23166 6.0122 5.23166C6.2871 5.23166 6.42467 5.11041 6.42467 4.86792V3.96375C6.42431 3.67938 6.58532 3.5372 6.90783 3.5372C7.23021 3.5372 7.39123 3.67938 7.39098 3.96375V4.86792C7.39098 5.11041 7.52843 5.23166 7.80333 5.23166C8.07836 5.23166 8.21581 5.11041 8.21581 4.86792V4.26306C8.24035 4.18307 8.28234 4.11099 8.34166 4.04678C8.43371 3.94876 8.54577 3.90305 8.69445 3.90305C8.95983 3.90305 9.0797 4.03961 9.13353 4.15414C9.17467 4.24481 9.18566 4.33823 9.16674 4.43442L9.16625 4.43494Z" fill="#F8F9FD"/>
</svg>
\ No newline at end of file
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_817_2467)">
<path d="M9.08022 16.9894C8.99898 16.9719 8.93526 16.938 8.88918 16.8876C8.83413 16.8275 8.8041 16.7439 8.79915 16.6368L8.37508 7.44367L0.249894 4.81733C0.0753337 4.76094 -0.0077352 4.6342 0.000565572 4.43714C0.00776772 4.24037 0.0999918 4.11985 0.277238 4.07563L16.5345 0.00879777C16.6625 -0.0243748 16.7796 0.0398952 16.8629 0.140573C16.8672 0.144205 16.8732 0.142282 16.8774 0.146493C16.8848 0.1522 16.8851 0.16459 16.8915 0.172006C16.9026 0.188791 16.9231 0.195688 16.9312 0.215311C16.9362 0.225046 16.9307 0.237253 16.9345 0.247354C16.999 0.35853 17.0261 0.49064 16.9685 0.614023L9.46999 16.7833C9.38863 16.9598 9.25875 17.0284 9.08022 16.9894ZM1.7394 4.49589L8.61538 6.71739L15.1531 1.13911L1.7394 4.49589Z" fill="black"/>
<path d="M6.01532 4.19012L11.6526 2.66388L9.09021 5.10586L6.01532 4.19012Z" fill="#3861F6"/>
</g>
<defs>
<clipPath id="clip0_817_2467">
<rect width="17.0001" height="17" fill="white"/>
</clipPath>
</defs>
</svg>
<template>
<t-dropdown :min-column-width="colWidth.label" :hide-after-item-click="false">
<div class="login">
<div class="login-box">
<t-avatar>D</t-avatar>
<div class="user-name">userinfor</div>
<UserAddIcon size="0.12rem" />
</div>
</div>
<template #dropdown>
<t-dropdown-menu class="drop-menu">
<!-- 下拉框第一行 -->
<t-dropdown-item
:value="1"
class="drop-menu-item"
:divider="true"
@click="chooseOptions"
>
<div class="admin-line">
<div>
<t-avatar>A</t-avatar>
Admin
</div>
<div class="user-name-cl">056496413476</div>
</div>
</t-dropdown-item>
<t-dropdown-item :value="2" @click="chooseOptions"
>Profile Settings</t-dropdown-item
>
<t-dropdown-item :value="3" @click="chooseOptions"
>Account and Billing</t-dropdown-item
>
<t-dropdown-item
:value="4"
class="drop-menu-item"
@click="chooseOptions"
>
<div class="admin-line">
<div>Referred friends</div>
<div class="Referred-friends">
5
<UserAddIcon size="0.12rem" />
</div>
</div>
</t-dropdown-item>
<t-dropdown-item
:value="5"
class="drop-menu-item"
:divider="true"
@click="chooseOptions"
>
<div class="admin-line">
<div>Points</div>
<div class="drop-points">
320
<img src="../../assets/dropdownIcon/points.svg" alt="" />
</div>
</div>
</t-dropdown-item>
<t-dropdown-item :value="6" @click="chooseOptions"
>Help Center</t-dropdown-item
>
<t-dropdown-item
:value="7"
class="drop-menu-item"
:divider="true"
@click="chooseOptions"
>
<div class="admin-line">
<div>What's new</div>
<div class="drop-new">
<t-avatar class="drop-new-avatar">2</t-avatar>
</div>
</div>
</t-dropdown-item>
<!-- 切换主题色 -->
<t-dropdown-item :value="8" class="drop-menu-item">
<div class="admin-line">
<div>Dark color theme</div>
<div class="drop-theme">
<t-switch
:on-change="SwitchBackground"
v-model:value="defSwich"
/>
</div>
</div>
</t-dropdown-item>
<!-- 切换语言 -->
<t-dropdown-item
:value="9"
class="drop-menu-item"
:divider="true"
@click="chooseOptions"
>
<div class="admin-line">
<div>Language</div>
<div class="drop-language"><Language /></div>
</div>
</t-dropdown-item>
<!-- 退出登录 -->
<t-dropdown-item
:value="10"
class="drop-menu-item"
@click="chooseOptions"
>
<div class="admin-line">
<div>Sign out</div>
</div>
</t-dropdown-item>
</t-dropdown-menu>
</template>
</t-dropdown>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { UserAddIcon, ChevronRightIcon } from "tdesign-icons-vue-next";
import Language from "./language.vue";
import {
darkPattern,
LightColorPattern,
} from "../../utils/global/js/ProjectModel.ts";
import { useStore } from "vuex";
const store = useStore();
const defSwich = ref(false);
// 切换主题
const SwitchBackground = () => {
if (defSwich.value === true) {
// 切换成黑色背景
// darkPattern();
// document.documentElement.setAttribute("theme", "dark");
store.commit("settings/changeMenuTheme", "dark");
document.getElementById("app").className = "dark";
console.log();
} else {
// 切换成白色背景
// LightColorPattern();
// document.documentElement.setAttribute("theme", "light");
store.commit("settings/changeMenuTheme", "light");
document.getElementById("app").className = "light";
}
};
// 点击不同选项
const chooseOptions = (e) => {
console.log(e.value);
switch (e.value) {
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
case 5:
break;
case 6:
break;
case 7:
break;
case 8:
break;
// 登出
case 10:
break;
}
};
const firstTime = ref(1);
// 下拉框的高度
const colWidth = reactive({
label: 320,
});
onMounted(() => {
// 监听屏幕宽度,修改下拉选项的宽度
window.addEventListener("resize", () => {
colWidth.label = document.body.clientWidth * 0.166;
});
// 首次加载也需要监听宽度,只执行一次
while (firstTime.value) {
colWidth.label = document.body.clientWidth * 0.166;
firstTime.value = 0;
}
});
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
.login {
height: 60%;
border: 1px solid #b6b6b6;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
.login-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.02rem;
.user-name {
color: @SearchColor;
}
}
.login-box:hover {
cursor: pointer;
}
}
.drop-menu {
.drop-menu-item {
.admin-line {
display: flex;
align-items: center;
.user-name-cl {
margin-left: 0.6rem;
}
.Referred-friends {
margin-left: 0.68rem;
display: flex;
align-items: center;
}
.drop-points {
margin-left: 0.93rem;
display: flex;
align-items: center;
img {
width: 0.16rem;
height: 0.16rem;
}
}
.drop-new {
.drop-new-avatar {
color: white;
background: rgb(236, 89, 107);
margin-left: 0.86rem;
}
}
.drop-theme {
margin-left: 0.64rem;
}
.drop-language {
margin-left: 0.66rem;
}
}
}
}
</style>
<template>
<div class="header-nav">
<t-head-menu
v-model="menu1Value"
:theme="menuTH"
@change="changeHandler"
class="Header-box"
>
<template #logo>
<div class="log-box">
<img class="logo" src="../../assets/logo.svg" alt="logo" />
</div>
<Search />
</template>
<template #operations>
<div class="navigtion">
<span>{{ $t("Header.nav") }}</span>
<img src="../../assets/nav.svg" alt="" />
</div>
{{}}
<div class="navigtion">
<span>{{ $t("Header.Language") }}</span>
<img src="../../assets/language.svg" alt="" />
</div>
<Logcomp />
</template>
</t-head-menu>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import Search from "./search.vue";
import Logcomp from "./Logcomp.vue";
import { InternetIcon } from "tdesign-icons-vue-next";
import { useStore } from "vuex";
// import settings from "../../store/modules/settings";
const store = useStore();
// 当用户切换主题时,导航菜单主题跟着变化
let menuTH = computed(()=> store.getters['settings/getTheme'])
const menu1Value = ref("item2");
const changeHandler = (active) => {
console.log("change", active);
};
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
@import "../../utils/global/css/theme.less";
.header-nav {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
.Header-box {
width: 100%;
border-bottom: @box-border;
:deep(.t-head-menu__inner) {
height: 0.3rem;
}
.log-box {
width: 100%;
.logo {
margin-left: 0.2rem;
width:1.1rem;
height: 1.1rem;
}
}
.navigtion {
font-weight: bold;
margin: 0 0.1rem;
color: @textColor1;
display: flex;
justify-content: center;
align-items: center;
font-size: @text4;
img {
margin: 0 0.02rem;
width: 0.12rem;
}
}
}
}
</style>
<template>
<t-select
class="language-select"
:bordered="false"
v-model="$i18n.locale"
:options="languageOptions"
@change="changeLanguage"
>
</t-select>
</template>
<script setup lang="ts">
const languageOptions = [
{
label: "中文简体",
value: "cn",
},
{
label: "English",
value: "en",
},
];
const changeLanguage = (v: any) => {
console.log(v);
localStorage.setItem("lang", v);
// console.log(localStorage.getItem('lang'))
};
</script>
\ No newline at end of file
<template>
<div class="box-left-child">
<t-input class="header-input" label="Search" placeholder="">
<template #suffix-icon>
<div class="circle" @click="SearchT">
<SearchIcon class="icons" />
</div>
</template>
</t-input>
</div>
</template>
<script lang="ts" setup>
import { SearchIcon } from "tdesign-icons-vue-next";
// 搜索框事件
const SearchT = () => {
console.log("1");
};
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
@import "../../utils/global/css/theme.less";
.box-left-child {
display: flex;
.header-input {
width: 100%;
margin: 0 0.6rem;
:deep(.t-input) {
border-radius: 1rem;
background: @headerSearchBackground;
color: @SearchColor;
border: 1px solid @headerSearchborder;
}
:deep(.t-input__prefix) {
color: @headerSearchprompt;
}
:deep(.t-input__inner) {
color: @headerSearchinput;
}
.circle {
width: 0.14rem;
height: 0.14rem;
border-radius: 50%;
background: @headerSearchBtn;
display: flex;
justify-content: center;
align-items: center;
.icons {
color: white;
}
}
.circle:hover {
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
<template>
<!-- 头部的文字 -->
<div class="menu-line-one">
<div class="text-box">
<span>Crypto Filter</span>
</div>
</div>
<div class="list-box">
<div class="last-line-menu">
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line1')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in twitterOptions"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 1) }"
@click="choose(item.label, 1)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line2')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in AccountDate"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 2) }"
@click="choose(item.label, 2)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line3')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in DiscordMember"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 3) }"
@click="choose(item.label, 3)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line4')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in DiscordOnline"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 4) }"
@click="choose(item.label, 4)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line5')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in timeInterval"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 5) }"
@click="choose(item.label, 5)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line6')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in TwitterGrowth"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 6) }"
@click="choose(item.label, 6)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line7')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in DiscordGrowth"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 7) }"
@click="choose(item.label, 7)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
<!-- 8 -->
<t-form ref="form" :showErrorMessage="false" class="filter-form">
<t-form-item
class="filter-item"
:label="$t('options.line8')"
:labelWidth="labelValue"
labelAlign="left"
>
<t-radio-group class="custom-group">
<t-radio-button
class="t-radio-button"
v-for="(item, index) in TelegramMember"
:key="index"
:value="item.label"
:class="{ active: monitoring(item.label, 8) }"
@click="choose(item.label, 8)"
>
{{ item.label }}
</t-radio-button>
</t-radio-group>
</t-form-item>
</t-form>
</div>
<div class="advertising-item"></div>
</div>
</template>
<script lang="ts" setup>
import ListSearch from "./listSearch.vue";
import { computed, reactive, ref } from "vue";
import {
twitterOptions,
AccountDate,
DiscordMember,
DiscordOnline,
timeInterval,
TwitterGrowth,
DiscordGrowth,
TelegramMember,
} from "../../utils/local/tokensession/tokeninfo.ts";
// 监听用户点击
const monitoring = computed((value, title) => {
return function (value, title) {
return formData.currentBtn === title + "-" + value;
};
});
const choose = (value, title) => {
formData.currentBtn = title + "-" + value;
console.log(formData.currentBtn);
};
// 默认选择的字段
const formData = reactive({
currentBtn: "1-1-500",
});
// label 的宽度
const labelValue = ref(180);
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
.menu-line-one {
width: 100%;
height: 0.3rem;
border-bottom: @box-border;
display: flex;
align-items: center;
border-right: @box-border;
.text-box {
height: 50%;
font-weight: bold;
color: @smallLabelColor;
font-size: @text2;
padding-left: 0.2rem;
}
}
.list-box {
width: 100%;
height: 1.37rem;
border-right: @box-border;
display: flex;
.last-line-menu {
width: 50%;
.filter-form {
width: 100%;
border-bottom: @box-border;
padding: 0 0.1rem;
.filter-item {
.custom-group {
width: 100%;
.t-radio-button {
width: 17%;
border: none;
color: black;
font-size: @text5;
display: flex;
justify-content: center;
align-items: center;
}
.t-radio-button:hover {
color: @SearchColor;
}
.active {
background: @SearchColor;
border-radius: 16px;
color: white;
}
.active:hover {
color: white;
}
}
}
}
}
.advertising-item {
width: 50%;
height: 100%;
}
}
</style>
<template>
<div class="search-inbox">
<t-input size="small" placeholder="">
<template #suffix-icon>
<div class="circle" @click="Search">
<SearchIcon class="icons" />
</div>
</template>
</t-input>
</div>
</template>
<script lang="ts" setup>
import { SearchIcon } from 'tdesign-icons-vue-next'
</script>
<style scoped lang="less">
@import '../../utils/global/css/font.less';
.search-inbox {
display: flex;
align-items: center;
height: 100%;
:deep(.t-input) {
border-radius: 1rem;
border:@listSearchBorder;
}
.circle {
width:20px;
height: 20px;
border-radius: 50%;
background: @SearchColor;
.icons {
color:white;
margin-top: -0.03rem;
}
}
.circle:hover {
cursor: pointer;
}
}
</style>
<template>
<div class="title-box-child">
<!-- 菜单选项行 -->
<LastMenu />
<!-- 分界box -->
<div class="segmentation">
<div class="center-box">
<div class="text-box">
<span class="seg-span">Token Base Information</span>
</div>
<div class="text-middle">
<span class="seg-span">Twitter/New followers</span>
</div>
<div class="text-middle">
<span class="seg-span">Discord/New followers</span>
</div>
<div class="text-box">
<span>Twitter introduction</span>
</div>
</div>
</div>
<!-- 搜索框 -->
<!-- 右侧项目详情信息 -->
<TableList />
</div>
</template>
<script lang="ts" setup>
import FirstMenu from "./FirstMenuOption.vue";
import LastMenu from "./lastMenuOption.vue";
import TableList from "../table/tableList.vue";
import ListSearch from "./listSearch.vue";
import { reactive, ref } from "@vue/reactivity";
const fromData = reactive({
title5: "Filter by project type",
});
// label 的宽度
const labelValue = ref(180);
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
.title-box-child {
width: 100%;
height: 100%;
overflow: auto;
.segmentation {
width: 100%;
height: 0.16rem;
border-bottom: @box-border;
display: flex;
justify-content: center;
.center-box {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
color: white;
font-weight: bold;
.text-box {
width: 20%;
height: 100%;
border-left: @box-border;
font-size: @text5;
display: flex;
align-items: center;
background: @SearchColor;
padding-left: 0.02rem;
.seg-span {
display: block;
}
}
.text-middle {
width: 30%;
height: 100%;
background: @SearchColor;
border-left: @box-border;
font-size: @text5;
display: flex;
align-items: center;
padding-left: 0.02rem;
}
}
}
}
</style>
<template>
<div class="dialog-box">
<t-button theme="primary" @click="visibleCenter = true">
open Dialog
</t-button>
<t-dialog
placement="center"
body="水平居中显示的对话框"
:visible="visibleCenter"
:cancel-btn="null"
:confirm-btn="null"
:on-close="close2"
:close-on-overlay-click="true"
>
<div class="">
<img src="../assets/dropdownIcon/dialog.svg" alt="">
</div>
</t-dialog>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const visibleCenter = ref(false);
const placement = "top";
const close2 = () => {
visibleCenter.value = false;
};
</script>
<style scoped lang="less">
.t-button {
margin-right: 20px;
}
</style>
<template>
<!-- 折线图模块 -->
<div class="lineCharts-and-summary">
<t-row
class="lineChart-child-box"
:gutter="[
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
]"
>
<t-col
:xs="12"
:sm="12"
:md="12"
:lg="6"
:xl="6"
:xxl="6"
class="t-col-class"
>
<div class="one-lineChart">
<!-- 折线图中的头部数据 -->
<div class="lineChart-header-data">
<span>{{chartTitle.title1}}</span>
<span
>当前总人数:&nbsp;&nbsp;14820&nbsp;&nbsp;当前在线人数:&nbsp;&nbsp;319</span
>
</div>
<!-- 选择不同的时间 -->
<div class="choose-time">
<t-button
:class="{ avtive: monitoring1(item.label) }"
ghost
v-for="(item, index) in chooseTime"
:key="index"
@click="chooseNewTime1(item.label)"
>{{ item.label }}</t-button
>
</div>
<!-- 折线图盒子与信息提示 -->
<div class="lineChart-and-prompt">
<div class="true-lineChart"></div>
</div>
</div>
</t-col>
<t-col
class="t-col-class"
:xs="12"
:sm="12"
:md="12"
:lg="6"
:xl="6"
:xxl="6"
>
<div class="one-lineChart">
<!-- 折线图中的头部数据 -->
<div class="lineChart-header-data">
<span>{{chartTitle.title2}}</span>
<span
>当前总人数:&nbsp;&nbsp;14820&nbsp;&nbsp;当前在线人数:&nbsp;&nbsp;319</span
>
</div>
<!-- 选择不同的时间 -->
<div class="choose-time">
<t-button
:class="{ avtive: monitoring2(item.label) }"
ghost
v-for="(item, index) in chooseTime"
:key="index"
@click="chooseNewTime2(item.label)"
>{{ item.label }}</t-button
>
</div>
<!-- 折线图盒子与信息提示 -->
<div class="lineChart-and-prompt">
<div class="true-lineChart"></div>
</div>
</div>
</t-col>
<t-col
class="t-col-class"
:xs="12"
:sm="12"
:md="12"
:lg="6"
:xl="6"
:xxl="6"
>
<div class="one-lineChart">
<!-- 折线图中的头部数据 -->
<div class="lineChart-header-data">
<span>{{chartTitle.title3}}</span>
<span
>当前总人数:&nbsp;&nbsp;14820&nbsp;&nbsp;当前在线人数:&nbsp;&nbsp;319</span
>
</div>
<!-- 选择不同的时间 -->
<div class="choose-time">
<t-button
:class="{ avtive: monitoring3(item.label) }"
ghost
v-for="(item, index) in chooseTime"
:key="index"
@click="chooseNewTime3(item.label)"
>{{ item.label }}</t-button
>
</div>
<!-- 折线图盒子与信息提示 -->
<div class="lineChart-and-prompt">
<div class="true-lineChart"></div>
</div>
</div>
</t-col>
<t-col
class="t-col-class"
:xs="12"
:sm="12"
:md="12"
:lg="6"
:xl="6"
:xxl="6"
>
<div class="one-lineChart">
<summaryForm />
</div>
</t-col>
</t-row>
</div>
</template>
<script lang="ts" setup>
import summaryForm from "./summaryForm.vue";
import { computed, onMounted, reactive, ref } from "@vue/runtime-core";
import * as echarts from "echarts";
import { preventShake } from "../../../utils/global/js/tool.ts";
const chooseTime = reactive([
{ label: "5M" },
{ label: "30M" },
{ label: "1H" },
{ label: "6H" },
{ label: "1D" },
]);
// 折线图标题
const chartTitle = reactive({
title1:'Telegram',
title2:'Discord',
title3:'Twitter'
})
// 折线图默认按钮
const defaultBtn = reactive({
label1: "5M",
label2: "5M",
label3: "5M",
});
// 监听折线图内部的按钮-点击之后切换样式
const monitoring1 = computed((value) => {
return function (value) {
return defaultBtn.label1 === value;
};
});
const monitoring2 = computed((value) => {
return function (value) {
return defaultBtn.label2 === value;
};
});
const monitoring3 = computed((value) => {
return function (value) {
return defaultBtn.label3 === value;
};
});
// 折线图按钮事件
const chooseNewTime1 = (value) => {
defaultBtn.label1 = value;
console.log(value)
};
const chooseNewTime2 = (value) => {
defaultBtn.label2 = value;
console.log(defaultBtn)
};
const chooseNewTime3 = (value) => {
defaultBtn.label3 = value;
};
onMounted(() => {
getLineChart();
// 修改次数过多,后续加上防抖
window.onresize = () => {
preventShake(getLineChart, 300)();
// getLineChart();
};
});
const getLineChart = () => {
let chartDom = document.getElementsByClassName("true-lineChart");
let option;
for (let j = 0; j < 3; j++) {
let myChart = echarts.init(chartDom[j]);
myChart.resize();
option = {
color: ["#287EFF", "#F19D38"],
// x轴的数据
xAxis: {
type: "category",
data: ["12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "24:00"],
},
yAxis: {
type: "value",
},
legend: {
data: ["Online Data", "New Users"],
right: 0,
top: "center",
orient: "vertical",
icon: "circle",
align: "right",
textStyle: {
color: "#838383",
},
},
grid: {
right: '15%'
},
// 项目数据
series: [
{
name: "Online Data",
data: [1000, 2000, 3000, 4000, 4600, 3500, 4000],
type: "line",
},
{
name: "New Users",
data: [300, 500, 800, 4000, 4800, 4900, 3000],
type: "line",
stack: "x",
},
],
};
option && myChart.setOption(option);
}
};
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.lineCharts-and-summary {
width: 100%;
height: 88%;
overflow-x: hidden;
overflow-y: auto;
.lineChart-child-box {
height: 50%;
.t-col-class {
width: 100%;
height: 88%;
}
.one-lineChart {
height: 100%;
border: 1px solid @SearchBackground;
position: relative;
margin-top: 0.08rem;
.lineChart-header-data {
width: 68%;
height: 10%;
display: flex;
align-items: center;
margin-left: 0.06rem;
:nth-child(1) {
font-size: @text4;
}
:not(:first-child) {
color: @descriptionColor;
padding-left: 0.06rem;
font-size: @text5;
}
span {
display: block;
}
}
.choose-time {
width: 38%;
height: 10%;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: space-between;
.t-button {
width: 20%;
height: 100%;
border: none;
border-left: 1px solid @SearchBackground;
border-bottom: 1px solid @SearchBackground;
color: rgb(183, 183, 183);
}
.avtive {
color: @SearchColor;
}
}
.lineChart-and-prompt {
width: 100%;
height: 100%;
display: flex;
// 折线图样式
.true-lineChart {
width: 100%;
height: 100%;
}
}
}
}
}
</style>
<template>
<div class="left-module-box">
<div class="main-content-box">
<!-- 分界线box -->
<div class="nft-media">
<div class="text-box">NFT社媒数据</div>
</div>
<!-- 折线图模块 -->
<LineChart />
<div class="Mobile-button" v-show="btnShow.homeBtn">
<t-button>Open the details</t-button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import LineChart from "./lineChart.vue";
const btnShow = reactive({
// 当详情模块被隐藏时,显示打开详情模块的按钮
homeBtn: false,
})
onMounted(() => {
// window.addEventListener可以解决多个onresize同时触发被覆盖的问题
window.addEventListener("resize", () => {
if (document.body.clientWidth <= 768) {
btnShow.homeBtn = true;
} else {
btnShow.homeBtn = false;
}
});
//
if (document.body.clientWidth <= 768) {
btnShow.homeBtn = true;
} else {
btnShow.homeBtn = false;
}
});
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.left-module-box {
width: 100%;
height: 100%;
.main-content-box {
width: 100%;
height: 100%;
.nft-media {
width: 100%;
height: 0.32rem;
border-bottom: @box-border;
border-right: @box-border;
display: flex;
align-items: center;
.text-box {
height: 50%;
font-weight: bold;
font-size: @text3;
padding-left: 0.5rem;
}
}
.Mobile-button {
width: 100%;
height: 5%;
position: fixed;
bottom:0;
z-index: 1001;
.t-button {
width:100%;
height: 100%;
font-size: @text3;
}
}
}
}
</style>
<template>
<div class="summary-header-data">
<span>Twitter汇总</span>
<span>发布信息条数</span>
<span>14820</span>
<span>转发</span>
<span>319</span>
<span>粉丝互动</span>
<span>2813</span>
</div>
<!-- 汇总表单 -->
<div class="sum-form">
<t-table
:data="data"
:columns="columns"
row-key="property"
:hover="true"
size="small"
class="table-box-child"
>
<template #type="{ row }">
<span class="growthColor">{{ row.type }}</span>
</template>
<template #mation="{ row }">
<span class="growthColor">{{ row.Information }}</span>
</template>
<template #reply="{ row }">
<span class="growthColor">{{ row.Reply }}</span>
</template>
<template #retweet="{ row }">
<span class="growthColor">{{ row.Retweet }}</span>
</template>
<template #likes="{ row }">
<span class="growthColor">{{ row.Likes }}</span>
</template>
</t-table>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "@vue/reactivity";
const columns = reactive([
{
colKey: "type",
title: "Tade",
width: "16%",
},
{
colKey: "mation",
title: "Information",
width: "36%",
},
{
colKey: "reply",
title: "Reply",
width: "8%",
},
{
colKey: "retweet",
title: "Retweet",
width: "8%",
},
{
colKey: "likes",
title: "Likes",
width: "8%",
},
]);
const data = reactive([
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
},
{
type: "4:21PM·May6,2022",
Information: "1111111111111111111111111111111",
Reply: "8888",
Retweet: "4645",
Likes: "11.9K",
}
]);
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.summary-header-data {
width: 80%;
height: 10%;
display: flex;
align-items: center;
margin-left: 0.06rem;
:nth-child(1) {
font-size: @text4;
color: @descriptionColor;
font-weight: bold;
}
:not(:first-child) {
color: @descriptionColor;
padding-left: 0.06rem;
font-size: @text5;
}
span {
display: block;
}
}
.sum-form {
width: 100%;
height: 90%;
.table-box-child {
height: 100%;
.growthColor {
color: @descriptionColor;
}
}
}
</style>
<template>
<div class="details-box">
<HeaderDetail/>
<ConverSion/>
<PriceDetail/>
<ChooseTime/>
</div>
</template>
<script lang="ts" setup>
import HeaderDetail from './headerDetail.vue';
import ConverSion from './conversion.vue';
import PriceDetail from './priceDetail.vue';
import ChooseTime from './chooseTime.vue'
</script>
<style scoped lang="less">
.details-box {
width:100%;
height: 100%;
}
</style>
<template>
<div class="chooseTime-box">
<div class="new-holders">
<div class="new-hold-child">
<span class="span1-cl">New Holders</span>
</div>
<div class="new-hold-child">
<span class="span2-cl">+12</span>
</div>
</div>
<div class="txns-box">
<div class="new-hold-child">
<span class="span1-cl">TXNS</span>
</div>
<div class="new-hold-child">
<span class="span3-cl">+12</span>
</div>
</div>
<div class="txns-box">
<div class="new-hold-child">
<span class="span1-cl">BUYS</span>
</div>
<div class="new-hold-child">
<span class="span3-cl">+12</span>
</div>
</div>
<div class="txns-box">
<div class="new-hold-child">
<span class="span1-cl">SELLS</span>
</div>
<div class="new-hold-child">
<span class="span3-cl">+12</span>
</div>
</div>
<div class="txns-box">
<div class="new-hold-child">
<span class="span1-cl">VOLUME</span>
</div>
<div class="new-hold-child">
<span class="span3-cl">+12</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.chooseTime-box {
width: 100%;
height: 5%;
display: flex;
.new-holders {
width: 26%;
height: 100%;
.new-hold-child {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
.span1-cl {
display: block;
color: @descriptionColor;
font-size: @text5;
}
.span2-cl {
display: block;
color: rgb(37, 171, 148);
font-size: @text5;
}
}
}
.txns-box {
width: 18.5%;
height: 100%;
.new-hold-child {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
.span1-cl {
display: block;
color: @descriptionColor;
font-size: @text5;
}
.span2-cl {
display: block;
color: rgb(37, 171, 148);
font-size: @text5;
}
.span3-cl {
font-size: @text5;
}
}
}
}
</style>
\ No newline at end of file
<template>
<!-- 币币转换 -->
<div class="conversion-box">
<!-- 第一行 -->
<div class="conver-line-one">
<!-- 第一个下拉框 -->
<div class="dropdown1">
<div class="tdesign-demo-dropdown">
<t-dropdown
:options="options"
:min-column-width="112"
@click="clickHandler"
>
<div class="tdesign-demo-dropdown-trigger">
<t-button variant="text">
<span class="tdesign-demo-dropdown__text">
WBNB
<t-icon name="chevron-down" size="16" style="color: black" />
</span>
</t-button>
</div>
</t-dropdown>
</div>
</div>
<!-- 余额 -->
<div class="remaining-money1">
<span>余额:&nbsp;</span>
<span>17.2310&nbsp;</span>
</div>
</div>
<!-- 第二行币币转换 -->
<div class="coin-conversion">
<div class="input-and-percentage">
<div class="true-input">
<div class="price-wbnb">
<span>Price(WBNB)</span>
</div>
<div class="four-buttons">
<t-button
v-for="(item, index) in Btns"
:key="index"
@click="choosepercentage(index, item.value)"
:class="{ active: monitoring(item.value) }"
>{{ item.value }}</t-button
>
</div>
<div class="price-wbnb">
<span>Amount(VIM)</span>
</div>
</div>
</div>
<div class="conver-button">
<div class="conver-btn-child">
<img src="../../../assets/analysisIcon/conversion.svg" alt="" />
</div>
</div>
</div>
<!-- 第二行下拉 -->
<div class="conver-line-one">
<!-- 第二个下拉框 -->
<div class="dropdown1">
<div class="tdesign-demo-dropdown">
<t-dropdown
:options="options"
:min-column-width="112"
@click="clickHandler"
>
<div class="tdesign-demo-dropdown-trigger">
<t-button variant="text">
<span class="tdesign-demo-dropdown__text">
WBNB
<t-icon name="chevron-down" size="16" style="color: black" />
</span>
</t-button>
</div>
</t-dropdown>
</div>
</div>
<!-- 余额 -->
<div class="remaining-money1">
<span>余额:&nbsp;</span>
<span>17.2310&nbsp;</span>
</div>
</div>
<div class="coin-conversion-two">
<div class="coin-conversion-two-left">
<div class="conv-left-input">
<t-textarea
class="textarea-class"
placeholder="$请输入委托价格"
:autosize="{ minRows: 3, maxRows: 4 }"
></t-textarea>
</div>
</div>
<div class="coin-conversion-two-right">
<div class="conver-right-one">
<div class="conver-child-img-text">
<img src="../../../assets/analysisIcon/textarea1.svg" alt="" />
</div>
<div class="conver-child-img-text">
<span>5%</span>
</div>
</div>
<div class="conver-right-two">
<div class="conver-child-img-text">
<img src="../../../assets/analysisIcon/textarea2.svg" alt="" />
</div>
<div class="conver-child-img-text">
<span>Gas</span>
</div>
</div>
</div>
</div>
<!-- 购买按钮 -->
<div class="button-buy">
<t-button class="btn-buy-child">Buy VIM</t-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { MessagePlugin } from "tdesign-vue-next";
const defaultBtn = reactive({
label: "25%",
});
const Btns = reactive([
{ value: "25%" },
{ value: "50%" },
{ value: "75%" },
{ value: "100%" },
]);
const monitoring = computed((value) => {
return function (value) {
return defaultBtn.label === value;
};
});
// 选择百分比事件
const choosepercentage = (index, value) => {
defaultBtn.label = value;
};
const options = [
{
content: "操作一",
value: 1,
},
{
content: "操作二",
value: 2,
},
{
content: "操作三",
value: 3,
},
{
content: "操作四",
value: 4,
},
];
const clickHandler = (data) => {
MessagePlugin.success(`选中【${data.content}】`);
};
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.conversion-box {
width: 100%;
height: 30%;
border: 1px solid @SearchBackground;
.conver-line-one {
width: 100%;
height: 12%;
display: flex;
.dropdown1 {
width: 50%;
height: 100%;
display: flex;
align-items: center;
.tdesign-demo-dropdown {
.tdesign-demo-dropdown-trigger {
.tdesign-demo-dropdown__text {
font-size: @text4;
font-weight: bold;
}
}
}
}
.remaining-money1 {
height: 100%;
width: 50%;
display: flex;
justify-content: end;
align-items: center;
span {
font-size: @text4;
color: @remainingMoney;
display: block;
}
}
}
.coin-conversion {
width: 100%;
height: 32%;
display: flex;
justify-content: space-between;
.input-and-percentage {
width: 88%;
height: 100%;
display: flex;
justify-content: end;
.true-input {
width: 96%;
height: 100%;
.price-wbnb {
width: 100%;
height: 33%;
border-radius: 5px;
background: @color10;
display: flex;
justify-content: center;
align-items: center;
span {
display: block;
font-size: @text4;
color: @remainingMoney;
}
}
.four-buttons {
width: 100%;
height: 33%;
display: flex;
justify-content: space-between;
align-items: center;
.t-button {
height: 70%;
width: 22%;
background: @color10;
border: none;
color: @remainingMoney;
border-radius: 6px;
font-size: @text5;
}
.active {
background: @SearchColor;
color: white;
}
}
}
}
.conver-button {
width: 10%;
height: 100%;
.conver-btn-child {
width: 84%;
height: 100%;
background: @SearchColor;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.coin-conversion-two {
width: 100%;
height: 30%;
display: flex;
.coin-conversion-two-left {
width: 88%;
height: 100;
display: flex;
justify-content: center;
.conv-left-input {
width: 92%;
height: 100%;
}
}
.coin-conversion-two-right {
width: 10%;
height: 100%;
position: relative;
.conver-right-one {
width: 100%;
height: 48%;
background: @SearchColor;
position: absolute;
top: 0;
border-radius: 6px;
.conver-child-img-text {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
img {
height: 0.1rem;
width: 0.1rem;
}
span {
color: white;
font-size: @text5;
}
}
}
.conver-right-two {
width: 100%;
height: 48%;
background: @SearchColor;
position: absolute;
bottom: 0;
border-radius: 6px;
.conver-child-img-text {
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
img {
height: 0.1rem;
width: 0.1rem;
}
span {
color: white;
font-size: @text5;
}
}
}
}
}
.button-buy {
width: 100%;
height: 14%;
display: flex;
justify-content: center;
align-items: center;
.btn-buy-child {
width: 92%;
background: @SearchColor;
height: 90%;
border-radius: 6px;
border: none;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="pro-header">
<!-- 头部文字 -->
<div class="project-header-cont">
<span>Details</span>
</div>
<!-- 项目名 -->
<div class="pro-name-logo">
<!-- 左边部分 -->
<div class="project-name-class">
<div class="projectName-text">
<span class="span1"
>WBNB/VIM
<span class="span2">
<img src="../../../assets/analysisIcon/rising.svg" alt="" />
3.12%
</span>
</span>
</div>
<!-- -->
<div class="Token-Pair">
<span>Token:</span>
<span> 0x55d...7995 </span>
<span
><img
@click="copyToken"
src="../../../assets/analysisIcon/copy.svg"
alt=""
/></span>
<span
>&nbsp;<img src="../../../assets/analysisIcon/conver.svg" alt=""
/></span>
<span> Pair:</span>
<span> 0x098...74e8 </span>
<span
><img
@click="copyPair"
src="../../../assets/analysisIcon/copy.svg"
alt=""
/></span>
</div>
</div>
<div class="project-logo-class">
<HeaderDetail />
</div>
</div>
<!-- 尾部--价格以及图标 -->
<div class="tail-price">
<!-- token -->
<div class="token-title">
<span>TOKEN</span>
</div>
<div class="pro-price-cl">
<div class="project-pri">
<span>PRICE &nbsp;</span>
<span>$0.0101398</span>
</div>
<div class="all-icons">
<span>
<img
v-for="(item, index) in allIcon"
:key="index"
:src="item.img"
alt=""
/>
</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive } from "@vue/reactivity";
import HeaderDetail from "../../detailLogo.vue";
const allIcon = reactive([
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
{ img: require("../../../assets/analysisIcon/priceIcon.svg") },
]);
// 复制token
const copyToken = () => {
console.log("copyToken");
};
// 复制pair
const copyPair = () => {
console.log("copyPair");
};
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.pro-header {
width: 100%;
height: 18%;
padding-left: 0.06rem;
.project-header-cont {
height: 24%;
display: flex;
justify-content: center;
align-items: center;
span {
display: block;
font-size: @text4;
color: @descriptionColor;
}
}
.pro-name-logo {
display: flex;
height: 46%;
.project-name-class {
width: 70%;
height: 100%;
position: relative;
.projectName-text {
width: 100%;
height: 80%;
display: flex;
align-items: center;
.span1 {
font-size: @text1;
font-weight: bold;
letter-spacing: -3px;
white-space: nowrap;
.span2 {
font-size: @text5;
color: rgb(93, 193, 176);
letter-spacing: -1px;
font-weight: normal;
}
}
}
.Token-Pair {
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
span {
font-size: @text5;
white-space: nowrap;
display: block;
}
:nth-child(3) {
padding:0 0 0 4px;
cursor: pointer;
height: 80%;
display: flex;
align-items: center;
}
:nth-child(4) {
cursor: pointer;
padding: 0 1px;
}
:nth-child(7) {
padding:0 0 0 4px;
cursor: pointer;
height: 80%;
display: flex;
align-items: center;
}
}
}
.project-logo-class {
width: 30%;
height: 100%;
margin-top: -0.06rem;
}
}
.tail-price {
width: 100%;
height: 14%;
.token-title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
span {
position: absolute;
bottom: 0;
color: @SearchColor;
font-weight: bold;
font-size: @text5;
}
}
.pro-price-cl {
display: flex;
align-items: center;
width: 100%;
.project-pri {
width: 50%;
font-size: @text5;
:nth-child(2) {
color: rgb(35, 171, 148);
}
}
.all-icons {
width: 50%;
margin-right: 0.06rem;
span {
display: block;
display: flex;
justify-content: space-between;
}
}
}
}
}
</style>
<template>
<div class="price-box">
<div class="price-box-child">
<div class="price-first-box" v-for="(it, ind) in 2" :key="ind">
<div class="first-line">
<div>
<span>PRICE</span>
</div>
<div>
<span>SPELL</span>
</div>
</div>
<div class="second-line" v-for="(item, index) in price1" :key="index">
<div>
<span>{{ item.price }}</span>
</div>
<div>
<span>{{ item.spell }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="market-cap" v-for="(tab, num) in marketCap" :key="num">
<div class="marke-cap-child1">
<div class="pooled-usdt">
<div class="pooled-usdt-child">
<span>{{ tab.title1 }}</span>
</div>
<div>
<span>{{ tab.price }}</span>
</div>
</div>
</div>
<div class="marke-cap-child2">
<div class="pooled-usdt">
<div class="pooled-usdt-child">
<span>{{ tab.title2 }}</span>
</div>
<div>
<span>{{ tab.numb }}</span>
</div>
</div>
</div>
<div class="marke-cap-child2">
<div class="pooled-usdt">
<div class="pooled-usdt-child">
<span>{{ tab.title3 }}</span>
</div>
<div>
<span>{{ tab.price3 }}</span>
</div>
</div>
</div>
</div>
<div class="market-cap">
<div class="all-btn-class">
<t-button
@click="chooseTime(item.label)"
:class="{ active: monitoring(item.label) }"
v-for="(item, index) in allbutton"
:key="index"
>{{ item.label }}</t-button
>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
const DefBtn = reactive({
label:'5M'
})
const monitoring = computed((value) => {
return function (value) {
return DefBtn.label === value;
};
});
const chooseTime = (label) => {
DefBtn.label = label;
};
const allbutton = reactive([
{ label: "5M" },
{ label: "1H" },
{ label: "6H" },
{ label: "24H" },
]);
const marketCap = reactive([
{
title1: "Market Cap:",
price: "$83,504,529,639,48",
title2: "Pooled WBNB:",
numb: "347,128.47",
title3: "Daily volume:",
price3: "$48,339,331,48",
},
{
title1: "Market Cap:",
price: "$83,504,529,639,48",
title2: "Pooled WBNB:",
numb: "347,128.47",
title3: "Daily volume:",
price3: "$48,339,331,48",
},
{
title1: "Market Cap:",
price: "$83,504,529,639,48",
title2: "Pooled WBNB:",
numb: "347,128.47",
title3: "Daily volume:",
price3: "$48,339,331,48",
},
]);
const price1 = reactive([
{ price: "0.00000000015", spell: "983.711117K" },
{ price: "0.00000000015", spell: "983.711117K" },
{ price: "0.00000000015", spell: "983.711117K" },
{ price: "0.00000000015", spell: "983.711117K" },
{ price: "0.00000000015", spell: "983.711117K" },
{ price: "0.00000000015", spell: "983.711117K" },
]);
</script>
<style scoped lang="less">
@import "../../../utils/global/css/font.less";
.price-box {
width: 100%;
height: 26%;
border: 1px solid @SearchBackground;
border-top: none;
display: flex;
justify-content: center;
align-items: center;
.price-box-child {
width: 92%;
height: 96%;
.price-first-box {
width: 100%;
height: 50%;
.first-line {
width: 100%;
height: 14%;
background: rgb(246, 246, 246);
font-size: @text5;
display: flex;
justify-content: space-between;
color: rgb(88, 88, 88);
}
.second-line {
width: 100%;
height: 14%;
font-size: @text5;
display: flex;
justify-content: space-between;
color: rgb(88, 88, 88);
}
}
}
}
.market-cap {
width: 100%;
height: 5%;
border-bottom: 1px solid @SearchBackground;
border-left: 1px solid @SearchBackground;
display: flex;
.marke-cap-child1 {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-content: end;
.pooled-usdt {
width: 94%;
height: 94%;
font-size: @text5;
color: rgb(88, 88, 88);
.pooled-usdt-child {
width:100%;
height: 50%;
display: flex;
align-items: center;
}
}
}
.marke-cap-child2 {
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: end;
.pooled-usdt {
width: 94%;
height: 94%;
font-size: @text5;
color: rgb(88, 88, 88);
.pooled-usdt-child {
width:100%;
height: 50%;
display: flex;
align-items: center;
}
}
}
.all-btn-class {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.t-button {
width: 24%;
height: 66%;
border-radius: 20px;
background: white;
border: none;
color: @descriptionColor;
}
.active {
background: @SearchColor;
color: white;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="project-img">
<div class="img-box">
<div class="logo-item">
<span>logo</span>
</div>
<div class="Submit-class">
<span>Submit</span>
<img src="../assets/mouse.svg" alt="" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="less">
@import '../utils/global/css/font.less';
.project-img {
margin-top: 0.02rem;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.img-box {
border: @listSearchBorder;
border-radius: 50%;
width: 0.4rem;
height: 0.4rem;
.logo-item {
width: 100%;
height: 50%;
position: relative;
span {
display: block;
position: absolute;
bottom: 0;
left: 20%;
color: @SearchColor;
font-size: @text3;
}
}
.Submit-class {
width: 100%;
height: 20%;
background: @SearchColor;
border-radius: 16px;
display: flex;
justify-content: center;
margin-top: 0.04rem;
span {
display: block;
color: white;
font-size: @text5;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="Table-box">
<t-table
:data="data"
:columns="columns"
row-key="property"
:hover="true"
size="small"
class="table-box-child"
:pagination="{
defaultPageSize: 10,
defaultCurrent: 1,
total: data.length,
}"
>
<!-- 自定义表头,title值为插槽名称 -->
<template #title-slot-name>
<div class="temp-name">
<div class="temp-name-child">
<app-icon />
<span>{{ $t("tableTitle.proName") }}</span>
</div>
<t-input class="search-input-small" placeholder="" size="small">
<template #prefix-icon>
<SearchIcon />
</template>
</t-input>
</div>
</template>
<template #Twitter-create>
<div class="temp-other-name">
<span>{{ $t("tableTitle.Create") }}</span>
</div>
</template>
<template #Follower>
<div class="temp-other-name">
<span>{{ $t("tableTitle.twitterFollowers") }}</span>
</div>
</template>
<template #twitter-one-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.twitterOneDay") }}</span>
</div>
</template>
<template #twitter-three-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.twitterThreeDay") }}</span>
</div>
</template>
<template #twitter-seven-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.twitterSevenDay") }}</span>
</div>
</template>
<template #Discord-member>
<div class="temp-other-name">
<span>{{ $t("tableTitle.DiscordMembers") }}</span>
</div>
</template>
<template #Discord-online>
<div class="temp-other-name">
<span>{{ $t("tableTitle.DiscordOnlineRate") }}</span>
</div>
</template>
<template #Discord-one-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.DiscordOneDay") }}</span>
</div>
</template>
<template #Discord-three-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.DiscordThreeDay") }}</span>
</div>
</template>
<template #Discord-seven-day>
<div class="temp-other-name">
<span>{{ $t("tableTitle.DiscordSevenDay") }}</span>
</div>
</template>
<template #Projects>
<div class="temp-other-name">
<span>{{ $t("tableTitle.Projects") }}</span>
</div>
</template>
<!-- 自定义单元格 -->
<template #twitterOneDay="{ row }">
<span class="growthColor">{{ row.twitterOneDay }}</span>
</template>
<template #twitterThreeDay="{ row }">
<span class="growthColor">{{ row.twitterThreeDay }}</span>
</template>
<template #twitterSevenDay="{ row }">
<span class="growthColor">{{ row.twitterSevenDay }}</span>
</template>
<template #DiscordOneDay="{ row }">
<span class="growthColor">{{ row.DiscordOneDay }}</span>
</template>
<template #DiscordThreeDay="{ row }">
<span class="growthColor">{{ row.DiscordThreeDay }}</span>
</template>
<template #DiscordSevenDay="{ row }">
<span class="growthColor">{{ row.DiscordSevenDay }}</span>
</template>
<template #descript="{ row }">
<p class="description-class">{{ row.descript }}</p>
</template>
</t-table>
</div>
</template>
<script setup lang="ts">
import { AppIcon, SearchIcon } from "tdesign-icons-vue-next";
import { onMounted, reactive, ref } from "vue";
const data = reactive([
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+100",
twitterThreeDay: "+200",
twitterSevenDay: "+3000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+200",
DiscordThreeDay: "+400",
DiscordSevenDay: "+2000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
{
type: "name my name",
platform: "3:34AM · May4,2022",
Followers: "9999",
twitterOneDay: "+500",
twitterThreeDay: "+500",
twitterSevenDay: "+1000",
DiscordMember: "10000",
DiscordOnline: "15%",
DiscordOneDay: "+500",
DiscordThreeDay: "+500",
DiscordSevenDay: "+1000",
descript:
"You are in big trouble,You are in big trouble,You are in big trouble",
},
]);
const columns = [
{
colKey: "type",
title: "title-slot-name",
width: "16%",
},
{
colKey: "platform",
title: "Twitter-create",
width: "10%",
},
{
colKey: "Followers",
title: "Follower",
width: "7%",
align: "center",
},
{
colKey: "twitterOneDay",
title: "twitter-one-day",
width: "5%",
align: "center",
},
{
colKey: "twitterThreeDay",
title: "twitter-three-day",
width: "5%",
align: "center",
},
{
colKey: "twitterSevenDay",
title: "twitter-seven-day",
width: "6%",
align: "center",
},
{
colKey: "DiscordMember",
title: "Discord-member",
width: "6%",
align: "center",
},
{
colKey: "DiscordOnline",
title: "Discord-online",
width: "7%",
align: "center",
},
{
colKey: "DiscordOneDay",
title: "Discord-one-day",
width: "5%",
align: "center",
},
{
colKey: "DiscordThreeDay",
title: "Discord-three-day",
width: "5%",
align: "center",
},
{
colKey: "DiscordSevenDay",
title: "Discord-seven-day",
width: "6%",
align: "center",
},
{
colKey: "descript",
title: "Projects",
ellipsis: true,
},
];
</script>
<style scoped lang="less">
@import "../../utils/global/css/font.less";
.Table-box {
// height: 100%;
border-right: @box-border;
border-bottom: @box-border;
.table-box-child {
.temp-name {
display: flex;
justify-content: space-between;
align-items: center;
.temp-name-child {
display: flex;
justify-content: start;
align-items: center;
}
.search-input-small {
width: 60%;
:deep(.t-input) {
border-radius: 6px;
}
}
}
.temp-other-name {
display: flex;
justify-content: center;
align-items: center;
}
.growthColor {
color: @tableGrowth;
}
.description-class {
color: @descriptionColor;
}
}
}
</style>
/*
* @Author: walker.liu
* @Date: 2022-04-10 17:59:45
* @Copyright(C): 2019-2020 ZP Inc. All rights reserved.
*/
const cn = {
// 中文title
common: {},
Header: {
nav: '导航',
Language: '中文简体',
search: '搜索',
loginTitle: '欢迎登录',
placeholderEmail: '请输入您的邮箱',
placeholderPassword: '请输入登陆密码',
placeholderPassword2: '请再次输入登陆密码',
loginBtn: '立即登陆',
noAccount: '没有账号?',
goRegister: '立即注册',
registerTitle: '免费注册',
haveRead: '我已阅读并同意',
privacyStatement: '用户隐私声明',
haveAccount: '已有账号',
goLogin: '马上登录',
registerBtn: '立即注册',
},
options: {
line1: 'Twitter粉丝',
line2: '帐户创建日期',
line3: 'Discord成员',
line4: 'Discord在线率',
line5: '时间范围',
line6: 'Twitter用户增长量',
line7: 'Discord用户增长量',
line8: 'Telegram成员',
},
tableTitle: {
proName:'项目名',
Create:'创建时间',
twitterFollowers:'粉丝量',
twitterOneDay:'1天',
twitterThreeDay:'3天',
twitterSevenDay:'7天',
DiscordMembers:'用户',
DiscordOnlineRate:'在线率',
DiscordOneDay:'1天',
DiscordThreeDay:'3天',
DiscordSevenDay:'7天',
Projects:'详情介绍'
}
};
export default cn;
/*
* @Author: walker.liu
* @Date: 2022-04-10 17:59:52
* @Copyright(C): 2019-2020 ZP Inc. All rights reserved.
*/
const cn = {
//英文title
// 导航栏
Header: {
nav: 'Navigation',
Language: 'English',
search: 'Search',
loginTitle: 'Welcome to login',
placeholderEmail: 'Please enter your email address',
placeholderPassword: 'Please enter the login password',
placeholderPassword2: 'Please enter the login password again',
loginBtn: 'Login',
noAccount: 'No account?',
goRegister: 'Register now',
registerTitle: 'Free registration',
haveRead: 'I have read and agree',
privacyStatement: 'User privacy statement',
haveAccount: 'Have account',
goLogin: 'Log in now',
registerBtn: 'Register',
},
// form表单的title
options: {
line1: 'Twitter Followers',
line2: 'Account creation date',
line3: 'Discord Member',
line4: 'Discord Online rate',
line5: 'Time Range',
line6: 'Twitter User growth',
line7: 'Discord User growth',
line8: 'Telegram Members',
},
// table表格的表头
tableTitle: {
proName: 'Name',
Create: 'Twitter Create',
twitterFollowers: 'Followers',
twitterOneDay: '1Day',
twitterThreeDay: '3Day',
twitterSevenDay: '7Day',
DiscordMembers: 'Members',
DiscordOnlineRate: 'Online rate',
DiscordOneDay: '1Day',
DiscordThreeDay: '3Day',
DiscordSevenDay: '7Day',
Projects: 'Projects'
}
};
export default cn;
import cn from './cn';
import en from './en';
export default {
cn,
en,
};
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TDesign from 'tdesign-vue-next';
import { createI18n } from 'vue-i18n';
import messages from './language/index';
// 主题
import './utils/global/css/theme.css'
// import './utils/global/js/rem.ts'
import 'amfe-flexible/index.js';
// 引入组件库全局样式资源
import 'tdesign-vue-next/es/style/index.css';
const i18n = createI18n({
locale: localStorage.getItem('lang') || 'en',
messages,
})
const app = createApp(App);
app.use(router);
app.use(store);
app.use(TDesign);
app.use(i18n);
app.mount('#app')
<template>
<div class="analysis-box">
<!-- 导航栏 -->
<HeaderMenu />
<div class="Main-part">
<!-- 折线图部分 -->
<div
class="linechart-box-child"
:class="isShow.details ? 'linechart-box-child' : 'linechart-box-child2'"
>
<lineChart />
</div>
<!-- 数据分析详情部分 -->
<div class="data-analysis-box" v-show="isShow.details">
<div class="analysis-box-child">
<AnalysisDetail />
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import HeaderMenu from "../components/Header/headerNav.vue";
import lineChart from "../components/dataAnalysis/leftModule/lineChartFather.vue";
import AnalysisDetail from "../components/dataAnalysis/rightModule/analysisDetali.vue";
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
// 几个模块的显示与隐藏
let isShow = reactive({
// 详情模块的显示/隐藏
details: true,
});
// 监听屏幕宽度变化
onMounted(() => {
// window.addEventListener可以解决多个onresize同时触发被覆盖的问题
window.addEventListener("resize", () => {
if (document.body.clientWidth <= 768) {
isShow.details = false;
} else {
isShow.details = true;
}
});
// 第一次进入也要监听
if (document.body.clientWidth <= 768) {
isShow.details = false;
} else {
isShow.details = true;
}
});
</script>
<style scoped lang="less">
@import "../utils/global/css/font.less";
@import '../utils/global/css/theme.less';
.analysis-box {
width: 100vw;
height: 100vh;
overflow: hidden;
background: @mainboxbackground;
.Main-part {
width: 100%;
height: 94.6%;
display: flex;
.linechart-box-child {
width: 80%;
height: 100%;
}
.linechart-box-child2 {
width: 100%;
height: 100%;
}
.data-analysis-box {
width: 20%;
height: 100%;
display: flex;
justify-content: end;
.analysis-box-child {
width: 98%;
height: 100%;
}
}
}
}
</style>
<template>
<div class="App-box">
<!-- 导航栏 -->
<HeaderNav />
<div class="title-box">
<!-- NTF增长排行 -->
<div class="menu-box-cl" :style="{ height: menuDetail + 'px' }">
<MenuBox />
</div>
<div class="detail-box-cl" :style="{ height: menuDetail + 'px' }">
<!-- 详细信息 -->
<Details />
</div>
</div>
</div>
<!-- 弹出dialog测试 -->
<div>
<!-- <RemoveAds /> -->
</div>
</template>
<script lang="ts" setup>
import HeaderNav from "../components/Header/headerNav.vue";
import MenuBox from "../components/MenuList/menuBox.vue";
import Details from "../components/detailsContent/nftDetails.vue";
import { computed, onMounted, ref } from "@vue/runtime-core";
import { preventShake } from "../utils/global/js/tool.ts";
// import RemoveAds from "../components/RemoveAds.vue";
const menuDetail = ref(0);
onMounted(() => {
// 默认主题色
document.body.className = "light";
// 首次加载高度
MonitorHeight();
});
// 修改高度
const MonitorHeight = () => {
let clName = document.documentElement.getElementsByClassName("header-nav");
menuDetail.value = document.body.clientHeight - clName[0].clientHeight;
};
window.addEventListener("resize", () => {
// preventShake(MonitorHeight, 300);
MonitorHeight();
});
</script>
<style scoped lang="less">
@import "../utils/global/css/font.less";
@import "../utils/global/css/theme.less";
.App-box {
width: 100vw;
height: 100vh;
box-sizing: border-box;
overflow: hidden;
background: @mainboxbackground;
.title-box {
width: 100%;
height: 92%;
display: flex;
.menu-box-cl {
width: 80%;
}
.detail-box-cl {
width: 20%;
}
}
}
</style>
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../pages/coinnerbrowse.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/coinnerbrowse',
name: 'coinnerbrowse',
component: () => import(/**/ '../pages/coinnerbrowse.vue')
},
{
path: '/analysis',
name: 'Analysis',
component: () => import(/**/ '../pages/analysis.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
import { createStore } from 'vuex';
import settings from './modules/settings';
import user from './modules/user';
export const store = createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
settings,
user,
}
})
export default store;
// 定义的state初始值
const state = {
menuTheme: 'light'
};
type InitStatetype = typeof state;
const mutations = {
// 改变menu菜单的主题色
changeMenuTheme(state: InitStatetype, theme: string) {
if (theme === 'dark') {
state.menuTheme = 'dark'
} else {
state.menuTheme = 'light'
}
}
};
const getters = {
getTheme(state:InitStatetype){
return state.menuTheme
}
};
const actions = {
};
export default {
// 命名空间
namespaced: true,
state,
mutations,
actions,
getters,
};
// 定义的state初始值
const state = {
menuTheme: 'light'
};
type InitStatetype = typeof state;
const mutations = {
// 改变menu菜单的主题色
userInfo(state: InitStatetype, theme: string) {
if (theme === 'dark') {
state.menuTheme = 'dark'
console.log('我是store')
} else {
state.menuTheme = 'light'
}
}
};
const getters = {
};
const actions = {
};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
};
/* 主题色 */
@SearchColor:rgb(40,126,255);
/* 一级文字大小及行高 */
@text1:36px;
@lineHeight1:44px;
/* 二级文字大小及行高 */
@text2:20px;
@lineHeight2:28px;
/* 三级文字大小及行高 */
@text3:16px;
@lineHeight3:24px;
/* 四级文字大小及行高 */
@text4:14px;
@lineHeight3:22px;
/* 五级文字大小及行高 */
@text5:12px;
@lineHeight3:20px;
/* 线条的颜色 */
@box-border:1px solid #ddd;
/* 数据分析页详情模块--余额的颜色*/
@remainingMoney:rgb(167,167,167);
/* 数据分析页详情--转换模块的颜色 */
@color10:rgb(241,241,241);
/* 小搜索框的边框色 */
@listSearchBorder:1px solid rgb(40,126,255);
/* 搜索框背景颜色 */
@SearchBackground:rgb(231,231,231);
/* 表格内容增长量的颜色 */
@tableGrowth:rgb(66,181,161);
/* 表格description内容的颜色 */
@descriptionColor:rgb(131,131,131);
/* 标签1的颜色 */
@labelBackgroundOne:rgb(241,157,56);
/* 标签2的颜色 */
@labelBackgroundTwo:rgb(83,169,149);
/* 详情模块小标题的颜色 */
@smallLabelColor:rgb(123,125,135);
/* 详情模块链接按钮边框色*/
@detailsLinkBorder:1px solid rgb(224,227,234);
/* 详情介绍文本的第二段字体颜色*/
@detailscontentLineTwo:rgb(131,131,131);
/* 设置两套主题色 */
.light {
/* 主题色 */
--main-theme: rgb(40, 126, 255);
--theme1: rgb(123, 125, 135);
--theme2: rgb(231, 231, 231);
--theme3: black;
/* 整个页面背景色 */
--mainBox: white;
/* 文字颜色 */
--textColor1: var(--theme3);
/* 头部导航栏模块 */
/* 搜索框背景色 */
--headerSearchBackground: var(--theme2);
/* 搜索框左侧提示 */
--headerSearchprompt: var(--theme1);
/* 搜索按钮 */
--headerSearchBtn: var(--theme1);
/* 搜索框边框 */
--headerSearchborder: var(--theme2);
/* 输入的文本颜色 */
--headerSearchinput:var(--theme3);
}
.dark {
/* 主题色 */
--main-theme: rgb(36, 36, 36);
--theme1: rgb(118, 118, 118);
--theme2: rgb(44, 44, 44);
--theme3: white;
/* 整个页面背景色 */
--mainBox: var(--main-theme);
/* 文字颜色 */
--textColor1: var(--theme3);
/* 头部导航栏模块 */
/* 搜索框背景色 */
--headerSearchBackground: var(--theme2);
/* 搜索框左侧提示 */
--headerSearchprompt: var(--theme1);
/* 搜索按钮 */
--headerSearchBtn: var(--theme1);
/* 搜索框边框 */
--headerSearchborder: var(--theme2);
/* 输入的文本颜色 */
--headerSearchinput:var(--theme3);
}
\ No newline at end of file
@import 'theme.css';
// 整体背景色
@mainboxbackground: var(--mainBox);
// 文字颜色
@textColor1: var(--textColor1);
// 头部搜索框颜色
@headerSearchBackground :var(--headerSearchBackground);
// 提示框左侧提示文字
@headerSearchprompt : var(--headerSearchprompt);
// 搜索按钮
@headerSearchBtn: var(--headerSearchBtn);
// 搜索边框
@headerSearchborder: var(--headerSearchborder);
// 输入的文本颜色
@headerSearchinput: var(--headerSearchinput);
\ No newline at end of file
//设置暗色模式
export const darkPattern = () => {
document.documentElement.setAttribute('theme-mode', 'dark');
}
// 重置为浅色模式
export const LightColorPattern = () => {
document.documentElement.removeAttribute('theme-mode');
}
//基准大小
const baseSize = 32
//设置 rem 函数
function setRem(){
//缩放比例
const proportion = document.body.clientWidth / 1920
console.log(proportion)
//设置根节点字体大小
document.body.style.fontSize = (baseSize * Math.min(proportion,2)) + 'px'
console.log(document.body.style.fontSize)
}
//初始化
setRem()
window.onresize = function () {
setRem()
}
\ No newline at end of file
// 防抖函数
let isReady: any = null
export const preventShake = (fn: any, timer?: number): any => {
// isReady不为null,关闭定时器
return function () {
if (isReady) {
clearTimeout(isReady)
isReady = setTimeout(() => {
fn();
console.log('我被执行了')
}, timer)
}
else {
isReady = setTimeout(() => {
fn();
}, timer)
}
}
}
// 节流函数
// export const throttle = function (fn: any, timer: number) {
// let timeout: any = null
// let startTime = Date.now();
// // 闭包
// return function (...args: any) {
// const curTime = Date.now();
// const remaining = timer - (curTime - startTime);
// // const context = this;
// clearTimeout(timeout)
// //
// if (remaining <= 0) {
// fn.call(context, ...args);
// startTime = Date.now()
// }
// else {
// timeout = setTimeout(() => {
// fn.call(context, ...args)
// }, remaining)
// }
// }
// }
// 推特
export const twitterOptions = [
{ label: "1-500" },
{ label: "500-1K" },
{ label: "1K-5K" },
{ label: "5K-10K" },
{ label: "10K-50K" },
{ label: "50K+" },
];
// Account creation date
export const AccountDate = [
{ label: "1Day" },
{ label: "3Day" },
{ label: "7Day" },
{ label: "30Day" },
{ label: "90Day" },
{ label: "180Day" },
];
// Discord Member
export const DiscordMember = [
{ label: "500" },
{ label: "500-1K" },
{ label: "1K-5K" },
{ label: "5K-10K" },
{ label: "10K-50K" },
{ label: "50K+" },
];
// Discord Online rate
export const DiscordOnline = [
{ label: "1-5%" },
{ label: "5-10%" },
{ label: "10-15%" },
{ label: "15-20%" },
{ label: "20-25%" },
{ label: "20%+" },
];
// Time Range
export const timeInterval = [
{ label: "6H" },
{ label: "12H" },
{ label: "24H" },
{ label: "7Day" },
{ label: "30Day" },
{ label: "90Day" },
];
// Twitter User growth
export const TwitterGrowth = [
{ label: "0-50" },
{ label: "50-100" },
{ label: "100-200" },
{ label: "200-500" },
{ label: "500-1K" },
{ label: "1K+" },
];
// Discord User growth
export const DiscordGrowth = [
{ label: "0-50" },
{ label: "50-100" },
{ label: "100-200" },
{ label: "200-500" },
{ label: "500-1K" },
{ label: "1K+" },
];
// Telegram Members
export const TelegramMember = [
{ label: "1-500" },
{ label: "500-1K" },
{ label: "1K-5K" },
{ label: "5K-10K" },
{ label: "10K-50K" },
{ label: "50K+" },
];
\ No newline at end of file
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
module.exports = {
// 基本路径
publicPath: './',
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 192
})
]
}
}
}
// 代理
// devServer: {
// port: 8080,
// // host: 'localhost',
// https: false, // https:{type:Boolean}
// open: true, // 配置自动启动浏览器
// disableHostCheck: true,
// "proxy": {
// "/*": {
// "target": "http://xxx",
// "changeOrigin": true
// }
// }
// },
}
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