Skip to content

B
blindBox-vue
Commit 8e86036f by haojie
Options

Initial commit

parents
Showing with 2355 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode/extensions.json 0 → 100644
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
README.md 0 → 100644
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support For `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RESDAO</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "blind-box-web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"pinia": "^2.0.32",
"tdesign-vue-next": "^1.0.9",
"vue": "^3.2.45",
"vue-i18n": "^9.2.2",
"@metamask/detect-provider": "^1.2.0",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@types/node": "^18.14.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"less": "^4.1.3",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vite-plugin-compression": "^0.5.1",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "^1.0.24"
}
}
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.vue 0 → 100644
<template>
<router-view></router-view>
</template>
<script setup lang="ts"></script>
<style>
#app {
width: 100vw;
height: 100vh;
box-sizing: border-box;
overflow-x: hidden;
}
</style>
src/assets/svg/dialog/close.svg 0 → 100644
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_120_373)">
<path d="M7.28571 6L11.7429 1.54286C12.0857 1.2 12.0857 0.6 11.7429 0.257143C11.4 -0.0857143 10.8 -0.0857143 10.4571 0.257143L6 4.71429L1.54286 0.257143C1.2 -0.0857143 0.6 -0.0857143 0.257143 0.257143C-0.0857143 0.6 -0.0857143 1.2 0.257143 1.54286L4.71429 6L0.257143 10.4571C-0.0857143 10.8 -0.0857143 11.4 0.257143 11.7429C0.6 12.0857 1.2 12.0857 1.54286 11.7429L6 7.28571L10.4571 11.7429C10.8 12.0857 11.4 12.0857 11.7429 11.7429C12.0857 11.4 12.0857 10.8 11.7429 10.4571L7.28571 6Z" fill="#544FA1"/>
</g>
<defs>
<clipPath id="clip0_120_373">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
src/assets/svg/dialog/fox.svg 0 → 100644
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.75 1L14.75 8.5L16.6095 4.08L24.75 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.23621 1L11.9155 8.88541L10.1864 4.20833L2.23621 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.2471 19.1147L18.6486 23.4064L24.2127 25.0627L25.8066 19.2085L21.2471 19.1147Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.20264 19.2085L2.78687 25.0627L8.34135 23.4064L5.75248 19.1147L1.20264 19.2085Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.04205 11.8646L6.49646 14.3854L12.0026 14.6562L11.8191 8.25L8.04205 11.8646Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.9572 11.8647L15.1222 8.17725L14.9966 14.6564L20.5028 14.3856L18.9572 11.8647Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.34167 23.4062L11.6744 21.6667L8.80535 19.25L8.34167 23.4062Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.3262 21.6667L18.6492 23.4062L18.1952 19.25L15.3262 21.6667Z" fill="#E27625" stroke="#E27625" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.6488 23.4063L15.3258 21.6667L15.5963 24.0001L15.5673 24.9897L18.6488 23.4063Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.34131 23.4063L11.4325 24.9897L11.4132 24.0001L11.674 21.6667L8.34131 23.4063Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 17.25L8.5 16.6568L10.2657 16L11 17.25Z" fill="#233447" stroke="#233447" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 17.25L16.7317 16L18.5 16.6568L16 17.25Z" fill="#233447" stroke="#233447" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.34229 23.4067L8.82529 19.115L5.75342 19.2087L8.34229 23.4067Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1761 19.115L18.6495 23.4067L21.248 19.2087L18.1761 19.115Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.5044 14.3857L14.9982 14.6566L15.5101 17.7087L16.3216 15.8649L18.2826 16.8337L20.5044 14.3857Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.7295 16.8337L10.6808 15.8649L11.4923 17.7087L12.0042 14.6566L6.49805 14.3857L8.7295 16.8337Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.49805 14.3857L8.80678 19.2503L8.7295 16.8337L6.49805 14.3857Z" fill="#E27525" stroke="#E27525" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.2834 16.8337L18.1964 19.2503L20.5051 14.3857L18.2834 16.8337Z" fill="#E27525" stroke="#E27525" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.0048 14.6567L11.4928 17.7088L12.14 21.313L12.2849 16.563L12.0048 14.6567Z" fill="#E27525" stroke="#E27525" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.9981 14.6567L14.7277 16.5526L14.8629 21.313L15.5101 17.7088L14.9981 14.6567Z" fill="#E27525" stroke="#E27525" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.4597 18.1552L14.75 21.8836L15.2585 22.25L18.4047 19.75L18.5 17.25L15.4597 18.1552Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 17.25L8.58499 19.75L11.7401 22.25L12.25 21.8836L11.5382 18.1552L8.5 17.25Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5103 25.0261L15.5384 24.0723L15.2948 23.8514H11.7146L11.4803 24.0723L11.4991 25.0261L8.5 23.5L9.54967 24.4237L11.6771 26H15.3229L17.4597 24.4237L18.5 23.5L15.5103 25.0261Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.6767 21.3295L15.1224 21H11.8661L11.3118 21.3295L11 23.5L11.2887 23.2868H15.6998L16 23.5L15.6767 21.3295Z" fill="#161616" stroke="#161616" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.1781 9.32291L25.9992 5.01042L24.7627 1L15.325 8.55208L18.9571 11.8646L24.0865 13.4792L25.2168 12.0521L24.7241 11.6667L25.5066 10.8958L24.9076 10.3958L25.6901 9.75L25.1781 9.32291Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 5.01042L1.83076 9.32291L1.29946 9.75L2.09158 10.3958L1.49266 10.8958L2.27512 11.6667L1.78246 12.0521L2.91267 13.4792L8.04212 11.8646L11.6743 8.55208L2.23648 1L1 5.01042Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.3058 13.8896L19.2519 12.25L20.7747 14.8099L18.5 19.75L21.5076 19.7077H26L24.3058 13.8896Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.74714 12.25L2.68679 13.8896L1 19.7077H5.48856L8.5 19.75L6.22236 14.8099L7.74714 12.25Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.1946 14.6762L15.5663 8.87683L17.25 4.75H9.75L11.4337 8.87683L11.8054 14.6762L11.9475 16.4971L11.9585 21H15.0415L15.0525 16.4971L15.1946 14.6762Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.49375" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
\ No newline at end of file
src/assets/svg/header/connectFox.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.7773 8.05664C21.8848 8.05664 21.9727 8.14453 21.9727 8.25195V20.0195C21.9727 20.127 21.8848 20.2148 21.7773 20.2148H3.22266C3.11523 20.2148 3.02734 20.127 3.02734 20.0195V8.25195C3.02734 8.14453 3.11523 8.05664 3.22266 8.05664H21.7773ZM21.7773 6.5918H3.22266C2.30469 6.5918 1.5625 7.33398 1.5625 8.25195V20.0195C1.5625 20.9375 2.30469 21.6797 3.22266 21.6797H21.7773C22.6953 21.6797 23.4375 20.9375 23.4375 20.0195V8.25195C23.4375 7.33398 22.6953 6.5918 21.7773 6.5918Z" fill="#AF62A3"/>
<path d="M4.95605 6.5918L5.33936 4.78027C5.36133 4.67773 5.45166 4.62402 5.52979 4.62402C5.54443 4.62402 5.55664 4.62647 5.57129 4.62891L14.8535 6.5918H21.7773C21.8604 6.5918 21.9409 6.59912 22.019 6.60889L5.87402 3.1958C5.75928 3.17139 5.64209 3.15918 5.52979 3.15918C4.76074 3.15918 4.07227 3.69629 3.90625 4.47754L3.45947 6.5918H4.95605ZM21.9556 12.4072V15.3979H17.0239C16.1987 15.3979 15.5273 14.7266 15.5273 13.9014C15.5273 13.0762 16.1987 12.4048 17.0239 12.4048H21.9556M23.4204 10.9424H17.0239C15.3882 10.9424 14.0625 12.2681 14.0625 13.9038C14.0625 15.5396 15.3882 16.8652 17.0239 16.8652H23.4204V10.9424Z" fill="#AF62A3"/>
<path d="M17.3535 13.0591C16.8872 13.0591 16.5088 13.4375 16.5088 13.9038C16.5088 14.3701 16.8872 14.7485 17.3535 14.7485C17.8198 14.7485 18.1982 14.3701 18.1982 13.9038C18.1982 13.4375 17.8198 13.0591 17.3535 13.0591Z" fill="#AF62A3"/>
</svg>
\ No newline at end of file
src/assets/svg/header/connected.svg 0 → 100644
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="39" height="39" rx="19.5" fill="#AF62A3" fill-opacity="0.08"/>
<rect x="5" y="5" width="29" height="29" rx="14.5" fill="url(#pattern0)"/>
<rect x="0.5" y="0.5" width="38" height="38" rx="19" stroke="#AF62A3" stroke-opacity="0.5"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1033_6033" transform="translate(-0.157895 -0.157895) scale(0.0263158)"/>
</pattern>
<image id="image0_1033_6033" width="50" height="50" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAHH0lEQVRoge2abWxbVxnHf/emNl3szXa75sWJX2hhJW03Z4IurWISRmHSUNsUrRMkorBPIFSBChLrug8IIZDaiQ9dpAiBxAdKlwytiKUbGoJFKJuzhmSlybYsYaip7dhWwmhzncRZekN8+XB9b/z+EjuCVvy/OL45557nf57/Oc9znmNhYWlZ4S6A+N82oFL4P5H/Ndw1RLZU8mVBSaZ3fJ4ZaZWgJBOMqp9OqxEAp8WA02rEYTXQ5bHpzysBodxdSzN+yB/DF4iV1NdpNdLpsVaEVFlEzg7OcW7wnxmGAXhdZpxW1QNBSQYgKK0SjMoM+WP0js9n9HumvXajpmyMiM8f4+TlkG5gl8dGq9tEl8dW9DuCkowvEEsh5bQa6TnaiNdtKtWk0okkeyF9YCEygegfRZi5hhCeQJDCCFIEAMVqR7E2oDTsRXE8TNy9H8W+Vyd15MINfWJOt9eU7J2SiBz59bS+DpIHE6cGEMf6qXrvNUgYXhBWO2v7Hife3EH8U4f0taZNUpfHRk9HY+WJaCSSvSDMTnL+FwH+/A87x4y/Zb9hmEcMw0UPDqDcV0v8kU7WDnwNpa4pxTulkCmKyMn+EL3j8ykkPhwZ5NQvTby/5Epp2yCGOLb1Usmk1pq+QPzQd3XvlEqmIBGfP8aRC9MAvPL1nXjdJsSx3/OV83amVnbmfXmppJSGB/n346eJN3+ZoCTj6f57yrj5UDCynxucA9Q14XWbEKcG+FPvlYIkAMLxRnqWT/FU9EW+eMvHs4s/Y2T1QM72Qvhdtrx2DnFqQPV+whMnL4cKjpWXyNnBOX1dPNNeizA7iTjQzdDcxwu+OB3heCMv3z5ekJQQfhdxoBthdhKvy4TXZSIoyZxNTOiGiGg7SM9RdWaqhi9SNfk6o3lmtRgUIlU1+TpVwxdxWo2cTuyMfeOSvj2XREQLUl0emy4pcaSPl1eOE44Xvy0WQi5S4kgf4tQAXve6V5KzgaKJ9I2pnVoTi0wc60dYmMur8XKRTOox/+/o7/cD6F4Z8ufO5XIS0QJfl8eGEJlQgx2ULatiEY438qNrh1mefh+n1aDb5MtBJiuRZFkBiP5RkCIVl1U+KEaRlbpqfjMygdNqxOtSleELLGVtn5WI5kJNVsLMNYBNlZV9e4j6+ghy3VZsbYss77WwWn8PYx/dB0BnszqpM9Jq1v5ZD1ba7uC0qGcEITwBVF5W9u0hOg6+lPi8xPNvn6H76hlCi851W27bU2zJtXNlJxJVWWvaFKRwxWSlGf+ZB4bZ/0BqtH9i9wt0Xz2T8mzuo7oUWzTb0pHfI4lTmyBFypKVZnzHwUvYt+eO0o33Bmmxv8lfI5/Vny2tWooao+gze6myUmf8Ct8+fL6kfi31vhQiGrRJLUlaXpdJ3+q8bhN/EE8UlFW63jeKdHmZDVFgR4ZK0lGUR25U7cv6PJ/eN4p0edXeM4tKJLFuLYas/bIScVqNEIgRjMqAiRVTfUabP/60Na/ey0GyvJwfiwAPJmzJ7ZGscUSLH1qa8kl3dUab8M3NC4xP7H5B/3tftQRkxrZ0ZCWiRVFtq2v7XAMi8ZQ2b3+wecFRk5coxHmy+RPAerah2ZaOrES0lCAoyfj8Map37uGYazylzegHBytpewZa6n08uuMv1Oz+dErKVJK0YD0l0E6IXV9KlVdkE6UFcMD+Jl913QYyM/FsyElkPUlTt+Fd7V6earqq/z9ys5HRTZTXltnttH/+KL6kUmwuWUEeItnOzKe+5WKPOaC3+fmr36uI0emYDu3m4T0/BFJrBvnqw3mPuulnZqWuiR+fWMFStQhsjrwWYhbE2PdR6poyagb5kJdI+plZk9jznTewVC1WXF4LMQuz15/F0XICnz+WUTPIh4LlIK/bxOn2GoKSrBeuPYcP8atvRthjDnD5ypPlM0CV063Qc+xq+06iQKfW0rQyVCEUdWPV5bHR5bHpFUDNM70/MVG/sqM8BsDVv3Xgvr9X94RWmPO6TEUXs4uu/SYXmdPvMwJXXkKSL9L80ACiEC/wJhVxRWTsnUNs23ocR8sJILXS73WZeOUbhYuAOpHoYqzoanxQkukbn+fcG+pgDoshUQs2A7A8Pcr16/3Eje9h3Rbg/m1zmKvVjWFp+V7+dasW6ZYLUd7Hrl0dVO/cr7/3yIVpZhKZROdDVno6HIWNF4SNEUkmlD5wq9tc0kUPgM+/xFAglnNiSoEgLSxt6OpN885zb6xfvTksBlpdJrxuM45Euu11m5Ou3mRmEhekyf0Anm6r0XfIoo1P9sh8dLHsy9ChQIwX35EYKvEy1GEx0Omx8XRbzYbGTiFycz5asd+izERVUm8FYnrm/FYgpnvHYTXitBhwWIz8oALGJ38XPrw5f8f8qCadhCiKCAIoCgiKotwxRLLhtryKLK/e+UQA1tbidwcRuIt+VPMfEa2fGmTKAcQAAAAASUVORK5CYII="/>
</defs>
</svg>
\ No newline at end of file
src/assets/svg/header/home.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 13.5556C13.2964 13.5556 13.9444 14.2036 13.9444 15C13.9444 15.7964 13.2964 16.4444 12.5 16.4444C11.7036 16.4444 11.0556 15.7964 11.0556 15C11.0556 14.2036 11.7036 13.5556 12.5 13.5556ZM12.5 12C10.8431 12 9.5 13.3431 9.5 15C9.5 16.6569 10.8431 18 12.5 18C14.1569 18 15.5 16.6569 15.5 15C15.5 13.3431 14.1569 12 12.5 12Z" fill=""/>
<path d="M12.5001 4.63236L19.4521 10.5074H18.0641V19.3702C18.0641 19.4242 18.0415 19.476 18.0014 19.5142C17.9613 19.5524 17.9069 19.5739 17.8502 19.5739H7.15006C7.09333 19.5739 7.03894 19.5524 6.99883 19.5142C6.95872 19.476 6.93615 19.4242 6.9361 19.3702V10.5074H5.54812L12.5001 4.63236ZM12.5001 3C12.2906 2.99981 12.0884 3.07294 11.9318 3.20546L3.28948 10.5091C2.70058 11.0067 3.07033 11.9335 3.85775 11.9335H5.438V19.3701C5.438 20.2703 6.20449 21 7.14996 21H17.85C18.7955 21 19.562 20.2703 19.562 19.3701V11.9336H21.1422C21.9297 11.9336 22.2994 11.0068 21.7105 10.5092L13.0682 3.20556C12.9117 3.07299 12.7095 2.99983 12.5001 3Z" fill=""/>
</svg>
\ No newline at end of file
src/assets/svg/header/language.svg 0 → 100644
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0036 3.99637C17.0834 2.07614 14.4326 0.886414 11.5027 0.886414C8.57263 0.886414 5.92183 2.07614 3.99902 3.9964C2.0761 5.92682 0.891602 8.57762 0.891602 11.4998C0.891602 14.4326 2.07612 17.0834 3.99902 19.0037C5.92183 20.929 8.57263 22.1136 11.5027 22.1136C14.4326 22.1136 17.0833 20.929 19.0036 19.0037C20.9212 17.0834 22.1084 14.4326 22.1084 11.4998C22.1084 8.57762 20.9212 5.92682 19.0036 3.99637ZM17.8479 5.15453C19.3637 6.67313 20.3421 8.72909 20.4699 11.0095H17.6136C17.5472 10.9167 17.4626 10.8382 17.3651 10.7788C17.294 8.98387 16.9589 7.31903 16.4484 5.8911C16.492 5.81474 16.5233 5.73199 16.5411 5.64589C16.9159 5.43778 17.2814 5.20748 17.6287 4.94073C17.7036 5.01005 17.7767 5.08134 17.8479 5.15453ZM15.5573 16.6789C15.4779 16.7015 15.4023 16.7357 15.333 16.7804C15.2521 16.7492 15.1724 16.7179 15.0927 16.6868C14.1906 16.3498 13.2375 16.1378 12.2416 16.0698C12.177 15.9654 12.0903 15.8764 11.9878 15.8088V12.2043C12.078 12.1448 12.156 12.0686 12.2176 11.9798H16.2349C16.2795 12.0443 16.3329 12.1022 16.3934 12.152C16.3244 13.8214 16.0275 15.3693 15.5573 16.6789ZM10.8093 16.0665C9.79951 16.1311 8.83401 16.3447 7.92561 16.6868C7.85718 16.712 7.78884 16.7375 7.72058 16.7632C7.63439 16.7123 7.53977 16.6773 7.44121 16.6598C6.97759 15.3619 6.6842 13.8312 6.61775 12.181C6.6939 12.1253 6.76021 12.0573 6.81396 11.9798H10.8313C10.8826 12.0539 10.9454 12.1193 11.0173 12.1735V15.8395C10.9347 15.9018 10.8642 15.9788 10.8093 16.0665ZM7.46316 6.27828C7.5207 6.25997 7.57609 6.2355 7.62837 6.20529C7.72583 6.2442 7.82187 6.28131 7.91262 6.3183C8.83425 6.66058 9.80173 6.87902 10.8129 6.93949C10.869 7.01821 10.9381 7.08676 11.0172 7.14218V10.8265C10.9489 10.8781 10.8887 10.9398 10.8388 11.0095H6.80632C6.75385 10.9363 6.69003 10.8719 6.61726 10.8187C6.68394 9.13915 6.98582 7.59176 7.46316 6.27828ZM12.1868 6.93981C13.2026 6.87982 14.1741 6.66124 15.0927 6.3183C15.172 6.28728 15.2511 6.25598 15.3301 6.2244C15.3996 6.26023 15.4737 6.28616 15.5504 6.30143C16.0257 7.61752 16.3253 9.16679 16.3939 10.8477C16.3365 10.8948 16.2857 10.9492 16.2425 11.0095H12.21C12.1496 10.9252 12.0743 10.8528 11.9878 10.7957V7.13856C12.0648 7.08387 12.132 7.01669 12.1868 6.93981ZM16.8511 4.29369C16.6255 4.45853 16.3908 4.61219 16.1457 4.74952C16.0718 4.70553 15.9915 4.67321 15.9076 4.6537C15.8547 4.54845 15.8 4.44442 15.7397 4.34052C15.5153 3.93378 15.2779 3.57357 15.0326 3.23961C15.6822 3.51632 16.2954 3.87623 16.8511 4.29369ZM12.9846 2.64476C13.6968 3.08309 14.3518 3.83956 14.884 4.81549C14.923 4.88834 14.9619 4.95883 14.9996 5.02921C14.9376 5.12856 14.8972 5.23981 14.8808 5.35577C14.8356 5.37357 14.7906 5.39176 14.7457 5.41034C13.9458 5.70204 13.0872 5.89835 12.1865 5.96193C12.1318 5.88525 12.0646 5.81824 11.9878 5.76366V2.53534C12.3245 2.5455 12.6611 2.59259 12.9846 2.64476ZM10.0207 2.64476C10.3442 2.60302 10.6807 2.5455 11.0172 2.53534V5.76005C10.9385 5.81518 10.8696 5.88333 10.8137 5.96156C9.91457 5.89762 9.05508 5.70153 8.25432 5.41034C8.1824 5.37972 8.10889 5.35087 8.03701 5.32174C8.02345 5.24729 7.99986 5.17503 7.96687 5.10692C8.01711 5.01034 8.06804 4.91508 8.12134 4.81547C8.65867 3.83959 9.3136 3.08309 10.0207 2.64476ZM7.97776 3.23964C7.72207 3.5736 7.48474 3.9338 7.26289 4.34054C7.20725 4.43927 7.15544 4.53817 7.10395 4.63807C7.0044 4.65028 6.90784 4.68028 6.8189 4.72665C6.59321 4.5952 6.37073 4.44945 6.15146 4.29371C6.71499 3.87623 7.32283 3.51632 7.97776 3.23964ZM5.15747 5.15453C5.22007 5.08175 5.30864 5.00844 5.37664 4.94073C5.6948 5.18522 6.02854 5.39877 6.37329 5.59298C6.39276 5.73175 6.44669 5.86344 6.53018 5.97599C6.02429 7.39266 5.7102 9.03739 5.63926 10.808C5.56028 10.8631 5.49126 10.9312 5.43518 11.0095H2.54053C2.65532 8.72906 3.63887 6.67313 5.15747 5.15453ZM5.15747 17.8503C3.63887 16.337 2.65532 14.2811 2.54053 11.9798H5.42759C5.48508 12.0627 5.55692 12.1347 5.63972 12.1923C5.7126 13.9923 6.03525 15.6703 6.55422 17.0825C6.50746 17.1671 6.4757 17.2592 6.46035 17.3546C6.08457 17.5775 5.72156 17.8129 5.37659 18.0644L5.15747 17.8503ZM6.15146 18.7216C6.38895 18.5441 6.6366 18.3807 6.89314 18.2322C6.95014 18.2629 7.01049 18.2869 7.073 18.3037C7.13479 18.4268 7.19609 18.5497 7.26289 18.6643C7.48474 19.0609 7.72209 19.4313 7.97776 19.7601C7.32283 19.4784 6.71499 19.1391 6.15146 18.7216ZM10.0207 20.3654C9.3136 19.9113 8.65867 19.1653 8.12134 18.1947C8.07877 18.1152 8.03681 18.0354 7.99546 17.9552C8.05686 17.8628 8.0993 17.7591 8.12031 17.6502C8.16446 17.6352 8.20916 17.6219 8.25432 17.6103C9.07058 17.2889 9.95259 17.1035 10.8668 17.0404C10.9107 17.0951 10.9612 17.1442 11.0172 17.1865V20.454C10.6807 20.4489 10.3442 20.4176 10.0207 20.3654ZM12.9846 20.3654C12.6611 20.4176 12.3245 20.4489 11.9878 20.454V17.2173C12.0604 17.1694 12.1252 17.1107 12.1799 17.0432C13.083 17.1089 13.9438 17.2936 14.7457 17.6103C14.8211 17.6293 14.8953 17.6531 14.9678 17.6813C14.9845 17.7536 15.0108 17.8234 15.046 17.8888C14.9941 17.9906 14.9392 18.0915 14.884 18.1947C14.3518 19.1653 13.6968 19.9113 12.9846 20.3654ZM15.0326 19.7601C15.2883 19.4313 15.5153 19.0609 15.7397 18.6643C15.805 18.5555 15.8639 18.4392 15.921 18.3223C15.9991 18.31 16.075 18.2867 16.1466 18.2531C16.3914 18.3933 16.6258 18.5483 16.8511 18.7215C16.2954 19.1391 15.6822 19.4784 15.0326 19.7601ZM17.8479 17.8503L17.6287 18.0644C17.3104 17.8325 16.9766 17.6143 16.6278 17.407C16.6135 17.2596 16.5604 17.1187 16.4739 16.9985C16.9734 15.6116 17.2944 13.9748 17.3646 12.2214C17.4661 12.1598 17.5536 12.0775 17.6212 11.9798H20.4699C20.3421 14.2811 19.3637 16.337 17.8479 17.8503Z" fill="#544FA1"/>
</svg>
src/assets/svg/header/lp.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M9.6625 22.125C7.925 22.125 6.1875 21.4625 4.8625 20.1375C3.575 18.85 2.875 17.15 2.875 15.3375C2.875 13.525 3.575 11.825 4.8625 10.5375L7.1625 8.2375C7.7 7.7 8.425 7.4 9.1875 7.4C9.95 7.4 10.675 7.7 11.2125 8.2375L11.7625 8.7875L13.5875 6.9625L12.975 6.35C12.5875 5.9625 12.375 5.45 12.375 4.9125C12.375 4.3625 12.5875 3.8625 12.975 3.475C13.7625 2.675 15.0625 2.675 15.85 3.475L21.5125 9.1375C22.3 9.9375 22.3 11.225 21.5125 12.0125C21.125 12.4 20.6125 12.6125 20.075 12.6125C19.525 12.6125 19.025 12.4 18.6375 12.0125L18.025 11.4L16.2 13.225L16.75 13.775C17.8625 14.8875 17.8625 16.7125 16.75 17.8375L14.45 20.1375C13.1375 21.4625 11.4 22.125 9.6625 22.125ZM9.2 9.025C8.8625 9.025 8.55 9.15 8.325 9.3875L6.0125 11.6875C5.0375 12.6625 4.5 13.9625 4.5 15.3375C4.5 16.7125 5.0375 18.0125 6.0125 18.9875C8.025 21 11.3 21 13.3125 18.9875L15.6125 16.6875C16.1 16.2 16.1 15.4125 15.6125 14.925L14.4875 13.8C14.175 13.4875 14.175 12.9625 14.4875 12.65L17.4625 9.675C17.775 9.3625 18.3 9.3625 18.6125 9.675L19.8 10.8625C19.9 10.9625 20.025 10.9875 20.0875 10.9875C20.15 10.9875 20.275 10.975 20.375 10.8625C20.5375 10.7 20.5375 10.4375 20.375 10.2875L14.7125 4.625C14.6125 4.525 14.4875 4.5 14.425 4.5C14.3625 4.5 14.2375 4.5125 14.1375 4.625C14.0375 4.725 14.0125 4.85 14.0125 4.9125C14.0125 4.975 14.025 5.1 14.1375 5.2L15.325 6.3875C15.6375 6.7 15.6375 7.225 15.325 7.5375L12.35 10.5C12.0375 10.8125 11.5125 10.8125 11.2 10.5L10.075 9.375C9.8375 9.15 9.525 9.025 9.2 9.025Z" fill=""/>
<path d="M7.775 18.025C7.5625 18.025 7.3625 17.95 7.2 17.7875C6.8875 17.475 6.8875 16.95 7.2 16.6375L10.775 13.0625C11.0875 12.75 11.6125 12.75 11.925 13.0625C12.2375 13.375 12.2375 13.9 11.925 14.2125L8.35 17.7875C8.1875 17.95 7.975 18.025 7.775 18.025Z" fill=""/>
</svg>
\ No newline at end of file
src/assets/svg/header/raffle.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6495 13.2853H4.35051C3.67741 13.2853 3.12981 12.7377 3.12981 12.0646V8.74847C3.12981 8.07538 3.67741 7.52777 4.35051 7.52777H20.6495C21.3226 7.52777 21.8702 8.07538 21.8702 8.74847V12.0646C21.8702 12.7378 21.3226 13.2853 20.6495 13.2853ZM4.59465 11.8205H20.4053V8.99261H4.59465V11.8205Z" fill=""/>
<path d="M19.332 21.6612H5.66799C4.97548 21.6612 4.41208 21.0978 4.41208 20.4053V12.9716H5.87692V20.1964H19.1231V12.9716H20.5879V20.4053C20.5879 21.0978 20.0245 21.6612 19.332 21.6612Z" fill=""/>
<path d="M11.7676 8.26019H13.2324V20.4782H11.7676V8.26019Z" fill=""/>
<path d="M14.4146 8.8551C14.3245 8.8551 14.2326 8.85359 14.1386 8.85051C13.2684 8.82207 12.5272 8.67227 12.4961 8.66592L12.022 8.56902L11.9251 8.095C11.9188 8.06389 11.769 7.32266 11.7405 6.45247C11.6982 5.15603 11.9485 4.2269 12.4845 3.69087C13.0742 3.10115 13.8584 2.77637 14.6924 2.77637C15.5264 2.77637 16.3105 3.10115 16.9002 3.69089C18.1176 4.90828 18.1176 6.88914 16.9002 8.10654L16.9002 8.10657C16.403 8.60371 15.5675 8.8551 14.4146 8.8551ZM13.2814 7.30937C13.5336 7.34285 13.8601 7.37661 14.2052 7.38704C15.4143 7.42346 15.781 7.15417 15.8644 7.07073C16.5107 6.42446 16.5107 5.37292 15.8644 4.72666C15.5514 4.4136 15.1351 4.24119 14.6924 4.24119C14.2496 4.24119 13.8334 4.4136 13.5204 4.72666C13.4362 4.81084 13.1646 5.18062 13.2046 6.40461C13.2157 6.74443 13.2487 7.06272 13.2814 7.30937Z" fill=""/>
<path d="M10.5854 8.8551C9.43237 8.8551 8.59699 8.60374 8.09978 8.10657L8.09975 8.10654C6.88239 6.88914 6.88239 4.90828 8.09978 3.69089C8.6895 3.10115 9.47358 2.77637 10.3076 2.77637C11.1416 2.77637 11.9257 3.10115 12.5155 3.69089C13.0515 4.2269 13.3018 5.15605 13.2594 6.45247C13.231 7.32268 13.0812 8.06389 13.0749 8.095L12.978 8.56902L12.5039 8.66592C12.4728 8.67227 11.7316 8.82207 10.8614 8.85051C10.7694 8.85354 10.6774 8.85507 10.5854 8.8551ZM9.13557 7.07073C9.21975 7.15491 9.58972 7.42642 10.8135 7.38645C11.1534 7.37534 11.4717 7.34241 11.7183 7.30969C11.7518 7.05745 11.7855 6.73103 11.796 6.38584C11.8325 5.17634 11.5631 4.81011 11.4797 4.72668C11.1666 4.4136 10.7504 4.24119 10.3076 4.24119C9.86489 4.24119 9.44863 4.4136 9.13557 4.72666C8.4893 5.37292 8.48933 6.42446 9.13557 7.07073Z" fill=""/>
</svg>
\ No newline at end of file
src/assets/svg/header/tab.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.2666 2.80762H21.7334C22.2437 2.80762 22.6562 3.22021 22.6562 3.73047V4.65332C22.6562 5.16357 22.2437 5.57617 21.7334 5.57617H3.2666C2.75635 5.57617 2.34375 5.16357 2.34375 4.65332V3.73047C2.34375 3.22021 2.75635 2.80762 3.2666 2.80762ZM3.2666 11.1157H15.2686C15.7788 11.1157 16.1914 11.5283 16.1914 12.0386V12.9614C16.1914 13.4717 15.7788 13.8843 15.2686 13.8843H3.2666C2.75635 13.8843 2.34375 13.4717 2.34375 12.9614V12.0386C2.34375 11.5283 2.75635 11.1157 3.2666 11.1157ZM3.2666 19.4238H21.7334C22.2437 19.4238 22.6562 19.8364 22.6562 20.3467V21.2695C22.6562 21.7798 22.2437 22.1924 21.7334 22.1924H3.2666C2.75635 22.1924 2.34375 21.7798 2.34375 21.2695V20.3467C2.34375 19.8364 2.75635 19.4238 3.2666 19.4238ZM18.501 14.6655V10.3345C18.501 9.79736 19.2139 9.52637 19.6289 9.90723L21.9995 12.0728C22.2583 12.3096 22.2583 12.6904 21.9995 12.9272L19.6289 15.0903C19.2139 15.4712 18.501 15.2026 18.501 14.6655Z" fill="#544FA1"/>
</svg>
\ No newline at end of file
src/assets/svg/raffle/open.svg 0 → 100644
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_385_5945)">
<path d="M21.3521 24.9999H2.44024C1.79305 24.9999 1.17236 24.7429 0.714729 24.2852C0.257096 23.8276 0 23.2069 0 22.5597L0 3.64788C0 3.00069 0.257096 2.38 0.714729 1.92237C1.17236 1.46474 1.79305 1.20764 2.44024 1.20764H13.0065C13.2653 1.20764 13.5136 1.31048 13.6967 1.49353C13.8797 1.67659 13.9826 1.92486 13.9826 2.18374C13.9826 2.44261 13.8797 2.69089 13.6967 2.87394C13.5136 3.05699 13.2653 3.15983 13.0065 3.15983H2.44024C2.37615 3.15983 2.31268 3.17245 2.25347 3.19698C2.19426 3.22151 2.14045 3.25746 2.09513 3.30278C2.04982 3.3481 2.01387 3.4019 1.98934 3.46111C1.96481 3.52032 1.95219 3.58379 1.95219 3.64788V22.5597C1.95219 22.6238 1.96481 22.6873 1.98934 22.7465C2.01387 22.8057 2.04982 22.8595 2.09513 22.9048C2.14045 22.9501 2.19426 22.9861 2.25347 23.0106C2.31268 23.0351 2.37615 23.0478 2.44024 23.0478H21.3521C21.4815 23.0478 21.6056 22.9963 21.6972 22.9048C21.7887 22.8133 21.8401 22.6891 21.8401 22.5597V12.2131C21.8401 11.9542 21.943 11.706 22.126 11.5229C22.3091 11.3399 22.5573 11.237 22.8162 11.237C23.0751 11.237 23.3234 11.3399 23.5064 11.5229C23.6895 11.706 23.7923 11.9542 23.7923 12.2131V22.5597C23.7923 23.2069 23.5352 23.8276 23.0776 24.2852C22.6199 24.7429 21.9993 24.9999 21.3521 24.9999Z" fill="#565656"/>
<path d="M7.05228 16.4105C6.90538 16.4106 6.76035 16.3775 6.62801 16.3137C6.49566 16.25 6.37942 16.1572 6.28794 16.0422C6.19645 15.9273 6.13209 15.7932 6.09966 15.6499C6.06722 15.5066 6.06754 15.3579 6.10059 15.2148L6.71065 12.5793C7.19962 10.4232 8.3571 8.47667 10.0179 7.01742C11.6788 5.55816 13.7581 4.66078 15.9591 4.45331V0.988175C15.9568 0.797802 16.0102 0.610903 16.1128 0.450491C16.2153 0.290078 16.3625 0.163155 16.5363 0.0853508C16.71 0.00754625 16.9028 -0.0177433 17.0907 0.0125959C17.2787 0.0429352 17.4536 0.127579 17.5941 0.256104L24.6708 6.57632C24.7731 6.66964 24.8545 6.78367 24.9094 6.91084C24.9642 7.03801 24.9914 7.17541 24.9891 7.3139C24.9868 7.45239 24.9551 7.5888 24.896 7.71407C24.8369 7.83934 24.7518 7.9506 24.6464 8.04046L17.5697 14.0922C17.4285 14.213 17.2558 14.291 17.0719 14.317C16.888 14.343 16.7004 14.316 16.5313 14.2391C16.3622 14.1622 16.2185 14.0387 16.1171 13.883C16.0158 13.7273 15.961 13.5459 15.9591 13.3602V10.2367C13.6702 10.4833 11.5642 11.6018 10.0782 13.3602L7.80876 16.0688C7.71552 16.1779 7.59939 16.265 7.46864 16.3241C7.33789 16.3831 7.19573 16.4126 7.05228 16.4105ZM17.9113 3.18439V5.405C17.9113 5.66388 17.8085 5.91215 17.6254 6.09521C17.4424 6.27826 17.1941 6.3811 16.9352 6.3811C13.4213 6.3811 10.371 8.4553 9.05328 11.6032C10.0716 10.5387 11.295 9.69159 12.6496 9.11282C14.0043 8.53405 15.4621 8.23567 16.9352 8.23568C17.1941 8.23568 17.4424 8.33852 17.6254 8.52157C17.8085 8.70462 17.9113 8.9529 17.9113 9.21177V11.2372L22.5234 7.28399L17.9113 3.18439Z" fill="#565656"/>
</g>
<defs>
<clipPath id="clip0_385_5945">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
src/assets/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/components/Foxwallet/index.less 0 → 100644
@import '@/style/color.less';
.custom-connect-fox-dialog {
.t-dialog--default {
padding: 20px;
}
.t-dialog {
width: 400px;
.t-dialog__header-content {
font-weight: 400;
font-size: 16px;
color: #000000;
}
.t-dialog__close {
display: flex;
align-items: center;
justify-content: center;
}
.fox-wallect-list {
position: relative;
.fox-wallect-list-li {
width: 358px;
height: 54px;
background: rgba(84, 79, 161, 0.08);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
color: #000000;
cursor: pointer;
user-select: none;
.text {
margin-left: 12px;
}
}
}
}
}
@media (max-device-width: @max-device-width-1) {
.custom-connect-fox-dialog {
.t-dialog {
width: 90vw;
.fox-wallect-list-li {
width: 100% !important;
}
}
}
}
src/components/Foxwallet/index.tsx 0 → 100644
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { useFoxDialog } from '@/store/dialog';
import './index.less';
import CloseSvg from '@/assets/svg/dialog/close.svg';
import FoxSvg from '@/assets/svg/dialog/fox.svg';
import detectEthereumProvider from '@metamask/detect-provider';
import { MessagePlugin } from 'tdesign-vue-next';
import Loading from '../Loading';
import { useFoxWallet } from '@/store/FoxWallet';
export default defineComponent({
setup(props) {
const { $state: foxDialog } = useFoxDialog();
// 钱包地址
const { $state: userAddress } = useFoxWallet();
const loading = ref(false);
// 钱包列表
const WalletList = reactive({
list: [
{
icon: <FoxSvg></FoxSvg>,
label: 'MetaMask Wallet',
value: '',
},
],
});
const dialogHead = () => {
return <div>连接钱包</div>;
};
const closeIcon = () => {
return <CloseSvg></CloseSvg>;
};
const getConnectFox = async (tooltip: boolean) => {
// 这里是用户主动连接，临时存储到本地，刷新页面时自动赋值
let eth: any = window;
try {
const accounts = await eth.ethereum.request({
method: 'eth_requestAccounts',
});
if (accounts[0]) {
userAddress.address = accounts[0];
userAddress.MaskAddress = `${accounts[0].slice(
0,
6
)}...${accounts[0].slice(
accounts[0].length - 4,
accounts[0].length
)}`;
window.sessionStorage.setItem('ConnectFox', 'true');
}
if (tooltip) {
MessagePlugin.closeAll();
MessagePlugin.success('连接成功');
}
} catch (e: any) {
if (tooltip) {
if (e.code == -32002) {
MessagePlugin.closeAll();
MessagePlugin.warning('连接请求已存在');
return;
}
MessagePlugin.closeAll();
MessagePlugin.warning('连接失败');
}
console.log(e);
}
};
// 连接钱包
const ToConnectWallet = async (item: any) => {
try {
loading.value = true;
let provider = await detectEthereumProvider();
loading.value = false;
if (!provider) {
MessagePlugin.warning('请先下载MetaMask插件');
return;
}
// 连接钱包--主动连接--需要提示文字
getConnectFox(true);
} catch (e) {
console.log(e);
loading.value = false;
}
};
onMounted(() => {
// 自动连接--不显示提示文字
getConnectFox(false);
});
return () => (
<t-dialog
v-model:visible={foxDialog.dialog}
placement="center"
attach="body"
class="custom-connect-fox-dialog"
footer={false}
header={dialogHead}
closeBtn={closeIcon}
>
<div class="fox-wallect-list">
{WalletList.list.map((item: any) => (
<div
class="fox-wallect-list-li"
onClick={ToConnectWallet.bind(this, item)}
>
{item.icon}
<span class="text">{item.label}</span>
</div>
))}
<Loading v-show={loading.value}></Loading>
</div>
</t-dialog>
);
},
});
src/components/Loading/index.less 0 → 100644
@import '@/style/color.less';
.custom-global-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.loader {
border-top: 0.3em solid rgba(0, 0, 0, 0.1);
border-right: 0.3em solid rgba(0, 0, 0, 0.1);
border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
border-left: 0.3em solid @global-color-1;
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateY(40%);
-moz-animation: loader 600ms infinite linear;
-webkit-animation: loader 600ms infinite linear;
animation: loader 600ms infinite linear;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
z-index: 9999;
}
.loader,
.loader:after {
border-radius: 50%;
width: 2em;
height: 2em;
}
> span {
position: absolute;
top: 45%;
margin-left: -7px;
font-weight: 400;
font-size: 14px;
color: #595959;
}
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-left: 0.3em solid @global-color-1;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-left: 0.3em solid @global-color-1;
}
}
@-moz-keyframes loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
border-left: 0.3em solid @global-color-1;
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
border-left: 0.3em solid @global-color-1;
}
}
@keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-left: 0.3em solid @global-color-1;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-left: 0.3em solid @global-color-1;
}
}
src/components/Loading/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
export default defineComponent({
props: {
value: {
type: String,
default: '',
},
},
setup(props) {
return () => (
<div class="custom-global-loading">
<div class="loader"></div>
<span>{props.value}</span>
</div>
);
},
});
src/components/RadioGroup/index.less 0 → 100644
.custom-radio-group {
background: rgba(84, 79, 161, 0.08);
border-radius: 30px;
height: 36px;
width: auto;
display: inline-block;
margin: 16px 0;
.radio-group-button {
height: 100%;
background: transparent;
font-weight: 800;
font-size: 14px;
color: #544fa1;
transition: all 0.3s;
outline: none;
border: none;
padding: 0 30px;
cursor: pointer;
border-radius: 25px;
}
.radio-group-active {
background: rgba(84, 79, 161, 0.8);
color: #ffffff;
transition: all 0.3s;
}
}
src/components/RadioGroup/index.tsx 0 → 100644
import { defineComponent, PropType, ref } from 'vue';
import './index.less';
export default defineComponent({
props: {
options: {
type: Array as PropType<any[]>,
default: [],
},
modelValue: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const curbtn = ref(props.modelValue);
const CurrentChange = (value: string) => {
curbtn.value = value;
emit('update:modelValue', value);
};
return () => (
<div class="custom-radio-group">
{props.options.map((item: any) => (
<button
class={[
'radio-group-button',
item.value == curbtn.value ? 'radio-group-active' : '',
]}
onClick={CurrentChange.bind(this, item.value)}
>
{item.label}
</button>
))}
</div>
);
},
});
src/components/SelectLanguage/index.less 0 → 100644
.custom-select-language {
width: 103px;
height: 39px;
background: rgba(84, 79, 161, 0.08);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0 6px;
cursor: pointer;
user-select: none;
position: relative;
white-space: nowrap;
.active-text {
color: #544fa1;
font-weight: 500;
font-size: 14px;
}
.language-icon {
display: flex;
align-items: center;
}
.position-select {
position: absolute;
top: 39px;
z-index: 2000;
width: 100%;
.value {
height: 39px;
font-weight: 500;
font-size: 14px;
background: rgba(84, 79, 161, 0.08);
cursor: pointer;
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 0 12px;
.language-icon {
width: 30px;
display: flex;
justify-content: center;
opacity: 0;
}
.text {
padding-left: 6px;
}
}
}
}
.language-active {
border-radius: 30px 30px 0 0;
.position-select {
& > * {
border-radius: 0 0 30px 30px;
}
}
}
src/components/SelectLanguage/index.tsx 0 → 100644
import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import Language from '@/assets/svg/header/language.svg';
import { getDeviceWidth } from '@/utils/tool';
export default defineComponent({
setup() {
const { locale } = useI18n();
// 下拉框状态
const selectStatus = ref(false);
const languageList = reactive({
list: [
{
label: '简体中文',
value: 'cn',
},
{
label: 'English',
value: 'en',
},
],
});
const ChangeLanguageList = () => {
let client = getDeviceWidth();
if (client <= 400) {
languageList.list[0].label = '中文';
}
};
ChangeLanguageList();
const getLang = computed(() => {
{
if (locale.value == 'cn') {
let client = getDeviceWidth();
if (client <= 400) {
return '中文';
}
return '简体中文';
} else {
return 'English';
}
}
});
const changeLanguage = () => {
if (locale.value == 'cn') {
locale.value = 'en';
} else {
locale.value = 'cn';
}
};
const choseLang = () => {
selectStatus.value = !selectStatus.value;
};
return () => (
<div
class={[
'custom-select-language',
selectStatus.value ? 'language-active' : '',
]}
onClick={choseLang}
>
<span class="language-icon">
<Language></Language>
</span>
<span class="active-text">{getLang.value}</span>
<div class="position-select" v-show={selectStatus.value}>
{languageList.list.map((item: any) => (
<div
class="value"
onClick={changeLanguage}
v-show={item.value != locale.value}
>
<span class="language-icon">
<Language></Language>
</span>
<span class="text">{item.label}</span>
</div>
))}
</div>
</div>
);
},
});
src/components/button/index.less 0 → 100644
.custom-global-button {
border: 1px solid #544fa1;
border-radius: 30px;
height: 39px;
padding: 0 40px;
cursor: pointer;
background: transparent;
font-weight: 500;
font-size: 16px;
color: #544fa1;
outline: none;
}
src/components/button/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
export default defineComponent({
props: {
value: String,
},
setup(props) {
return () => <button class="custom-global-button">{props.value}</button>;
},
});
src/language/cn.ts 0 → 100644
const cn = {
layout: {
Home: '首页',
raffle: '抽奖',
lp: 'LP扫描挖矿',
},
header: {
connect: '连接',
connectWallet: '连接钱包',
},
raffle: {
MyBlindBox: '我的盲盒',
BlindBoxactivity: '盲盒活动',
inprogress: '进行中',
unfinish: '未完成',
losingLottery: '未中奖',
Ballot: '中签',
Finished: '已完成',
PurchaseCountdown: '购买倒计时',
day: '天',
hour: '时',
minute: '分',
second: '秒',
price: '价格',
NumberBuyers: '购买人数',
},
button: {
back: '返回',
},
};
export default cn;
src/language/en.ts 0 → 100644
const en = {
layout: {
Home: 'Home',
raffle: 'raffle',
lp: 'LP Scan Mining',
},
header: {
connect: 'Connect',
connectWallet: 'Connect',
},
raffle: {
MyBlindBox: 'My Blind Box',
BlindBoxactivity: 'Blind box activity',
inprogress: 'underway',
unfinish: 'Unfinish',
losingLottery: 'losing lottery',
Ballot: 'Winning Lottery',
Finished: 'Finished',
PurchaseCountdown: 'Purchase Countdown',
day: 'Day',
hour: 'Hour',
minute: 'Minute',
second: 'Second',
price: 'Price',
NumberBuyers: 'Number of buyers',
},
button: {
back: 'Back',
},
};
export default en;
src/language/index.ts 0 → 100644
import { createI18n } from 'vue-i18n';
import cn from './cn';
import en from './en';
// 判断语言--本地优先--第一次打开根据浏览器语言判断
const getLanguage = () => {
try {
let lan = localStorage.getItem('lang');
let curLang = '';
if (navigator.language === 'zh-CN' || navigator.language === 'zh-TW') {
curLang = 'cn';
} else if (navigator.language == 'en') {
curLang = 'en';
} else if (lan) {
curLang = lan;
} else {
curLang = 'en';
}
return curLang;
} catch (e) {
return 'cn';
}
};
const i18n = createI18n({
legacy: false,
locale: getLanguage(),
messages: {
cn,
en,
},
});
export default i18n;
src/layout/FoxWallet/index.less 0 → 100644
.custom-fox-wallet-box {
height: 39px;
background: rgba(175, 98, 163, 0.08);
border-radius: 30px;
padding: 0 12px;
display: flex;
align-items: center;
font-weight: 500;
font-size: 14px;
color: #af62a3;
cursor: pointer;
user-select: none;
white-space: nowrap;
.icon {
img {
width: 29px;
height: 29px;
}
}
& > * {
display: flex;
align-items: center;
margin: 0 6px;
}
}
src/layout/FoxWallet/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
import ConnectFox from '@/assets/svg/header/connectFox.svg';
import { useFoxDialog } from '@/store/dialog';
import { useFoxWallet } from '@/store/FoxWallet';
import Foxwallet from '@/components/Foxwallet';
import { getDeviceWidth, getCurrentDevice } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
export default defineComponent({
setup(props) {
const { $state: foxDialog } = useFoxDialog();
// 钱包地址
const { $state: userAddress } = useFoxWallet();
const imgs = {
ConnectedSvg: new URL(
'@/assets/svg/header/connected.svg',
import.meta.url
).href,
};
const { t } = useI18n();
const openDialog = () => {
foxDialog.dialog = !foxDialog.dialog;
};
const getText = () => {
if (!userAddress.address) {
if (getDeviceWidth() <= 400) {
return t('header.connect');
}
return t('header.connectWallet');
} else {
// 已连接
return userAddress.MaskAddress;
}
};
return () => (
<div>
{getCurrentDevice() && userAddress.address ? (
<img src={imgs.ConnectedSvg} alt="" />
) : (
<div class="custom-fox-wallet-box" onClick={openDialog}>
<div class="icon">
{userAddress.address ? (
<img src={imgs.ConnectedSvg} alt="" />
) : (
<ConnectFox></ConnectFox>
)}
</div>
<div class="text">{getText()}</div>
</div>
)}
<Foxwallet></Foxwallet>
</div>
);
},
});
src/layout/content.vue 0 → 100644
<template>
<main class="">
<router-view></router-view>
</main>
</template>
<script lang="ts" setup></script>
<style lang="less"></style>
src/layout/footer.vue 0 → 100644
<template>
<div class=""></div>
</template>
<script lang="ts" setup></script>
<style lang="less"></style>
src/layout/index.less 0 → 100644
@import '@/style/color.less';
.custom-nav {
position: relative;
.custom-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 500;
pointer-events: none;
user-select: none;
}
.custom-header {
height: 64px;
border-bottom: 1px solid #eaeaea;
padding: 0 12px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.header-left {
display: flex;
align-items: center;
.custom-systole-tab-icon {
cursor: pointer;
}
.custom-web-logo {
margin-left: 12px;
}
}
.header-right {
display: flex;
align-items: center;
& > * {
margin: 0 12px;
}
}
}
}
.custom-tabs {
display: flex;
height: calc(100vh - 64px);
box-sizing: border-box;
.custom-tab-nav {
width: 240px;
padding: 12px 0;
border-right: 1px solid #eaeaea;
transition: all 0.3s;
box-sizing: border-box;
.nav-item {
height: 48px;
display: flex;
align-items: center;
cursor: pointer;
white-space: nowrap;
.default-line,
.line {
width: 4px;
height: 100%;
}
.line {
background: #544fa1;
}
.nav-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
transition: all 0.3s;
svg {
fill: #a5a5a5;
margin: 0 6px;
}
.nav-text {
color: #a5a5a5;
font-weight: 400;
font-size: 14px;
}
}
.nav-icon-active {
background: #f9f9f9;
transition: all 0.3s;
svg {
fill: #544fa1;
}
.nav-text {
color: #000000;
}
}
}
.disable {
cursor: not-allowed;
}
}
.custom-close-nav {
width: 40px;
transition: all 0.3s;
}
.custom-content {
flex: 1;
overflow-y: auto;
z-index: 1000;
}
}
@media (max-device-width: @max-device-width-1) {
.custom-tabs {
position: relative;
.custom-tab-nav {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 2000;
user-select: none;
padding: 0;
border: none;
.nav-item-fa {
width: 50%;
height: 100%;
background: #ffffff;
}
}
.mobile-nav-mask {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 2000;
}
.custom-close-nav {
width: 0;
}
}
.header-right {
.custom-select-language {
width: auto;
padding: 0 12px;
.active-text {
padding-left: 6px;
}
}
}
}
src/layout/index.tsx 0 → 100644
import { computed, defineComponent, ref } from 'vue';
import './index.less';
import TabsSvg from '@/assets/svg/header/tab.svg';
import LogoSvg from '@/assets/logo.svg';
import HomeSvg from '@/assets/svg/header/home.svg';
import RaffleSvg from '@/assets/svg/header/raffle.svg';
import LpSvg from '@/assets/svg/header/lp.svg';
import { RouterView, useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import SelectLanguage from '@/components/SelectLanguage';
import FoxWallet from './FoxWallet';
import { getCurrentDevice } from '@/utils/tool';
export default defineComponent({
setup(props) {
let navStatusKey = 'navstatus';
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
// 当前路由
const currentRoute = ref<string>(route.path);
// 文字要加个延迟显示
const navTextShow = ref<boolean>(false);
// 获取nav默认状态
const getNavDefaultStatus = () => {
// 还需判断是否为手机端
let is_mobile = getCurrentDevice();
if (is_mobile) {
navTextShow.value = false;
return 'close';
}
let status = window.localStorage.getItem(navStatusKey);
if (status) {
if (status == 'open') {
navTextShow.value = true;
} else {
navTextShow.value = false;
}
return status;
}
return 'open';
};
// nav当前状态-默认展开
const navStatus = ref<string>(getNavDefaultStatus());
const tabOptions = computed(() => [
{
icon: <HomeSvg></HomeSvg>,
label: t('layout.Home'),
value: '/',
disable: true,
},
{
icon: <RaffleSvg></RaffleSvg>,
label: t('layout.raffle'),
value: '/raffle',
disable: false,
},
{
icon: <LpSvg></LpSvg>,
label: t('layout.lp'),
value: '/lp',
disable: true,
},
]);
const backImg = new URL('@/assets/img/body.png', import.meta.url).href;
// 切换导航栏展示形式
const changeNavStatus = () => {
if (navStatus.value == 'open') {
navStatus.value = 'close';
navTextShow.value = false;
} else {
navStatus.value = 'open';
setTimeout(() => {
navTextShow.value = true;
}, 100);
}
// 存到本地
window.localStorage.setItem(navStatusKey, navStatus.value);
};
// 关闭nav
const CloseMask = () => {
navStatus.value = 'close';
navTextShow.value = false;
};
const NavChange = (item: any) => {
if (item.disable) {
return;
}
navStatus.value = 'open';
setTimeout(() => {
navTextShow.value = true;
}, 100);
currentRoute.value = item.value;
router.push({
path: item.value,
});
};
return () => (
<header class="custom-nav">
<img class="custom-background" src={backImg} alt="" />
<div class="custom-header">
<div class="header-left">
<span
class="custom-systole-tab-icon"
onClick={changeNavStatus.bind(this)}
>
<TabsSvg></TabsSvg>
</span>
<div class="custom-web-logo">
<LogoSvg></LogoSvg>
</div>
</div>
<div class="header-right">
<SelectLanguage></SelectLanguage>
<FoxWallet></FoxWallet>
</div>
</div>
<div class="custom-tabs">
<div
class={[
'custom-tab-nav',
navStatus.value == 'close' ? 'custom-close-nav' : '',
]}
>
<div class="nav-item-fa">
{tabOptions.value.map((item: any) => (
<div
class={['nav-item', item.disable ? 'disable' : '']}
onClick={NavChange.bind(this, item)}
>
<div
v-show={navStatus.value == 'open'}
class={[
currentRoute.value == item.value ? 'line' : '',
'default-line',
]}
></div>
<div
class={[
'nav-icon',
currentRoute.value == item.value ? 'nav-icon-active' : '',
]}
>
{item.icon}
<span
class="nav-text"
v-show={navStatus.value == 'open' && navTextShow.value}
>
{item.label}
</span>
</div>
</div>
))}
{getCurrentDevice() ? (
<div class="mobile-nav-mask" onClick={CloseMask}></div>
) : (
''
)}
</div>
</div>
<div class="custom-content custom-scrollbar">
<RouterView></RouterView>
</div>
</div>
</header>
);
},
});
src/main.ts 0 → 100644
import { createApp } from 'vue';
import './style/style.css';
import App from './App.vue';
import router from './router';
import i18n from './language';
import { createPinia } from 'pinia';
import Tdesign from './utils/Tdesign';
let app = createApp(App);
app.use(router);
app.use(i18n);
app.use(Tdesign);
app.use(createPinia());
app.mount('#app');
src/pages/home/index.vue 0 → 100644
<template>
<div class="">HOME</div>
</template>
<script lang="ts" setup></script>
<style lang="less"></style>
src/pages/lp/index.vue 0 → 100644
<template>
<div class="">lp</div>
</template>
<script lang="ts" setup></script>
<style lang="less"></style>
src/pages/raffle/components/Activity/index.less 0 → 100644
.custom-activity-box {
.header {
border-bottom: 2px solid #e9e9e9;
transform: rotate(0.06deg);
padding-bottom: 20px;
.blind-box-head {
font-weight: 500;
font-size: 30px;
display: flex;
align-items: center;
justify-content: space-between;
.custom-right-button {
white-space: nowrap;
& > :first-child {
margin-right: 20px;
}
}
}
}
.custom-activity-content {
margin-top: 30px;
.custom-activity-content-cl {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 16px;
& > * {
width: 32%;
}
}
}
}
src/pages/raffle/components/Activity/index.tsx 0 → 100644
import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import Card from '../card';
import ActivityDetail from '../ActivityDetail';
import { getCurrentDevice } from '@/utils/tool';
export default defineComponent({
props: {
modelValue: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const { t } = useI18n();
// 当前是否打开详情页面
const isDetailPage = ref(false);
const activityList = reactive({
list: [
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '1',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 0,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '2',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 1,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '3',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 2,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '4',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 3,
},
],
});
const onBack = () => {
emit('update:modelValue', 'mybox');
};
const onCardClick = (value: number) => {
// 打开详情
isDetailPage.value = true;
};
const backList = () => {
isDetailPage.value = !isDetailPage.value;
};
// 是否显示我的盲盒按钮
const isShow = computed(() => {
if (getCurrentDevice() && isDetailPage.value) {
return false;
}
return true;
});
return () => (
<div class="custom-activity-box">
<div class="header">
<div class="blind-box-head">
<span>{t('raffle.BlindBoxactivity')}</span>
<div class="custom-right-button">
<CustomButton
v-show={isDetailPage.value}
value={t('button.back')}
onClick={backList}
></CustomButton>
<CustomButton
value={t('raffle.MyBlindBox')}
v-show={isShow.value}
onClick={onBack}
></CustomButton>
</div>
</div>
</div>
<div class="custom-activity-content">
<div v-show={!isDetailPage.value} class="custom-activity-content-cl">
{activityList.list.map((item: any) => (
<Card
info={item}
Countdown={true}
onCardClick={onCardClick}
></Card>
))}
</div>
<div v-show={isDetailPage.value}>
<ActivityDetail></ActivityDetail>
</div>
</div>
</div>
);
},
});
src/pages/raffle/components/ActivityDetail/index.less 0 → 100644
.custom-card-detail {
width: 1000px;
padding: 30px;
box-sizing: border-box;
background: #ffffff;
border-radius: 10px;
.detail-head {
display: flex;
.detail-head-img {
margin-right: 40px;
img {
width: 350px;
height: 350px;
}
}
.detail-head-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-weight: 700;
font-size: 25px;
color: #000000;
}
.count-down-box {
.label {
font-weight: 400;
font-size: 18px;
color: #747474;
margin-bottom: 12px;
}
}
.price-and-buynum {
display: flex;
.price-box {
.label {
font-weight: 400;
font-size: 14px;
color: #747474;
}
.value {
font-weight: 700;
font-size: 22px;
color: #000000;
}
}
.margin {
margin-left: 20px;
}
}
.line {
border: 2px solid #f6f4f4;
transform: rotate(0.06deg);
}
.price-and-prize {
display: flex;
font-weight: 500;
font-size: 14px;
color: #544fa1;
& > :nth-child(2) {
margin-left: 16px;
}
}
.content-wallet-tooltip {
display: flex;
.connect-wallet {
height: 39px;
background: rgba(84, 79, 161, 0.08);
border-radius: 45px;
font-weight: 500;
font-size: 16px;
color: #544fa1;
border: none;
outline: none;
cursor: pointer;
padding: 0 34px;
white-space: nowrap;
}
.text {
font-weight: 500;
font-size: 12px;
color: #8c8c8c;
display: flex;
align-items: flex-end;
margin-left: 20px;
padding-bottom: 2px;
}
.open-link {
margin-left: auto;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
}
.content-line {
border: 2px solid #f6f4f4;
transform: rotate(0.06deg);
margin: 26px 0;
}
.custom-Rules {
.title {
font-weight: 500;
font-size: 18px;
color: #000000;
}
.value {
}
}
}
src/pages/raffle/components/ActivityDetail/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
import CustomCountDown from '../CountDown';
import OpenSvg from '@/assets/svg/raffle/open.svg';
import { useFoxDialog } from '@/store/dialog';
export default defineComponent({
setup(props) {
const testImg = new URL('@/assets/img/test.png', import.meta.url).href;
const testTime = 60000000;
const { $state: foxDialog } = useFoxDialog();
return () => (
<div class="custom-card-detail">
<div class="detail-head">
<div class="detail-head-img">
<img src={testImg} alt="" />
</div>
<div class="detail-head-content">
<div class="title">5人抽奖一人必中</div>
<div class="count-down-box">
<div class="label">购买倒计时</div>
<div class="value">
<CustomCountDown time={testTime}></CustomCountDown>
</div>
</div>
<div class="price-and-buynum">
<div class="price-box">
<div class="label">价格</div>
<div class="value">200 RESDAO</div>
</div>
<div class="price-box margin">
<div class="label">当前购买人数</div>
<div class="value">0/5</div>
</div>
</div>
<div class="line"></div>
<div class="price-and-prize">
<div>
<span>你将花费：</span>
200 RESDAO
</div>
<div>
<span class="text2">中奖可获得：</span>
600 RESDAO
</div>
</div>
<div class="content-wallet-tooltip">
<button class="connect-wallet">连接钱包</button>
<span class="text">提示：一次只能购买一次</span>
<div class="open-link">
<OpenSvg></OpenSvg>
</div>
</div>
</div>
</div>
<div class="content-line"></div>
<div class="custom-Rules">
<div class="title">规则</div>
<div class="value"></div>
</div>
</div>
);
},
});
src/pages/raffle/components/CountDown/index.less 0 → 100644
.custom-countdown-box {
display: flex;
.custom-count-time {
.time-child {
display: flex;
height: 35px;
.time-value {
width: 35px;
background: #000000;
border-radius: 5px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
margin: 0 8px;
}
.dot-box {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
& > * {
width: 5px;
height: 5px;
border-radius: 50%;
background: #575c63;
margin: 2px 0;
}
}
}
.time-label {
font-weight: 400;
font-size: 12px;
color: #747474;
margin: 2px 8px;
}
}
}
src/pages/raffle/components/CountDown/index.tsx 0 → 100644
import { defineComponent, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import './index.less';
export default defineComponent({
props: {
time: {
type: Number,
default: 0,
},
},
setup(props) {
const { t } = useI18n();
// 获取倒计时
const getCountDown = computed(() => {
let list: any = [
{
label: t('raffle.day'),
value: '00',
},
{
label: t('raffle.hour'),
value: '00',
},
{
label: t('raffle.minute'),
value: '00',
},
{
label: t('raffle.second'),
value: '00',
},
];
return list;
});
return () => (
<div class="custom-countdown-box">
{getCountDown.value.map((item: any, index: number) => (
<div class="custom-count-time">
<div class="time-child">
<div class="time-value">{item.value}</div>
{index != getCountDown.value.length - 1 ? (
<div class="dot-box">
<div></div>
<div></div>
</div>
) : (
''
)}
</div>
<div class="time-label">{item.label}</div>
</div>
))}
</div>
);
},
});
src/pages/raffle/components/card/index.less 0 → 100644
.custom-raffle-card {
background: #ffffff;
border-radius: 10px;
padding: 12px;
box-sizing: border-box;
.img {
width: 100%;
height: 280px;
border-radius: 10px;
}
.card-line-one {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
margin: 6px 0;
white-space: nowrap;
flex-wrap: wrap;
row-gap: 6px;
.left-introduction {
font-weight: 700;
font-size: 15px;
color: #000000;
}
.card-right-status {
height: 25px;
border-radius: 15px;
padding: 0 12px;
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
white-space: nowrap;
}
.status1 {
background: rgba(18, 185, 129, 0.1);
color: #12b981;
}
.status2 {
background: rgba(126, 126, 126, 0.1);
color: #7e7e7e;
}
.status3 {
background: rgba(240, 84, 81, 0.08);
color: #f05451;
}
}
.custom-card-countDown {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 6px;
.label {
font-weight: 400;
font-size: 13px;
color: #747474;
margin-bottom: 6px;
}
}
.card-line-two {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
white-space: nowrap;
flex-wrap: wrap;
row-gap: 6px;
.price {
.label {
font-weight: 400;
font-size: 13px;
color: #747474;
}
.value {
font-weight: 700;
font-size: 17px;
color: #000000;
}
}
.center {
display: flex;
align-items: center;
flex-direction: column;
}
.end {
.value {
color: #544fa1;
}
}
}
}
.pointer {
cursor: pointer;
}
src/pages/raffle/components/card/index.tsx 0 → 100644
import { computed, defineComponent, PropType } from 'vue';
import './index.less';
import CustomCountDown from '../CountDown';
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: {
info: {
type: Object as PropType<any>,
default: {},
},
showEnd: {
type: Boolean,
default: false,
},
Countdown: {
type: Boolean,
default: false,
},
},
emits: ['CardClick'],
setup(props, { emit }) {
const { t } = useI18n();
const curStauts = () => {
const { info } = props;
if (Object.keys(info).length) {
switch (info.status) {
case '1':
return t('raffle.inprogress');
case '2':
return t('raffle.unfinish');
case '3':
return t('raffle.losingLottery');
case '4':
return t('raffle.Ballot');
}
}
};
const getClass = () => {
const { info } = props;
if (Object.keys(info).length) {
switch (info.status) {
case '1':
return 'status1';
case '2':
return 'status2';
case '3':
return 'status3';
case '4':
return 'status1';
}
}
};
// 卡片点击事件
const CardClick = () => {
const { Countdown, info } = props;
if (!Countdown) {
return;
}
emit('CardClick', info.index);
};
return () => (
<div
class={['custom-raffle-card', props.Countdown ? 'pointer' : '']}
onClick={CardClick}
>
<img class="img" src={props.info.img} alt="" />
<div class="card-line-parent">
<div class="card-line-one">
<span class="left-introduction">{props.info.introduction}</span>
<div class={['card-right-status', getClass()]}>{curStauts()}</div>
</div>
{props.Countdown ? (
<div class="custom-card-countDown">
<div class="label">{t('raffle.PurchaseCountdown')}</div>
<div class="value">
<CustomCountDown time={props.info.countDown}></CustomCountDown>
</div>
</div>
) : (
''
)}
<div class="card-line-two">
<div class="price">
<div class="label">{t('raffle.price')}</div>
<div class="value">{props.info.price} RESDAO</div>
</div>
<div class="price center">
<div class="label">{t('raffle.NumberBuyers')}</div>
<div class="value">{props.info.buyersNum}</div>
</div>
<div class="price end" v-show={props.showEnd}>
<div class="label">中奖可得</div>
<div class="value">{props.info.canObtain}$</div>
</div>
</div>
</div>
</div>
);
},
});
src/pages/raffle/components/myraffle/index.less 0 → 100644
.custom-my-blind-box {
.header {
.blind-box-head {
font-weight: 500;
font-size: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.my-blind-box-content {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 16px;
& > * {
width: 32%;
}
}
}
src/pages/raffle/components/myraffle/index.tsx 0 → 100644
import { computed, defineComponent, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import RadioGroup from '@/components/RadioGroup';
import Loading from '@/components/Loading';
import Card from '../card';
export default defineComponent({
props: {
modelValue: String,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const { t } = useI18n();
// 当前展示的模块
const myboxType = ref('0');
//
const loading = ref(false);
/**
* 进行中1
* 未完成2
* 未中奖3
* 中签4
*/
const myblindBoxList = reactive({
list: [
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '1',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '2',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '3',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '4',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
],
});
// 是否显示可中签价值
const isShowEnd = ref(false);
const btnOptions = computed(() => [
{
label: t('raffle.inprogress'),
value: '0',
},
{
label: t('raffle.unfinish'),
value: '1',
},
{
label: t('raffle.Finished'),
value: '2',
},
]);
const onBack = () => {
emit('update:modelValue', 'activity');
};
return () => (
<div class="custom-my-blind-box">
<div class="header">
<div class="blind-box-head">
<span>{t('raffle.MyBlindBox')}</span>
<CustomButton
value={t('button.back')}
onClick={onBack}
></CustomButton>
</div>
<RadioGroup
v-model={myboxType.value}
options={btnOptions.value}
></RadioGroup>
</div>
<div class="my-blind-box-content">
{myblindBoxList.list.map((item: any) => (
<Card info={item} showEnd={isShowEnd.value}></Card>
))}
<Loading v-show={loading.value}></Loading>
</div>
</div>
);
},
});
src/pages/raffle/index.vue 0 → 100644
<template>
<div class="custom-raffle-box">
<div v-show="current == 'activity'">
<Activity v-model="current"></Activity>
</div>
<div v-show="current == 'mybox'">
<Myraffle v-model="current"></Myraffle>
</div>
</div>
</template>
<script lang="ts" setup>
import Myraffle from './components/myraffle';
import Activity from './components/Activity';
import { ref } from 'vue';
const current = ref('activity');
</script>
<style lang="less">
@import './media.less';
// 一个页面一个媒体查询
.custom-raffle-box {
width: 1000px;
margin: 30px auto 20px auto;
height: 100%;
}
</style>
src/pages/raffle/media.less 0 → 100644
@import '@/style/color.less';
@media (max-device-width: @max-device-width-1) {
.custom-raffle-box {
width: 100% !important;
box-sizing: border-box;
padding: 0 12px;
margin: 20px auto 0 auto !important;
.header {
border-bottom: none;
.custom-right-button {
& > :first-child {
margin-right: 0 !important;
}
}
}
.custom-activity-content {
.custom-activity-content-cl {
& > * {
width: 100%;
}
.card-line-two {
& > :nth-child(2) {
align-items: flex-start;
}
}
}
.custom-card-detail {
width: 100%;
.detail-head {
display: block;
.detail-head-img {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.detail-head-content {
.title {
text-align: center;
font-size: 22px;
margin: 12px 0;
}
.count-down-box {
.label {
text-align: center;
}
.value {
display: flex;
justify-content: center;
}
}
.price-and-buynum {
justify-content: space-between;
.price-box {
.label {
margin: 12px 0 6px 0;
}
.value {
font-size: 18px;
}
}
}
.line {
border: 1px solid #f6f4f4;
margin: 12px 0;
}
.price-and-prize {
white-space: nowrap;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 6px;
margin-bottom: 12px;
& > :last-child {
margin: 0;
.text2 {
color: #747474;
}
}
}
.content-wallet-tooltip {
display: block;
.connect-wallet {
width: 100%;
}
.text {
margin: 16px 0;
}
.open-link {
display: none;
}
}
}
.content-line {
border: 1px solid #eaeaea;
margin: 0 0 12px 0;
}
}
}
}
.custom-my-blind-box {
.custom-radio-group {
width: 100%;
display: flex;
justify-content: space-between;
white-space: nowrap;
& > * {
width: 33%;
display: flex;
justify-content: center;
align-items: center;
}
}
.my-blind-box-content {
.custom-raffle-card {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.img {
width: 130px;
height: 130px;
}
.card-line-parent {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 12px;
height: 100%;
.card-line-one {
margin: 0;
.left-introduction {
margin-right: 12px;
}
}
.card-line-two {
& > :nth-child(1) {
margin-right: 12px;
}
& > :nth-child(2) {
align-items: flex-start;
}
}
}
}
}
}
}
src/router/index.ts 0 → 100644
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const defaultRouterList: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('@/layout'),
children: [
{
path: '/',
name: 'HomeChild',
component: () => import('@/pages/home/index.vue'),
beforeEnter: (to: any, from: any, next) => {
next('/raffle');
},
},
// raffle - 抽奖
{
path: '/raffle',
name: 'raffle',
component: () => import('@/pages/raffle/index.vue'),
},
// lp扫描
{
path: '/lp',
name: 'lp',
component: () => import('@/pages/lp/index.vue'),
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes: defaultRouterList,
scrollBehavior() {
return {
el: '#app',
top: 0,
behavior: 'smooth',
};
},
});
export default router;
src/store/FoxWallet.ts 0 → 100644
import { defineStore } from 'pinia';
export const useFoxWallet = defineStore('FoxWallet', {
state: () => {
return {
address: '',
MaskAddress: '',
};
},
});
src/store/dialog.ts 0 → 100644
import { defineStore } from 'pinia';
export const useFoxDialog = defineStore('FoxDialog', {
state: () => {
return {
dialog: false,
};
},
});
src/style/color.less 0 → 100644
@global-color-1: #544fa1;
@max-device-width-1: 500px;
src/style/style.css 0 → 100644
body {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
background-color: rgba(0, 0, 0, 0.1);
}
src/utils/Tdesign.ts 0 → 100644
import { Dialog as TDialog } from 'tdesign-vue-next';
const components = [TDialog];
// 无法循环挂载的组件--单独拎出来
const oncomponents = [];
export default {
install(app: any) {
components.forEach((component, index) => {
app.component(component.name, component);
});
// app.component('t-table', oncomponents[0]);
// app.component('t-icon', oncomponents[1]);
},
};
src/utils/tool.ts 0 → 100644
// 判断当前设备是否为手机
export const getCurrentDevice = () => {
let userAgent = window.navigator.userAgent;
if (userAgent) {
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
userAgent
)
) {
// 是手机端
return true;
}
return false;
}
};
// 获取屏幕宽度
export const getDeviceWidth = () => {
try {
let width = document.documentElement.clientWidth;
if (width) {
return width;
}
return 0;
} catch (e) {
return 0;
}
};
src/vite-env.d.ts 0 → 100644
/// <reference types="vite/client" />
tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"node_modules/tdesign-vue-next/global.d.ts"
],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json 0 → 100644
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
import { defineConfig } from 'vite';
import createVuePlugin from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import viteCompression from 'vite-plugin-compression';
import path from 'path';
export default defineConfig(({ command, mode }) => {
// 获取打包时间--
let date = new Date();
let newDate = `${date.getFullYear()}-${
date.getMonth() + 1
}-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`;
let api = 1 ? 'http://mxcus.net' : 'http://snow.test';
return {
base: '/',
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [createVuePlugin(), vueJsx(), svgLoader(), viteCompression()],
server: {
port: 3008,
host: '0.0.0.0',
proxy: {
'/api': api,
},
},
build: {
minify: 'terser', // 混淆器，terser构建后文件体积更小
outDir: `bliendBox-web-${newDate}`, //指定输出路径
cssCodeSplit: false, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
// drop_debugger: true,
},
output: {
// 去掉注释内容
comments: true,
},
},
rollupOptions: {
output: {
manualChunks: {
// 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。
vue: ['vue', 'vue-router', 'vuex'],
// echarts: ['echarts'],
},
},
},
},
};
});
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