mac
12 months ago
commit
ee066ed5aa
88 changed files with 24611 additions and 0 deletions
-
23.gitignore
-
24README.md
-
5babel.config.js
-
19jsconfig.json
-
12111package-lock.json
-
52package.json
-
BINpublic/buzzup 16.15.16.ico
-
BINpublic/favicon.ico
-
17public/index.html
-
139src/App.vue
-
BINsrc/assets/fonts/Rowdies.ttf
-
BINsrc/assets/imgs/Alan.png
-
BINsrc/assets/imgs/Allen.png
-
BINsrc/assets/imgs/ChainOn.png
-
BINsrc/assets/imgs/Chan.png
-
BINsrc/assets/imgs/FileFast.png
-
BINsrc/assets/imgs/Mask.png
-
BINsrc/assets/imgs/SUBSCRIBE-btn.png
-
BINsrc/assets/imgs/SUBSCRIBE.png
-
BINsrc/assets/imgs/Titan.png
-
BINsrc/assets/imgs/a-stroe.png
-
BINsrc/assets/imgs/aboutus-h5.png
-
BINsrc/assets/imgs/aboutus.png
-
BINsrc/assets/imgs/active-hexagon.png
-
BINsrc/assets/imgs/android-btn-e.png
-
BINsrc/assets/imgs/android-btn.png
-
BINsrc/assets/imgs/android.png
-
BINsrc/assets/imgs/arrow-down.png
-
BINsrc/assets/imgs/astore-btn-e.png
-
BINsrc/assets/imgs/astore-btn.png
-
BINsrc/assets/imgs/banner-icon1.png
-
BINsrc/assets/imgs/banner-icon2.png
-
BINsrc/assets/imgs/banner-icon3.png
-
BINsrc/assets/imgs/banner-icon4.png
-
BINsrc/assets/imgs/buzzup.ico
-
BINsrc/assets/imgs/chat.png
-
BINsrc/assets/imgs/close.png
-
BINsrc/assets/imgs/dash-col1.png
-
BINsrc/assets/imgs/dash-col2.png
-
BINsrc/assets/imgs/dash-line1.png
-
BINsrc/assets/imgs/dash-line2.png
-
BINsrc/assets/imgs/dash-line3.png
-
BINsrc/assets/imgs/dashline.png
-
BINsrc/assets/imgs/exp.png
-
BINsrc/assets/imgs/facebook.png
-
BINsrc/assets/imgs/folder.png
-
BINsrc/assets/imgs/g-store.png
-
BINsrc/assets/imgs/gstore-btn-e.png
-
BINsrc/assets/imgs/gstore-btn.png
-
BINsrc/assets/imgs/homgpage-phone.png
-
BINsrc/assets/imgs/inapp.png
-
BINsrc/assets/imgs/instagram.png
-
BINsrc/assets/imgs/large-logo.png
-
BINsrc/assets/imgs/linkedin-round.png
-
BINsrc/assets/imgs/linkedin.png
-
BINsrc/assets/imgs/logo.png
-
BINsrc/assets/imgs/menu.png
-
BINsrc/assets/imgs/middle-logo.png
-
BINsrc/assets/imgs/next.png
-
BINsrc/assets/imgs/phone-banner-1.png
-
BINsrc/assets/imgs/phone-banner-2.png
-
BINsrc/assets/imgs/phone-banner-3.png
-
BINsrc/assets/imgs/phone-banner.png
-
BINsrc/assets/imgs/question.png
-
BINsrc/assets/imgs/security.png
-
BINsrc/assets/imgs/telegram.png
-
BINsrc/assets/imgs/twitter.png
-
BINsrc/assets/imgs/unactive-hexagon.png
-
BINsrc/assets/imgs/wallet.png
-
BINsrc/assets/imgs/web3.png
-
520src/components/Foot.vue
-
479src/components/Head.vue
-
30src/components/download-btn.vue
-
32src/http/axios_config.js
-
50src/http/service.js
-
20src/http/sign.js
-
38src/http/sort.js
-
395src/i18n.js
-
14src/main.js
-
806src/pages/AboutUs.vue
-
257src/pages/Blog.vue
-
128src/pages/Detail.vue
-
1857src/pages/HomePage.vue
-
733src/pages/Support.vue
-
23src/router.js
-
299src/styles/global.scss
-
4vue.config.js
-
6536yarn.lock
@ -0,0 +1,23 @@ |
|||||
|
.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? |
||||
@ -0,0 +1,24 @@ |
|||||
|
# z-project |
||||
|
|
||||
|
## 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/). |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "es5", |
||||
|
"module": "esnext", |
||||
|
"baseUrl": "./", |
||||
|
"moduleResolution": "node", |
||||
|
"paths": { |
||||
|
"@/*": [ |
||||
|
"src/*" |
||||
|
] |
||||
|
}, |
||||
|
"lib": [ |
||||
|
"esnext", |
||||
|
"dom", |
||||
|
"dom.iterable", |
||||
|
"scripthost" |
||||
|
] |
||||
|
} |
||||
|
} |
||||
12111
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,52 @@ |
|||||
|
{ |
||||
|
"name": "BUZZUP", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"ant-design-vue": "^4.2.3", |
||||
|
"axios": "^1.7.2", |
||||
|
"core-js": "^3.8.3", |
||||
|
"js-md5": "^0.8.3", |
||||
|
"vue": "^3.2.13", |
||||
|
"vue-i18n": "^10.0.0-beta.1", |
||||
|
"vue-router": "^4.3.3" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.12.16", |
||||
|
"@babel/eslint-parser": "^7.12.16", |
||||
|
"@vue/cli-plugin-babel": "~5.0.0", |
||||
|
"@vue/cli-plugin-eslint": "~5.0.0", |
||||
|
"@vue/cli-service": "~5.0.0", |
||||
|
"eslint": "^7.32.0", |
||||
|
"eslint-plugin-vue": "^8.0.3", |
||||
|
"sass": "^1.77.5", |
||||
|
"sass-loader": "^14.2.1" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/vue3-essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "@babel/eslint-parser" |
||||
|
}, |
||||
|
"rules": { |
||||
|
"vue/multi-word-component-names": "off" |
||||
|
} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not dead", |
||||
|
"not ie 11" |
||||
|
] |
||||
|
} |
||||
|
After Width: 213 | Height: 149 | Size: 7.2 KiB |
@ -0,0 +1,17 @@ |
|||||
|
<!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"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>buzzup.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> |
||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class="app"> |
||||
|
<div class="box"> |
||||
|
|
||||
|
<Head></Head> |
||||
|
<router-view></router-view> |
||||
|
<Foot></Foot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Head from './components/Head.vue' |
||||
|
import Foot from './components/Foot.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components: { |
||||
|
Head, Foot |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
a { |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "MyFont"; |
||||
|
src: url("./assets/fonts/Rowdies.ttf") format("truetype"); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: MyFont; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
.flex-col-sb { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.flex-col-center { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.flex-sb { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.flex-center { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.app { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
.box { |
||||
|
max-width: 940px; |
||||
|
width: 100%; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle { |
||||
|
border-radius: 22px; |
||||
|
box-sizing: border-box; |
||||
|
border: 5px solid #000000; |
||||
|
box-shadow: 0px 1.5px 3px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
.box { |
||||
|
max-width: 1400px; |
||||
|
width: 100%; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle { |
||||
|
border-radius: 40px; |
||||
|
box-sizing: border-box; |
||||
|
border: 8px solid #000000; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 1000px) { |
||||
|
.box { |
||||
|
max-width: 360px; |
||||
|
width: 100%; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle { |
||||
|
border-radius: 12px; |
||||
|
box-sizing: border-box; |
||||
|
border: 5px solid #000000; |
||||
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
box-sizing: border-box; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 238 | Height: 238 | Size: 65 KiB |
|
After Width: 238 | Height: 238 | Size: 48 KiB |
|
After Width: 317 | Height: 123 | Size: 17 KiB |
|
After Width: 238 | Height: 238 | Size: 76 KiB |
|
After Width: 207 | Height: 207 | Size: 19 KiB |
|
After Width: 238 | Height: 238 | Size: 56 KiB |
|
After Width: 418 | Height: 96 | Size: 3.1 KiB |
|
After Width: 418 | Height: 96 | Size: 5.8 KiB |
|
After Width: 348 | Height: 96 | Size: 20 KiB |
|
After Width: 46 | Height: 46 | Size: 751 B |
|
After Width: 377 | Height: 110 | Size: 20 KiB |
|
After Width: 473 | Height: 752 | Size: 32 KiB |
|
After Width: 76 | Height: 85 | Size: 2.0 KiB |
|
After Width: 259 | Height: 100 | Size: 4.5 KiB |
|
After Width: 259 | Height: 100 | Size: 2.2 KiB |
|
After Width: 43 | Height: 50 | Size: 582 B |
|
After Width: 14 | Height: 8 | Size: 268 B |
|
After Width: 259 | Height: 100 | Size: 4.6 KiB |
|
After Width: 259 | Height: 100 | Size: 2.0 KiB |
|
After Width: 121 | Height: 121 | Size: 4.8 KiB |
|
After Width: 121 | Height: 121 | Size: 4.5 KiB |
|
After Width: 121 | Height: 121 | Size: 4.4 KiB |
|
After Width: 121 | Height: 121 | Size: 5.4 KiB |
|
After Width: 213 | Height: 149 | Size: 7.2 KiB |
|
After Width: 91 | Height: 91 | Size: 1.4 KiB |
|
After Width: 58 | Height: 65 | Size: 1.7 KiB |
|
After Width: 9 | Height: 37 | Size: 307 B |
|
After Width: 9 | Height: 37 | Size: 307 B |
|
After Width: 343 | Height: 48 | Size: 1.4 KiB |
|
After Width: 343 | Height: 48 | Size: 1.4 KiB |
|
After Width: 5 | Height: 1390 | Size: 403 B |
|
After Width: 66 | Height: 5 | Size: 128 B |
|
After Width: 210 | Height: 240 | Size: 6.1 KiB |
|
After Width: 47 | Height: 46 | Size: 627 B |
|
After Width: 91 | Height: 91 | Size: 1.1 KiB |
|
After Width: 39 | Height: 43 | Size: 475 B |
|
After Width: 259 | Height: 100 | Size: 4.3 KiB |
|
After Width: 259 | Height: 100 | Size: 2.5 KiB |
|
After Width: 442 | Height: 906 | Size: 72 KiB |
|
After Width: 210 | Height: 240 | Size: 6.6 KiB |
|
After Width: 47 | Height: 47 | Size: 859 B |
|
After Width: 339 | Height: 311 | Size: 13 KiB |
|
After Width: 47 | Height: 47 | Size: 662 B |
|
After Width: 47 | Height: 47 | Size: 661 B |
|
After Width: 243 | Height: 75 | Size: 6.1 KiB |
|
After Width: 58 | Height: 65 | Size: 1.5 KiB |
|
After Width: 206 | Height: 144 | Size: 7.3 KiB |
|
After Width: 17 | Height: 31 | Size: 393 B |
|
After Width: 280 | Height: 555 | Size: 79 KiB |
|
After Width: 317 | Height: 633 | Size: 106 KiB |
|
After Width: 280 | Height: 555 | Size: 72 KiB |
|
After Width: 866 | Height: 633 | Size: 258 KiB |
|
After Width: 98 | Height: 98 | Size: 1.7 KiB |
|
After Width: 89 | Height: 99 | Size: 1.6 KiB |
|
After Width: 47 | Height: 47 | Size: 697 B |
|
After Width: 47 | Height: 47 | Size: 699 B |
|
After Width: 76 | Height: 85 | Size: 1.9 KiB |
|
After Width: 101 | Height: 91 | Size: 1.1 KiB |
|
After Width: 210 | Height: 240 | Size: 5.5 KiB |
@ -0,0 +1,520 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="desktop-box"> |
||||
|
<div class="foot-download-box boxStyle"> |
||||
|
<div class="flex-col-sb"> |
||||
|
<div class="download-t-text"> |
||||
|
{{ $t("Start Your Decentralized Web3") }} |
||||
|
</div> |
||||
|
<div class="flex-center"> |
||||
|
<a href="https://apk.buzz-up.io/app-release.apk" target="_blank"> |
||||
|
<img |
||||
|
class="download-btn" |
||||
|
src="../assets/imgs/android-btn-e.png" |
||||
|
/> |
||||
|
<!-- <div class="download-btn-box"> |
||||
|
<img class="download-btn" src="../assets/imgs/android-btn.png"> |
||||
|
<div class="download-text">{{ $t("Andriod") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
<a |
||||
|
href="https://play.google.com/store/apps/details?id=io.chainon.lsyim" |
||||
|
target="#" |
||||
|
> |
||||
|
<img class="download-btn" src="../assets/imgs/gstore-btn-e.png" /> |
||||
|
<!-- <div class="download-btn-box"><img class="download-btn" src="../assets/imgs/gstore-btn.png"> |
||||
|
<div class="download-text">{{ $t("Get Playstore") }}</div> |
||||
|
<div class="download-text">{{ $t("Play store") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
<a href="https://apps.apple.com/app/6479512180" target="_blank"> |
||||
|
<img class="download-btn" src="../assets/imgs/astore-btn-e.png" /> |
||||
|
<!-- <div class="download-btn-box"> |
||||
|
<img class="download-btn" src="../assets/imgs/astore-btn.png"> |
||||
|
<div class="download-text">{{ $t("app store") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img class="large-logo" src="../assets/imgs/large-logo.png" /> |
||||
|
</div> |
||||
|
<div class="foot-box"> |
||||
|
<div class="foot-box-left"> |
||||
|
<img class="logo" src="../assets/imgs/logo.png" /> |
||||
|
<div class="icon-box"> |
||||
|
<a href="https://x.com/buzzup_io" target="_blank"> |
||||
|
<img class="icon" src="../assets/imgs/twitter.png" /> |
||||
|
</a> |
||||
|
<!-- <a href=""> --> |
||||
|
<img class="icon" src="../assets/imgs/telegram.png" /> |
||||
|
<!-- </a> --> |
||||
|
<a href="https://www.linkedin.com/in/buzzup-io" target="_blank"> |
||||
|
<img class="icon" src="../assets/imgs/linkedin.png" /> |
||||
|
</a> |
||||
|
|
||||
|
<a |
||||
|
href="https://www.facebook.com/HKEsportGA?mibextid=LQQJ4d" |
||||
|
target="_blank" |
||||
|
> |
||||
|
<!-- <a href="https://www.facebook.com/HKEsportGA?mibextid=LQQJ4d"> --> |
||||
|
<img class="icon" src="../assets/imgs/facebook.png" /> |
||||
|
</a> |
||||
|
<a href="https://www.instagram.com/buzzup_hk/" target="_blank"> |
||||
|
<!-- <a href="https://www.instagram.com/buzzup_hk?igsh=aW04b3IwZTR6enc2&utm_source=qr"> --> |
||||
|
<img class="icon" src="../assets/imgs/instagram.png" /> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="txt">{{ $t("Terms of Use") }}</div> |
||||
|
</div> |
||||
|
<div class="foot-box-right"> |
||||
|
<div class="box-right-item1"> |
||||
|
<div class="tips" @click="navigateTo('about')"> |
||||
|
{{ $t("About Us") }} |
||||
|
</div> |
||||
|
<div class="tips" @click="navigateTo('blog')">{{ $t("Blog") }}</div> |
||||
|
<div class="tips" @click="navigateTo('support')"> |
||||
|
{{ $t("Support") }} |
||||
|
</div> |
||||
|
<!-- <div class="tips" @click="navigateTo("resources")">{{ $t("Resources") }}</div> --> |
||||
|
</div> |
||||
|
<div class="box-right-item2"> |
||||
|
<div class="tips">{{ $t("Terms of Use") }}</div> |
||||
|
<div class="tips">{{ $t("Privacy Policy") }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="h5-box"> |
||||
|
<div class="foot-download-box boxStyle"> |
||||
|
<div class="flex-center"> |
||||
|
<div class="download-t-text"> |
||||
|
{{ $t("Start Your Decentralized Web3") }} |
||||
|
</div> |
||||
|
<img class="large-logo" src="../assets/imgs/large-logo.png" /> |
||||
|
</div> |
||||
|
<div class="flex-center"> |
||||
|
<a href="https://apk.buzz-up.io/app-release.apk" target="_blank"> |
||||
|
<img class="download-btn" src="../assets/imgs/android-btn-e.png" /> |
||||
|
<!-- <div class="download-btn-box"><img class="download-btn" src="../assets/imgs/android-btn.png"> |
||||
|
<div class="download-text">{{ $t("Andriod") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
<a |
||||
|
href="https://play.google.com/store/apps/details?id=io.chainon.lsyim" |
||||
|
target="_blank" |
||||
|
> |
||||
|
<img class="download-btn" src="../assets/imgs/gstore-btn-e.png" /> |
||||
|
<!-- <div class="download-btn-box"><img class="download-btn" src="../assets/imgs/gstore-btn.png"> |
||||
|
<div class="download-text">{{ $t("Play store") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
<a href="https://apps.apple.com/app/6479512180" target="_blank"> |
||||
|
<img class="download-btn" src="../assets/imgs/astore-btn-e.png" /> |
||||
|
<!-- <div class="download-btn-box"><img class="download-btn" src="../assets/imgs/astore-btn.png"> |
||||
|
<div class="download-text">{{ $t("app store") }}</div> |
||||
|
</div> --> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="foot-box-bottom"> |
||||
|
<img class="logo" src="../assets/imgs/logo.png" /> |
||||
|
<div class="icon-box"> |
||||
|
<a href="https://x.com/buzzup_io" target="_blank"> |
||||
|
<img class="icon" src="../assets/imgs/twitter.png" /> |
||||
|
</a> |
||||
|
<a href="javascript:void(0)"> |
||||
|
<img class="icon" src="../assets/imgs/telegram.png" /> |
||||
|
</a> |
||||
|
<a href="https://www.linkedin.com/in/buzzup-io" target="_blank"> |
||||
|
<img class="icon" src="../assets/imgs/linkedin.png" /> |
||||
|
</a> |
||||
|
|
||||
|
<a |
||||
|
href="https://www.facebook.com/HKEsportGA?mibextid=LQQJ4d" |
||||
|
target="_blank" |
||||
|
> |
||||
|
<!-- <a href="https://www.facebook.com/HKEsportGA?mibextid=LQQJ4d"> --> |
||||
|
<img class="icon" src="../assets/imgs/facebook.png" /> |
||||
|
</a> |
||||
|
<a href="https://www.instagram.com/buzzup_hk/" target="_blank"> |
||||
|
<!-- <a href="https://www.instagram.com/buzzup_hk?igsh=aW04b3IwZTR6enc2&utm_source=qr"> --> |
||||
|
<img class="icon" src="../assets/imgs/instagram.png" /> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="foot-box-right"> |
||||
|
<div class="box-right-item1"> |
||||
|
<div class="tips" @click="navigateTo('about')"> |
||||
|
{{ $t("About Us") }} |
||||
|
</div> |
||||
|
<div class="tips" @click="navigateTo('blog')">{{ $t("Blog") }}</div> |
||||
|
<div class="tips" @click="navigateTo('support')"> |
||||
|
{{ $t("Support") }} |
||||
|
</div> |
||||
|
<!-- <div class="tips" @click="navigateTo('resources')">{{ $t("Resources") }}</div> --> |
||||
|
</div> |
||||
|
<div class="box-right-item2"> |
||||
|
<div class="tips">{{ $t("Terms of Use") }}</div> |
||||
|
<div class="tips">{{ $t("Privacy Policy") }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buzzup-text">ALL RIGHTS RESERVED © 2024 BUZZUP</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: "Foot", |
||||
|
props: { |
||||
|
msg: String, |
||||
|
}, |
||||
|
methods: { |
||||
|
navigateTo(routename) { |
||||
|
switch (routename) { |
||||
|
case "about": |
||||
|
this.$router.push("/pages/AboutUs"); |
||||
|
break; |
||||
|
case "blog": |
||||
|
this.$router.push("/pages/Blog"); |
||||
|
break; |
||||
|
case "support": |
||||
|
this.$router.push("/pages/Support"); |
||||
|
break; |
||||
|
case "home": |
||||
|
this.$router.push("/pages/HomePage"); |
||||
|
break; |
||||
|
|
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.download-btn-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.foot-download-box { |
||||
|
background-color: #fbad33; |
||||
|
margin: 40px 40px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20px 80px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.download-t-text { |
||||
|
font-size: 30px; |
||||
|
font-weight: 300; |
||||
|
color: #000000; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.large-logo { |
||||
|
width: 180px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-box { |
||||
|
height: 200px; |
||||
|
margin: 0 40px 100px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 180px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 32px; |
||||
|
height: auto; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 18px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.foot-box-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
width: 420px; |
||||
|
height: 200px; |
||||
|
padding: 20px 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right { |
||||
|
display: flex; |
||||
|
height: 180px; |
||||
|
padding: 20px 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.box-right-item1 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.box-right-item2 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 150px; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right .tips { |
||||
|
padding: 6px; |
||||
|
font-size: 20px; |
||||
|
font-weight: 300; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.foot-download-btn { |
||||
|
width: 120px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-btn { |
||||
|
margin-right: 10px; |
||||
|
width: 140px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-text { |
||||
|
position: absolute; |
||||
|
font-size: 12px; |
||||
|
top: 18px; |
||||
|
right: 26px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.download-btn-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.foot-download-box { |
||||
|
background-color: #fbad33; |
||||
|
margin: 60px 60px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 30px 120px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.download-t-text { |
||||
|
font-size: 42px; |
||||
|
color: #000000; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 60px; |
||||
|
} |
||||
|
|
||||
|
.large-logo { |
||||
|
width: 280px; |
||||
|
height: auto; |
||||
|
margin-left: 60px; |
||||
|
} |
||||
|
|
||||
|
.foot-box { |
||||
|
height: 300px; |
||||
|
margin: 0 80px 100px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 200px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 40px; |
||||
|
height: auto; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.txt { |
||||
|
font-size: 24px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.foot-box-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
width: 480px; |
||||
|
height: 260px; |
||||
|
padding: 30px 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right { |
||||
|
display: flex; |
||||
|
height: 200px; |
||||
|
padding: 30px 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.box-right-item1 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 140px; |
||||
|
} |
||||
|
|
||||
|
.box-right-item2 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 190px; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right .tips { |
||||
|
padding: 8px; |
||||
|
font-size: 24px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.foot-download-btn { |
||||
|
width: 200px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-btn { |
||||
|
margin-right: 12px; |
||||
|
width: 220px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-text { |
||||
|
position: absolute; |
||||
|
font-size: 20px; |
||||
|
top: 26px; |
||||
|
right: 34px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 1000px) { |
||||
|
.desktop-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.download-t-text { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.foot-download-box { |
||||
|
background-color: #fbad33; |
||||
|
box-sizing: border-box; |
||||
|
padding: 12px 20px; |
||||
|
/* display: flex; */ |
||||
|
} |
||||
|
|
||||
|
.large-logo { |
||||
|
width: 80px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-btn-box { |
||||
|
position: relative; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.download-t-text { |
||||
|
font-size: 16px; |
||||
|
color: #000000; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.download-btn { |
||||
|
margin-right: 2px; |
||||
|
width: 88px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.download-text { |
||||
|
position: absolute; |
||||
|
font-size: 9px; |
||||
|
top: 12px; |
||||
|
right: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.foot-box-bottom { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: auto; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 150px; |
||||
|
height: auto; |
||||
|
margin: 30px 0 20px; |
||||
|
} |
||||
|
|
||||
|
.icon-box { |
||||
|
display: flex; |
||||
|
width: 220px; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 30px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right { |
||||
|
display: flex; |
||||
|
align-items: start; |
||||
|
justify-content: center; |
||||
|
margin: 20px 0 20px; |
||||
|
} |
||||
|
|
||||
|
.box-right-item1 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 150px; |
||||
|
} |
||||
|
|
||||
|
.box-right-item2 { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 180px; |
||||
|
} |
||||
|
|
||||
|
.foot-box-right .tips { |
||||
|
padding: 6px; |
||||
|
font-size: 16px; |
||||
|
color: #000000; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.buzzup-text { |
||||
|
font-size: 12px; |
||||
|
text-align: center; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="main-box"> |
||||
|
<div class="logo-tab-box"> |
||||
|
|
||||
|
<img class="logo" @click="navigateTo('home')" src="../assets/imgs/logo.png"> |
||||
|
|
||||
|
<div class="tab"> |
||||
|
<div class="tab-item" @click="navigateTo('about')">{{ $t("About Us") }}</div> |
||||
|
<div class="tab-item" @click="navigateTo('blog')">{{ $t("Blog") }}</div> |
||||
|
<div class="tab-item" @click="navigateTo('support')">{{ $t("Support") }}</div> |
||||
|
<!-- <div class="tab-item" @click="navigateTo('resources')">{{ $t("Resources") }}</div> --> |
||||
|
|
||||
|
<div class="tab-item"> |
||||
|
<a-dropdown :trigger="['click']"> |
||||
|
<a class="ant-dropdown-link" @click.prevent> |
||||
|
{{ $t("Language current") }} |
||||
|
<img class="down-img" src="../assets/imgs/arrow-down.png"> |
||||
|
</a> |
||||
|
<template #overlay> |
||||
|
<a-menu theme="dark"> |
||||
|
<a-menu-item key="0"> |
||||
|
<div @click="clickLangDesk(1)" class="menu-item">{{ currentLang == 'en' ? '简体中文' |
||||
|
: currentLang == 'chs' ? 'English' : currentLang == 'cht' ? 'English' : '繁体中文' }} </div> |
||||
|
</a-menu-item> |
||||
|
<a-menu-item key="1"> |
||||
|
<div @click="clickLangDesk(2)" class="menu-item">{{ currentLang == 'en' ? '繁体中文' |
||||
|
: currentLang == 'chs' ? '繁体中文' : currentLang == 'cht' ? '简体中文' : '繁体中文' }}</div> |
||||
|
</a-menu-item> |
||||
|
</a-menu> |
||||
|
</template> |
||||
|
</a-dropdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="h5-box"> |
||||
|
<div class="tab-item"> |
||||
|
<a-dropdown :trigger="['click']" placement="bottomLeft" selectable="true"> |
||||
|
<a class="ant-dropdown-link" @click.prevent="clickMenu"> |
||||
|
<!-- <img class="menu" :src="showif ? require('../assets/imgs/close.png') : require('../assets/imgs/menu.png')"> --> |
||||
|
<img class="menu" :src="require('../assets/imgs/menu.png')"> |
||||
|
</a> |
||||
|
<template #overlay> |
||||
|
<div style="width: 300px;"> |
||||
|
<a-menu selectable="false" triggerSubMenuAction="click" mode="line" v-model:openKeys="openKeys"> |
||||
|
<a-menu-item key="0" style="color:#000;!important"> |
||||
|
<div class="drop-item" @click="navigateTo('about')"> |
||||
|
<div>{{ $t("About Us") }}</div> |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
<a-menu-item key="1" style="color:#000;!important"> |
||||
|
<div class="drop-item" @click="navigateTo('blog')"> |
||||
|
<div>{{ $t("Blog") }}</div> |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
<a-menu-item key="2" style="color:#000;!important"> |
||||
|
<div class="drop-item" @click="navigateTo('support')"> |
||||
|
<div>{{ $t("Support") }}</div> |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
|
||||
|
<a-menu-item key="8" @click.stop selectable="false" style="color:#000;!important"> |
||||
|
<div class="drop-item"> |
||||
|
{{ $t("Language current") }} <img class="down-img" src="../assets/imgs/arrow-down.png"> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
|
||||
|
<a-menu-item key="9" @click="clickLangDesk(1)" selectable="false" style="color:#000;!important"> |
||||
|
<div style="padding: 0 40px;"> |
||||
|
<div class="drop-item"> |
||||
|
<div class="language-item1">{{ currentLang == 'en' ? '简体中文' |
||||
|
: currentLang == 'chs' ? 'English' : currentLang == 'cht' ? 'English' : '繁体中文' }} </div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
|
||||
|
<a-menu-item key="10" @click="clickLangDesk(2)" selectable="false" style="color:#000;!important"> |
||||
|
<div style="padding: 0 40px;"> |
||||
|
<div class="drop-item"> |
||||
|
<div class="language-item1">{{ currentLang == 'en' ? '繁体中文' |
||||
|
: currentLang == 'chs' ? '繁体中文' : currentLang == 'cht' ? '简体中文' : '繁体中文' }} </div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-menu-item> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</a-menu> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
</a-dropdown> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<!-- <a-menu-item key="3"> |
||||
|
<div class="drop-item" @click="navigateTo('resources')"> |
||||
|
<div>{{ $t("Resources") }}</div> |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</a-menu-item> --> |
||||
|
<script> |
||||
|
import i18n from '../i18n' |
||||
|
import { ref, watch, h, reactive } from 'vue' |
||||
|
export default { |
||||
|
name: 'Head', |
||||
|
props: { |
||||
|
msg: String |
||||
|
}, |
||||
|
// components: { DownOutlined }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentLang: 'en', |
||||
|
items: reactive([ |
||||
|
this.getItem('Navigation One', 'sub1', () => h(), []), |
||||
|
this.getItem('Navigation two', 'sub2'), |
||||
|
this.getItem('Navigation one', 'sub3'), |
||||
|
this.getItem('Navigation Three', 'sub4', () => h(), [ |
||||
|
this.getItem('Option 9', '9'), |
||||
|
this.getItem('Option 10', '10'), |
||||
|
this.getItem('Option 11', '11'), |
||||
|
this.getItem('Option 12', '12'), |
||||
|
])]), |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
clickLangDesk(num) { |
||||
|
if (num == 1) { |
||||
|
if (this.currentLang == 'en') { |
||||
|
i18n.global.locale = "chs" |
||||
|
this.currentLang = 'chs' |
||||
|
} else if (this.currentLang == 'chs') { |
||||
|
i18n.global.locale = "en"; |
||||
|
this.currentLang = 'en' |
||||
|
} else if (this.currentLang == 'cht') { |
||||
|
i18n.global.locale = "en"; |
||||
|
this.currentLang = 'en' |
||||
|
} |
||||
|
} else { |
||||
|
if (this.currentLang == 'en') { |
||||
|
i18n.global.locale = "cht" |
||||
|
this.currentLang = 'cht' |
||||
|
} else if (this.currentLang == 'chs') { |
||||
|
i18n.global.locale = "cht" |
||||
|
this.currentLang = 'cht' |
||||
|
} else if (this.currentLang == 'cht') { |
||||
|
i18n.global.locale = "chs" |
||||
|
this.currentLang = 'chs' |
||||
|
} |
||||
|
} |
||||
|
// this.changeLang(false); |
||||
|
}, |
||||
|
navigateTo(routename) { |
||||
|
switch (routename) { |
||||
|
case "about": |
||||
|
this.$router.push('/pages/AboutUs'); |
||||
|
break; |
||||
|
case "blog": |
||||
|
this.$router.push('/pages/Blog'); |
||||
|
break; |
||||
|
case "support": |
||||
|
this.$router.push('/pages/Support'); |
||||
|
break; |
||||
|
case "home": |
||||
|
this.$router.push('/pages/HomePage'); |
||||
|
break; |
||||
|
|
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
clickMenu() { |
||||
|
this.showif = !this.showif; |
||||
|
}, |
||||
|
showH5Lang() { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
setup() { |
||||
|
let showif = ref(false) |
||||
|
const activeKey = ref(['1']); |
||||
|
watch(activeKey, val => { |
||||
|
console.log(val); |
||||
|
}); |
||||
|
|
||||
|
function changeLang(current) { |
||||
|
showif.value = !current |
||||
|
} |
||||
|
function getItem(label, key, icon, children, type) { |
||||
|
return { |
||||
|
key, |
||||
|
icon, |
||||
|
children, |
||||
|
label, |
||||
|
type, |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
showif, |
||||
|
changeLang, |
||||
|
getItem |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
|
||||
|
.menu { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.menu-item { |
||||
|
padding: 8px 6px 8px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.language-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.language-item1 { |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
background-color: white; |
||||
|
padding: 4px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.language-item2 { |
||||
|
position: absolute; |
||||
|
top: 80px; |
||||
|
background-color: white; |
||||
|
padding: 4px; |
||||
|
text-align: center; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.language-item1 { |
||||
|
width: 100px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
.language-item2 { |
||||
|
width: 100px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
.main-box { |
||||
|
padding: 20px 0px; |
||||
|
} |
||||
|
|
||||
|
.logo-tab-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 30px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 40px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.tab .tab-item { |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 18px; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
padding: 3px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.down-img { |
||||
|
width: 14px; |
||||
|
height: 7px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
|
||||
|
.menu { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.menu-item { |
||||
|
padding: 8px 6px 8px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.language-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.language-item1 { |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
background-color: white; |
||||
|
padding: 4px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.language-item2 { |
||||
|
position: absolute; |
||||
|
top: 80px; |
||||
|
background-color: white; |
||||
|
padding: 4px; |
||||
|
text-align: center; |
||||
|
border-bottom-right-radius: 4px; |
||||
|
border-bottom-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.language-item1 { |
||||
|
width: 120px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.language-item2 { |
||||
|
width: 120px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
|
||||
|
.main-box { |
||||
|
padding: 30px 0px; |
||||
|
} |
||||
|
|
||||
|
.logo-tab-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 40px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 60px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.tab .tab-item { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
/* text-align: right !important; */ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 22px; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
padding: 5px; |
||||
|
height: 40px; |
||||
|
width: 130px; |
||||
|
/* margin: 0 20px; */ |
||||
|
} |
||||
|
|
||||
|
.tab-item { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.down-img { |
||||
|
width: 14px; |
||||
|
height: 7px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@media screen and (max-width: 1000px) { |
||||
|
|
||||
|
.tab { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.h5-box { |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.logo-tab-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 20px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
height: 40px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.menu { |
||||
|
display: block; |
||||
|
height: 40px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.main-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.drop-item { |
||||
|
display: flex; |
||||
|
padding: 4px 16px; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.next-img { |
||||
|
height: 14px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.down-img { |
||||
|
height: 8px; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.drop { |
||||
|
position: absolute; |
||||
|
top: 36px; |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
z-index: 1; |
||||
|
/* height: 0; */ |
||||
|
/* overflow: hidden; */ |
||||
|
transition: height 2s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.drop-show { |
||||
|
position: absolute; |
||||
|
top: 36px; |
||||
|
width: 100%; |
||||
|
height: 300px; |
||||
|
background-color: white; |
||||
|
z-index: 1; |
||||
|
height: 300px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="download-btn-box"> |
||||
|
<img class="download-btn" src="../assets/imgs/android-btn.png"> |
||||
|
<div class="download-text">{{ $t("Download via Andriod") }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
.download-btn-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.download-text { |
||||
|
position: absolute; |
||||
|
font-size: 16px; |
||||
|
top: 14px; |
||||
|
right: 26px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.download-btn { |
||||
|
margin-right: 10px; |
||||
|
width: 140px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,32 @@ |
|||||
|
export default { |
||||
|
baseURL: 'https://apk.hippoim.us/api', |
||||
|
// baseURL: 'http://192.168.124.20:3008/api',
|
||||
|
// baseURL: 'http://203.161.57.92:8082/api',
|
||||
|
method: 'get', |
||||
|
//`timeout`选项定义了请求发出的延迟毫秒数
|
||||
|
//如果请求花费的时间超过延迟的时间，那么请求会被终止
|
||||
|
timeout: 60 * 1000, |
||||
|
//发送请求前允许修改数据
|
||||
|
transformRequest: [function (data) { |
||||
|
return data; |
||||
|
}], |
||||
|
//数据发送到then/catch方法之前允许数据改动
|
||||
|
transformResponse: [function (data) { |
||||
|
return data; |
||||
|
}], |
||||
|
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
|
headers: { 'Content-Type': 'application/json; charset=UTF-8' }, |
||||
|
// withCredentials: false,//跨域请求时是否携带cookie
|
||||
|
responseType: 'json',//响应数据类型
|
||||
|
// xsrfCookieName: 'XSRF-TOKEN',
|
||||
|
// xsrfHeaderName: 'X-XSRF-TOKEN',
|
||||
|
// onUploadProgress: function (progressEvent: any) { },//上传进度事件
|
||||
|
// onDownloadProgress: function (progressEvent: any) { },//下载进度事件
|
||||
|
//`validateStatus`定义了是否根据http相应状态码，来resolve或者reject promise
|
||||
|
//如果`validateStatus`返回true(或者设置为`null`或者`undefined`),那么promise的状态将会是resolved,否则其状态就是rejected
|
||||
|
validateStatus: function (status) { |
||||
|
return status >= 200 && status < 300 // 默认的
|
||||
|
}, |
||||
|
//`maxRedirects`定义了在nodejs中重定向的最大数量
|
||||
|
maxRedirects: 5 |
||||
|
}; |
||||
@ -0,0 +1,50 @@ |
|||||
|
import axiosConfig from './axios_config'; |
||||
|
import axios from 'axios'; |
||||
|
import sortParam from "./sort" |
||||
|
import signGenerator from './sign'; |
||||
|
import qs from 'qs'; |
||||
|
|
||||
|
const service = axios.create(axiosConfig); |
||||
|
|
||||
|
// 请求拦截
|
||||
|
service.interceptors.request.use( |
||||
|
config => { |
||||
|
let ps = config.params ? sortParam(config.params) : ''; |
||||
|
let timestamp = new Date().getTime(); |
||||
|
let signData = { |
||||
|
uri: '/api' + config.url, |
||||
|
timestamp: timestamp, |
||||
|
args: ps, |
||||
|
}; |
||||
|
let sign = signGenerator(signData); |
||||
|
(config.headers ).sign = sign; |
||||
|
(config.headers ).timestamp = timestamp; |
||||
|
if (config.data) { |
||||
|
config.data = JSON.stringify(config.data); |
||||
|
} |
||||
|
if (config.method?.toLocaleLowerCase() === 'get') { |
||||
|
config.paramsSerializer = function (params) { |
||||
|
return qs.stringify(params, { arrayFormat: 'repeat' }); |
||||
|
}; |
||||
|
} |
||||
|
return config; |
||||
|
}, |
||||
|
error => { |
||||
|
return Promise.reject(error); |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
// 响应拦截
|
||||
|
service.interceptors.response.use( |
||||
|
(res) => { |
||||
|
// console.log(res);
|
||||
|
let data = JSON.parse(res.data); |
||||
|
return data; |
||||
|
}, |
||||
|
error => { |
||||
|
let data = JSON.parse(error.response.data); |
||||
|
return data; |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
export default service; |
||||
@ -0,0 +1,20 @@ |
|||||
|
const md5 = require('js-md5'); |
||||
|
var signkey = 'walletes_sd@DG90oBvq4h3Hpyz'; |
||||
|
|
||||
|
var signGenerator = (data) => { |
||||
|
var keys = []; |
||||
|
for (var key in data) { |
||||
|
keys.push(key); |
||||
|
} |
||||
|
keys.sort(); |
||||
|
|
||||
|
var ptxt = ''; |
||||
|
for (var i = 0; i < keys.length; i++) { |
||||
|
ptxt += keys[i] + data[keys[i]]; |
||||
|
} |
||||
|
ptxt = signkey + ptxt + signkey; |
||||
|
var signval = md5(ptxt).toLowerCase(); |
||||
|
return signval; |
||||
|
}; |
||||
|
|
||||
|
export default signGenerator; |
||||
@ -0,0 +1,38 @@ |
|||||
|
|
||||
|
var sortParam = data => { |
||||
|
var keys = []; |
||||
|
for (var key in data) { |
||||
|
keys.push(key); |
||||
|
} |
||||
|
|
||||
|
//keys.sort();
|
||||
|
//console.log(keys);
|
||||
|
|
||||
|
var ptxt = ""; |
||||
|
for (var i = 0; i < keys.length; i++) { |
||||
|
if (data[keys[i]] instanceof Array) { |
||||
|
if (i === 0) { |
||||
|
data[keys[i]].forEach((v, index) => { |
||||
|
if (index === 1) { |
||||
|
ptxt += keys[i] + "=" + v; |
||||
|
} else { |
||||
|
ptxt += "&" + keys[i] + "=" + v; |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
data[keys[i]].forEach(v => { |
||||
|
ptxt += "&" + keys[i] + "=" + v; |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
if (i === 0) { |
||||
|
ptxt += keys[i] + "=" + data[keys[i]]; |
||||
|
} else { |
||||
|
ptxt += "&" + keys[i] + "=" + data[keys[i]]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// console.log(ptxt);
|
||||
|
return ptxt; |
||||
|
} |
||||
|
export default sortParam; |
||||
@ -0,0 +1,395 @@ |
|||||
|
// i18n.js
|
||||
|
import { createI18n } from 'vue-i18n'; |
||||
|
|
||||
|
const messages = { |
||||
|
en: { |
||||
|
"About Us": "About Us", |
||||
|
"Blog": "Blog", |
||||
|
"Support": "Support", |
||||
|
"Resources": "Resources", |
||||
|
"Language current": "English", |
||||
|
"Your Web3 Identity": "Your Web3 Identity with", |
||||
|
"Decentralized": "Decentralized", |
||||
|
// "Instant Messaging": "Instant Messaging",
|
||||
|
"Empowering everyone to": "Empowering everyone to have own secure control over wealth and data with blockchain technology", |
||||
|
"Download via Andriod": "DOWNLOAD VIA", |
||||
|
"Andriod": "ANDRIOD", |
||||
|
"Play store": "PLAY STORE", |
||||
|
"app store": "APP STORE", |
||||
|
"gei it on": "GET IT ON", |
||||
|
"Get Playstore": " GET IT ON Play Store", |
||||
|
"Get App Store": " GET IT ON App Store", |
||||
|
"Total Users": "Total Users", |
||||
|
"Avg Msg": "Avg. Msg volume (24Hours)", |
||||
|
"Total Storage": "Total Storage Occupied (GB)", |
||||
|
"Avg Tx": "Avg. Tx Volume (US$) (24 Hours)", |
||||
|
"HOW THE APP WORKS": "HOW THE APP WORKS", |
||||
|
"Your Social Data": "Your Social, Data Storage and Assets are fully under your control", |
||||
|
"Web3 Identity": "Web3 Identity", |
||||
|
"Create or Import": "Create or Import Wallet to gain a decentralized identity without any personal information needed.", |
||||
|
"In-App Utilisation": "In-App Utilisation", |
||||
|
"Utilise in-app Instant": "Utilise in-app Instant Messaging, File Storage and Digital Assets Wallet binded with your decentralized identity.", |
||||
|
"Exploration": "Exploration", |
||||
|
"Explore any external": "Explore any external decentralized applications with your wallet connection, join and share with communitites.", |
||||
|
"Key Features": "Key Features", |
||||
|
"Decentralized Instant Messaging": "Decentralized Instant Messaging", |
||||
|
"Private and secure": "Private and secure chat with your friends without centralised tracking and monitoring", |
||||
|
"Decentralized File Storage": "Decentralized File Storage", |
||||
|
"Enhanced security privacy": "Enhanced security, privacy and scalability way to store and share files", |
||||
|
"Multi-Chain Crypto Wallet": "Multi-Chain Crypto Wallet", |
||||
|
"On-chain store": "On-chain store, spend and send digital assets like tokens and NFTs", |
||||
|
"Web3 Explore and discover": "Web3 Explore and discover", |
||||
|
"Direct connect your": "Direct connect your wallet to external Dapps for utilization. Join and share with communities.", |
||||
|
|
||||
|
"Roadmap": "Roadmap", |
||||
|
"May": "May", |
||||
|
"BUZZUP establishment seed": "BUZZUP establishment seed Round Equity Fundraising ", |
||||
|
"BUZZUP Token Formation": "BUZZUP Token Formation ", |
||||
|
"Strategic Partnerships Formation": "Strategic Partnerships Formation", |
||||
|
"June": "June", |
||||
|
"BUZZUP APP v": "BUZZUP APP v1.0 Launch", |
||||
|
"BUZZUP Token Private": "BUZZUP Token Private Round", |
||||
|
"Launch Airdrop": "Launch Airdrop & Referral Program", |
||||
|
"Establish BUZZUP's": "Establish BUZZUP's Community", |
||||
|
"Official Launch Event": "Official Launch Event (HK)", |
||||
|
"July": "July", |
||||
|
"Join HK Govt": "Join HK Govt Cyberport Program", |
||||
|
"Expand promotions to": "Expand promotions to Macau", |
||||
|
"GameFi Collab to": "GameFi Collab to establish use case", |
||||
|
|
||||
|
"Extend app communication": "Extend app communication feature to businesses", |
||||
|
"DeFi Communities collaboration": "DeFi Communities collaboration", |
||||
|
"Expand promotions to South": "Expand promotions to South East Asia", |
||||
|
"BUZZUP Token Public": "BUZZUP Token Public Round", |
||||
|
"DEXs & CEXs": "DEXs & CEXs Collab", |
||||
|
"Launch Event in": "Launch Event in Malaysia, Thailand , Vietnam, Dubai and more", |
||||
|
"BUZZUP Token listing": "BUZZUP Token listing and trading", |
||||
|
"Token Stake-To-Earn": "Token Stake-To-Earn", |
||||
|
"Token as gas": "Token as gas fee for on-chain Txs", |
||||
|
"August": "August", |
||||
|
"September": "September", |
||||
|
"October": "October", |
||||
|
|
||||
|
|
||||
|
"Strategic partnerships": "Strategic partnerships", |
||||
|
"Secured Deep Tech": "Secured Deep Tech and Web3 Partners", |
||||
|
|
||||
|
"DePIN Network": "DePIN Network", |
||||
|
"Blockchain Technology": "Blockchain Technology", |
||||
|
"Filecoin Storage Provider": "Filecoin Storage Provider", |
||||
|
|
||||
|
"Start Your Decentralized Web3": "Start Your Decentralized Web3 Journey With BUZZUP Today!", |
||||
|
"Terms of Use": "Terms of Use", |
||||
|
"Privacy Policy": "Privacy Policy", |
||||
|
|
||||
|
|
||||
|
|
||||
|
"Get your own autonomy with blockchain technology": "Get your own autonomy with blockchain technology", |
||||
|
"Get your": "Get your", |
||||
|
"blockchain technology": "blockchain technology", |
||||
|
"own autonomy": "own autonomy", |
||||
|
"with": "with", |
||||
|
"Blockchain technologies enable": "Blockchain technologies enable users to create and exchange value, information, and assets without intermediaries or central authorities, no one can tamper with it.", |
||||
|
"BuzzUp delivers an": "BuzzUp delivers an integrated application based on blockchain tecnology empowering people to take own control of their asstes, social and data storage with a decentralized web3 identity.", |
||||
|
"We also advance": "We also advance strategic collaborations with decentralized appplications, helping them grow, promote and scale.", |
||||
|
"Vision": "Vision", |
||||
|
"Bring own autonomy": "Bring own autonomy to everyone with decentralized technology", |
||||
|
"Mission": "Mission", |
||||
|
"Empowering everyone to have": "Empowering everyone to have secure control over their wealth and data with decentralized identity", |
||||
|
"Meet Our Team": "Meet Our Team", |
||||
|
"CEO": "CEO", |
||||
|
"CTO": "CTO", |
||||
|
"Marketing Manager": "Marketing Manager", |
||||
|
"Project Manager": "Project Manager", |
||||
|
"Subscibe to our newsletter": "Subscibe to our newsletter", |
||||
|
"Stay ahead with the latest": "Stay ahead with the latest updated from BuzzUp", |
||||
|
"Your Name": "Your Name", |
||||
|
"Email Address": "Email Address", |
||||
|
"Subscribe": "Subscribe", |
||||
|
"Our Blog": "Our Blog", |
||||
|
"Welcome to BUZZUP SUPPORT": "Welcome to BUZZUP SUPPORT", |
||||
|
"Welcome to": "Welcome to", |
||||
|
"BUZZUP": "BUZZUP", |
||||
|
"We're here to help": "We're here to help", |
||||
|
"Getting Started": "Getting Started", |
||||
|
|
||||
|
"Create a wallet for a BUZZUP ID": "Create a wallet for a BUZZUP ID", |
||||
|
"Import a wallet for a BUZZUP ID": "Import a wallet for a BUZZUP ID", |
||||
|
"Add / Switch BUZZUP Account": "Add / Switch BUZZUP Account", |
||||
|
"FIND OUT MORE": "FIND OUT MORE", |
||||
|
"SECURITY": "SECURITY", |
||||
|
"Secret Recovery Phrase Backup": "Secret Recovery Phrase Backup", |
||||
|
"Wallet Accounts Backup": "Wallet Accounts Backup", |
||||
|
"Biometrics and Change Passcode": "Biometrics and Change Passcode", |
||||
|
"Instant Messaging": "Instant Messaging", |
||||
|
"Add Friend": "Add Friend", |
||||
|
"Create Group Chat": "Create Group Chat", |
||||
|
"Initiate Send & Receive Crypto": "Initiate Send & Receive Crypto", |
||||
|
"File Storage": "File Storage", |
||||
|
"Upload & Download Files": "Upload & Download Files", |
||||
|
"Create Folders": "Create Folders", |
||||
|
"Manage Storage": "Manage Storage", |
||||
|
"Wallet ": "Wallet ", |
||||
|
"Add Network & Crypto Types": "Add Network & Crypto Types", |
||||
|
"Send & Receive Crypto": "Send & Receive Crypto", |
||||
|
"Swap Crypto": "Swap Crypto", |
||||
|
"Have more Questions": "Have more Questions", |
||||
|
"If you cannot find the answer": "If you cannot find the answer to your questions in our support section, please contact our support team at support", |
||||
|
"SUBSCRIBE TO OUR NEWSLETTER": "SUBSCRIBE TO OUR NEWSLETTER", |
||||
|
"Stay ahead with the": "Stay ahead with the latest updates from BuzzUp" |
||||
|
}, |
||||
|
chs: { |
||||
|
"About Us": "关于我们", |
||||
|
"Blog": "博客", |
||||
|
"Support": "帮助中心", |
||||
|
"Resources": "资源", |
||||
|
"Language current": "简体中文", |
||||
|
"Your Web3 Identity": "你的去中心化即时聊天身份", |
||||
|
"Decentralized": "去中心化", |
||||
|
"Empowering everyone to": "使每个人都能透过去中心化身份安全地控制自己的财富和数据", |
||||
|
"Download via Andriod": "Andriod", |
||||
|
"Get Playstore": "Playstore", |
||||
|
"Get App Store": "App Store", |
||||
|
"Total Users": "总用户量", |
||||
|
"Avg Msg": "平均信息数量", |
||||
|
"Total Storage": "总已用储存量", |
||||
|
"Avg Tx": "平均转帐数量", |
||||
|
"HOW THE APP WORKS": "Buzz 是如何运作的？", |
||||
|
"Your Social Data": "你的社交、数据储存、资产全部都掌握在您手上", |
||||
|
"Web3 Identity": "Web3 身份", |
||||
|
"Create or Import": "透过创建或导入钱包，建立您的去中心化身份，完全没需要您的个人资讯", |
||||
|
"In-App Utilisation": "内建的应用程式", |
||||
|
"Utilise in-app Instant": "内建的去中心化聊天、储存和数码钱包绑定您的去中心化身份", |
||||
|
"Exploration": "探索", |
||||
|
"Explore any external": "透过将您的钱包连接外部任何的去中心化应用程序，探索、加入与分享社区。", |
||||
|
"Key Features": "主要功能", |
||||
|
"Decentralized Instant Messaging": "去中心化聊天", |
||||
|
"Private and secure": "私密且安全的聊天通讯，没有中心化追踪和监控", |
||||
|
"Decentralized File Storage": "去中心化储存", |
||||
|
"Enhanced security privacy": "增强安全性、隐私性和可扩充性的储存和共用档案方式", |
||||
|
"Multi-Chain Crypto Wallet": "多链加密货币钱包", |
||||
|
"On-chain store": "链上储存、消费和发送数位资产，如代币和 NFT", |
||||
|
"Web3 Explore and discover": "探索更多Web3的可能性", |
||||
|
"Direct connect your": "探索并透过连接DApp\n加入社群并与社群分享", |
||||
|
"Roadmap": "路线图", |
||||
|
"May": "五月", |
||||
|
"BUZZUP establishment seed": "开始种子轮的募资", |
||||
|
"BUZZUP Token Formation": "建立$BUZZ 代币模型", |
||||
|
"Strategic Partnerships Formation": "建立战略合作伙伴", |
||||
|
"June": "六月", |
||||
|
"BUZZUP APP v": "正式发布 Buzz应用程式版本1.0", |
||||
|
"BUZZUP Token Private": "开始 $BUZZ的\n私募资", |
||||
|
"Launch Airdrop": "$BUZZ 空投 & 推荐计划", |
||||
|
"Establish BUZZUP's": "建立 BUZZUP的社群", |
||||
|
"Official Launch Event": "Buzz应用程式版本1.0的发布会", |
||||
|
|
||||
|
"July": "七月", |
||||
|
"Join HK Govt": "参与香港政府数码港的计划", |
||||
|
"Expand promotions to": "推广拓展至澳门", |
||||
|
"GameFi Collab to": "与GameFI合作联乘", |
||||
|
"Extend app communication": "将通讯功能扩展到企业层面", |
||||
|
"DeFi Communities collaboration": "DeFi 社群联乘", |
||||
|
"Expand promotions to South": "推广拓展至东南亚", |
||||
|
"BUZZUP Token Public": "开始 $BUZZ \n公募", |
||||
|
"DEXs & CEXs": "与去中心化和中心化的交易所联乘", |
||||
|
"Launch Event in": "$BUZZ 在马来西亚、泰国、越南、杜拜或更多地方举办发布会", |
||||
|
"BUZZUP Token listing": "$BUZZ 在交易所上市", |
||||
|
"Token Stake-To-Earn": "从质押获取奖励", |
||||
|
"Token as gas": "$BUZZ 作为链上交易的手续费", |
||||
|
"Strategic partnerships": "战略合作伙伴", |
||||
|
"Secured Deep Tech": "稳固的区块链技术团队", |
||||
|
|
||||
|
"August": "八月", |
||||
|
"September": "九月", |
||||
|
"October": "十月", |
||||
|
|
||||
|
"DePIN Network": "去中心化物理基础设施网络", |
||||
|
"Blockchain Technology": "区块链技术", |
||||
|
"Filecoin Storage Provider": "FIL 去中心化储存服务商", |
||||
|
"Start Your Decentralized Web3": "与BUZZUP进入去中心化Web3的时代", |
||||
|
"Terms of Use": "服务条款", |
||||
|
"Privacy Policy": "隐私保护", |
||||
|
"Get your own autonomy with blockchain technology": "让您重获自主的区块链技术", |
||||
|
"Get your": "让您", |
||||
|
"blockchain technology": "区块链技术", |
||||
|
"own autonomy": "重获自主", |
||||
|
"with": "的", |
||||
|
"Blockchain technologies enable": "区块链技术可使用户能够在没有中介或中心化的机构下创造和交换价值、资讯和资产，这是任何人都无法篡改。", |
||||
|
"BuzzUp delivers an": "BuzzUp 提供建基于区块链技术的整合应用程序，使用户能够透过去中心化的 web3 身分自行控制自己的资产、社交和资料储存。", |
||||
|
"We also advance": "我们也会与去中心化应用程式策略合作，帮助它们成长、推广和扩展。", |
||||
|
"Vision": "BuzzUp的愿景", |
||||
|
"Bring own autonomy": "让所有人通过去中心技术拥有网络的自主权", |
||||
|
"Mission": "BuzzUp的使命", |
||||
|
"Empowering everyone to have": "使每个人都能透过去中心化身分安全地控制自己的财产和数据", |
||||
|
"Meet Our Team": "我们的团队", |
||||
|
"CEO": "董事", |
||||
|
"CTO": "技术总监", |
||||
|
"Marketing Manager": "行销经理", |
||||
|
"Project Manager": "项目经理", |
||||
|
"Subscibe to our newsletter": "订阅我们最新资讯", |
||||
|
"Stay ahead with the latest": "了解 BuzzUp 的最新更新", |
||||
|
"Your Name": "你的名字", |
||||
|
"Email Address": "电邮地址", |
||||
|
"Subscribe": "订阅", |
||||
|
"Our Blog": "BuzzUp的网志", |
||||
|
"Welcome to BUZZUP SUPPORT": "欢迎来到BuzzUp的支援中心", |
||||
|
"We're here to help": "我们随时为您提供协助", |
||||
|
"Getting Started": "开始", |
||||
|
"Create a wallet for a BUZZUP ID": "为 BuzzUp ID 创建钱包", |
||||
|
"Import a wallet for a BUZZUP ID": "为 BuzzUp ID 导入钱包", |
||||
|
"Add / Switch BUZZUP Account": "新增 / 切换 BuzzUp 帐号", |
||||
|
"FIND OUT MORE": "了解更多", |
||||
|
"SECURITY": "安全", |
||||
|
"Secret Recovery Phrase Backup": "备份助记词", |
||||
|
"Wallet Accounts Backup": "钱包帐户备份", |
||||
|
"Biometrics and Change Passcode": "生物识别和更改密码", |
||||
|
"Instant Messaging": "即时通讯", |
||||
|
"Add Friend": "新增朋友", |
||||
|
"Create Group Chat": "建立群聊", |
||||
|
"Initiate Send & Receive Crypto": "发起发送和接收加密货币", |
||||
|
"File Storage": "储存档案", |
||||
|
"Upload & Download Files": "上载和下载文件", |
||||
|
"Create Folders": "新增文件夹", |
||||
|
"Manage Storage": "管理存储空间", |
||||
|
"Wallet ": "钱包", |
||||
|
"Add Network & Crypto Types": "新增网络和加密货币的类别", |
||||
|
"Send & Receive Crypto": "发送和接收加密货币", |
||||
|
"Swap Crypto": "兑换加密货币", |
||||
|
"Have more Questions": "如有更多问题？", |
||||
|
"If you cannot find the answer": "如果您找不到问题的答案，请联系我们的支持团队", |
||||
|
"SUBSCRIBE TO OUR NEWSLETTER": "订阅我们的时事通讯", |
||||
|
"Stay ahead with the": "继续关注BuzzUp的最新更新" |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
cht: { |
||||
|
"About Us": "關於我們", |
||||
|
"Blog": "網誌", |
||||
|
"Support": "幫助中心", |
||||
|
"Resources": "資源", |
||||
|
"Language current": "繁体中文", |
||||
|
"Your Web3 Identity": "你的去中心化即時聊天身份", |
||||
|
"Decentralized": "去中心化", |
||||
|
"Empowering everyone to": "使每個人都能透過去中心化身份安全地控制自己的財富和數據", |
||||
|
"Download via Andriod": "Andriod", |
||||
|
"Get Playstore": "Playstore", |
||||
|
"Get App Store": "App Store", |
||||
|
"Total Users": "總用戶量", |
||||
|
"Avg Msg": "平均信息數量", |
||||
|
"Total Storage": "總已用儲存量", |
||||
|
"Avg Tx": "平均轉帳數量", |
||||
|
"HOW THE APP WORKS": "Buzz 是如何運作的？", |
||||
|
"Your Social Data": "你的社交、數據儲存、資產全部都掌握在您手上", |
||||
|
"Web3 Identity": "Web3 身份", |
||||
|
"Create or Import": "透過創建或導入錢包，建立您的去中心化身份，完全沒需要您的個人資訊", |
||||
|
"In-App Utilisation": "內建的應用程式", |
||||
|
"Utilise in-app Instant": "內建的去中心化聊天、儲存和數碼錢包綁定您的去中心化身份", |
||||
|
"Exploration": "探索", |
||||
|
"Explore any external": "透過將您的錢包連接外部任何的去中心化應用程序，探索、加入與分享社區。", |
||||
|
"Key Features": "主要功能", |
||||
|
"Decentralized Instant Messaging": "去中心化聊天", |
||||
|
"Private and secure": "私密且安全的聊天通訊，沒有中心化追蹤和監控", |
||||
|
"Decentralized File Storage": "去中心化儲存", |
||||
|
"Enhanced security privacy": "增強安全性、隱私性和可擴充性的儲存和共用檔案方式", |
||||
|
"Multi-Chain Crypto Wallet": "多鏈加密貨幣錢包", |
||||
|
"On-chain store": "鏈上儲存、消費和發送數位資產，如代幣和 NFT", |
||||
|
"Web3 Explore and discover": "探索更多Web3的可能性", |
||||
|
"Direct connect your": "探索並透過連接DApp\n加入社群並與社群分享", |
||||
|
"Roadmap": "路線圖", |
||||
|
"May": "五月", |
||||
|
"BUZZUP establishment seed": "開始種子輪的募資", |
||||
|
"BUZZUP Token Formation": "建立$BUZZ 代幣模型", |
||||
|
"Strategic Partnerships Formation": "建立戰略合作夥伴", |
||||
|
"June": "六月", |
||||
|
"BUZZUP APP v": "正式發佈 Buzz應用程式版本1.0", |
||||
|
"BUZZUP Token Private": "開始 $BUZZ的\n私募資", |
||||
|
"Launch Airdrop": "$BUZZ 空投 & 推薦計劃", |
||||
|
"Establish BUZZUP's": "建立 BUZZUP的社群", |
||||
|
"Official Launch Event": "Buzz應用程式版本1.0的發佈會", |
||||
|
"July": "七月", |
||||
|
"Join HK Govt": "參與香港政府數碼港的計劃", |
||||
|
"Expand promotions to": "推廣拓展至澳門", |
||||
|
"GameFi Collab to": "與GameFI合作聯乘", |
||||
|
"August": "八月", |
||||
|
"September": "九月", |
||||
|
"October": "十月", |
||||
|
"Extend app communication": "將通訊功能擴展到企業層面", |
||||
|
"DeFi Communities collaboration": "DeFi 社群聯乘", |
||||
|
"Expand promotions to South": "推廣拓展至東南亞", |
||||
|
"BUZZUP Token Public": "開始 $BUZZ \n公募", |
||||
|
"DEXs & CEXs": "與去中心化和中心化的交易所聯乘", |
||||
|
"Launch Event in": "$BUZZ 在馬來西亞、泰國、越南、杜拜或更多地方舉辦發佈會", |
||||
|
"BUZZUP Token listing": "$BUZZ 在交易所上市", |
||||
|
"Token Stake-To-Earn": "從質押獲取獎勵", |
||||
|
"Token as gas": "$BUZZ 作為鏈上交易的手續費", |
||||
|
"Strategic partnerships": "戰略合作夥伴", |
||||
|
"Secured Deep Tech": "穩固的區塊鏈技術團隊", |
||||
|
"DePIN Network": "去中心化物理基礎設施網絡", |
||||
|
"Blockchain Technology": "區塊鏈技術", |
||||
|
"Filecoin Storage Provider": "FIL 去中心化儲存服務商", |
||||
|
"Start Your Decentralized Web3": "與BUZZUP進入去中心化Web3的時代", |
||||
|
"Terms of Use": "服務條款", |
||||
|
"Privacy Policy": "隱私保護", |
||||
|
|
||||
|
"Get your own autonomy with blockchain technology": "讓您重獲自主的區塊鏈技術", |
||||
|
"Get your": "讓您", |
||||
|
"blockchain technology": "區塊鏈技術", |
||||
|
"own autonomy": "重獲自主", |
||||
|
"with": "的", |
||||
|
"Blockchain technologies enable": "區塊鏈技術可使用戶能夠在沒有中介或中心化的機構下創造和交換價值、資訊和資產，這是任何人都無法篡改。", |
||||
|
"BuzzUp delivers an": "BuzzUp 提供建基於區塊鏈技術的整合應用程序，使用户能夠透過去中心化的 web3 身分自行控制自己的資產、社交和資料儲存。", |
||||
|
"We also advance": "我們也會與去中心化應用程式策略合作，幫助它們成長、推廣和擴展。", |
||||
|
"Vision": "BuzzUp的願景", |
||||
|
"Bring own autonomy": "讓所有人通過去中心技術擁有網絡的自主權", |
||||
|
"Mission": "BuzzUp的使命", |
||||
|
"Empowering everyone to have": "使每個人都能透過去中心化身分安全地控制自己的財產和數據", |
||||
|
"Meet Our Team": "我們的團隊", |
||||
|
"CEO": "董事", |
||||
|
"CTO": "技術總監", |
||||
|
"Marketing Manager": "行銷經理", |
||||
|
"Project Manager": "項目經理", |
||||
|
"Subscibe to our newsletter": "訂閱我們最新資訊", |
||||
|
"Stay ahead with the latest": "了解 BuzzUp 的最新更新", |
||||
|
"Your Name": "你的名字", |
||||
|
"Email Address": "電郵地址", |
||||
|
"Subscribe": "訂閱", |
||||
|
"Our Blog": "BuzzUp的網誌", |
||||
|
"Welcome to BUZZUP SUPPORT": "歡迎來到BuzzUp的支援中心", |
||||
|
"We're here to help": "我們隨時為您提供協助", |
||||
|
"Getting Started": "開始", |
||||
|
"Create a wallet for a BUZZUP ID": "為 BuzzUp ID 創建錢包", |
||||
|
"Import a wallet for a BUZZUP ID": "為 BuzzUp ID 導入錢包", |
||||
|
"Add / Switch BUZZUP Account": "新增 / 切換 BuzzUp 帳號", |
||||
|
"FIND OUT MORE": "了解更多", |
||||
|
"SECURITY": "安全", |
||||
|
"Secret Recovery Phrase Backup": "備份助記詞", |
||||
|
"Wallet Accounts Backup": "錢包帳戶備份", |
||||
|
"Biometrics and Change Passcode": "生物識別和更改密碼", |
||||
|
"Instant Messaging": "即時通訊", |
||||
|
"Add Friend": "新增朋友", |
||||
|
"Create Group Chat": "建立群聊", |
||||
|
"Initiate Send & Receive Crypto": "發起發送和接收加密貨幣", |
||||
|
"File Storage": "儲存檔案", |
||||
|
"Upload & Download Files": "上載和下載文件", |
||||
|
"Create Folders": "新增文件夾", |
||||
|
"Manage Storage": "管理存儲空間", |
||||
|
"Wallet ": "錢包", |
||||
|
"Add Network & Crypto Types": "新增網絡和加密貨幣的類別", |
||||
|
"Send & Receive Crypto": "發送和接收加密貨幣", |
||||
|
"Swap Crypto": "兌換加密貨幣", |
||||
|
"Have more Questions": "如有更多問題？", |
||||
|
"If you cannot find the answer": "如果您找不到問題的答案，請聯繫我們的支持團隊", |
||||
|
"SUBSCRIBE TO OUR NEWSLETTER": "訂閱我們的時事通訊", |
||||
|
"Stay ahead with the": "繼續關注BuzzUp的最新更新" |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const i18n = createI18n({ |
||||
|
locale: 'en', // set default locale
|
||||
|
fallbackLocale: 'en', // set fallback locale
|
||||
|
messages, // set locale messages
|
||||
|
}); |
||||
|
|
||||
|
export default i18n; |
||||
|
|
||||
@ -0,0 +1,14 @@ |
|||||
|
import { createApp } from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
import i18n from './i18n'; |
||||
|
import './styles/global.scss' |
||||
|
import { Dropdown, Drawer, Menu } from 'ant-design-vue'; |
||||
|
// import { DownOutlined } from '@ant-design/icons-vue';
|
||||
|
|
||||
|
|
||||
|
const app = createApp(App); |
||||
|
app.use(Dropdown).use(Drawer).use(Menu); |
||||
|
|
||||
|
|
||||
|
app.use(router).use(i18n).mount('#app') |
||||
@ -0,0 +1,806 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="desktop-box"> |
||||
|
<div class="top-box"> |
||||
|
<div class="top-text-box"> |
||||
|
<div class="title"> |
||||
|
{{ $t("Get your").toLocaleUpperCase() }} |
||||
|
<span class="text-own"> |
||||
|
{{ $t("own autonomy").toLocaleUpperCase() }}</span |
||||
|
> |
||||
|
{{ $t("with").toLocaleUpperCase() }} |
||||
|
<span class="text-block">{{ |
||||
|
$t("blockchain technology").toLocaleUpperCase() |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<div class="top-box-l1"> |
||||
|
{{ $t("Blockchain technologies enable") }} |
||||
|
</div> |
||||
|
<div class="top-box-l2">{{ $t("BuzzUp delivers an") }}</div> |
||||
|
<div class="top-box-l3">{{ $t("We also advance") }}</div> |
||||
|
</div> |
||||
|
<img class="aboutus" src="../assets/imgs/aboutus.png" /> |
||||
|
</div> |
||||
|
<div class="btns-box"> |
||||
|
<div class="vision-btn boxStyle"> |
||||
|
<div class="t1">{{ $t("Vision").toLocaleUpperCase() }}</div> |
||||
|
<div class="t2">{{ $t("Bring own autonomy") }}</div> |
||||
|
</div> |
||||
|
<div class="mission-btn boxStyle"> |
||||
|
<div class="t1">{{ $t("Mission").toLocaleUpperCase() }}</div> |
||||
|
<div class="t2">{{ $t("Empowering everyone to have") }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="h1">{{ $t("Meet Our Team").toLocaleUpperCase() }}</div> |
||||
|
|
||||
|
<div class="avatar-box"> |
||||
|
<div class="flex-col-sb" v-for="(item, index) of counts" :key="index"> |
||||
|
<img class="avatar" :src="item" /> |
||||
|
<div> |
||||
|
<div class="name-link-box"> |
||||
|
<div> |
||||
|
<div class="name">{{ names[index] }}</div> |
||||
|
<div class="title">{{ $t(titles[index]) }}</div> |
||||
|
</div> |
||||
|
<img class="linked" src="../assets/imgs/linkedin-round.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="table-title"> |
||||
|
<div class="h1"> |
||||
|
{{ $t("Subscibe to our newsletter").toLocaleUpperCase() }} |
||||
|
</div> |
||||
|
<div class="h2">{{ $t("Stay ahead with the") }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-col-center flex-center input-box"> |
||||
|
<input |
||||
|
type="text" |
||||
|
class="input-text" |
||||
|
v-model="text1" |
||||
|
:placeholder="$t('Your Name')" |
||||
|
/> |
||||
|
<input |
||||
|
type="text" |
||||
|
class="input-text" |
||||
|
v-model="text2" |
||||
|
:placeholder="$t('Email Address')" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="sub-box"> |
||||
|
<div class="sub-box-btn-box" @click="subscribe"> |
||||
|
<img class="SUBSCRIBE" src="../assets/imgs/SUBSCRIBE-btn.png" /> |
||||
|
<div class="sub-box-text"> |
||||
|
{{ $t("Subscribe").toLocaleUpperCase() }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="h5-box"> |
||||
|
<div class="top-box"> |
||||
|
<div class="top-text-box"> |
||||
|
<div class="title"> |
||||
|
{{ $t("Get your").toLocaleUpperCase() }} |
||||
|
<span class="text-own"> |
||||
|
{{ $t("own autonomy").toLocaleUpperCase() }}</span |
||||
|
> |
||||
|
{{ $t("with").toLocaleUpperCase() }} |
||||
|
<span class="text-block">{{ |
||||
|
$t("blockchain technology").toLocaleUpperCase() |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<div class="top-box-l1"> |
||||
|
{{ $t("Blockchain technologies enable") }} |
||||
|
</div> |
||||
|
<div class="top-box-l2">{{ $t("BuzzUp delivers an") }}</div> |
||||
|
<div class="top-box-l3">{{ $t("We also advance") }}</div> |
||||
|
</div> |
||||
|
<img class="aboutus" src="../assets/imgs/aboutus-h5.png" /> |
||||
|
</div> |
||||
|
<div class="btns-box"> |
||||
|
<div class="vision-btn boxStyle"> |
||||
|
<div class="t1">{{ $t("Vision").toLocaleUpperCase() }}</div> |
||||
|
<div class="t2">{{ $t("Bring own autonomy") }}</div> |
||||
|
</div> |
||||
|
<div class="mission-btn boxStyle"> |
||||
|
<div class="t1">{{ $t("Mission").toLocaleUpperCase() }}</div> |
||||
|
<div class="t2">{{ $t("Empowering everyone to have") }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="h1" style="margin-top: 40px"> |
||||
|
{{ $t("Meet Our Team").toLocaleUpperCase() }} |
||||
|
</div> |
||||
|
|
||||
|
<div class="avatar-box"> |
||||
|
<div |
||||
|
class="avatar-box-item" |
||||
|
v-for="(item, index) of counts" |
||||
|
:key="index" |
||||
|
> |
||||
|
<img class="avatar" :src="item" /> |
||||
|
<div> |
||||
|
<div class="name-link-box"> |
||||
|
<div> |
||||
|
<div class="name">{{ names[index] }}</div> |
||||
|
<div class="title">{{ $t(titles[index]) }}</div> |
||||
|
</div> |
||||
|
<img class="linked" src="../assets/imgs/linkedin-round.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="table-title"> |
||||
|
<div class="h1"> |
||||
|
{{ $t("Subscibe to our newsletter").toLocaleUpperCase() }} |
||||
|
</div> |
||||
|
<div class="h2">{{ $t("Stay ahead with the") }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-col-center flex-center input-box"> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="text1" |
||||
|
class="input-text" |
||||
|
:placeholder="$t('Your Name')" |
||||
|
/> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="text2" |
||||
|
class="input-text" |
||||
|
:placeholder="$t('Email Address')" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="sub-box"> |
||||
|
<div class="sub-box-btn-box" @click="subscribe"> |
||||
|
<img class="SUBSCRIBE" src="../assets/imgs/SUBSCRIBE-btn.png" /> |
||||
|
<div class="sub-box-text"> |
||||
|
{{ $t("Subscribe").toLocaleUpperCase() }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { message } from "ant-design-vue"; |
||||
|
import request from "../http/service"; |
||||
|
import i18n from "../i18n"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
counts: [ |
||||
|
require("../assets/imgs/Alan.png"), |
||||
|
require("../assets/imgs/Allen.png"), |
||||
|
require("../assets/imgs/Chan.png"), |
||||
|
require("../assets/imgs/Mask.png"), |
||||
|
], |
||||
|
names: ["Alan Leung", "Allen Hsieh", "Stefanie Chan", "Julian Chan"], |
||||
|
titles: ["CEO", "CTO", "Marketing Manager", "Project Manager"], |
||||
|
text1: "", |
||||
|
text2: "", |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
validateEmail(email) { |
||||
|
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
return re.test(email); |
||||
|
}, |
||||
|
async subscribe() { |
||||
|
if (this.text1 == "") { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.warning("Please enter the correct name"); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.warning("请输入正确的姓名"); |
||||
|
} else { |
||||
|
message.warning("請輸入正確的姓名"); |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
if (!this.validateEmail(this.text2)) { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.warning("Please enter the correct email address"); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.warning("请输入正确的邮箱"); |
||||
|
} else { |
||||
|
message.warning("請輸入正確的郵箱"); |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
let res = await request({ |
||||
|
url: "/v1/subscribe", |
||||
|
method: "post", |
||||
|
data: { |
||||
|
email_address: this.text2, |
||||
|
name: this.text1, |
||||
|
}, |
||||
|
}); |
||||
|
if (res.code == 0) { |
||||
|
this.text1 = ""; |
||||
|
this.text2 = ""; |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.success("Subscription successful"); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.success("订阅成功"); |
||||
|
} else { |
||||
|
message.success("訂閱成功"); |
||||
|
} |
||||
|
} else { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.error("Subscription successful"); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.error("订阅失败"); |
||||
|
} else { |
||||
|
message.error("訂閱失敗"); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.aboutus { |
||||
|
width: 280px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
align-items: start; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.top-text-box { |
||||
|
width: 580px; |
||||
|
} |
||||
|
|
||||
|
.top-text-box .title { |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
padding-bottom: 48px; |
||||
|
} |
||||
|
|
||||
|
.text-own { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.text-block { |
||||
|
color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.top-box-l1, |
||||
|
.top-box-l2, |
||||
|
.top-box-l3 { |
||||
|
font-size: 18px; |
||||
|
margin: 15px 40px 15px 0; |
||||
|
} |
||||
|
|
||||
|
.top-box-l2 { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.btns-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin: 50px 0; |
||||
|
} |
||||
|
|
||||
|
.vision-btn, |
||||
|
.mission-btn { |
||||
|
width: 420px; |
||||
|
height: 160px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 15px 40px; |
||||
|
box-sizing: border-box; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.vision-btn { |
||||
|
background-color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.mission-btn { |
||||
|
background-color: #fcc801; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t1 { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t2 { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table-title { |
||||
|
margin: 60px 0 0; |
||||
|
} |
||||
|
|
||||
|
.avatar-box { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 160px; |
||||
|
height: 160px; |
||||
|
border-radius: 50%; |
||||
|
border: 4px solid #fb9901; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
.linked { |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
.name-link-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .name { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .title { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 6px solid #000; |
||||
|
padding: 5px 0 5px 30px; |
||||
|
background: #fcc801; |
||||
|
border-radius: 30px; |
||||
|
width: 800px; |
||||
|
height: 80px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 100px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 28px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 320px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.aboutus { |
||||
|
width: 360px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
align-items: start; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.top-text-box { |
||||
|
width: 800px; |
||||
|
} |
||||
|
|
||||
|
.top-text-box .title { |
||||
|
font-size: 40px; |
||||
|
font-weight: bold; |
||||
|
padding-bottom: 60px; |
||||
|
} |
||||
|
|
||||
|
.text-own { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.text-block { |
||||
|
color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.top-box-l1, |
||||
|
.top-box-l2, |
||||
|
.top-box-l3 { |
||||
|
font-size: 24px; |
||||
|
margin: 20px 60px 20px 0; |
||||
|
} |
||||
|
|
||||
|
.top-box-l2 { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.btns-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin: 50px 0; |
||||
|
} |
||||
|
|
||||
|
.vision-btn, |
||||
|
.mission-btn { |
||||
|
width: 640px; |
||||
|
height: 180px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
padding: 15px 40px; |
||||
|
box-sizing: border-box; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.vision-btn { |
||||
|
background-color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.mission-btn { |
||||
|
background-color: #fcc801; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t1 { |
||||
|
font-size: 36px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t2 { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 36px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 24px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table-title { |
||||
|
margin: 90px 0 0; |
||||
|
} |
||||
|
|
||||
|
.avatar-box { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
margin-top: 50px; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 180px; |
||||
|
height: 180px; |
||||
|
border-radius: 50%; |
||||
|
border: 6px solid #fb9901; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
.linked { |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
.name-link-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .name { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .title { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 60px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 8px solid #000; |
||||
|
padding: 10px 0 10px 30px; |
||||
|
background: #fcc801; |
||||
|
border-radius: 40px; |
||||
|
width: 1000px; |
||||
|
height: 100px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 140px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 400px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 1000px) { |
||||
|
.desktop-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.aboutus { |
||||
|
width: 280px; |
||||
|
height: auto; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
margin-top: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.top-text-box { |
||||
|
width: 320px; |
||||
|
} |
||||
|
|
||||
|
.top-text-box .title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
padding: 0 10px 16px; |
||||
|
} |
||||
|
|
||||
|
.text-own { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.text-block { |
||||
|
color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.top-box-l1, |
||||
|
.top-box-l2, |
||||
|
.top-box-l3 { |
||||
|
font-size: 16px; |
||||
|
margin: 10px 10px 10px 10px; |
||||
|
} |
||||
|
|
||||
|
.top-box-l2 { |
||||
|
color: #fb9901; |
||||
|
} |
||||
|
|
||||
|
.btns-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.vision-btn, |
||||
|
.mission-btn { |
||||
|
width: 320px; |
||||
|
height: 130px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 12px 20px; |
||||
|
box-sizing: border-box; |
||||
|
text-align: center; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.vision-btn { |
||||
|
background-color: #fbad33; |
||||
|
} |
||||
|
|
||||
|
.mission-btn { |
||||
|
background-color: #fcc801; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t1 { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.boxStyle .t2 { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table-title { |
||||
|
margin: 120px 0 0; |
||||
|
width: 320px; |
||||
|
} |
||||
|
|
||||
|
.table-title .h1 { |
||||
|
font-size: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table-title .h2 { |
||||
|
margin-top: 8px; |
||||
|
font-size: 16px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.avatar-box { |
||||
|
margin: 10px 0 40px; |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
grid-template-rows: repeat(2, 100px); |
||||
|
gap: 70px 10px; |
||||
|
} |
||||
|
|
||||
|
.avatar-box-item { |
||||
|
height: 160px; |
||||
|
/* background-color: rgba(255, 255, 255, 0.8); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.8); */ |
||||
|
padding: 20px; |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
border-radius: 50%; |
||||
|
border: 4px solid #fb9901; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
} |
||||
|
|
||||
|
.linked { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
} |
||||
|
|
||||
|
.name-link-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .name { |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.name-link-box .title { |
||||
|
font-size: 12px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 4px solid #000; |
||||
|
padding: 4px 0 4px 20px; |
||||
|
background: #fcc801; |
||||
|
border-radius: 20px; |
||||
|
width: 320px; |
||||
|
height: 54px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.input-text + .input-text { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 100px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 200px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,257 @@ |
|||||
|
<template> |
||||
|
<div class="blog"> |
||||
|
<div class="ourblog">{{ $t("Our Blog") }}</div> |
||||
|
|
||||
|
<div class="waterfall-container"> |
||||
|
<div @click="toDetail(index)" class="box mt-2" v-for="(item, index) of blogs" :key="index"> |
||||
|
<!-- <div class="photo row-center fz-wb-550">BLOG COVER PHOTO</div> --> |
||||
|
<img class="photo row-center fz-wb-550" :src="item.url"> |
||||
|
<div class="title">{{ item.title }}</div> |
||||
|
<div class="content"> |
||||
|
{{ item.content }} |
||||
|
</div> |
||||
|
<div class="fz-14 tar mr-1 mt-1 time">{{ formatDate(item.time) }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from "../http/service"; |
||||
|
// import { ref } from "vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'Blog', |
||||
|
props: { |
||||
|
msg: String |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
blogs: [], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(time) { |
||||
|
const date = new Date(time * 1000); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
|
const day = String(date.getDate()).padStart(2, '0'); |
||||
|
return `${month}\n${day}, ${year}`; |
||||
|
}, |
||||
|
toDetail(index) { |
||||
|
let blog = this.blogs[index]; |
||||
|
this.$router.push({ name: 'Detail' }); |
||||
|
sessionStorage.setItem('blogDetail', JSON.stringify(blog)); |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
var res = await request({ url: "/v1/blog", method: "post" }); |
||||
|
this.blogs = res.data; |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
.blog { |
||||
|
width: 940px; |
||||
|
|
||||
|
.ourblog { |
||||
|
text-align: center; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
|
||||
|
.waterfall-container { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
gap: 10px; |
||||
|
margin-bottom: 20px; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 280px; |
||||
|
// min-height: 350px; |
||||
|
height: 320px; |
||||
|
border-radius: 20px; |
||||
|
border: 4px solid #000; |
||||
|
padding: 0px 0px 12px; |
||||
|
background-color: #fcc801; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
|
||||
|
.photo { |
||||
|
width: 280px; |
||||
|
height: auto; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: -4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
height: 40px; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
// height: 70px; |
||||
|
// margin: 8px 0 ; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width:1000px) { |
||||
|
.blog { |
||||
|
width: 320px; |
||||
|
|
||||
|
|
||||
|
.ourblog { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
margin: 20px 0 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.waterfall-container { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 150px; |
||||
|
// min-height: 350px; |
||||
|
max-height: 240px; |
||||
|
border-radius: 20px; |
||||
|
border: 4px solid #000; |
||||
|
padding: 0px 0px 12px; |
||||
|
background-color: #fcc801; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
|
||||
|
.photo { |
||||
|
width: 150px; |
||||
|
height: auto; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: -4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
height: 40px; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
// height: 70px; |
||||
|
// margin: 8px 0 ; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
.blog { |
||||
|
width: 1400px; |
||||
|
|
||||
|
.waterfall-container { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(4, 1fr); |
||||
|
gap: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 360px; |
||||
|
// min-height: 350px; |
||||
|
height: 420px; |
||||
|
border-radius: 20px; |
||||
|
border: 4px solid #000; |
||||
|
padding: 0px 0px 12px; |
||||
|
background-color: #fcc801; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
|
||||
|
.photo { |
||||
|
width: 360px; |
||||
|
height: auto; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: -4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
align-items: start; |
||||
|
justify-content: center; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
// height: 70px; |
||||
|
// margin: 8px 0 ; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 4; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,128 @@ |
|||||
|
<template> |
||||
|
<div class="detail"> |
||||
|
<div class="fz-wb-1000 fz-18 title">{{ blog.title }}</div> |
||||
|
<div class="fz-14 mt-1 fz-wb-550 time">{{ formatDate(blog.time) }}</div> |
||||
|
<img class="cover mt-3 row-center" :src="blog.url"> |
||||
|
<div class="text fz-wb-550 fz-14 mt-3"> |
||||
|
{{ |
||||
|
blog.content |
||||
|
}} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
blog: {}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
formatDate(time) { |
||||
|
const date = new Date(time * 1000); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
||||
|
const day = String(date.getDate()).padStart(2, '0'); |
||||
|
return `${month}\n${day}, ${year}`; |
||||
|
}, |
||||
|
}, |
||||
|
async created() { |
||||
|
let res = sessionStorage.getItem('blogDetail'); |
||||
|
this.blog = JSON.parse(res); |
||||
|
// sessionStorage.removeItem('blogDetail'); |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
|
||||
|
.title { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.cover { |
||||
|
width: 800px; |
||||
|
height: auto; |
||||
|
background-color: #fbad33; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
white-space: pre-wrap; |
||||
|
font-size: 20px; |
||||
|
width: 900px; |
||||
|
text-align: center; |
||||
|
margin: 0 auto 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width:1000px) { |
||||
|
.title { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.cover { |
||||
|
width: 300px; |
||||
|
height: auto; |
||||
|
background-color: #fbad33; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
white-space: pre-wrap; |
||||
|
font-size: 16px; |
||||
|
text-align: center; |
||||
|
width: 300px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
.detail { |
||||
|
|
||||
|
.title { |
||||
|
font-size: 44px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
.cover { |
||||
|
width: 1000px; |
||||
|
height: auto; |
||||
|
background-color: #fbad33; |
||||
|
border: 4px solid #000; |
||||
|
border-radius: 20px; |
||||
|
margin: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
white-space: pre-wrap; |
||||
|
font-size: 26px; |
||||
|
text-align: center; |
||||
|
width: 1200px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
1857
src/pages/HomePage.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,733 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="desktop-box"> |
||||
|
<div class="wel-box"> |
||||
|
<div class="wel-text">{{ $t("Welcome to").toLocaleUpperCase() }} <span class="BUZZUP-text">{{ $t('BUZZUP') |
||||
|
}}</span> |
||||
|
{{ $t('Support') }}</div> |
||||
|
<div class="hlep-text">{{ $t("We're here to help") }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="help-top-box"> |
||||
|
<div class="qs-box boxStyle"> |
||||
|
<img class="que-img" src="../assets/imgs/question.png"> |
||||
|
<div class="title">{{ $t("Getting Started").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Create a wallet for a BUZZUP ID") }}</div> |
||||
|
<div>{{ $t("Import a wallet for a BUZZUP ID") }}</div> |
||||
|
<div>{{ $t("Add / Switch BUZZUP Account") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="qs-box boxStyle"> |
||||
|
<img class="que-img" src="../assets/imgs/security.png"> |
||||
|
<div class="title">{{ $t('SECURITY') }}</div> |
||||
|
<div>{{ $t("Secret Recovery Phrase Backup") }}</div> |
||||
|
<div>{{ $t("Wallet Accounts Backup") }}</div> |
||||
|
<div>{{ $t("Biometrics and Change Passcode") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="help-bottom-box"> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/chat.png"> |
||||
|
<div class="title">{{ $t("Instant Messaging").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Add Friend") }}</div> |
||||
|
<div>{{ $t("Create Group Chat") }}</div> |
||||
|
<div>{{ $t("Initiate Send & Receive Crypto") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/folder.png"> |
||||
|
<div class="title">{{ $t("File Storage").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Upload & Download Files") }}</div> |
||||
|
<div>{{ $t("Create Folders") }}</div> |
||||
|
<div>{{ $t("Manage Storage") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/wallet.png"> |
||||
|
<div class="title">{{ $t("Wallet").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Add Network & Crypto Types") }}</div> |
||||
|
<div>{{ $t("Send & Receive Crypto") }}</div> |
||||
|
<div>{{ $t("Swap Crypto") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="question-box"> |
||||
|
<div class="h1">{{ $t("Have more Questions") }}?</div> |
||||
|
<div class="h2">{{ $t("If you cannot find the answer") }} |
||||
|
<span class="email-text"> support@buzz-up.io</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="input-title-box"> |
||||
|
<div class="h1">{{ $t("SUBSCRIBE TO OUR NEWSLETTER") }}</div> |
||||
|
<div class="h2">{{ $t('Stay ahead with the') }}</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="flex-col-center flex-center input-box"> |
||||
|
<input type="text" class="input-text" v-model="text1" :placeholder="$t('Your Name')"> |
||||
|
<input type="text" class="input-text" v-model="text2" :placeholder="$t('Email Address')"> |
||||
|
</div> |
||||
|
<div class="sub-box"> |
||||
|
<div class="sub-box-btn-box" @click="subscribe"> |
||||
|
<img class="SUBSCRIBE" src="../assets/imgs/SUBSCRIBE-btn.png" /> |
||||
|
<div class="sub-box-text">{{ $t('Subscribe').toLocaleUpperCase() }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="h5-box"> |
||||
|
<div class="wel-box"> |
||||
|
<div class="wel-text">{{ $t("Welcome to").toLocaleUpperCase() }} <span class="BUZZUP-text">{{ $t('BUZZUP') |
||||
|
}}</span> |
||||
|
{{ $t('Support') }}</div> |
||||
|
<div class="hlep-text">{{ $t("We're here to help") }}</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="help-top-box"> |
||||
|
<div class="qs-box boxStyle"> |
||||
|
<img class="que-img" src="../assets/imgs/question.png"> |
||||
|
<div class="title">{{ $t("Getting Started").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Create a wallet for a BUZZUP ID") }}</div> |
||||
|
<div>{{ $t("Import a wallet for a BUZZUP ID") }}</div> |
||||
|
<div>{{ $t("Add / Switch BUZZUP Account") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="qs-box boxStyle"> |
||||
|
<img class="que-img" src="../assets/imgs/security.png"> |
||||
|
<div class="title">{{ $t('SECURITY') }}</div> |
||||
|
<div>{{ $t("Secret Recovery Phrase Backup") }}</div> |
||||
|
<div>{{ $t("Wallet Accounts Backup") }}</div> |
||||
|
<div>{{ $t("Biometrics and Change Passcode") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="help-bottom-box"> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/chat.png"> |
||||
|
<div class="title">{{ $t("Instant Messaging").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Add Friend") }}</div> |
||||
|
<div>{{ $t("Create Group Chat") }}</div> |
||||
|
<div>{{ $t("Initiate Send & Receive Crypto") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/folder.png"> |
||||
|
<div class="title">{{ $t("File Storage").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Upload & Download Files") }}</div> |
||||
|
<div>{{ $t("Create Folders") }}</div> |
||||
|
<div>{{ $t("Manage Storage") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="cfw-box boxStyle"> |
||||
|
<img class="cfw-img" src="../assets/imgs/wallet.png"> |
||||
|
<div class="title">{{ $t("Wallet").toLocaleUpperCase() }}</div> |
||||
|
<div>{{ $t("Add Network & Crypto Types") }}</div> |
||||
|
<div>{{ $t("Send & Receive Crypto") }}</div> |
||||
|
<div>{{ $t("Swap Crypto") }}</div> |
||||
|
<div class="title"> |
||||
|
{{ $t("FIND OUT MORE") }} |
||||
|
<img class="next-img" src="../assets/imgs/next.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="question-box"> |
||||
|
<div class="h1">{{ $t("Have more Questions") }}?</div> |
||||
|
<div class="h2">{{ $t("If you cannot find the answer") }} |
||||
|
<span class="email-text"> support@buzz-up.io</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="input-title-box"> |
||||
|
<div class="h1">{{ $t("SUBSCRIBE TO OUR NEWSLETTER") }}</div> |
||||
|
<div class="h2">{{ $t('Stay ahead with the') }}</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="flex-col-center flex-center input-box"> |
||||
|
<input type="text" v-model="text1" class="input-text" :placeholder="$t('Your Name')"> |
||||
|
<input type="text" v-model="text2" class="input-text" :placeholder="$t('Email Address')"> |
||||
|
</div> |
||||
|
<div class="sub-box"> |
||||
|
<div class="sub-box-btn-box" @click="subscribe"> |
||||
|
<img class="SUBSCRIBE" src="../assets/imgs/SUBSCRIBE-btn.png" /> |
||||
|
<div class="sub-box-text">{{ $t('Subscribe').toLocaleUpperCase() }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import request from "../http/service"; |
||||
|
import i18n from "../i18n"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
text1: "", |
||||
|
text2: "" |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
validateEmail(email) { |
||||
|
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||
|
return re.test(email); |
||||
|
}, |
||||
|
async subscribe() { |
||||
|
if (this.text1 == "") { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.warning('Please enter the correct name'); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.warning('请输入正确的姓名'); |
||||
|
} else { |
||||
|
message.warning('請輸入正確的姓名'); |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
if (!this.validateEmail(this.text2)) { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.warning('Please enter the correct email address'); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.warning('请输入正确的邮箱'); |
||||
|
} else { |
||||
|
message.warning('請輸入正確的郵箱'); |
||||
|
} |
||||
|
return; |
||||
|
} |
||||
|
let res = await request({ |
||||
|
url: "/v1/subscribe", method: "post", data: { |
||||
|
"email_address": this.text2, |
||||
|
"name": this.text1 |
||||
|
} |
||||
|
}); |
||||
|
if (res.code == 0) { |
||||
|
this.text1 = ""; |
||||
|
this.text2 = ""; |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.success('Subscription successful'); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.success('订阅成功'); |
||||
|
} else { |
||||
|
message.success('訂閱成功'); |
||||
|
} |
||||
|
} else { |
||||
|
if (i18n.global.locale == "en") { |
||||
|
message.error('Subscription fail'); |
||||
|
} else if (i18n.global.locale == "chs") { |
||||
|
message.error('订阅失败'); |
||||
|
} else { |
||||
|
message.error('訂閱失敗'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.BUZZUP-text { |
||||
|
color: #FB9901; |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1000px) and (max-width: 1920px) { |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.help-top-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.qs-box { |
||||
|
width: 444px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 24px 30px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FBAD33; |
||||
|
height: 300px; |
||||
|
justify-content: space-around; |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.qs-box .title { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.help-bottom-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.cfw-box { |
||||
|
width: 294px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 16px 0px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FCC801; |
||||
|
height: 280px; |
||||
|
justify-content: space-around; |
||||
|
font-size: 19px; |
||||
|
} |
||||
|
|
||||
|
.cfw-img { |
||||
|
width: 52px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.next-img { |
||||
|
width: 10px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.wel-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 70px 0 30px; |
||||
|
} |
||||
|
|
||||
|
.wel-text { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.help-text { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.question-box { |
||||
|
display: flex; |
||||
|
height: 120px; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 80px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.que-img { |
||||
|
width: 52px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.email-text { |
||||
|
color: #3D6CFF; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 8px solid #000; |
||||
|
padding: 5px 0 5px 30px; |
||||
|
background: #FCC801; |
||||
|
border-radius: 30px; |
||||
|
width: 800px; |
||||
|
height: 80px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 100px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 28px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 320px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 1920px) { |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 22px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.h5-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.help-top-box { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.qs-box { |
||||
|
margin-top: 20px; |
||||
|
width: 660px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 24px 30px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FBAD33; |
||||
|
height: 360px; |
||||
|
justify-content: space-around; |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.qs-box .title { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.help-bottom-box { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
margin: 30px 0; |
||||
|
} |
||||
|
|
||||
|
.cfw-box { |
||||
|
width: 420px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 16px 0px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FCC801; |
||||
|
height: 320px; |
||||
|
justify-content: space-around; |
||||
|
font-size: 19px; |
||||
|
} |
||||
|
|
||||
|
.cfw-img { |
||||
|
width: 52px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.next-img { |
||||
|
width: 10px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.wel-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 70px 0 30px; |
||||
|
} |
||||
|
|
||||
|
.wel-text { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.help-text { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.question-box { |
||||
|
display: flex; |
||||
|
height: 120px; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 80px; |
||||
|
} |
||||
|
|
||||
|
.que-img { |
||||
|
width: 52px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.email-text { |
||||
|
color: #3D6CFF; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 8px solid #000; |
||||
|
padding: 5px 0 5px 30px; |
||||
|
background: #FCC801; |
||||
|
border-radius: 30px; |
||||
|
width: 1000px; |
||||
|
height: 80px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 100px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 400px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width:1000px) { |
||||
|
|
||||
|
.h1 { |
||||
|
font-size: 18px; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.h2 { |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.desktop-box { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.help-top-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.qs-box { |
||||
|
width: 320px; |
||||
|
height: 240px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FBAD33; |
||||
|
justify-content: space-around; |
||||
|
font-size: 18px; |
||||
|
margin-bottom: 10px; |
||||
|
padding: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.qs-box .title { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.help-bottom-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.cfw-box { |
||||
|
width: 320px; |
||||
|
height: 240px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background-color: #FCC801; |
||||
|
justify-content: space-around; |
||||
|
font-size: 18px; |
||||
|
padding: 10px 0; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.cfw-img { |
||||
|
width: 40px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.next-img { |
||||
|
width: 7px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.wel-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 40px 0 20px; |
||||
|
} |
||||
|
|
||||
|
.wel-text { |
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.hlep-text { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.question-box { |
||||
|
display: flex; |
||||
|
height: 120px; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.que-img { |
||||
|
width: 40px; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.email-text { |
||||
|
color: #3D6CFF; |
||||
|
} |
||||
|
|
||||
|
.input-box { |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.input-text { |
||||
|
border: 4px solid #000; |
||||
|
padding: 4px 0 4px 20px; |
||||
|
background: #FCC801; |
||||
|
border-radius: 20px; |
||||
|
width: 320px; |
||||
|
height: 54px; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1608); |
||||
|
font-size: 16px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.input-text+.input-text { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.sub-box { |
||||
|
height: 100px; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.sub-box-btn-box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.sub-box-text { |
||||
|
position: absolute; |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.SUBSCRIBE { |
||||
|
width: 200px; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,23 @@ |
|||||
|
import { createWebHashHistory, createRouter } from 'vue-router' |
||||
|
|
||||
|
import HomePage from './pages/HomePage.vue' |
||||
|
import AboutUs from './pages/AboutUs.vue' |
||||
|
import Blog from './pages/Blog.vue' |
||||
|
import Detail from './pages/Detail.vue' |
||||
|
import Support from './pages/Support.vue' |
||||
|
|
||||
|
const routes = [ |
||||
|
{ path: '/', component: HomePage }, |
||||
|
{ path: '/pages/HomePage', name: "HomePage", component: HomePage }, |
||||
|
{ path: '/pages/AboutUs', name: "AboutUs", component: AboutUs }, |
||||
|
{ path: '/pages/Blog', name: "Blog", component: Blog }, |
||||
|
{ path: '/pages/Detail', name: "Detail", component: Detail }, |
||||
|
{ path: '/pages/Support', name: "Support", component: Support }, |
||||
|
] |
||||
|
|
||||
|
const router = createRouter({ |
||||
|
history: createWebHashHistory(), |
||||
|
routes, |
||||
|
}) |
||||
|
|
||||
|
export default router |
||||
@ -0,0 +1,299 @@ |
|||||
|
$iterations: 10; |
||||
|
|
||||
|
* { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
// body { |
||||
|
// font-size: 1rem; |
||||
|
// color: #000; |
||||
|
// // user-select: none; |
||||
|
// background-color: #f8f8fb; |
||||
|
// font-family: Play; |
||||
|
// width: 100%; |
||||
|
// overflow-x: hidden; |
||||
|
|
||||
|
// &::-webkit-scrollbar { |
||||
|
// display: none; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
.text-white { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.text-black { |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.text-sub { |
||||
|
color: #8492a6; |
||||
|
} |
||||
|
|
||||
|
.text-primary { |
||||
|
color: #f7b93f; |
||||
|
} |
||||
|
|
||||
|
.text-blue { |
||||
|
color: #00b8d9; |
||||
|
} |
||||
|
|
||||
|
.text-success { |
||||
|
color: #36B37E; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through $iterations { |
||||
|
|
||||
|
// 外边距 |
||||
|
.mt-#{$i}px { |
||||
|
margin-top: #{$i}px; |
||||
|
} |
||||
|
|
||||
|
.ml-#{$i}px { |
||||
|
margin-left: #{$i}px; |
||||
|
} |
||||
|
|
||||
|
.mt-#{$i} { |
||||
|
margin-top: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.mb-#{$i} { |
||||
|
margin-bottom: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.ml-#{$i} { |
||||
|
margin-left: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.mr-#{$i} { |
||||
|
margin-right: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.m-#{$i} { |
||||
|
margin: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.mtb-#{$i} { |
||||
|
margin: 10px*$i 0px; |
||||
|
} |
||||
|
|
||||
|
.mlr-#{$i} { |
||||
|
margin: 0px 10px*$i; |
||||
|
} |
||||
|
|
||||
|
// 内边距 |
||||
|
.pt-#{$i}px { |
||||
|
padding-top: #{$i}px; |
||||
|
} |
||||
|
|
||||
|
.pl-#{$i}px { |
||||
|
padding-left: #{$i}px; |
||||
|
} |
||||
|
|
||||
|
.pt-#{$i} { |
||||
|
padding-top: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.pb-#{$i} { |
||||
|
padding-bottom: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.pl-#{$i} { |
||||
|
padding-left: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.pr-#{$i} { |
||||
|
padding-right: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.p-#{$i} { |
||||
|
padding: 10px * $i; |
||||
|
} |
||||
|
|
||||
|
.ptb-#{$i} { |
||||
|
padding: 10px*$i 0px; |
||||
|
} |
||||
|
|
||||
|
.plr-#{$i} { |
||||
|
padding: 0px 10px*$i; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@for $i from 0 through 30 { |
||||
|
.fz-#{ $i + 8 } { |
||||
|
font-size: 8px + $i |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 10 { |
||||
|
.flex-#{$i} { |
||||
|
flex: $i |
||||
|
} |
||||
|
|
||||
|
; |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
width: 100%; |
||||
|
height: 0px; |
||||
|
border: 1px solid #D2D4D9; |
||||
|
} |
||||
|
|
||||
|
.fz-wb-100 { |
||||
|
font-weight: 100; |
||||
|
} |
||||
|
|
||||
|
.fz-wb-550 { |
||||
|
font-weight: 550; |
||||
|
} |
||||
|
|
||||
|
.fz-wb-1000 { |
||||
|
font-weight: 1000; |
||||
|
} |
||||
|
|
||||
|
.tac { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.tar { |
||||
|
text-align: end; |
||||
|
} |
||||
|
|
||||
|
.taj { |
||||
|
text-align: justify; |
||||
|
} |
||||
|
|
||||
|
.align-items { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.flex-wrap { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.tad { |
||||
|
text-align: end; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.row-items { |
||||
|
display: flex; |
||||
|
align-items: center |
||||
|
} |
||||
|
|
||||
|
.row-center { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.row-between { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.row-justify-around { |
||||
|
display: flex; |
||||
|
justify-content: space-around |
||||
|
} |
||||
|
|
||||
|
.row-justify-evenly { |
||||
|
display: flex; |
||||
|
justify-content: space-evenly |
||||
|
} |
||||
|
|
||||
|
.row-justify-end { |
||||
|
display: flex; |
||||
|
justify-content: flex-end |
||||
|
} |
||||
|
|
||||
|
.row-justify-start { |
||||
|
display: flex; |
||||
|
justify-content: flex-start |
||||
|
} |
||||
|
|
||||
|
.row-center { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center |
||||
|
} |
||||
|
|
||||
|
.column { |
||||
|
display: flex; |
||||
|
; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-items-center { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-center { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-between { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-around { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-evenly { |
||||
|
display: flex; |
||||
|
justify-content: space-evenly; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-end { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-justify-start { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.column-center { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column |
||||
|
} |
||||
|
|
||||
|
.tp { |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #f7b93f; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tbs { |
||||
|
border-bottom: 2px solid #f7b93f; |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
width: 100%; |
||||
|
height: 1px; |
||||
|
background-color: #fff; |
||||
|
transform: scaleY(0.1); |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
const { defineConfig } = require('@vue/cli-service') |
||||
|
module.exports = defineConfig({ |
||||
|
transpileDependencies: true |
||||
|
}) |
||||
6536
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue