From c17311ba1351cd5e64654c3fc7b2fe765b1e7382 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 09 Oct 2025 11:53:12 +0800
Subject: [PATCH] 1
---
src/i18n/Portuguese.js | 4
src/assets/imgs/footer/f_1b.png | 0
src/i18n/th.js | 4
src/assets/theme/dark/index.scss | 2
src/views/homePage/components/head.vue | 97
src/components/fx-footer/index.vue | 58
src/views/register/identity.vue | 2
src/views/quotes/List.vue | 35
src/assets/css/index.scss | 12
src/assets/imgs/footer/f_5c.png | 0
src/assets/imgs/home/home_21a.png | 0
src/views/C2C/c2c-trade/page/c2cBuy.vue | 6
src/assets/imgs/home/home_12b.png | 0
src/views/C2C/c2cOrder/components/order-data/OrderData.vue | 16
src/components/ex-input/new-input.vue | 24
src/i18n/Spanish.js | 4
src/store/modules/user.js | 12
src/assets/imgs/home/home_22a.png | 0
src/i18n/fa.js | 4
src/views/cryptos/AccountChange/index.vue | 4
src/views/trade/index.vue | 49
src/assets/imgs/my/my_3b.png | 0
src/views/C2C/components/BuyInput.vue | 24
src/assets/imgs/home/home_11b.png | 0
src/store/modules/vant.js | 18
src/components/Transform/list-quotation/index.vue | 57
src/assets/imgs/footer/f_4c.png | 0
src/components/Transform/contract-header/index.vue | 37
src/i18n/Deutsch.js | 4
src/components/ex-input/index.vue | 36
src/assets/imgs/footer/f_4b.png | 0
src/components/normal-head/index.vue | 14
src/views/login/index.vue | 104 +
src/assets/imgs/footer/f_3b.png | 0
src/views/register/setFond.vue | 3
src/views/C2C/c2cOrder/payment/components/Question.vue | 42
src/assets/imgs/home/home_10a.png | 0
src/config/index.js | 14
src/assets/imgs/logo.png | 0
src/assets/imgs/footer/f_2c.png | 0
src/views/C2C/components/adScreening.vue | 18
src/i18n/korean.js | 4
src/components/Transform/trade-order-area/index.vue | 44
src/assets/imgs/my/my_1a.png | 0
src/assets/theme/dark/image/assets/withdrawal.png | 0
src/views/cryptos/promote/init.scss | 4
src/i18n/cn.js | 4
src/assets/theme/_handle.scss | 21
src/assets/imgs/home/home_23a.png | 0
src/assets/imgs/footer/f_5a.png | 0
src/assets/imgs/home/home_21b.png | 0
src/assets/css/variable.scss | 14
src/components/Transform/mining-account/index.vue | 517 ++++---
src/assets/imgs/my/my_2b.png | 0
src/views/payMentMethod/list.vue | 8
src/assets/imgs/footer/f_2a.png | 0
src/views/quotes/components/head.vue | 12
src/views/my/assets.vue | 210 ++
src/i18n/Italy.js | 4
src/assets/imgs/home/home_12a.png | 0
src/i18n/Japanese.js | 4
src/views/C2C/components/buy.vue | 6
src/views/certificationCenter/index.vue | 22
src/assets/imgs/footer/f_1a.png | 0
src/i18n/en.js | 4
src/views/C2C/c2cOrder/components/trade-data/TradeData.vue | 14
src/assets/imgs/home/yl.png | 0
src/views/register/gooleVerify.vue | 2
vite.config.js | 6
src/views/advertiserDetail/index.vue | 61
src/assets/imgs/footer/f_3a.png | 0
src/assets/theme/white/image/assets/recharge.png | 0
src/views/C2C/c2cOrder/payment/PaymentBuy.vue | 18
src/views/ICO/ico.vue | 67
src/components/Transform/trade-head/index.vue | 21
src/assets/theme/white/index.scss | 2
src/router/index.js | 2
src/views/C2C/selectLegalCurrency/index.vue | 9
src/assets/imgs/footer/f_1c.png | 0
src/components/Transform/mining-exchange-input/index.vue | 36
src/assets/imgs/home/home_22b.png | 0
src/assets/theme/dark/image/assets/recharge.png | 0
src/views/register/index.vue | 124 +
src/views/payMentMethod/selectPay.vue | 12
src/assets/imgs/home/home_11a.png | 0
src/components/Transform/perpetual-open/index.vue | 141 +
src/assets/imgs/my/my_3a.png | 0
src/assets/imgs/home/home_23b.png | 0
src/views/ICO/icoRecord.vue | 31
src/assets/theme/index.scss | 244 +++
src/views/C2C/c2cOrder/order-generation/orderGeneration.vue | 9
src/assets/imgs/footer/f_4a.png | 0
src/views/cryptos/Trade/index.vue | 27
src/assets/imgs/my/my_2a.png | 0
src/i18n/vi.js | 4
src/assets/imgs/footer/f_3c.png | 0
src/i18n/zhcn.js | 4
src/store/store.js | 2
src/views/language/index.vue | 15
src/assets/theme/dark/image/assets/transfer.png | 0
src/assets/imgs/my/my_1b.png | 0
src/assets/theme/white/image/assets/transfer.png | 0
src/views/customerService/index.vue | 24
src/assets/theme/white/image/assets/withdrawal.png | 0
src/views/chat/index.vue | 34
src/assets/imgs/footer/f_5b.png | 0
src/views/my/index.vue | 116 -
.env | 3
src/views/homePage/index.vue | 466 ++++--
src/views/cryptos/Exchange/exchangePage.vue | 6
src/assets/imgs/footer/f_2b.png | 0
src/assets/imgs/home/user_img.png | 0
src/components/Transform/assets-head/index.vue | 16
src/assets/imgs/home/home_10b.png | 0
src/assets/theme/_themes.scss | 88 +
src/components/fx-header/index.vue | 14
src/assets/imgs/home/ty.png | 0
src/App.vue | 657 +++++----
118 files changed, 2,435 insertions(+), 1,422 deletions(-)
diff --git a/.env b/.env
index d70f8f6..7af6614 100644
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
-VITE_APP__TITLE = "CME"
-VUE_APP_THEME = "dark"
\ No newline at end of file
+VITE_APP__TITLE = "CME"
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7c128bc..ad992d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,17 @@
<template>
- <div class="pt-5" >
- <router-view />
- </div>
- <fx-footer v-if="route.meta.tarbar" />
+ <van-config-provider :theme="store.state.vant.theme">
+ <div class="app-container">
+ <router-view />
+ </div>
+ <fx-footer v-if="route.meta.tarbar" />
+ </van-config-provider>
</template>
<script setup>
-
import fxFooter from '@/components/fx-footer/index.vue'
import { authorizedLogin } from "@/service/login.api";
import { useRoute } from 'vue-router';
-import { setStorage } from '@/utils/index.js'
+import { setStorage, getStorage } from '@/utils/index.js'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router';
@@ -19,14 +20,20 @@
import { GET_USERINFO } from '@/store/types.store'
const router = useRouter()
const route = useRoute()
+// 启动时获取缓存的黑夜白天模式
+const theme = getStorage('theme') || 'light'
+store.commit('vant/SET_THEME', theme)
+
+// 获取客服地址
+store.dispatch('user/GET_CUSTOMER_SERVICE_URL')
const geturlkey = (name) => {
- return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
+ return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
}
let usercode = geturlkey('usercode');
if (usercode) {
- setStorage('usercode', usercode);
+ setStorage('usercode', usercode);
}
const userStore = useUserStore();
@@ -41,62 +48,209 @@
// 登录按钮逻辑，标记为异步函数
const loginButton = async () => {
- if (typeof window.ethereum !== 'undefined') {
- if (!(userStore.userInfo && userStore.userInfo.token)) {
- try {
- // 请求用户授权
- const accounts = await window.ethereum.request({
- method: 'eth_requestAccounts'
- });
- const userAddress = accounts[0];
- console.log("accounts:", accounts);
+ if (typeof window.ethereum !== 'undefined') {
+ if (!(userStore.userInfo && userStore.userInfo.token)) {
+ try {
+ // 请求用户授权
+ const accounts = await window.ethereum.request({
+ method: 'eth_requestAccounts'
+ });
+ const userAddress = accounts[0];
+ console.log("accounts:", accounts);
- // 签名消息
- const message = "请确认您的身份。";
- const signature = await window.ethereum.request({
- method: 'personal_sign',
- params: [message, userAddress],
- });
+ // 签名消息
+ const message = "请确认您的身份。";
+ const signature = await window.ethereum.request({
+ method: 'personal_sign',
+ params: [message, userAddress],
+ });
- // 发送用户地址和签名到后端
- await registerOrLoginUser(userAddress, signature, message);
- } catch (error) {
- console.error('连接钱包时出错:', error);
- if (error.code === 4001) {
- // 用户拒绝连接
- alert(error.message);
- } else {
- console.error('发生错误:', error);
- alert(error.message);
- }
- }
- } else {
- return;
- }
- } else {
- alert('Please install Little Fox Wallet！');
- }
+ // 发送用户地址和签名到后端
+ await registerOrLoginUser(userAddress, signature, message);
+ } catch (error) {
+ console.error('连接钱包时出错:', error);
+ if (error.code === 4001) {
+ // 用户拒绝连接
+ alert(error.message);
+ } else {
+ console.error('发生错误:', error);
+ alert(error.message);
+ }
+ }
+ } else {
+ return;
+ }
+ } else {
+ alert('Please install Little Fox Wallet！');
+ }
}
// registerOrLoginUser 改为异步函数
-const registerOrLoginUser = (userAddress, signature, message) => {
- console.log(userAddress);
- console.log(signature);
- console.log(message);
- const res = authorizedLogin({foxAddress: userAddress}).then((res) => {
- userStore[GET_USERINFO](res)
- store.commit('user/SET_USERINFO', res)
- router.push('/')
- }).catch((res) => {
- console.log(res)
- }) // 确保调用的接口是异步的
+const registerOrLoginUser = (userAddress, signature, message) => {
+ console.log(userAddress);
+ console.log(signature);
+ console.log(message);
+ const res = authorizedLogin({ foxAddress: userAddress }).then((res) => {
+ userStore[GET_USERINFO](res)
+ store.commit('user/SET_USERINFO', res)
+ router.push('/')
+ }).catch((res) => {
+ console.log(res)
+ }) // 确保调用的接口是异步的
};
+
</script>
<style lang="scss">
- @import "assets/init";
- @import "assets/mixin";
- @import "assets/css/variable.scss";
+@import "assets/init";
+@import "assets/mixin";
+// @import "assets/css/variable.scss";
+
+.app-container,
+body,
+html {
+ @include themify() {
+ color: themed("text_color");
+ background: themed("main_background");
+ }
+}
+
+.nationList {
+ .van-action-sheet {
+ height: 80%;
+ }
+}
+
+.van-dialog {
+ width: var(--van-dialog-width) !important;
+}
+
+.van-icon-arrow-left {
+ // color: #fff !important;
+}
+
+.van-nav-bar::after {
+ border-bottom: none;
+}
+
+.van-tabbar-item__text {
+ color: #BEC1D2;
+}
+
+#cryptos {
+ // background-color: $mainbgWhiteColor;
+
+ // 上传图片框大小设置
+ .van-uploader__upload {
+ width: 140px !important;
+ height: 140px !important;
+ }
+
+ .van-uploader__upload-icon {
+ font-size: 48px !important;
+ }
+
+ .van-uploader__upload {
+ background-color: $upload_bg !important;
+ border: 2px dashed #b8bcc5;
+ }
+
+ // tab标签短横线颜色
+ .van-tabs__line {
+ background-color: $active_line !important;
+ }
+
+ .van-tabs__wrap {
+ // height: 88px !important;
+ }
+
+ .van-tab__text--ellipsis {
+ overflow: visible !important;
+ -webkit-box-orient: horizontal !important; //修复K线tab标题文字显示不全
+ }
+
+ .van-tab__text {
+ font-size: 16px !important;
+ }
+
+ .vux-pop-out-enter-active,
+ .vux-pop-out-leave-active,
+ .vux-pop-in-enter-active,
+ .vux-pop-in-leave-active {
+ will-change: transform;
+ transition: all 250ms;
+ height: 100%;
+ top: 0;
+ position: absolute;
+ backface-visibility: hidden;
+ perspective: 1000;
+ }
+
+ .vux-pop-out-enter {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ .vux-pop-out-leave-active {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ .vux-pop-in-enter {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ .vux-pop-in-leave-active {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ #mining-account {
+ .van-grid-item__content {
+ padding: 41px 0;
+ }
+ }
+
+ .upload-wrap {
+ .van-uploader__preview {
+ margin: 0 !important;
+ }
+ }
+
+ .popup-delivery {
+ .van-circle {
+ // width: 300px !important;
+ // height: 300px !important;
+ }
+
+ .van-count-down {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ // font-size: 40px;
+ }
+ }
+
+ .list-quatation {
+ .van-cell {
+ padding: 10px 0 !important;
+ // background: $mainbgWhiteColor;
+ // background: $inp-b;
+
+ &::after {
+ border: none;
+ }
+ }
+ }
+
+ .quotes {
+ .van-tabs__line {
+ width: 120px !important;
+ }
+ }
.nationList {
.van-action-sheet {
@@ -104,296 +258,163 @@
}
}
- .van-dialog {
- width: var(--van-dialog-width) !important;
+ #withdraw_verify {
+ .van-field-word-limit-line-height {
+ height: 30px;
+ }
}
- .van-icon-arrow-left {
- // color: #fff !important;
- }
-
- .van-nav-bar::after {
- border-bottom: none;
- }
-
- .van-tabbar-item__text {
- color: #BEC1D2;
- }
-
- #cryptos {
- background-color: $mainbgWhiteColor;
-
- // 上传图片框大小设置
- .van-uploader__upload {
- width: 140px !important;
- height: 140px !important;
+ #editAd {
+ .van-dropdown-menu__item {
+ justify-content: left;
}
- .van-uploader__upload-icon {
- font-size: 48px !important;
+ .van-dropdown-menu__title::after {
+ right: -200px;
+ border-color: #3c507100 transparent #323233f7 #36689a;
}
- .van-uploader__upload {
- background-color: $upload_bg !important;
- border: 2px dashed #b8bcc5;
- }
-
- // tab标签短横线颜色
- .van-tabs__line {
- background-color: $active_line !important;
- }
-
- .van-tabs__wrap {
- // height: 88px !important;
- }
-
- .van-tab__text--ellipsis {
- overflow: visible !important;
- -webkit-box-orient: horizontal !important; //修复K线tab标题文字显示不全
- }
-
- .van-tab__text {
- font-size: 16px !important;
- }
-
- .vux-pop-out-enter-active,
- .vux-pop-out-leave-active,
- .vux-pop-in-enter-active,
- .vux-pop-in-leave-active {
- will-change: transform;
- transition: all 250ms;
- height: 100%;
- top: 0;
- position: absolute;
- backface-visibility: hidden;
- perspective: 1000;
- }
-
- .vux-pop-out-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
- }
-
- .vux-pop-out-leave-active {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
- }
-
- .vux-pop-in-enter {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
- }
-
- .vux-pop-in-leave-active {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
- }
-
- #mining-account {
- .van-grid-item__content {
- padding: 41px 0;
- }
- }
-
- .upload-wrap {
- .van-uploader__preview {
- margin: 0 !important;
- }
- }
-
- .popup-delivery {
- .van-circle {
- // width: 300px !important;
- // height: 300px !important;
- }
-
- .van-count-down {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- // font-size: 40px;
- }
- }
-
- .list-quatation {
+ //.van-cell{
+ // background-color: #eee;
+ //}
+ .bg {
.van-cell {
- padding: 15px 0 !important;
- background: $mainbgWhiteColor;
- // background: $inp-b;
-
- &::after {
- border: none;
+ @include themify() {
+ background-color: themed("main_background");
}
}
}
+ }
- .quotes {
- .van-tabs__line {
- width: 120px !important;
- }
+ #wantBuy {
+ .van-popover__action {
+ width: 320px;
}
- .nationList {
- .van-action-sheet {
- height: 80%;
- }
- }
+ }
- #withdraw_verify {
- .van-field-word-limit-line-height {
- height: 30px;
- }
- }
-
- #editAd {
- .van-dropdown-menu__item {
- justify-content: left;
- }
-
- .van-dropdown-menu__title::after {
- right: -200px;
- border-color: #3c507100 transparent #323233f7 #36689a;
- }
-
- //.van-cell{
- // background-color: #eee;
- //}
- .bg {
- .van-cell {
- background-color: $mainTextColor;
- }
- }
- }
-
- #wantBuy {
- .van-popover__action {
- width: 320px;
- }
-
- }
-
- .adScreening {
- .van-cell {
- line-height: 100px;
- }
-
- .van-field__control {
- background-color: $tab_background;
- padding-left: 20px;
- }
- }
-
- .vue-auth-box_ .auth-control_ .range-box {
- background-color: #EAEAEA !important;
- height: 30px !important;
- margin-bottom: 40px;
- }
-
- .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
- width: 140px !important;
- height: 74px !important;
- background: $color_main !important;
- border-radius: 96px !important;
- top: -50%;
- }
-
- .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn>div {
- border: solid 1px $mainTextColor !important;
- border-radius: 4px;
- }
-
- .van-toast {
- width: 300px;
- }
-
- .van-toast__text {
- word-break: break-word;
- }
-
- .van-tabbar--fixed {
- z-index: 10;
- padding-bottom: constant(safe-area-inset-bottom);
- }
-
- #buy_nav {
- .van-nav-bar__title {
- font-size: 36px !important;
- }
- }
-
- .van-cell-group {
- &::after {
- border: none;
- }
- }
-
- .van-collapse {
- &::after {
- border: none;
- }
- }
-
+ .adScreening {
.van-cell {
- padding: 0;
- color: $text_color1;
-
- &::after {
- border: none;
- }
-
- .van-cell__value {
- color: $black;
- }
+ line-height: 100px;
}
- .van-popup {
- background: $mainbgWhiteColor;
- margin: 0 auto;
+ .van-field__control {
+ background-color: $tab_background;
+ padding-left: 20px;
}
+ }
+ .vue-auth-box_ .auth-control_ .range-box {
+ background-color: #EAEAEA !important;
+ height: 30px !important;
+ margin-bottom: 40px;
+ }
+
+ .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
+ width: 140px !important;
+ height: 74px !important;
+ background: $color_main !important;
+ border-radius: 96px !important;
+ top: -50%;
+ }
+
+ .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn>div {
+ border: solid 1px $mainTextColor !important;
+ border-radius: 4px;
+ }
+
+ .van-toast {
+ width: 300px;
+ }
+
+ .van-toast__text {
+ word-break: break-word;
+ }
+
+ .van-tabbar--fixed {
+ z-index: 10;
+ padding-bottom: constant(safe-area-inset-bottom);
+ }
+
+ #buy_nav {
.van-nav-bar__title {
- color: $log-c;
+ font-size: 36px !important;
}
+ }
- .van-hairline--top-bottom::after,
- .van-hairline-unset--top-bottom::after {
+ .van-cell-group {
+ &::after {
+ border: none;
+ }
+ }
+
+ .van-collapse {
+ &::after {
+ border: none;
+ }
+ }
+
+ .van-cell {
+ padding: 0;
+ color: $text_color1;
+
+ &::after {
border: none;
}
- .van-dialog {
- background: $mainbgWhiteColor;
- }
-
- .van-dialog__header {
- color: $text_color;
- }
-
- .van-dialog__message--has-title {
- color: $dark-grey;
- }
-
- .van-button--default {
- // background: $main_background;
- color: $dark-grey;
- }
-
- .van-nav-bar {
- // background: $main_background;
- line-height: normal;
- }
-
- .van-dropdown-menu__title {
- color: $text_color !important;
- }
-
- .van-nav-bar__right {
- color: $text_color;
+ .van-cell__value {
+ color: $black;
}
}
- .van-nav-bar__left {
- padding: 0 16px !important;
+ .van-popup {
+ background: $mainbgWhiteColor;
+ margin: 0 auto;
}
+
+ .van-nav-bar__title {
+ @include themify() {
+ color: themed("text_color2") 1px solid;
+ }
+ }
+
+ .van-hairline--top-bottom::after,
+ .van-hairline-unset--top-bottom::after {
+ border: none;
+ }
+
+ .van-dialog {
+ background: $mainbgWhiteColor;
+ }
+
+ .van-dialog__header {
+ color: $text_color;
+ }
+
+ .van-dialog__message--has-title {
+ color: $dark-grey;
+ }
+
+ .van-button--default {
+ // background: $main_background;
+ color: $dark-grey;
+ }
+
+ .van-nav-bar {
+ // background: $main_background;
+ line-height: normal;
+ }
+
+ .van-dropdown-menu__title {
+ color: $text_color !important;
+ }
+
+ .van-nav-bar__right {
+ color: $text_color;
+ }
+}
+
+.van-nav-bar__left {
+ padding: 0 16px !important;
+}
</style>
\ No newline at end of file
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index f4b1329..954a8f3 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -22,19 +22,15 @@
-webkit-text-size-adjust: 100%;
--van-sidebar-selected-border-height: 44px !important;
--van-sidebar-selected-border-width: 2px !important;
- --van-nav-bar-background: $mainBgColor !important;
- --van-nav-bar-title-text-color: #fff !important;
- --van-uploader-upload-background: #232C46 !important;
- --van-index-anchor-text-color: #fff !important;
+ // --van-nav-bar-background: $mainBgColor !important;
+ // --van-nav-bar-title-text-color: #fff !important;
+ // --van-uploader-upload-background: #232C46 !important;
+ // --van-index-anchor-text-color: #fff !important;
}
body {
width: 100vw;
height: 100vh;
- // color: $mainTextColor;
- color: $log-c;
- // background-color: $mainBgColor;
- background-color: $mainbgWhiteColor;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 7c029c5..4802f02 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -2,10 +2,10 @@
$mainTextColor: #fff;
$mainbgWhiteColor: #fff;
-$main_background:#f7f7f7; //主题色
+$main_background:#fff; //主题色
$main2_background:#1F233D; //主题浅色背景
$text_color:#333; //文字颜色
-$text_color1:#555; //文字浅色
+$text_color1:#868D9A; //文字浅色
$text_color2:#fff; // 白色文字
$text_color3:#CFD5EC; //
$text_color4:#333; //浅色标题背景文字颜色
@@ -55,16 +55,14 @@
.yellow-bg{
background: $bg_yellow;
}
-.mainBackground{
- // background: $main_background;
- background: $inp-b;
-}
+// .mainBackground{
+// background: $main_background;
+// }
// .textColor{color:$text_color}
.textColor{color:$log-c}
-// .textColor1{color:$text_color1}
+.textColor1{color:$text_color1}
// .textColor2{color:$text_color2}
// .textColor3{color:$text_color3}
-.textColor1{color:$log-c}
.textColor2{color:$log-c}
.textColor3{color:$log-c}
.c2cColor{color:$c2c_color}
diff --git a/src/assets/imgs/footer/f_1a.png b/src/assets/imgs/footer/f_1a.png
new file mode 100644
index 0000000..fc7281a
--- /dev/null
+++ b/src/assets/imgs/footer/f_1a.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_1b.png b/src/assets/imgs/footer/f_1b.png
new file mode 100644
index 0000000..8507aeb
--- /dev/null
+++ b/src/assets/imgs/footer/f_1b.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_1c.png b/src/assets/imgs/footer/f_1c.png
new file mode 100644
index 0000000..f6aceb3
--- /dev/null
+++ b/src/assets/imgs/footer/f_1c.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_2a.png b/src/assets/imgs/footer/f_2a.png
new file mode 100644
index 0000000..5543209
--- /dev/null
+++ b/src/assets/imgs/footer/f_2a.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_2b.png b/src/assets/imgs/footer/f_2b.png
new file mode 100644
index 0000000..713572c
--- /dev/null
+++ b/src/assets/imgs/footer/f_2b.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_2c.png b/src/assets/imgs/footer/f_2c.png
new file mode 100644
index 0000000..958b1a2
--- /dev/null
+++ b/src/assets/imgs/footer/f_2c.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_3a.png b/src/assets/imgs/footer/f_3a.png
new file mode 100644
index 0000000..bfb55a9
--- /dev/null
+++ b/src/assets/imgs/footer/f_3a.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_3b.png b/src/assets/imgs/footer/f_3b.png
new file mode 100644
index 0000000..d91accd
--- /dev/null
+++ b/src/assets/imgs/footer/f_3b.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_3c.png b/src/assets/imgs/footer/f_3c.png
new file mode 100644
index 0000000..a4288ee
--- /dev/null
+++ b/src/assets/imgs/footer/f_3c.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_4a.png b/src/assets/imgs/footer/f_4a.png
new file mode 100644
index 0000000..8176500
--- /dev/null
+++ b/src/assets/imgs/footer/f_4a.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_4b.png b/src/assets/imgs/footer/f_4b.png
new file mode 100644
index 0000000..ef9926d
--- /dev/null
+++ b/src/assets/imgs/footer/f_4b.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_4c.png b/src/assets/imgs/footer/f_4c.png
new file mode 100644
index 0000000..3623327
--- /dev/null
+++ b/src/assets/imgs/footer/f_4c.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_5a.png b/src/assets/imgs/footer/f_5a.png
new file mode 100644
index 0000000..a51e3a3
--- /dev/null
+++ b/src/assets/imgs/footer/f_5a.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_5b.png b/src/assets/imgs/footer/f_5b.png
new file mode 100644
index 0000000..a309428
--- /dev/null
+++ b/src/assets/imgs/footer/f_5b.png
Binary files differ
diff --git a/src/assets/imgs/footer/f_5c.png b/src/assets/imgs/footer/f_5c.png
new file mode 100644
index 0000000..b3211a0
--- /dev/null
+++ b/src/assets/imgs/footer/f_5c.png
Binary files differ
diff --git a/src/assets/imgs/home/home_10a.png b/src/assets/imgs/home/home_10a.png
new file mode 100644
index 0000000..f3ec666
--- /dev/null
+++ b/src/assets/imgs/home/home_10a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_10b.png b/src/assets/imgs/home/home_10b.png
new file mode 100644
index 0000000..3f5a607
--- /dev/null
+++ b/src/assets/imgs/home/home_10b.png
Binary files differ
diff --git a/src/assets/imgs/home/home_11a.png b/src/assets/imgs/home/home_11a.png
new file mode 100644
index 0000000..1d0ee4a
--- /dev/null
+++ b/src/assets/imgs/home/home_11a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_11b.png b/src/assets/imgs/home/home_11b.png
new file mode 100644
index 0000000..139d1af
--- /dev/null
+++ b/src/assets/imgs/home/home_11b.png
Binary files differ
diff --git a/src/assets/imgs/home/home_12a.png b/src/assets/imgs/home/home_12a.png
new file mode 100644
index 0000000..2b2c285
--- /dev/null
+++ b/src/assets/imgs/home/home_12a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_12b.png b/src/assets/imgs/home/home_12b.png
new file mode 100644
index 0000000..466727c
--- /dev/null
+++ b/src/assets/imgs/home/home_12b.png
Binary files differ
diff --git a/src/assets/imgs/home/home_21a.png b/src/assets/imgs/home/home_21a.png
new file mode 100644
index 0000000..0eb7c46
--- /dev/null
+++ b/src/assets/imgs/home/home_21a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_21b.png b/src/assets/imgs/home/home_21b.png
new file mode 100644
index 0000000..006adbf
--- /dev/null
+++ b/src/assets/imgs/home/home_21b.png
Binary files differ
diff --git a/src/assets/imgs/home/home_22a.png b/src/assets/imgs/home/home_22a.png
new file mode 100644
index 0000000..3ddd3d3
--- /dev/null
+++ b/src/assets/imgs/home/home_22a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_22b.png b/src/assets/imgs/home/home_22b.png
new file mode 100644
index 0000000..fec2793
--- /dev/null
+++ b/src/assets/imgs/home/home_22b.png
Binary files differ
diff --git a/src/assets/imgs/home/home_23a.png b/src/assets/imgs/home/home_23a.png
new file mode 100644
index 0000000..6cd5841
--- /dev/null
+++ b/src/assets/imgs/home/home_23a.png
Binary files differ
diff --git a/src/assets/imgs/home/home_23b.png b/src/assets/imgs/home/home_23b.png
new file mode 100644
index 0000000..a34f39f
--- /dev/null
+++ b/src/assets/imgs/home/home_23b.png
Binary files differ
diff --git a/src/assets/imgs/home/ty.png b/src/assets/imgs/home/ty.png
new file mode 100644
index 0000000..e77d16a
--- /dev/null
+++ b/src/assets/imgs/home/ty.png
Binary files differ
diff --git a/src/assets/imgs/home/user_img.png b/src/assets/imgs/home/user_img.png
new file mode 100644
index 0000000..67b03cf
--- /dev/null
+++ b/src/assets/imgs/home/user_img.png
Binary files differ
diff --git a/src/assets/imgs/home/yl.png b/src/assets/imgs/home/yl.png
new file mode 100644
index 0000000..f684f93
--- /dev/null
+++ b/src/assets/imgs/home/yl.png
Binary files differ
diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png
index 34429ba..8c578f0 100644
--- a/src/assets/imgs/logo.png
+++ b/src/assets/imgs/logo.png
Binary files differ
diff --git a/src/assets/imgs/my/my_1a.png b/src/assets/imgs/my/my_1a.png
new file mode 100644
index 0000000..49b4103
--- /dev/null
+++ b/src/assets/imgs/my/my_1a.png
Binary files differ
diff --git a/src/assets/imgs/my/my_1b.png b/src/assets/imgs/my/my_1b.png
new file mode 100644
index 0000000..187f1a6
--- /dev/null
+++ b/src/assets/imgs/my/my_1b.png
Binary files differ
diff --git a/src/assets/imgs/my/my_2a.png b/src/assets/imgs/my/my_2a.png
new file mode 100644
index 0000000..f62d064
--- /dev/null
+++ b/src/assets/imgs/my/my_2a.png
Binary files differ
diff --git a/src/assets/imgs/my/my_2b.png b/src/assets/imgs/my/my_2b.png
new file mode 100644
index 0000000..bf33d3a
--- /dev/null
+++ b/src/assets/imgs/my/my_2b.png
Binary files differ
diff --git a/src/assets/imgs/my/my_3a.png b/src/assets/imgs/my/my_3a.png
new file mode 100644
index 0000000..0559d7b
--- /dev/null
+++ b/src/assets/imgs/my/my_3a.png
Binary files differ
diff --git a/src/assets/imgs/my/my_3b.png b/src/assets/imgs/my/my_3b.png
new file mode 100644
index 0000000..1c804eb
--- /dev/null
+++ b/src/assets/imgs/my/my_3b.png
Binary files differ
diff --git a/src/assets/theme/_handle.scss b/src/assets/theme/_handle.scss
new file mode 100644
index 0000000..db6f37d
--- /dev/null
+++ b/src/assets/theme/_handle.scss
@@ -0,0 +1,21 @@
+@import './_themes.scss';
+
+// 定义混合指令, 切换主题,并将主题中的所有规则添加到theme-map中
+@mixin themify() {
+
+ // 将themes中规则放入theme-map
+ @each $theme-name,
+ $theme-map in $themes {
+ $theme-map: $theme-map !global;
+
+ [data-theme="#{$theme-name}"] & {
+ // 表示包含下面函数 themed(), 类似于插槽
+ @content;
+ $theme-map : null !global;
+ }
+ }
+}
+
+@function themed($key) {
+ @return map-get($theme-map, $key);
+}
\ No newline at end of file
diff --git a/src/assets/theme/_themes.scss b/src/assets/theme/_themes.scss
new file mode 100644
index 0000000..444a23e
--- /dev/null
+++ b/src/assets/theme/_themes.scss
@@ -0,0 +1,88 @@
+$themes: (
+ light:(
+ main_background: #ffffff, //主题色
+ text_color: #333, //文字颜色
+ text_color1: #868C9A, //文字浅色
+ text_color2: #B7BDD1, // 资金页面所用对应
+ text_color3: #000000, //
+ tab_background: #F5F5F5, //tab切换背景颜色
+ tab_background1: #ffffff, //tab切换背景颜色
+ tab_background2: #ffffff, //tab切换背景颜色
+ active_line: #f7b328, //tab选中样式颜色
+ footer_background: #ffffff, // 底部颜色
+ btn_main: #f7b328, //主题色按钮
+ color_main: #f7b328, //主题色文字
+ btn_background: #ffffff, //按钮颜色
+ btn_background1: #ffffff, //按钮颜色
+ btn_background2: #111, //按钮颜色
+ btn_text: #fff, //按钮文字颜色
+ input_background: #f5f5f5, //input背景颜色
+ cont_background: #ffffff, //title背景色
+ title_color: #B8BDC5,
+ line_color: #ffffff,
+ bg_dark: #ffffff,
+ border_color: #e5e5e5, // 通用边框颜色
+ border_color1: #ffffff,
+ divi_line: #f5f5f5, //分割线
+ bg_step: #868D9A,
+ bg_Bottom: #ffffff,
+ chat_bg: #e5e5e5,
+ upload_bg: #ffffff,
+ grey_bg: #f7f7f7,
+ input_background1: #f5f5f5, //质押借币input
+ c2c_color: #868C9A,
+ c2c_background: #ffffff,
+ c2c_background1: #ffffff,
+ c2c_tab_background: #ffffff,
+ c2c_tip_background: #ffffff,
+ light-greybg:#ffffff,
+ dark-greybg:#000,
+ home_bg: #ffffff,
+ cont_round: #ffffff,
+ cont_nav: #ffffff,
+ tab_color:#333, //tab文字颜色
+ input_border:#e5e5e5, //输入框边框颜色
+ ),
+ dark:(main_background: #121212, //主题色
+ text_color: #fff, //文字颜色
+ text_color1: #868D9A, //文字浅色
+ text_color2: #B7BDD1, // 资金页面所用对应
+ text_color3: #CFD5EC, //
+ tab_background: #27293B, //tab切换背景颜色
+ tab_background1: #000, //tab切换背景颜色
+ tab_background2: #242424, //tab切换背景颜色
+ active_line: #f7b328, //tab选中样式颜色
+ footer_background: #1a1a1a, // 底部颜色
+ btn_main: #f7b328, //主题色按钮
+ color_main: #f7b328, //主题色文字
+ btn_background: #474B62, //按钮颜色
+ btn_background1: #112542, //按钮颜色
+ btn_background2: #b9f641, //按钮颜色
+ btn_text: #333, //按钮文字颜色
+ input_background: #242424, //input背景颜色
+ cont_background: #242424, //title背景色
+ title_color: #B8BDC5,
+ line_color: #393E49,
+ bg_dark: #474B62,
+ border_color: #868D9A, //通用边框颜色
+ border_color1: #212C4E,
+ divi_line: #999, //分割线
+ bg_step: #868D9A,
+ bg_Bottom: #313346,
+ chat_bg: #474B62,
+ upload_bg: #474B62,
+ grey_bg: #27293B,
+ input_background1: #121212, //质押借币input
+ c2c_color: #868C9A,
+ c2c_background: #121212,
+ c2c_background1: #242424,
+ c2c_tab_background: #242424,
+ c2c_tip_background: #121212,
+ light-greybg:#242424,
+ dark-greybg:#000,
+ home_bg: #131313,
+ cont_round: #000,
+ cont_nav: #2b2d34,
+ tab_color:#b9f641, //tab文字颜色
+ input_border:#868C9A, //输入框边框颜色
+ ))
\ No newline at end of file
diff --git a/src/assets/theme/dark/image/assets/recharge.png b/src/assets/theme/dark/image/assets/recharge.png
new file mode 100644
index 0000000..5cc75a2
--- /dev/null
+++ b/src/assets/theme/dark/image/assets/recharge.png
Binary files differ
diff --git a/src/assets/theme/dark/image/assets/transfer.png b/src/assets/theme/dark/image/assets/transfer.png
new file mode 100644
index 0000000..df39cf7
--- /dev/null
+++ b/src/assets/theme/dark/image/assets/transfer.png
Binary files differ
diff --git a/src/assets/theme/dark/image/assets/withdrawal.png b/src/assets/theme/dark/image/assets/withdrawal.png
new file mode 100644
index 0000000..47e55cc
--- /dev/null
+++ b/src/assets/theme/dark/image/assets/withdrawal.png
Binary files differ
diff --git a/src/assets/theme/dark/index.scss b/src/assets/theme/dark/index.scss
index 6b44a3b..b7e6b74 100644
--- a/src/assets/theme/dark/index.scss
+++ b/src/assets/theme/dark/index.scss
@@ -30,7 +30,7 @@
.mainBackground{
- // background: $main_background;
+ background: $main_background;
}
.textColor{color:$text_color}
.textColor1{color:$text_color1}
diff --git a/src/assets/theme/index.scss b/src/assets/theme/index.scss
new file mode 100644
index 0000000..69d032a
--- /dev/null
+++ b/src/assets/theme/index.scss
@@ -0,0 +1,244 @@
+@import './_handle.scss';
+
+:root{
+ @include themify() {
+ --van-button-primary-background: themed("btn_background2") !important;
+ --van-button-primary-border-color: themed("btn_background2") !important;
+ --van-button-primary-color: themed("btn_text") !important;
+ }
+}
+
+.mainBackground {
+ @include themify() {
+ background: themed("main_background") !important;
+ }
+}
+
+.textColor {
+ @include themify() {
+ color: themed("text_color") !important;
+ }
+}
+
+.textColor1 {
+ @include themify() {
+ color: themed("text_color1") !important;
+ }
+}
+
+.textColor2 {
+ @include themify() {
+ color: themed("text_color2") !important;
+ }
+}
+
+.textColor3 {
+ @include themify() {
+ color: themed("text_color3") !important;
+ }
+}
+
+.c2cColor {
+ @include themify() {
+ color: themed("c2c_color") !important;
+ }
+}
+
+.tabBackground {
+ @include themify() {
+ background: themed("tab_background") !important;
+ }
+}
+
+.tabBackground1 {
+ @include themify() {
+ background: themed("tab_background1") !important;
+ }
+}
+
+.tabBackground2 {
+ @include themify() {
+ background: themed("tab_background2") !important;
+ }
+}
+
+.activeLine {
+ @include themify() {
+ background: themed("active_line") !important;
+ }
+}
+
+.bgFooter {
+ @include themify() {
+ background: themed("footer_background") !important;
+ }
+}
+
+.btnMain {
+ @include themify() {
+ background: themed("btn_main") !important;
+ }
+}
+
+.colorMain {
+ @include themify() {
+ color: themed("color_main") !important;
+ }
+}
+
+.borderMain {
+ @include themify() {
+ border: 1px solid themed("color_main") !important;
+ }
+}
+
+.borderColor {
+ @include themify() {
+ border: 1px solid themed("border_color") !important;
+ }
+}
+
+.btnBackground {
+ @include themify() {
+ background: themed("btn_background") !important;
+ }
+}
+
+.btnBackground2 {
+ @include themify() {
+ background: themed("btn_background2") !important;
+ border: none !important;
+ }
+}
+
+.btnText {
+ @include themify() {
+ color: themed("btn_text") !important;
+ }
+}
+
+.inputBackground {
+ @include themify() {
+ background: themed("input_background") !important;
+ }
+}
+
+.inputBackground1 {
+ @include themify() {
+ background: themed("input_background1") !important;
+ }
+}
+
+.contBackground {
+ @include themify() {
+ background: themed("cont_background") !important;
+ }
+}
+
+.titleColor {
+ @include themify() {
+ color: themed("title_color") !important;
+ }
+}
+
+.border-b-color {
+ @include themify() {
+ border-bottom: 1px solid themed("line_color") !important;
+ }
+}
+
+.border-t-color {
+ @include themify() {
+ border-top: 1px solid themed("line_color") !important;
+ }
+}
+
+.bgDark {
+ @include themify() {
+ background: themed("bg_dark") !important;
+ }
+}
+
+.diviLine {
+ @include themify() {
+ background: themed("divi_line") !important;
+ }
+}
+
+.bgStep {
+ @include themify() {
+ background: themed("bg_step") !important;
+ }
+}
+
+.bgBottom {
+ @include themify() {
+ background: themed("bg_Bottom") !important;
+ }
+}
+
+.chatBg {
+ @include themify() {
+ background: themed("chat_bg") !important;
+ }
+}
+
+.uploadBg {
+ @include themify() {
+ background: themed("upload_bg") !important;
+ }
+}
+
+.greyBg {
+ @include themify() {
+ background: themed("grey_bg") !important;
+ }
+}
+
+.c2cBackground {
+ @include themify() {
+ background: themed("c2c_background") !important;
+ }
+}
+
+.c2cBackground1 {
+ @include themify() {
+ background: themed("c2c_background1") !important;
+ }
+}
+
+.c2cTabBackground {
+ @include themify() {
+ background: themed("c2c_tab_background") !important;
+ }
+}
+
+.c2cTipBackground {
+ @include themify() {
+ background: themed("c2c_tip_background") !important;
+ }
+}
+
+.lightGreybg {
+ @include themify() {
+ background: themed("light-greybg") !important;
+ }
+}
+
+.darkGreybg {
+ @include themify() {
+ background: themed("dark-greybg") !important;
+ }
+}
+
+.contRound {
+ @include themify() {
+ background: themed("cont_round") !important;
+ }
+}
+
+.contNav {
+ @include themify() {
+ background: themed("cont_nav") !important;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/theme/white/image/assets/recharge.png b/src/assets/theme/white/image/assets/recharge.png
new file mode 100644
index 0000000..2d3b6d7
--- /dev/null
+++ b/src/assets/theme/white/image/assets/recharge.png
Binary files differ
diff --git a/src/assets/theme/white/image/assets/transfer.png b/src/assets/theme/white/image/assets/transfer.png
new file mode 100644
index 0000000..631c8ed
--- /dev/null
+++ b/src/assets/theme/white/image/assets/transfer.png
Binary files differ
diff --git a/src/assets/theme/white/image/assets/withdrawal.png b/src/assets/theme/white/image/assets/withdrawal.png
new file mode 100644
index 0000000..537c21b
--- /dev/null
+++ b/src/assets/theme/white/image/assets/withdrawal.png
Binary files differ
diff --git a/src/assets/theme/white/index.scss b/src/assets/theme/white/index.scss
index 7ab3c1f..04f6085 100644
--- a/src/assets/theme/white/index.scss
+++ b/src/assets/theme/white/index.scss
@@ -29,7 +29,7 @@
$c2c_tip_background:#eff7ff;
.mainBackground{
- // background: $main_background;
+ background: $main_background;
}
.textColor{color:$text_color}
.textColor1{color:$text_color1}
diff --git a/src/components/Transform/assets-head/index.vue b/src/components/Transform/assets-head/index.vue
index 9028eb2..158eec0 100644
--- a/src/components/Transform/assets-head/index.vue
+++ b/src/components/Transform/assets-head/index.vue
@@ -2,7 +2,6 @@
<div id="assetsHead">
<van-nav-bar :border="false" :title="title" :left-arrow="showLeft" @click-left="onClickLeft">
<template #right>
-
<slot></slot>
</template>
</van-nav-bar>
@@ -62,8 +61,8 @@
<style lang="scss" scoped>
:deep(.van-nav-bar) {
- // background-color: $selectSymbol_background !important;
- background-color: $mainbgWhiteColor !important;
+
+ // background-color: $mainbgWhiteColor !important;
.van-nav-bar__content {
height: 96px;
}
@@ -78,21 +77,22 @@
.van-nav-bar__arrow {
font-size: 48px !important;
- // color: $dark-grey;
- color: $log-c;
+ color: #868D9A;
}
- .van-nav-bar__right{
+ .van-nav-bar__right {
// margin-right: 30px !important;
}
.van-nav-bar__title {
font-size: 36px;
font-weight: 400;
- // color: $text_color;
- color: $log-c;
max-width: 100% !important;
margin: 0 auto !important;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 1d305d8..ff2808d 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -22,11 +22,11 @@
@click="jump" />
</div> -->
</div>
- <div class="flex justify-between pt-34">
- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
- :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
+ <div class="flex justify-start pt-34">
+ <button class="tabBtn h-50 lh-50 border-none" :class="selectIndex == 1 ? 'select-active' : 'no-select'"
+ @click="changeTab(1)">
{{ $t('永续合约') }}</button>
- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
+ <button class="tabBtn h-50 lh-50 border-none"
:class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
{{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button>
</div>
@@ -246,24 +246,35 @@
}
.tabBtn {
- border-radius: 2.35rem;
- // border: 1px solid #EAEDF2;
- color: $text_color;
+ // border-radius: 2.35rem;
+ // color: $text_color;
font-weight: bold;
- // background: $tab_background;
- font-size: 30px;
+ font-size: 1.8rem;
+ margin-right: 2rem;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.select-active {
- background-color: $green;
- color: $text_color;
+ // background-color: $green;
+ // color: $text_color;
border: none;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.select-one-active {
- background-color: $red;
- color: $text_color;
+ // background-color: $red;
+ // color: $text_color;
border: none;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.no-select {}
diff --git a/src/components/Transform/list-quotation/index.vue b/src/components/Transform/list-quotation/index.vue
index ac397c4..8431552 100644
--- a/src/components/Transform/list-quotation/index.vue
+++ b/src/components/Transform/list-quotation/index.vue
@@ -20,78 +20,79 @@
</div>
</van-cell>
<transition-group :name="type" tag="div">
- <div v-if="active == 0" :key="active">
+ <div v-if="active == 0">
<van-cell v-for="item in listData" :key="item.id">
<ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
<li class="flex items-center left">
<img
:src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
- alt="logo" class="w-72 h-72 rounded-full mr-16" />
+ alt="logo" class="w-35 h-35 rounded-full mr-16" />
<p class="flex flex-col">
- <span class="flex items-end font-32 flex items-center">
- <span class="textColor font-600 font-30">{{ item.symbol_data && item.symbol_data.toUpperCase() ||
- '--'
- }}</span>
- <span class="font-24 text-grey" style="position: relative; top: 1px">
+ <span class="flex items-end flex items-center font-16">
+ <span class="textColor font-600">
+ {{ item.symbol_data && item.symbol_data.toUpperCase() || '--' }}
+ </span>
+ <span class="text-grey" style="position: relative; top: 1px">
/USDT
</span>
<!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
{{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
</span>
- <span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
+ <span class="font-12 text-grey text-left leading-none">{{ $t('成交量') + ' ' + (item.amount *
+ 1).toFixed(2) }}</span>
</p>
</li>
<li class="flex flex-col items-end mid">
- <p class="textColor font-32 font-600">{{ item.close || '--' }}</p>
- <p class="font-24 text-grey">{{ currency.currency_symbol }}
+ <p class="textColor font-16 font-600">{{ item.close || '--' }}</p>
+ <p class="font-12 text-grey leading-none">{{ currency.currency_symbol }}
{{ item.close && item.symbol_data.toUpperCase() == 'SHIB' ? (item.close * currency.rate).toFixed(8) :
(item.close *
currency.rate).toFixed(2) || '--' }}</p>
</li>
<li class="right flex items-center justify-end">
- <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">
+ <p class="w-153 font-12 h-50 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">
+{{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%</p>
- <p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>
+ <p class="w-153 font-12 h-50 bg-red text-white border-0 text-center btn" v-else>
{{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%</p>
</li>
</ul>
</van-cell>
</div>
- <div v-else :key="active">
+ <div v-else>
<van-cell v-for="item in showList" :key="item.id">
<ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
<li class="flex items-center left">
<img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" alt="logo"
- class="w-72 h-72 rounded-full mr-16" />
+ class="w-35 h-35 rounded-full mr-16" />
<p class="flex flex-col">
- <span class="flex items-end font-32 flex items-center">
- <span class="textColor font-600 font-30">{{ item.symbol_data && item.symbol_data.toUpperCase() ||
- '--'
- }}</span>
+ <span class="flex items-end flex items-center font-16">
+ <span class="textColor font-600">
+ {{ item.symbol_data && item.symbol_data.toUpperCase() || '--' }}
+ </span>
<!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
{{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
- <span class="font-24 text-grey" style="position: relative; top: 1px">
+ <span class="text-grey" style="position: relative; top: 1px">
/USDT
</span>
</span>
- <span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
+ <span class="font-12 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
</p>
</li>
<li class="flex flex-col items-end mid">
- <p class="textColor font-32 font-600">{{ item.close }}</p>
- <p class="font-24 text-grey">{{ currency.currency_symbol }} {{ item.close &&
+ <p class="textColor font-16 font-600">{{ item.close }}</p>
+ <p class="font-12 text-grey leading-none">{{ currency.currency_symbol }} {{ item.close &&
item.symbol_data.toUpperCase() == 'SHIB' ? (item.close * currency.rate).toFixed(8) : (item.close *
currency.rate).toFixed(2) || '--' }}</p>
</li>
<li class="right flex items-center justify-end text-right">
- <div v-if="active == 3" class="textColor w-182 font-700 font-24">
+ <div v-if="active == 3" class="textColor w-182 font-700 font-12">
{{ (item.volume * 1).toFixed(2) }}
</div>
<template v-else>
- <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
+ <p class="w-153 font-12 h-50 bg-green text-white border-0 text-center btn"
v-if="item.change_ratio > 0">
+{{ item.change_ratio }}%</p>
- <p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>
+ <p class="w-153 font-12 h-50 bg-red text-white border-0 text-center btn" v-else>
{{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%</p>
</template>
</li>
@@ -240,7 +241,7 @@
transition: all 250ms;
}
- .textColor{
+ .textColor {
color: $text_color4;
}
@@ -271,7 +272,9 @@
.btn {
border-radius: 9px;
- line-height: 71px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.left {
diff --git a/src/components/Transform/mining-account/index.vue b/src/components/Transform/mining-account/index.vue
index ab2af43..44d5371 100644
--- a/src/components/Transform/mining-account/index.vue
+++ b/src/components/Transform/mining-account/index.vue
@@ -6,7 +6,7 @@
<mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
@select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
:coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
- :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
+ :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" :placeholder="$t('请输入')" />
<!-- <div v-if="show" class="font-28 text-grey">
{{ $t('可用数量') }}：
<span class="textColor">{{ amountAvailable }} {{ form.symbol.toUpperCase() }}</span>
@@ -37,287 +37,292 @@
</template>
<script>
- import MiningExchangeInput from "../mining-exchange-input/index.vue";
- import {
- Grid,
- GridItem,
- Popup,
- Icon,
- showToast
- } from "vant";
- // import { mapState } from "vuex";
- import {
- _exchangeRage,
- _getAllWallet,
- _initWidthdrawl,
- _widthdrawl,
- _records
- } from "@/service/fund.api";
- import {
- mapGetters
- } from "vuex";
- import {
- List,
- PullRefresh
- } from 'vant';
- import {
- debounce
- } from '@/utils'
- export default {
- name: "MiningAcccount",
- components: {
- [Grid.name]: Grid,
- [GridItem.name]: GridItem,
- [Popup.name]: Popup,
- [Icon.name]: Icon,
- MiningExchangeInput,
- [List.name]: List,
- [PullRefresh.name]: PullRefresh
+import MiningExchangeInput from "../mining-exchange-input/index.vue";
+import {
+ Grid,
+ GridItem,
+ Popup,
+ Icon,
+ showToast
+} from "vant";
+// import { mapState } from "vuex";
+import {
+ _exchangeRage,
+ _getAllWallet,
+ _initWidthdrawl,
+ _widthdrawl,
+ _records
+} from "@/service/fund.api";
+import {
+ mapGetters
+} from "vuex";
+import {
+ List,
+ PullRefresh
+} from 'vant';
+import {
+ debounce
+} from '@/utils'
+export default {
+ name: "MiningAcccount",
+ components: {
+ [Grid.name]: Grid,
+ [GridItem.name]: GridItem,
+ [Popup.name]: Popup,
+ [Icon.name]: Icon,
+ MiningExchangeInput,
+ [List.name]: List,
+ [PullRefresh.name]: PullRefresh
+ },
+ props: {
+ show: {
+ type: Boolean,
+ default: false,
},
- props: {
- show: {
- type: Boolean,
- default: false,
+ },
+ computed: {
+ ...mapGetters('user', ['userInfo']),
+ tabList() {
+ return [{
+ id: 1,
+ text: this.$t('提幣')
},
+ {
+ id: 2,
+ text: this.$t('交易記錄')
+ }
+ ]
},
- computed: {
- ...mapGetters('user', ['userInfo']),
- tabList() {
- return [{
- id: 1,
- text: this.$t('提幣')
- },
- {
- id: 2,
- text: this.$t('交易記錄')
- }
- ]
- },
- addr() {
- const account = this.userInfo.account
- return account && account.substr(0, 5) + '********' + account.substr(account.length - 5)
- },
- amountAvailable() {
- console.log(this.form.symbol)
- console.log(this.wallets)
- let res
- let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() === this.form.symbol.toUpperCase())
+ addr() {
+ const account = this.userInfo.account
+ return account && account.substr(0, 5) + '********' + account.substr(account.length - 5)
+ },
+ amountAvailable() {
+ console.log(this.form.symbol)
+ console.log(this.wallets)
+ let res
+ let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() === this.form.symbol.toUpperCase())
- if (dataInfo) {
- res = dataInfo.usable
- } else {
- res = 0
- }
- return res
- },
+ if (dataInfo) {
+ res = dataInfo.usable
+ } else {
+ res = 0
+ }
+ return res
},
- data() {
- return {
- showPopup: false,
- activeRecord: 'exchange',
- valueTwo: 0,
+ },
+ data() {
+ return {
+ showPopup: false,
+ activeRecord: 'exchange',
+ valueTwo: 0,
+ rate: 0,
+ form: { // 闪兑
+ symbol: 'USDC',
+ symbol_to: 'USDT',
+ volume: '',
rate: 0,
- form: { // 闪兑
- symbol: 'USDC',
- symbol_to: 'USDT',
- volume: '',
- rate: 0,
- iconImg2: '',
- iconImg1: '',
- symbol_ex: '',
- symbol_to_ex: '',
+ iconImg2: '',
+ iconImg1: '',
+ symbol_ex: '',
+ symbol_to_ex: '',
- },
- interval: null,
- actions: [],
- balance: 0, // 质押余额
- page: 1,
- loading: false, // 当loading为true时，转圈圈
- finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
- noData: false, // 如果没有数据，显示暂无数据
- wallets: [], // 钱包列表
- active: 0,
+ },
+ interval: null,
+ actions: [],
+ balance: 0, // 质押余额
+ page: 1,
+ loading: false, // 当loading为true时，转圈圈
+ finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
+ noData: false, // 如果没有数据，显示暂无数据
+ wallets: [], // 钱包列表
+ active: 0,
+ }
+ },
+ created() {
+ let obj = {
+ symbolType: 'cryptos'
+ }
+ _getAllWallet(obj).then(data => {
+ this.actions = []
+ data.extends.map(item => {
+ this.actions.push({
+ symbol: item.symbol,
+ name: item.symbol,
+ symbol_data: item.symbol,
+ usable: item.usable,
+ usdt: item.usdt,
+ symbol_data: item.symbol_data
+ })
+ })
+ this.wallets = data.extends
+ console.log("this.actions", this.actions[0].symbol_data);
+ this.form.symbol = this.actions[0].symbol_data
+ this.form.symbol_to = this.actions[1].symbol_data
+ this.form.iconImg1 = this.actions[0].symbol_data
+ this.form.iconImg2 = this.actions[1].symbol_data
+ this.form.symbol_ex = this.actions[0].symbol
+ this.form.symbol_to_ex = this.actions[1].symbol
+
+ })
+ },
+ methods: {
+ onMax() { // 最大
+ if (this.amountAvailable / 1) {
+ this.form.volume = this.amountAvailable
+ this.debounceFn()
+ } else {
+ showToast(this.$t('你没有可提数量'))
}
},
- created() {
- let obj = {
- symbolType: 'cryptos'
+ onInput(e) { // 获取最新
+ this.form.volume = e.target.value
+ this.clearInterval()
+ if (this.form.volume == '') {
+ this.form.get_volume = ''
+ } else {
+ this.debounceFn()
}
- _getAllWallet(obj).then(data => {
- this.actions = []
- data.extends.map(item => {
- this.actions.push({
- symbol: item.symbol,
- name: item.symbol,
- symbol_data: item.symbol,
- usable: item.usable,
- usdt: item.usdt,
- symbol_data: item.symbol_data
- })
- })
- this.wallets = data.extends
- console.log("this.actions",this.actions[0].symbol_data);
- this.form.symbol = this.actions[0].symbol_data
- this.form.symbol_to = this.actions[1].symbol_data
- this.form.iconImg1 = this.actions[0].symbol_data
- this.form.iconImg2 = this.actions[1].symbol_data
- this.form.symbol_ex = this.actions[0].symbol
- this.form.symbol_to_ex = this.actions[1].symbol
+ },
+ debounceFn: debounce(function () {
+ this.fetchRate(true)
+ }, 300),
+ fetchRate(callback) { // interval
+ let obj = {
+ symbol: this.form.symbol_ex,
+ symbol_to: this.form.symbol_to_ex,
+ volume: this.form.volume
+ }
+ _exchangeRage(obj).then(data => {
+ const {
+ get_rate
+ } = data
+ this.form.rate = get_rate
+ this.clearInterval()
+ if (callback && typeof callback === 'function') {
+ callback()
+ }
})
},
- methods: {
- onMax() { // 最大
- if (this.amountAvailable / 1) {
- this.form.volume = this.amountAvailable
- this.debounceFn()
- } else {
- showToast(this.$t('你没有可提数量'))
- }
- },
- onInput(e) { // 获取最新
- this.form.volume = e.target.value
- this.clearInterval()
- if (this.form.volume == '') {
- this.form.get_volume = ''
- } else {
- this.debounceFn()
- }
- },
- debounceFn: debounce(function() {
+ onSwitch() { // 交换
+ const temp = this.form.symbol
+ this.form.symbol = this.form.symbol_to
+ this.form.symbol_to = temp
+ const tempImg = this.form.iconImg1
+ this.form.iconImg1 = this.form.iconImg2
+ this.form.iconImg2 = tempImg
+ const tempsymbol = this.form.symbol_ex
+ this.form.symbol_ex = this.form.symbol_to_ex
+ this.form.symbol_to_ex = tempsymbol
- this.fetchRate(true)
- }, 300),
- fetchRate(callback) { // interval
- let obj = {
- symbol: this.form.symbol_ex,
- symbol_to: this.form.symbol_to_ex,
- volume: this.form.volume
- }
- _exchangeRage(obj).then(data => {
- const {
- get_rate
- } = data
- this.form.rate = get_rate
- this.clearInterval()
- if (callback && typeof callback === 'function') {
- callback()
- }
- })
- },
- onSwitch() { // 交换
- const temp = this.form.symbol
- this.form.symbol = this.form.symbol_to
- this.form.symbol_to = temp
- const tempImg = this.form.iconImg1
- this.form.iconImg1 = this.form.iconImg2
- this.form.iconImg2 = tempImg
- const tempsymbol = this.form.symbol_ex
- this.form.symbol_ex = this.form.symbol_to_ex
- this.form.symbol_to_ex = tempsymbol
-
+ this.form.volume = ''
+ console.log("this.form", this.form);
+ this.clearInterval()
+ },
+ onSelect(type, evt) { // 选择
+ if (evt.type == 0) {
+ this.form['symbol'] = evt.item.symbol_data
+ this.form['iconImg1'] = evt.item.symbol_data
+ this.form['symbol_ex'] = evt.item.symbol
+ } else {
+ this.form['symbol_to'] = evt.item.symbol_data
+ this.form['iconImg2'] = evt.item.symbol_data
+ this.form['symbol_to_ex'] = evt.item.symbol
+ }
+ if (this.form.symbol !== this.form.symbol_to) {
this.form.volume = ''
- console.log("this.form",this.form);
- this.clearInterval()
- },
- onSelect(type, evt) { // 选择
- if (evt.type == 0) {
- this.form['symbol'] = evt.item.symbol_data
- this.form['iconImg1'] = evt.item.symbol_data
- this.form['symbol_ex'] = evt.item.symbol
- } else {
- this.form['symbol_to'] = evt.item.symbol_data
- this.form['iconImg2'] = evt.item.symbol_data
- this.form['symbol_to_ex'] = evt.item.symbol
- }
- if (this.form.symbol !== this.form.symbol_to) {
- this.form.volume = ''
- }
- this.clearInterval()
- },
- onConfirm() { // 闪兑
- this.clearInterval()
- if (this.form.volume == '') {
- showToast(this.$t('请输入数量'));
- } else {
- this.fetchRate(() => {
- this.$emit("exchange", this.form);
- })
- }
- },
- clearInterval() { // 清除定时器
- clearInterval(this.interval)
- this.interval = null
+ }
+ this.clearInterval()
+ },
+ onConfirm() { // 闪兑
+ this.clearInterval()
+ if (this.form.volume == '') {
+ showToast(this.$t('请输入数量'));
+ } else {
+ this.fetchRate(() => {
+ this.$emit("exchange", this.form);
+ })
}
},
- beforeUnmount() {
- // console.log('beforeDestroy')
- this.clearInterval()
+ clearInterval() { // 清除定时器
+ clearInterval(this.interval)
+ this.interval = null
}
- };
+ },
+ beforeUnmount() {
+ // console.log('beforeDestroy')
+ this.clearInterval()
+ }
+};
</script>
<style scoped lang="scss">
- @import "@/assets/init.scss";
+@import "@/assets/init.scss";
- #cryptos {
- .account_card {
- background: $inp-b !important;
- border-radius: 2.5rem;
- padding: 1.2rem 2.5rem;
+#cryptos {
+ .account_card {
+ border-radius: 2.5rem;
+ padding: 1.2rem 2.5rem;
- div {
- background: $inp-b !important;
- }
+ @include themify() {
+ background: themed("input_background");
}
- .exchange-btn {
- bottom: 48px;
- left: 0;
-
- font-size: 36px;
-
- p {
- border-radius: 4rem;
+ div {
+ @include themify() {
+ background: themed("input_background");
}
- }
-
- .active {
- color: $black;
-
- &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: 0;
- width: 140px;
- height: 8px;
- background: $active_line;
- margin: 0 auto;
- }
- }
-
- .convert-box {
- background: $mainbgWhiteColor;
- margin: -2rem auto;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 6rem;
- height: 6rem;
- position: relative;
-
- img {
- width: 50%;
- height: 50%;
- }
- }
-
- .btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
- border-radius: 5px;
- font-weight: bold;
}
}
+
+ .exchange-btn {
+ bottom: 48px;
+ left: 0;
+
+ font-size: 36px;
+
+ p {
+ border-radius: 4rem;
+ }
+ }
+
+ .active {
+ color: $black;
+
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 140px;
+ height: 8px;
+ background: $active_line;
+ margin: 0 auto;
+ }
+ }
+
+ .convert-box {
+ background: $mainbgWhiteColor;
+ margin: -2rem auto;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 6rem;
+ height: 6rem;
+ position: relative;
+
+ img {
+ width: 50%;
+ height: 50%;
+ }
+ }
+
+ .btnMain {
+ background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
+ border-radius: 5px;
+ font-weight: bold;
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/Transform/mining-exchange-input/index.vue b/src/components/Transform/mining-exchange-input/index.vue
index a219b85..a70a79a 100644
--- a/src/components/Transform/mining-exchange-input/index.vue
+++ b/src/components/Transform/mining-exchange-input/index.vue
@@ -19,10 +19,12 @@
<img src="./icon-arrow.png" alt="logo" class="w-12 h-8 icon-arrow" />
</div>
<div class="input-wrap flex justify-between flex-1 items-center ml-10">
- <input placeholder="" v-if="type == 1" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- v-model="oneValue" @input="onInput" :disabled="disabled" />
- <input placeholder="" v-if="type == 2" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- :value="value" @input="onInput" :disabled="disabled" />
+ <input :placeholder="placeholder" v-if="type == 1" type="number"
+ class="h-40 pl-10 border-none inputBackground textColor" v-model="oneValue" @input="onInput"
+ :disabled="disabled" />
+ <input :placeholder="placeholder" v-if="type == 2" type="number"
+ class="h-40 pl-10 border-none inputBackground textColor" :value="value" @input="onInput"
+ :disabled="disabled" />
</div>
<!-- <div v-if="showMax" class="pr-20" @click="onMax">{{ $t('最大') }}</div> -->
</div>
@@ -135,6 +137,10 @@
value: {
type: [Number, String],
default: 0,
+ },
+ placeholder: {
+ type: String,
+ default: ''
},
getval: {
type: String,
@@ -264,11 +270,14 @@
.exchange-pop {
.tab-list {
- background: $inp-b;
$tab-r: 90px;
border-radius: $tab-r;
height: 180px;
- color: $text_color;
+
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
.tab-item {
text-align: center;
@@ -277,24 +286,29 @@
.active {
background: $bg_yellow;
-
border-radius: $tab-r;
}
}
.title {
- color: $text_color;
- padding: 30px 0 !important
+ padding: 30px 0 !important;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.search-input {
- color: $text_color;
- background: $inp-b;
border-radius: 80px;
height: 100px !important;
display: flex;
align-items: center;
padding-left: 30px !important;
+
+ @include themify() {
+ color: themed("text_color1");
+ background: themed("input_background");
+ }
}
.list {
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index efa2a75..3604a08 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -35,10 +35,10 @@
</div>
</div>
<div class="pt-30 pb-20">
- <div class="flex">
+ <div class="flex justify-between">
<div class="w-440 flex flex-col">
<template v-if="selectIndex == 1">
- <div class="flex items-center h-66 rounded-lg text-grey">
+ <div class="flex items-center h-66 greyBg textColor">
<p class="font-28 flex-1 flex items-center justify-center h-66 "
:class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
{{ $t("开多") }}
@@ -49,8 +49,7 @@
</p>
</div>
<div class="mt-22 mb-30" style="position:relative;">
- <div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor"
- @click="selectBtn">
+ <div class="greyBg flex justify-between items-center w-full h-76 greyBg textColor" @click="selectBtn">
<img src="../../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 ml-20" />
<div class="text-center" style="width:80%;">{{ title }}</div>
<img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
@@ -64,14 +63,14 @@
</template>
<contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-20"
:initFutrue="initFutrue" @paraId="onParaId" />
- <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
+ <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center greyBg textColor" v-if="selectIndex == 1">
<input placeholder="" class="greyBg w-full pl-20 h-76 border-none text-left rounded-lg"
:disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
<span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
</div>
<div class="w-440 h-76" v-if="selectIndex == 2"></div>
- <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 rounded-lg" v-if="initFutrue">
+ <div class="w-440 flex items-center greyBg h-76 lh-76 pr-5 pl-5 greyBg" v-if="initFutrue">
<div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
<img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
@@ -123,9 +122,10 @@
<!-- 张数输入 -->
<!-- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
:propsAmount="form.amount"></amount-slider> -->
- <div class="btns_box" >
- <div :class="bfbindex==index?'btns_box_boxs':'btns_box_box'" @click="bfbclick(item,index)" v-for="(item,index) in bfblist" :key="index">{{item.name}}%</div>
- </div>
+ <div class="btns_box">
+ <div :class="bfbindex == index ? 'btns_box_boxs' : 'btns_box_box'" @click="bfbclick(item, index)"
+ v-for="(item, index) in bfblist" :key="index">{{ item.name }}%</div>
+ </div>
</template>
<template v-if="selectIndex == 1 && userInfo.token">
<div class="flex justify-between mt-30">
@@ -152,7 +152,7 @@
</div>
</template>
- <div class="flex font-24 text-grey justify-between mt-32" >
+ <div class="flex font-24 text-grey justify-between mt-32">
<div>{{ $t("可用USDT") }}</div>
<div class="textColor">{{ initFutrue.amount }} USDT</div>
</div>
@@ -174,7 +174,7 @@
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
- <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-70" v-if="currentType == 'long'"
+ <div class="w-full h-80 lh-80 bg-green flex text-white mt-70" v-if="currentType == 'long'"
@click="order('long')">
<div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
{{ $t('开多') }}
@@ -186,7 +186,7 @@
{{ $t('做多买入') }}
</div>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
+ <div class="w-full h-80 lh-80 bg-red flex text-white mt-70" v-if="currentType == 'short'"
@click="order('short')">
<div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
{{ $t('开空') }}
@@ -200,7 +200,7 @@
</div>
</template>
<template v-if="selectIndex == 2">
- <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-10 " @click="order('open')"
+ <div class="w-full h-80 lh-80 bg-green flex text-white mt-10 " @click="order('open')"
v-if="userInfo.token">
<div class="font-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
@@ -209,9 +209,8 @@
}}</span> -->
</div>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-20 mb-10"
- style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')"
- v-if="userInfo.token">
+ <div class="w-full h-80 lh-80 bg-red flex text-white mt-20 mb-10" style="position: relative;"
+ :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
<div class="relative font-34 text-center" style="flex-grow: 1">
{{ $t("开空") }}
<!-- <span class="right-word font-22 text-center">{{
@@ -231,7 +230,7 @@
{{ $t('logIn') }}</div>
</div>
</div>
- <div class="ml-30">
+ <div>
<div class="w-290 flex justify-between text-grey font-22">
<div>
<div>{{ $t("价格") }}</div>
@@ -257,10 +256,10 @@
'%,rgba(246,70,93,.1) 100%)',
}"> -->
- <div v-show="(showType == 0 || showType == 2) " class="w-290 flex justify-between pt-1 font-26"
+ <div v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between pt-1 font-26"
v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ `linear-gradient(to right,${$store.state.vant.theme == 'dark' ? '#131A2E' : '#fff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
100 +
@@ -303,7 +302,7 @@
<div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ `linear-gradient(to right,${$store.state.vant.theme == 'dark' ? '#131A2E' : '#fff'
} 0%` +
(1 - item.amount / greenData[greenData.length - 1].amount) *
100 +
@@ -541,13 +540,13 @@
return {
THEME,
fixDate,
- bfbindex:null,
- bfblist:[
- {name:'25'},
- {name:'50'},
- {name:'75'},
- {name:'100'}
- ],
+ bfbindex: null,
+ bfblist: [
+ { name: '25' },
+ { name: '50' },
+ { name: '75' },
+ { name: '100' }
+ ],
currentBuyType: '', // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
timeout2: null,
timeout: null,
@@ -624,14 +623,14 @@
},
methods: {
reserve,
- bfbclick(e,i){
- this.bfbindex = i
- e = parseInt(e.name)
- const rate = e / 100; //如0.25
- this.form.amount = this.maxUSDT * rate
- var a = this.form.amount
- this.form.amount = Math.floor(a*100)/100
- },
+ bfbclick(e, i) {
+ this.bfbindex = i
+ e = parseInt(e.name)
+ const rate = e / 100; //如0.25
+ this.form.amount = this.maxUSDT * rate
+ var a = this.form.amount
+ this.form.amount = Math.floor(a * 100) / 100
+ },
//获取张数
getAmount(val) {
if (!val) {
@@ -956,24 +955,28 @@
<style lang="scss">
@import "@/assets/init.scss";
-.btns_box_boxs{
- width: 23%;
- border: 1px solid #F7B600;
- text-align: center;
- border-radius: 10px;
- color: #F7B600;
+
+.btns_box_boxs {
+ width: 23%;
+ border: 1px solid #F7B600;
+ text-align: center;
+ border-radius: 10px;
+ color: #F7B600;
}
-.btns_box_box{
- width: 23%;
- border: 1px solid #cbcbcb;
- text-align: center;
- border-radius: 10px;
+
+.btns_box_box {
+ width: 23%;
+ border: 1px solid #cbcbcb;
+ text-align: center;
+ border-radius: 10px;
}
-.btns_box{
- display: flex;
- justify-content: space-between;
- align-items: center;
+
+.btns_box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
+
#cryptos {
.perpetual-open {
font-size: 26px;
@@ -1094,13 +1097,18 @@
right: 0;
top: 90px;
width: 100%;
- background-color: $grey_bg;
+ // background-color: $grey_bg;
text-align: center;
- box-shadow: 0px 0px 3px 3px $grey_bg;
+ // box-shadow: 0px 0px 3px 3px $grey_bg;
border-radius: 4px;
- color: $text-color;
+ // color: $text-color;
z-index: 10;
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ box-shadow: 0px 0px 3px 3px themed("input_background");
+ }
}
.option-box>div {
@@ -1138,17 +1146,23 @@
}
.long {
- background-color: $green;
- background: url(@/assets/image/public/open-bg.png) no-repeat right center;
- background-size: 100% 100%;
+ // background-color: $green;
+ // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
+ // background-size: 100% 100%;
color: white;
+
+ background: #06CDA5;
+ // border-radius: 5rem;
}
.short {
- background-color: $green;
- background: url(@/assets/image/public/close-bg.png) no-repeat left center;
- background-size: 100% 100%;
+ // background-color: $green;
+ // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
+ // background-size: 100% 100%;
color: white;
+
+ background: #F43368;
+ // border-radius: 5rem;
}
.van-action-sheet__content {
@@ -1176,10 +1190,13 @@
.select-box {
width: 220px;
- border-radius: 2.5rem;
- background: #1E1E1E;
-
+ // border-radius: 2.5rem;
+ // background: #1E1E1E;
margin-right: 20px;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
}
diff --git a/src/components/Transform/trade-head/index.vue b/src/components/Transform/trade-head/index.vue
index 71499ab..c99fe1f 100644
--- a/src/components/Transform/trade-head/index.vue
+++ b/src/components/Transform/trade-head/index.vue
@@ -9,13 +9,16 @@
<!-- <img v-if="isReturn" src="@/assets/image/icon_back_1.png" @click="backPath()" class="w-40 h-40 back mr-50"
alt=""> -->
- <img v-if="isReturn" src="@/assets/image/icon_back.png" @click="goBack()" class="w-40 h-40 back mr-50"
- alt="">
+ <template v-if="isReturn">
+ <img src="@/assets/image/icon_back.png" @click="goBack()" class="w-40 h-40 back mr-50" alt=""
+ v-if="$store.state.vant.theme == 'light'">
+ <img src="@/assets/image/icon_back_1.png" @click="goBack()" class="w-40 h-40 back mr-50" alt="" v-else>
+ </template>
<template v-if="!isChange">
- <!-- <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
- @click="onSidebar" /> -->
<img src="../../../assets/theme/white/image/black-convert.png" alt="convert-img" class="w-35 h-35"
- @click="onSidebar" />
+ @click="onSidebar" v-if="$store.state.vant.theme == 'light'" />
+ <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
+ @click="onSidebar" v-else />
</template>
<!-- 在切换模式下 -->
<template v-if="isChange">
@@ -188,7 +191,7 @@
watch: {
symbol(val) {
console.log("symbol", val);
-
+
this.getIsItemHasAddGlobal()
if (this.islevel) {
this.$emit('changeLine', true)
@@ -303,9 +306,9 @@
// path: `/${url}?symbol=${this.symbol}`
// });
// },
- changeBg() {
- this.$emit('changeNight', !this.isNight)
- },
+ // changeBg() {
+ // this.$emit('changeNight', !this.isNight)
+ // },
backPath() {
if (this.$route.query?.from === 'trade') {
this.$router.push('/trade/index?tabActive=1')
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 99536b2..6136e41 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -11,7 +11,7 @@
<div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
<!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
<div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
- <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
+ <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
</div>
<div class="option-box" v-if="isShow">
<div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
@@ -27,7 +27,7 @@
<span>{{ title }}</span>
</div>
- <template v-if="initClose.status / 1 === 0">
+ <template v-if="initClose.status / 1 === 0">
<div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
</template>
<template v-else>
@@ -369,11 +369,11 @@
@import "@/assets/init.scss";
.area_tabs {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
.open,
.close {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
}
.open {
@@ -560,7 +560,7 @@
}
.inputBackground {
- border-radius: 2.5rem;
+ // border-radius: 2.5rem;
input {
background: transparent !important;
@@ -571,35 +571,41 @@
display: flex;
align-items: center;
justify-content: center;
- background: $input_background;
- border-radius: 2.5rem;
+ // background: $input_background;
+ // border-radius: 2.5rem;
margin-right: 10px !important;
padding: 10px 0;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
.total-list {
background: transparent;
-
display: flex;
-
- color: $text_color;
-
font-size: 26px;
align-items: center;
justify-content: center;
margin-bottom: 20px !important;
position: relative;
- .total-div {
- flex: 1;
- text-align: center;
- padding: 20px 0 !important;
+ @include themify() {
+ color: themed("text_color1");
}
}
+.total-div {
+ flex: 1;
+ text-align: center;
+ padding: 20px 0 !important;
+}
+
.active-bg {
- background: $input_background;
- border-radius: 2.5rem;
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
}
.buyandSell {
@@ -608,6 +614,8 @@
}
.select-active {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
</style>
diff --git a/src/components/ex-input/index.vue b/src/components/ex-input/index.vue
index 70d8e1a..dd00e2c 100644
--- a/src/components/ex-input/index.vue
+++ b/src/components/ex-input/index.vue
@@ -8,13 +8,13 @@
<img src="../../assets/image/login/more.png" alt="">
</div>
<!-- <p>{{ passwordType }} {{ props.value }}</p> -->
- <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'" :type="passwordType"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
+ <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'"
+ :type="passwordType" :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
<div class="max-input" v-else>
- <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text" :disabled="disabled"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" />
- <input autocomplete="off" v-else class="inputBackground" type="text" :disabled="disabled"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" />
+ <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text"
+ :disabled="disabled" :placeholder="placeholderText" :value="modelValue" @input="onInput" />
+ <input autocomplete="off" v-else class="inputBackground" type="text" :disabled="disabled"
+ :placeholder="placeholderText" :value="modelValue" @input="onInput" />
</div>
<div class="rightCon">
<div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png" alt="" />
@@ -111,11 +111,7 @@
<style lang="scss" scoped>
@import "@/views/authentication/components/intl.css";
-.textColor{
- color: $text_color;
-}
.inputCom {
- color: $text_color;
padding-bottom: 22px;
font-size: 14px;
@@ -147,7 +143,10 @@
height: 100%;
border: none;
padding-left: 10px;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.rightCon {
@@ -172,8 +171,11 @@
.tips {
font-size: 13px;
- color: $text_color1;
margin-top: 9px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
input:-webkit-autofill {
@@ -181,16 +183,20 @@
}
input::-webkit-input-placeholder {
- color: $dark-grey;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.icon {
transform: scale(1.3);
display: inline-block;
}
-.max-input{
+
+.max-input {
width: 100%;
- input{
+
+ input {
width: 100%;
}
}
diff --git a/src/components/ex-input/new-input.vue b/src/components/ex-input/new-input.vue
index 76712d7..43031bd 100644
--- a/src/components/ex-input/new-input.vue
+++ b/src/components/ex-input/new-input.vue
@@ -117,19 +117,7 @@
<style lang="scss" scoped>
@import "@/views/authentication/components/intl.css";
-$inp-b: #f5f5f5;
-
-.inputBackground {
- background: $inp-b;
- border: #d5d5d5 solid 1px;
-}
-
-.textColor {
- color: $mainBgColor;
-}
-
.inputCom {
- color: $mainBgColor;
padding-bottom: 22px;
font-size: 14px;
@@ -140,7 +128,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- border-radius: 27.5px;
+ border-radius: 4px;
}
.areaCode {
@@ -161,7 +149,6 @@
height: 100%;
border: none;
padding-left: 10px;
- color: $mainBgColor;
border-radius: 20px;
}
@@ -187,16 +174,7 @@
.tips {
font-size: 13px;
- color: $text_color1;
margin-top: 9px;
-}
-
-input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 200px $light-grey inset;
-}
-
-input::-webkit-input-placeholder {
- color: $dark-grey;
}
.icon {
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 3e501f9..27b0e0e 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -1,7 +1,6 @@
<template>
<div class="relative z-30 footer">
- <van-tabbar route v-model="active" active-color="#292929" inactive-color="7f7f7f" @change="changeIndex" fixed
- safe-area-inset-bottom>
+ <van-tabbar route v-model="active" @change="changeIndex" fixed safe-area-inset-bottom>
<!-- <van-tabbar-item name="optional" to="/optional">
<span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
<template #icon="props">
@@ -11,21 +10,32 @@
<van-tabbar-item name="homePage" to="/homePage">
<span :class="[active === 'homePage' ? 'active' : '']">{{ $t('首页') }}</span>
<template #icon="props">
- <img :src="props.active ? icon.home.active : icon.home.inactive" />
+ <img :src="props.active ? icon.home.active : icon.home.inactive" v-if="store.state.vant.theme == 'light'" />
+ <img :src="props.active ? icon.home.active2 : icon.home.inactive" v-else />
</template>
</van-tabbar-item>
<van-tabbar-item name="quotes" to="/quotes">
<span :class="[active === 'quotes' ? 'active' : '']">{{ $t('quotes') }}</span>
<template #icon="props">
- <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
+ <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" v-if="store.state.vant.theme == 'light'" />
+ <img :src="props.active ? icon.quotes.active2 : icon.quotes.inactive" v-else />
</template>
</van-tabbar-item>
<van-tabbar-item name="trade" to="/trade">
<span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
<template #icon="props">
- <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
+ <img :src="props.active ? icon.trade.active : icon.trade.inactive" v-if="store.state.vant.theme == 'light'" />
+ <img :src="props.active ? icon.trade.active2 : icon.trade.inactive" v-else />
</template>
</van-tabbar-item>
+
+ <van-tabbar-item name="btcusdt" to="/cryptos/trade/btcusdt">
+ <span :class="[active === 'btcusdt' ? 'active' : '']">{{ $t('现货') }}</span>
+ <template #icon="">
+ <img src="@/assets/imgs/footer/f_4a.png" />
+ </template>
+ </van-tabbar-item>
+
<!-- <van-tabbar-item name="funds" to="/cryptos/funds">
<span>{{ $t('资金') }}</span>
<template #icon="props">
@@ -39,7 +49,7 @@
<img :src="props.active ? icon.news.active : icon.news.inactive" />
</template>
</van-tabbar-item> -->
-
+
<!-- <van-tabbar-item name="documentation" to="/documentation">
<span :class="[active === 'documentation' ? 'active' : '']">{{ $t('跟单') }}</span>
<template #icon="props">
@@ -64,7 +74,8 @@
<van-tabbar-item name="assets" to="/my/assets">
<span :class="[active === 'assets' ? 'active' : '']">{{ $t('资产') }}</span>
<template #icon="props">
- <img :src="props.active ? icon.assets.active : icon.assets.inactive" />
+ <img :src="props.active ? icon.assets.active : icon.assets.inactive" v-if="store.state.vant.theme == 'light'" />
+ <img :src="props.active ? icon.assets.active2 : icon.assets.inactive" v-else />
</template>
</van-tabbar-item>
</van-tabbar>
@@ -77,6 +88,7 @@
import { useI18n } from "vue-i18n";
import { useRoute } from 'vue-router';
import { watch } from "vue";
+import store from '@/store/store'
const { t } = useI18n()
const active = ref('home')
const route = useRoute()
@@ -127,12 +139,14 @@
// inactive: new URL('@/assets/imgs/footer/optional.png', import.meta.url),
// },
home: {
- active: new URL('@/assets/imgs/footer/home-active.png', import.meta.url),
- inactive: new URL('@/assets/imgs/footer/home.png', import.meta.url),
+ active: new URL('@/assets/imgs/footer/f_1b.png', import.meta.url),
+ active2: new URL('@/assets/imgs/footer/f_1c.png', import.meta.url),
+ inactive: new URL('@/assets/imgs/footer/f_1a.png', import.meta.url),
},
quotes: {
- active: new URL('@/assets/imgs/footer/quotes-active.png', import.meta.url),
- inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
+ active: new URL('@/assets/imgs/footer/f_2b.png', import.meta.url),
+ active2: new URL('@/assets/imgs/footer/f_2c.png', import.meta.url),
+ inactive: new URL('@/assets/imgs/footer/f_2a.png', import.meta.url),
},
// news: {
// active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
@@ -143,8 +157,9 @@
inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
},
trade: {
- active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
- inactive: new URL('@/assets/imgs/footer/trade.png', import.meta.url),
+ active: new URL('@/assets/imgs/footer/f_3b.png', import.meta.url),
+ active2: new URL('@/assets/imgs/footer/f_3c.png', import.meta.url),
+ inactive: new URL('@/assets/imgs/footer/f_3a.png', import.meta.url),
},
// funds: {
// active: new URL('@/assets/imgs/footer/funds-active.png', import.meta.url),
@@ -155,8 +170,9 @@
inactive: new URL('@/assets/imgs/footer/menu.png', import.meta.url),
},
assets: {
- active: new URL('@/assets/imgs/footer/assets-active.png', import.meta.url),
- inactive: new URL('@/assets/imgs/footer/assets.png', import.meta.url),
+ active: new URL('@/assets/imgs/footer/f_5b.png', import.meta.url),
+ active2: new URL('@/assets/imgs/footer/f_5c.png', import.meta.url),
+ inactive: new URL('@/assets/imgs/footer/f_5a.png', import.meta.url),
}
}
const changeIndex = (index) => {
@@ -167,22 +183,22 @@
<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
font-size: 12px;
- color: #7f7f7f;
+ color: $text_color1;
}
:deep(.van-tabbar-item--active) {
- background-color: $white;
+ // background-color: $white;
}
.van-tabbar--fixed {
z-index: 10;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
- background-color: $white;
+ // background-color: $white;
}
.van-tabbar--fixed::after {
- border-color: $white;
+ // border-color: $white;
}
// .blue {
@@ -190,7 +206,9 @@
// }
.active {
- color: #292929 !important;
+ @include themify() {
+ color: themed("tab_color");
+ }
}
.footer {
diff --git a/src/components/fx-header/index.vue b/src/components/fx-header/index.vue
index 05b8ac5..964c306 100644
--- a/src/components/fx-header/index.vue
+++ b/src/components/fx-header/index.vue
@@ -1,5 +1,8 @@
<template>
- <van-nav-bar :title="title" :left-arrow="showLeft" @click-left="onClickLeft">
+ <van-nav-bar :title="title" :leftText="leftText" :left-arrow="showLeft" @click-left="onClickLeft">
+ <template #left v-if="!showLeft">
+ <slot name="left"></slot>
+ </template>
<template #title>
<slot name="title"></slot>
</template>
@@ -37,13 +40,8 @@
</script>
<style lang="scss" scoped>
-:deep(.van-icon) {
+::v-deep .van-icon {
font-size: 18px;
- // color: $text_color;
- color: $log-c;
-}
-
-:deep(.van-nav-bar__title) {
- color: $log-c;
+ color: $text_color1;
}
</style>
diff --git a/src/components/normal-head/index.vue b/src/components/normal-head/index.vue
index aa251ac..61547cb 100644
--- a/src/components/normal-head/index.vue
+++ b/src/components/normal-head/index.vue
@@ -1,10 +1,6 @@
<template>
<div id="normalHead">
- <van-nav-bar
- :border="false"
- :title="title"
- left-arrow
- @click-left="onClickLeft">
+ <van-nav-bar :border="false" :title="title" left-arrow @click-left="onClickLeft">
<template #right>
<slot></slot>
</template>
@@ -22,7 +18,7 @@
this.$router.push('/');
} else if (this.goAssetsCenter) {
this.$router.push('/assetsCenter/assets');
- }else if (this.goPerpetualContract){
+ } else if (this.goPerpetualContract) {
this.$router.go(-2);
} else if (this.backFunc) {
this.backFunc()
@@ -35,7 +31,9 @@
</script>
<style lang="scss" scoped>
-::v-deep .van-nav-bar__title{
- color: #333;
+::v-deep .van-nav-bar__title {
+ @include themify() {
+ color: themed("textColor");
+ }
}
</style>
diff --git a/src/config/index.js b/src/config/index.js
index 2f88170..550e473 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -65,6 +65,20 @@
// export const HOST_URL = host_url
export const HOST_URL = imgUrl
+// 多语言选项
+export const lang = [
+ { title: '繁体中文', key: 'CN', image: new URL('@/assets/image/lang/taiwan.png', import.meta.url) },
+ { title: '简体中文', key: 'zh-CN', image: new URL('@/assets/image/lang/zh-CN.png', import.meta.url) },
+ { title: 'English', key: 'en', image: new URL('@/assets/image/lang/en-US.png', import.meta.url) },
+ { title: '한국인', key: 'Korean', image: new URL('@/assets/image/lang/Korean.png', import.meta.url) },
+ { title: 'やまと', key: 'Japanese', image: new URL('@/assets/image/lang/Japanese.png', import.meta.url) },
+ { title: 'Deutsch', key: 'de', image: new URL('@/assets/image/lang/de.png', import.meta.url) }, //德语
+ { title: 'Français', key: 'fr', image: new URL('@/assets/image/lang/French.png', import.meta.url) }, //法语
+ { title: 'Tiếng Việt', key: 'vi', image: new URL('@/assets/image/lang/vi.png', import.meta.url) },//越南语
+ { title: 'Italiano', key: 'Italy', image: new URL('@/assets/image/lang/Italy.png', import.meta.url) }, //意大利语
+ { title: 'ไทย', key: 'th', image: new URL('@/assets/image/lang/Thai.png', import.meta.url) }, //泰语
+]
+
// 公司logo
export const LOGO = new URL('@/assets/imgs/logo.png', import.meta.url)
diff --git a/src/i18n/Deutsch.js b/src/i18n/Deutsch.js
index b70bf82..a45a08f 100644
--- a/src/i18n/Deutsch.js
+++ b/src/i18n/Deutsch.js
@@ -2829,4 +2829,8 @@
"已分发": "Verteilt",
"中签数量": "Zuteilungsmenge",
"停牌中,禁止交易": "Finger weg, ware aus",
+ "安全、便利、社交": "Sicher, bequem, sozial",
+ "公司": "Firma",
+ "法律": "Gesetz",
+ "支援": "Unterstützung",
}
\ No newline at end of file
diff --git a/src/i18n/Italy.js b/src/i18n/Italy.js
index 381a91f..ad6c1fb 100644
--- a/src/i18n/Italy.js
+++ b/src/i18n/Italy.js
@@ -2919,4 +2919,8 @@
"已分发": "Distribuito",
"中签数量": "Quantità di assegnazione",
"停牌中,禁止交易": "In caso di sospensione, il commercio è vietato",
+ "安全、便利、社交": "Sicuro, comodo, sociale",
+ "公司": "Azienda",
+ "法律": "Legge",
+ "支援": "Supporto",
}
\ No newline at end of file
diff --git a/src/i18n/Japanese.js b/src/i18n/Japanese.js
index f19f1db..8a540ad 100644
--- a/src/i18n/Japanese.js
+++ b/src/i18n/Japanese.js
@@ -2687,4 +2687,8 @@
"已分发": "配布済み",
"中签数量": "当選数量",
"停牌中,禁止交易": "取引停止中,取引禁止です",
+ "安全、便利、社交": "安全、便利、社交",
+ "公司": "会社",
+ "法律": "法律",
+ "支援": "支援",
}
\ No newline at end of file
diff --git a/src/i18n/Portuguese.js b/src/i18n/Portuguese.js
index 68a4488..f3ef6da 100644
--- a/src/i18n/Portuguese.js
+++ b/src/i18n/Portuguese.js
@@ -639,4 +639,8 @@
"已分发": "Distribuído",
"中签数量": "Quantidade de alocação",
"停牌中,禁止交易": "Suspensão, proibição de negociação.",
+ "安全、便利、社交": "Seguro, conveniente e social",
+ "公司": "Empresa",
+ "法律": "Legal",
+ "支援": "Suporte",
}
\ No newline at end of file
diff --git a/src/i18n/Spanish.js b/src/i18n/Spanish.js
index a129118..a9b880f 100644
--- a/src/i18n/Spanish.js
+++ b/src/i18n/Spanish.js
@@ -2602,4 +2602,8 @@
"已分发": "Distribuido",
"中签数量": "Cantidad de asignación",
"停牌中,禁止交易": "Suspendido, sin comercio",
+ "安全、便利、社交": "Seguro, conveniente y social",
+ "公司": "Empresa",
+ "法律": "Ley",
+ "支援": "Apoyo",
}
\ No newline at end of file
diff --git a/src/i18n/cn.js b/src/i18n/cn.js
index c4e9852..f4b3c0d 100644
--- a/src/i18n/cn.js
+++ b/src/i18n/cn.js
@@ -2808,4 +2808,8 @@
"已分发": "已分發",
"中签数量": "中籤數量",
"停牌中,禁止交易": "停牌中,禁止交易",
+ "安全、便利、社交": "安全, 便利, 社交",
+ "公司": "公司",
+ "法律": "法律",
+ "支援": "支援",
}
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 2fe07a6..cd201c1 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -2783,4 +2783,8 @@
"已分发": "Distributed",
"中签数量": "Allocation quantity",
"停牌中,禁止交易": "Trading is suspended. Trading is prohibited.",
+ "安全、便利、社交": "Safe, convenient, social",
+ "公司": "Company",
+ "法律": "Legal",
+ "支援": "Support",
}
\ No newline at end of file
diff --git a/src/i18n/fa.js b/src/i18n/fa.js
index 216c694..fbdfc55 100644
--- a/src/i18n/fa.js
+++ b/src/i18n/fa.js
@@ -2726,4 +2726,8 @@
"已分发": "Distribué",
"中签数量": "Quantité d'attribution",
"停牌中,禁止交易": "Suspension en cours, commerce interdit",
+ "安全、便利、社交": "Sécurité, commodité, social",
+ "公司": "Entreprise",
+ "法律": "Loi",
+ "支援": "Soutien",
}
\ No newline at end of file
diff --git a/src/i18n/korean.js b/src/i18n/korean.js
index 31a733f..7c5fe7e 100644
--- a/src/i18n/korean.js
+++ b/src/i18n/korean.js
@@ -2823,4 +2823,8 @@
"已分发": "배분 완료",
"中签数量": "당첨 수량",
"停牌中,禁止交易": "주식 거래 정지 중 거래를 금지하다",
+ "安全、便利、社交": "안전, 편리, 소셜",
+ "公司": "회사",
+ "法律": "법률",
+ "支援": "지원",
}
\ No newline at end of file
diff --git a/src/i18n/th.js b/src/i18n/th.js
index aaa77be..9b5a78b 100644
--- a/src/i18n/th.js
+++ b/src/i18n/th.js
@@ -2794,4 +2794,8 @@
"已分发": "แจกจ่ายแล้ว",
"中签数量": "จำนวนที่ได้รับจัดสรร",
"停牌中,禁止交易": "ไม่มีการแลกเปลี่ยน",
+ "安全、便利、社交": "ความปลอดภัย ความสะดวก สังคม",
+ "公司": "บริษัท",
+ "法律": "กฎหมาย",
+ "支援": "การสนับสนุน",
}
\ No newline at end of file
diff --git a/src/i18n/vi.js b/src/i18n/vi.js
index 0a92d4d..bdca5aa 100644
--- a/src/i18n/vi.js
+++ b/src/i18n/vi.js
@@ -2773,4 +2773,8 @@
"已分发": "Đã phân phối",
"中签数量": "Số lượng được phân bổ",
"停牌中,禁止交易": "Bị đình chỉ, không giao dịch",
+ "安全、便利、社交": "An toàn, thuận tiện, xã hội",
+ "公司": "Công ty",
+ "法律": "Luật pháp",
+ "支援": "Hỗ trợ",
}
\ No newline at end of file
diff --git a/src/i18n/zhcn.js b/src/i18n/zhcn.js
index 4ba935e..1acb5dc 100644
--- a/src/i18n/zhcn.js
+++ b/src/i18n/zhcn.js
@@ -2788,4 +2788,8 @@
"已分发": "已分发",
"中签数量": "中签数量",
"停牌中,禁止交易": "停牌中,禁止交易",
+ "安全、便利、社交": "安全, 便利, 社交",
+ "公司": "公司",
+ "法律": "法律",
+ "支援": "支援",
}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 1b4606e..5438a20 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1653,7 +1653,7 @@
})
router.beforeEach((to, from, next) => {
const userStore = useUserStore()
- console.log(to.name);
+ // console.log(to.name);
// 钱包登录逻辑
// if (to.name === 'Login') {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index bb2feb0..49a5010 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -2,6 +2,7 @@
import { _register, _userInfo } from '@/service/user.api'
import { SET_USERINFO, GET_USERINFO, SET_OUT, CONNECT_WALLET, SET_STATUS } from "@/store/const.store";
import { _getBalance } from '@/service/user.api.js'
+import { _customer } from "@/service/user.api.js";
export default {
namespaced: true,
state: {
@@ -11,7 +12,8 @@
usercode: '', //
token: '', // 登录token
username: ''
- }
+ },
+ customer_service_url: null, // 客服地址
},
getters: {
mingStatus: state => state.status,
@@ -31,6 +33,10 @@
},
[SET_OUT](state) { // 退出
state.userInfo = {}
+ },
+ // 设置客服链接
+ 'SET_CUSTOMER_SERVICE_URL'(state, url) {
+ state.customer_service_url = url || null
}
},
actions: {
@@ -47,5 +53,9 @@
data = await _getBalance()
commit(SET_USERINFO, { balance: data.money }) // 余额
},
+ async 'GET_CUSTOMER_SERVICE_URL'({ commit }) { // 获取客服地址
+ let data = await _customer()
+ commit('SET_CUSTOMER_SERVICE_URL', data.url) // 客服地址
+ }
},
};
diff --git a/src/store/modules/vant.js b/src/store/modules/vant.js
new file mode 100644
index 0000000..4e04408
--- /dev/null
+++ b/src/store/modules/vant.js
@@ -0,0 +1,18 @@
+
+import {
+ getStorage,setStorage,changeTheme,
+} from '@/utils/utis'
+export default {
+ namespaced: true,
+ state: {
+ theme: 'light' || getStorage('theme'), // 主题 light(白天)/dark(夜间)
+ },
+ mutations: {
+ "SET_THEME"(state, val) { // 修改主题状态
+ state.theme = val;
+ window.document.documentElement.setAttribute('data-theme', val)
+ changeTheme(val)
+ setStorage('theme', val);
+ },
+ },
+};
diff --git a/src/store/store.js b/src/store/store.js
index 0e73552..4624a05 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -6,6 +6,7 @@
import c2cBuy from "@/store/modules/c2cBuy";
import c2cSell from "@/store/modules/c2cSell";
import c2c from "@/store/modules/c2c";
+import vant from "@/store/modules/vant";
// import exchangeRate from './modules/exchangeRate'
import createPersistedState from "vuex-persistedstate";
@@ -27,6 +28,7 @@
c2cBuy,
c2cSell,
c2c,
+ vant,
// exchangeRate
},
};
diff --git a/src/views/C2C/c2c-trade/page/c2cBuy.vue b/src/views/C2C/c2c-trade/page/c2cBuy.vue
index 9fc0491..a4bdeb9 100644
--- a/src/views/C2C/c2c-trade/page/c2cBuy.vue
+++ b/src/views/C2C/c2c-trade/page/c2cBuy.vue
@@ -4,11 +4,11 @@
v-if="detail.id">
<template #trade>
<div class="buy-item mt-40 w-full mainBackground c2cColor">
- <div class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey c2cColor">
- <div class="flex-1 text-center" :class="{ 'text-grey': type === 'num' }" @click="typeSwitch('amount')">
+ <div class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey textColor">
+ <div class="flex-1 text-center" :class="{ 'textColor1': type === 'num' }" @click="typeSwitch('amount')">
{{ $t('按金额购买') }}
</div>
- <div class="flex-1 text-center" :class="{ 'text-grey': type === 'amount' }" @click="typeSwitch('num')">
+ <div class="flex-1 text-center" :class="{ 'textColor1': type === 'amount' }" @click="typeSwitch('num')">
{{ $t('按数量购买') }}
</div>
</div>
diff --git a/src/views/C2C/c2cOrder/components/order-data/OrderData.vue b/src/views/C2C/c2cOrder/components/order-data/OrderData.vue
index d957526..d265050 100644
--- a/src/views/C2C/c2cOrder/components/order-data/OrderData.vue
+++ b/src/views/C2C/c2cOrder/components/order-data/OrderData.vue
@@ -103,6 +103,7 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
::v-deep .van-cell {
margin-bottom: 46px;
}
@@ -114,14 +115,21 @@
}
.order-data {
- ::v-deep .van-cell-group, .van-cell {
+
+ ::v-deep .van-cell-group,
+ .van-cell {
margin-bottom: 46px;
- color: $text_color;
- background: $main_background;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
::v-deep .van-cell__value {
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
</style>
diff --git a/src/views/C2C/c2cOrder/components/trade-data/TradeData.vue b/src/views/C2C/c2cOrder/components/trade-data/TradeData.vue
index 12a9c34..b318dd0 100644
--- a/src/views/C2C/c2cOrder/components/trade-data/TradeData.vue
+++ b/src/views/C2C/c2cOrder/components/trade-data/TradeData.vue
@@ -24,7 +24,8 @@
</div>
</template>
<van-cell-group class="payment-method">
- <van-cell v-for="(item, index) in detail.tradeMethod" :key="index" :title="item.label" :value="item.value" />
+ <van-cell v-for="(item, index) in detail.tradeMethod" :key="index" :title="item.label"
+ :value="item.value" />
</van-cell-group>
</van-collapse-item>
</van-collapse>
@@ -75,17 +76,22 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
.mainBackground {
::v-deep {
.van-cell-group,
.van-cell {
- color: $text_color1;
- background: $main_background;
+ @include themify() {
+ color: themed("text_color1");
+ background: themed("main_background");
+ }
}
.van-cell__value {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
.order-msg {
diff --git a/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue b/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
index 6172380..e9d3db9 100644
--- a/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
+++ b/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
@@ -156,16 +156,9 @@
::v-deep .van-cell-group,
.van-cell {
color: $text_color1;
- background: $main_background;
+ // background: $main_background;
}
- ::v-deep .van-cell__value {
- color: $text_color;
- }
-
- .footer-box {
- background: $main_background;
- }
}
</style>
diff --git a/src/views/C2C/c2cOrder/payment/PaymentBuy.vue b/src/views/C2C/c2cOrder/payment/PaymentBuy.vue
index bb18364..fc11655 100644
--- a/src/views/C2C/c2cOrder/payment/PaymentBuy.vue
+++ b/src/views/C2C/c2cOrder/payment/PaymentBuy.vue
@@ -21,7 +21,7 @@
<div class="flex justify-center items-end mt-42 font-64 font-700">
<div class="flex justify-center">
<span class="font-48">
- {{currencySymbol}}
+ {{ currencySymbol }}
</span>
<span class="px-10">{{
(orderInfo.amount && (orderInfo.amount / 1).toFixed(2)) || "--"
@@ -105,7 +105,8 @@
</div>
<div class="mt-92 px-40 flex font-30">
<van-button class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none" type="primary"
- @click="show = true">{{ $t("遇到问题？") }}</van-button>
+ @click="show = true">{{
+ $t("遇到问题？") }}</van-button>
<van-button class="flex-1 h-80 rounded-2xl btnMain text-white border-none" type="primary" @click="onPayed">
{{ $t("我已付款，通知卖家") }}</van-button>
</div>
@@ -216,8 +217,11 @@
.van-cell {
margin-top: 28px;
- color: $text_color1;
- background: $tab_background;
+
+ @include themify() {
+ background: themed("tab_background");
+ color: themed("text_color1");
+ }
.van-cell__title,
.van-cell__value {
@@ -230,8 +234,10 @@
}
.van-cell-group {
- color: $text_color1;
- background: $tab_background;
+ @include themify() {
+ background: themed("tab_background");
+ color: themed("text_color1");
+ }
}
}
}
diff --git a/src/views/C2C/c2cOrder/payment/components/Question.vue b/src/views/C2C/c2cOrder/payment/components/Question.vue
index 8038a0d..9d3c70f 100644
--- a/src/views/C2C/c2cOrder/payment/components/Question.vue
+++ b/src/views/C2C/c2cOrder/payment/components/Question.vue
@@ -1,8 +1,8 @@
<template>
<div class="w-full h-full c2cPay-page">
- <order-nav :back="false" @back="hide"/>
+ <order-nav :back="false" @back="hide" />
<div class="text-center">
- <div class="font-48 ">{{ $t('付款遇到问题？')}}</div>
+ <div class="font-48 ">{{ $t('付款遇到问题？') }}</div>
<!-- <div class="flex justify-center items-center mt-18 font-28">
<span class="mr-6">{{ $t('付款剩余时间')}}</span>
<van-count-down class="flex font-700" :time="time">
@@ -13,39 +13,36 @@
<span class="font-26 colon">:</span>
<span class="font-26 block">{{ timeData.seconds }}</span>
</template>
- </van-count-down>
- </div> -->
+</van-count-down>
+</div> -->
</div>
<div class="px-32 font-32 mt-18">
<div class="mt-100">
- <p class="text-grey">Q：{{ $t('不知道如何付款？')}}</p>
- <p class="mt-28">A：{{ $t('为保障交易安全，部分卖家可能先需要您提供额外资料来证明您的身份，资金来源等真是可信。请与卖家聊天沟通获取交易方式。')}}</p>
+ <p class="text-grey">Q：{{ $t('不知道如何付款？') }}</p>
+ <p class="mt-28">A：{{ $t('为保障交易安全，部分卖家可能先需要您提供额外资料来证明您的身份，资金来源等真是可信。请与卖家聊天沟通获取交易方式。') }}</p>
</div>
<div class="mt-80">
- <p class="text-grey">Q：{{ $t('向卖家提供的收款方式付款，但支付失败了')}}</p>
- <p class="mt-28">A：{{ $t('请联系卖家确认卖家是否支持其他交易方式。')}}</p>
+ <p class="text-grey">Q：{{ $t('向卖家提供的收款方式付款，但支付失败了') }}</p>
+ <p class="mt-28">A：{{ $t('请联系卖家确认卖家是否支持其他交易方式。') }}</p>
</div>
<div class="mt-80">
- <p class="text-grey">Q：{{ $t('我不想交易了？')}}</p>
- <p class="mt-28">A：{{ $t('您可以点击取消订单按钮取消该笔订单。')}}</p>
+ <p class="text-grey">Q：{{ $t('我不想交易了？') }}</p>
+ <p class="mt-28">A：{{ $t('您可以点击取消订单按钮取消该笔订单。') }}</p>
</div>
</div>
<div class="mt-492 px-30">
- <van-button class="w-full h-96 mr-16 font-32 rounded-2xl text-white bg-blue border-none"
- type="primary" @click="$router.push('/chat')">{{ $t('联系卖家')}}
+ <van-button class="w-full h-96 mr-16 font-32 rounded-2xl text-white bg-blue border-none" type="primary"
+ @click="$router.push('/chat')">{{ $t('联系卖家') }}
</van-button>
- <van-button
- class="w-full h-96 mt-42 font-32 rounded-2xl bg-grey text-black border-none"
- type="primary"
- @click="$router.push({path: '/cancelOrder'})"
- >{{$t('取消订单')}}
+ <van-button class="w-full h-96 mt-42 font-32 rounded-2xl bg-grey text-black border-none" type="primary"
+ @click="$router.push({ path: '/cancelOrder' })">{{ $t('取消订单') }}
</van-button>
</div>
</div>
</template>
<script>
-import {Button, CountDown} from "vant"
+import { Button, CountDown } from "vant"
import OrderNav from "@/components/order-nav/OrderNav.vue";
export default {
@@ -65,9 +62,12 @@
}
</script>
-<style scoped>
+<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
-.c2cPay-page{
- color: #333;
+
+.c2cPay-page {
+ @include themify() {
+ color: themed("text_color1") 1px solid;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/C2C/components/BuyInput.vue b/src/views/C2C/components/BuyInput.vue
index 0b36f60..e853c95 100644
--- a/src/views/C2C/components/BuyInput.vue
+++ b/src/views/C2C/components/BuyInput.vue
@@ -1,26 +1,26 @@
<template>
<div class="buy-input relative">
<img class="w-40 h-40 absolute left-24" src="@/assets/image/payment/search.png" alt="" />
- <input class="w-full box-border pl-80 pt-10 pb-10" :readonly="readonly" type="text" :value="value" :placeholder="placeholder" @input="changeVal"
- @focus="focus" />
+ <input class="w-full box-border pl-80 pt-10 pb-10" :readonly="readonly" type="text" :value="value"
+ :placeholder="placeholder" @input="changeVal" @focus="focus" />
</div>
</template>
<script>
export default {
name: 'BuyInput',
- props: ['value', 'placeholder','isReadonly'],
+ props: ['value', 'placeholder', 'isReadonly'],
data() {
return {
readonly: false
}
},
mounted() {
- if(this.isReadonly) {
- this.readonly = this.isReadonly
- } else {
- this.readonly = false
- }
+ if (this.isReadonly) {
+ this.readonly = this.isReadonly
+ } else {
+ this.readonly = false
+ }
},
methods: {
focus(e) {
@@ -35,6 +35,7 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
input {
border: none;
outline: none;
@@ -53,8 +54,11 @@
width: 100%;
height: 100%;
border-radius: 50px;
- background: $input_background;
- color: $text_color;
+
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
}
}
</style>
diff --git a/src/views/C2C/components/adScreening.vue b/src/views/C2C/components/adScreening.vue
index cbe24ed..fe2aa23 100644
--- a/src/views/C2C/components/adScreening.vue
+++ b/src/views/C2C/components/adScreening.vue
@@ -45,7 +45,8 @@
</van-collapse>
<div class="flex mt-56 mb-36 justify-center ">
<button class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
- @click="onReset">{{ $t('重置') }}
+ @click="onReset">{{
+ $t('重置') }}
</button>
<button class="w-370 h-82 bg-grey rounded-lg font-400 font-30 border-none"
:class="[{ 'btnMain': tabindex === 1 }, { 'text-white': tabindex === 1 }]" @click="onConfirm">{{ $t('确认') }}
@@ -159,10 +160,11 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
.active_trade {
color: #ffffff;
// background-color: #888;
- background:$color_main;
+ background: $color_main;
}
.rotateZ {
@@ -182,7 +184,9 @@
#full {
::v-deep .van-cell {
- background: $main_background;
+ @include themify() {
+ background: themed("main_background");
+ }
}
::v-deep .van-cell::after {
@@ -190,15 +194,17 @@
}
.van-switch {
- background: $btn_main;
+ // background: $btn_main;
}
::v-deep .van-collapse-item__content {
- background: $main_background;
+ // background: $main_background;
}
::v-deep .van-field__control {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
</style>
diff --git a/src/views/C2C/components/buy.vue b/src/views/C2C/components/buy.vue
index 9724012..6a9d245 100644
--- a/src/views/C2C/components/buy.vue
+++ b/src/views/C2C/components/buy.vue
@@ -388,7 +388,7 @@
margin-bottom: 52px;
}
-.tabBackground{
- background-color: #999;
-}
+// .tabBackground{
+// background-color: #999;
+// }
</style>
diff --git a/src/views/C2C/selectLegalCurrency/index.vue b/src/views/C2C/selectLegalCurrency/index.vue
index 7cf4ee2..4a689f9 100644
--- a/src/views/C2C/selectLegalCurrency/index.vue
+++ b/src/views/C2C/selectLegalCurrency/index.vue
@@ -168,11 +168,15 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
::v-deep .van-index-bar__sidebar {
display: none;
}
+
::v-deep .van-index-anchor {
- color: $text_color4;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.top {
@@ -318,4 +322,5 @@
text-align: center;
color: #868d9a;
font-size: 28px;
-}</style>
+}
+</style>
diff --git a/src/views/ICO/ico.vue b/src/views/ICO/ico.vue
index 2c03079..2682414 100644
--- a/src/views/ICO/ico.vue
+++ b/src/views/ICO/ico.vue
@@ -15,40 +15,40 @@
{{ i.symbol }} ({{ i.name }})
</div>
<div class="item_2 flex justify-between">
- <div class="mr-5">{{$t('申购时间')}}</div>
+ <div class="mr-5">{{ $t('申购时间') }}</div>
<div>{{ i.startDate }} ~ {{ i.endDate }}</div>
</div>
<div class="item_2 flex justify-between">
- <div>{{$t('listingDate')}}</div>
+ <div>{{ $t('listingDate') }}</div>
<div>{{ i.marketDate }}</div>
</div>
<div class="item_2 flex justify-between">
- <div>{{$t('每张金额')}}</div>
+ <div>{{ $t('每张金额') }}</div>
<div>{{ i.unitAmount }}</div>
</div>
<div class="item_2 flex justify-between">
- <div>{{$t('每张手续费')}}</div>
+ <div>{{ $t('每张手续费') }}</div>
<div>{{ i.unitFee }}</div>
</div>
<div class="item_3 flex justify-center">
- <van-button type="default" round size="large" @click="openBuy(i)">{{$t('申购')}}</van-button>
+ <van-button type="default" round size="large" @click="openBuy(i)">{{ $t('申购') }}</van-button>
</div>
</div>
</div>
-
- <!-- 购买弹窗 -->
- <van-popup v-model:show="show" round >
- <div class="buy_popup">
- <div class="buy_title flex justify-center">{{ itemObj.symbol }}</div>
- <van-field v-model="sgNum" type="digit" :label="$t('申购数量')" />
+ <!-- 购买弹窗 -->
+ <van-popup v-model:show="show" round>
+ <div class="buy_popup">
+ <div class="buy_title flex justify-center">{{ itemObj.symbol }}</div>
- <div class="flex justify-center mt-5">
- <van-button type="default" size="large" round @click="buy">{{$t('confirm')}}</van-button>
+ <van-field v-model="sgNum" type="digit" :label="$t('申购数量')" />
+
+ <div class="flex justify-center mt-5">
+ <van-button type="default" size="large" round @click="buy">{{ $t('confirm') }}</van-button>
+ </div>
</div>
- </div>
- </van-popup>
+ </van-popup>
</div>
</template>
@@ -79,9 +79,9 @@
// 申购
const buy = () => {
let opt = {
- icoProjectId:itemObj.value.id,
+ icoProjectId: itemObj.value.id,
subscribeNums: sgNum.value,
- subscriptionType:1,
+ subscriptionType: 1,
}
_icoSubscribe(opt).then(res => {
showToast(t('submitSuccess'))
@@ -94,44 +94,53 @@
</script>
<style lang="scss" scoped>
-.ico{
+.ico {
padding: 0rem 1.2rem 2rem 1.2rem;
font-size: 1.5rem;
- .buy_popup{
+
+ .buy_popup {
width: 40rem;
padding: 1rem;
- .buy_title{
+ .buy_title {
font-size: 2.5rem;
font-weight: 700;
border-bottom: #aaa solid 1px;
padding: 1rem;
}
}
-
- .ico_list{
+
+ .ico_list {
padding: 1rem 0rem;
- .ico_item{
- background-color: #eee;
- padding:.5rem 1rem;
+
+ .ico_item {
+ padding: .5rem 1rem;
border: #aaa solid 1px;
border-radius: 1rem;
- .item_1{
+
+ @include themify() {
+ background-color: themed("input_background");
+ }
+
+ .item_1 {
padding: 1rem .5rem;
border-bottom: #ccc solid 1px;
font-size: 2rem;
font-weight: 700;
}
- .item_2{
+
+ .item_2 {
padding: 1rem .5rem;
border-bottom: #ccc solid 1px;
font-size: 1.6rem;
font-weight: 500;
- &>div:last-child{
+
+ &>div:last-child {
color: #999;
}
}
- .item_3{
+
+ .item_3 {
padding: .5rem;
}
}
diff --git a/src/views/ICO/icoRecord.vue b/src/views/ICO/icoRecord.vue
index 4b4847d..787f57d 100644
--- a/src/views/ICO/icoRecord.vue
+++ b/src/views/ICO/icoRecord.vue
@@ -2,7 +2,7 @@
<div class="icoRecord">
<fx-header>
<template v-slot:title>
- <div>{{$t('申购记录')}}</div>
+ <div>{{ $t('申购记录') }}</div>
</template>
</fx-header>
@@ -16,7 +16,7 @@
</van-tabs>
<div class="icoRecord_list">
- <div class="icoRecord_item mb-5" v-for="(item,index) in recordLIst" :key="index">
+ <div class="icoRecord_item mb-5" v-for="(item, index) in recordLIst" :key="index">
<div class="item_1">
{{ item.symbol }} ({{ item.name }})
</div>
@@ -56,7 +56,7 @@
let opt = {
status: active.value
}
- if(opt.status == '0') delete opt.status
+ if (opt.status == '0') delete opt.status
_icoRecordList(opt).then((res) => {
console.log(res);
recordLIst.value = res.records
@@ -91,34 +91,41 @@
</script>
<style lang="scss" scoped>
-.icoRecord{
+.icoRecord {
padding: 0rem 1.2rem 2rem 1.2rem;
font-size: 1.5rem;
- .icoRecord_list{
+ .icoRecord_list {
padding: 1rem 0rem;
- .icoRecord_item{
- background-color: #eee;
- padding:.5rem 1rem;
+
+ .icoRecord_item {
+ padding: .5rem 1rem;
border: #aaa solid 1px;
border-radius: 1rem;
- .item_1{
+
+ @include themify() {
+ background-color: themed("input_background");
+ }
+
+ .item_1 {
padding: 1rem .5rem;
border-bottom: #ccc solid 1px;
font-size: 2rem;
font-weight: 700;
}
- .item_2{
+
+ .item_2 {
padding: 1rem .5rem;
border-bottom: #ccc solid 1px;
font-size: 1.6rem;
font-weight: 500;
- &>div:last-child{
+ &>div:last-child {
color: #999;
}
}
- .item_3{
+
+ .item_3 {
padding: .5rem;
}
}
diff --git a/src/views/advertiserDetail/index.vue b/src/views/advertiserDetail/index.vue
index 5fc2ad6..8ecdc14 100644
--- a/src/views/advertiserDetail/index.vue
+++ b/src/views/advertiserDetail/index.vue
@@ -11,7 +11,7 @@
<div>
<p class="name">{{ c2cUser.nickName }}</p>
<div class="advertisement flex items-center">
- <img class="succ" src="@/assets/image/icon-success.png" alt ="" />
+ <img class="succ" src="@/assets/image/icon-success.png" alt="" />
<span>{{ $t('认证广告方') }}</span>
<span class="shu">|</span>
<span>{{ $t('保证金') }} {{ $t(`${c2cUser.deposit}USDT`) }}</span>
@@ -190,15 +190,15 @@
created() {
console.log(this.uid);
otcApi.ctcUserGet({ c2c_user_id: this.uid, language: this.$i18n.locale }).then(res => {
- // otcApi.ctcUserGet({ id: this.uid, language: this.$i18n.locale }).then(res => {
+ // otcApi.ctcUserGet({ id: this.uid, language: this.$i18n.locale }).then(res => {
this.userInfo = res.data;
})
},
mounted() {
// nextTick(() => {
- setTimeout(() => {
- this.top = this.$refs.main.getBoundingClientRect().top;
- }, 1000)
+ setTimeout(() => {
+ this.top = this.$refs.main.getBoundingClientRect().top;
+ }, 1000)
// })
},
methods: {
@@ -242,6 +242,7 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
.box-radius {
border-radius: 40px;
}
@@ -320,10 +321,13 @@
.main-list {
overflow: auto;
margin-top: 44px;
- background: $main_background;
-
+ // background: $main_background;
border-radius: 80px 80px 0px 0px;
// padding-bottom: 300px;
+
+ @include themify() {
+ background: themed("main_background");
+ }
}
.main-box {
@@ -338,9 +342,12 @@
}
.info {
- color: $text_color;
font-size: 30px;
font-weight: bold;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.gen {
@@ -362,10 +369,12 @@
.num {
font-size: 40px;
- color: $text_color;
-
font-weight: bold;
margin-bottom: 18px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.time {
@@ -380,11 +389,13 @@
}
.g-title {
- color: $text_color;
-
font-size: 30px;
font-weight: bold;
margin: 60px 32px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.g-zai {
@@ -397,20 +408,24 @@
.g-data {
min-height: 380px;
- background: $main_background;
-
box-sizing: border-box;
font-size: 24px;
color: #868d9a;
padding: 45px 0 41px 32px;
position: relative;
- border-bottom: 1px solid $divi_line;
+
+ @include themify() {
+ background: themed("main_background");
+ border-bottom: 1px solid themed("divi_line");
+ }
.g-dan {
margin: 8px 0 22px;
- color: $text_color;
-
font-weight: bold;
+
+ @include themify() {
+ color: themed("text_color");
+ }
span {
font-size: 40px;
@@ -489,9 +504,11 @@
.dia-main {
padding: 60px 64px 44px 48px;
- color: $text_color;
-
font-size: 28px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
.mar-70 {
margin: 70px 0 46px;
@@ -502,9 +519,11 @@
height: 80px;
line-height: 80px;
text-align: center;
- color: $text_color;
-
background: #1d91ff;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.bg-blue {
diff --git a/src/views/certificationCenter/index.vue b/src/views/certificationCenter/index.vue
index 7944e3b..d9afe28 100644
--- a/src/views/certificationCenter/index.vue
+++ b/src/views/certificationCenter/index.vue
@@ -40,7 +40,7 @@
<img :src="handImg(`status${kyc_status}`)" alt="" />
<span class="textColor-span font-28 flex items-center">{{
fixState(kyc_status)
- }}</span>
+ }}</span>
</div>
</div>
<div class="px-32-1">
@@ -66,7 +66,8 @@
<p v-show="(kyc_status == 3)">{{ $t('certificationRefusal') }}:{{ turnDownMsg }}</p>
</div>
<div class="rounded-lg py-26 text-center btn"
- :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'" @click="openUlr(1)">{{
+ :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'" @click="openUlr(1)">
+ {{
fixBtnState(kyc_status) }}</div>
</div>
@@ -121,12 +122,12 @@
<span class="textColor mr-10">{{ item.title }}</span>
<span>{{ item.des }}</span>
</div>
- <div class="text-grey text-grey1 font-30 " v-for="(str, index) in item.arr" :class="{ 'colorMain': index == 1 }"
- :key="index">{{ str }}</div>
+ <div class="text-grey text-grey1 font-30 " v-for="(str, index) in item.arr"
+ :class="{ 'colorMain': index == 1 }" :key="index">{{ str }}</div>
</div>
<div class="btnMain btnMain1 text-white font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{
$t('confirm')
- }}</div>
+ }}</div>
</div>
</van-popup>
</div>
@@ -383,7 +384,11 @@
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 2.625rem;
- background: $tab_background;
+ // background: $tab_background;
+
+ @include themify() {
+ background: themed("tab_background");
+ }
.user-info {
overflow: hidden;
@@ -421,7 +426,7 @@
.textColor4 {
margin-top: 2rem;
// background: $light-grey;
- color: $text_color;
+ // color: $text_color;
padding: 2px 20px;
text-align: center;
height: 40px;
@@ -563,7 +568,8 @@
.fs {
font-size: 14px;
margin-left: 10px;
- color: $text_color1;;
+ color: $text_color1;
+ ;
}
.text-grey .img3 {
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 2174498..03fcf68 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -15,18 +15,19 @@
<div class="pt-30 px-32 pb-32 tabBackground">
<template v-if="detail.direction == 'buy'">
<template v-if="detail.state == 0">
- <div class="font-40 c2cColor" v-if="time > 0">{{ $t('订单将在倒计时结束时取消。') }} <span class="text-blue">{{ time }}</span></div>
+ <div class="font-40 c2cColor" v-if="time > 0">{{ $t('订单将在倒计时结束时取消。') }} <span class="text-blue">{{ time
+ }}</span></div>
<div class="font-40 c2cColor" v-else>{{ $t('您的订单已超时') }}</div>
<van-count-down class="flex font-700 mx-10" :time="time">
- <template #default="timeData">
- <span class="block">{{ timeData.hours }}</span>
- <span class="colon">:</span>
- <span class="block">{{ timeData.minutes }}</span>
- <span class="colon">:</span>
- <span class="block">{{ timeData.seconds }}</span>
- </template>
- </van-count-down>
+ <template #default="timeData">
+ <span class="block">{{ timeData.hours }}</span>
+ <span class="colon">:</span>
+ <span class="block">{{ timeData.minutes }}</span>
+ <span class="colon">:</span>
+ <span class="block">{{ timeData.seconds }}</span>
+ </template>
+ </van-count-down>
<!-- <span class="block" v-if="time.hours">{{
time.hours
}}</span>
@@ -270,7 +271,7 @@
}, 2000)
}
})
-
+
},
onMore() { // 加载更多
this.fetchList(this.lastMsgId)
@@ -297,7 +298,7 @@
this.fetchList()
setTimeout(() => {
this.bottomScrollClick()
- },1000)
+ }, 1000)
// setTimeout(() => {
// window.scrollTo(0, document.documentElement.scrollHeight)
// }, 1000)
@@ -331,6 +332,7 @@
<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
+
.bg-left {
background: #fff !important;
}
@@ -354,7 +356,8 @@
outline: none;
}
}
-.chat-page{
+
+.chat-page {
overflow: auto;
}
@@ -363,7 +366,10 @@
top: 50%;
transform: translateY(-50%);
}
-.bottom-box{
- background: $main_background !important;
+
+.bottom-box {
+ @include themify() {
+ background: themed("main_background");
+ }
}
</style>
diff --git a/src/views/cryptos/AccountChange/index.vue b/src/views/cryptos/AccountChange/index.vue
index 477779f..0646ccf 100644
--- a/src/views/cryptos/AccountChange/index.vue
+++ b/src/views/cryptos/AccountChange/index.vue
@@ -196,7 +196,9 @@
box-sizing: border-box;
:deep(.van-tab--active .van-tab__text) {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
:deep(.van-tab__text) {
diff --git a/src/views/cryptos/Exchange/exchangePage.vue b/src/views/cryptos/Exchange/exchangePage.vue
index 320e332..00455a8 100644
--- a/src/views/cryptos/Exchange/exchangePage.vue
+++ b/src/views/cryptos/Exchange/exchangePage.vue
@@ -3,7 +3,7 @@
<van-nav-bar left-arrow @click-left="onClickLeft">
<template #right>
- <van-icon class="exchange-icon" @click="$router.push('/cryptos/exchangeHistory')" name="clock-o" />
+ <van-icon class="exchange-icon textColor" @click="$router.push('/cryptos/exchangeHistory')" name="clock-o" />
</template>
<template #title>
<div class="flex items-center">
@@ -175,10 +175,10 @@
.exchange-page {
height: 100vh - 6vh;
- background: $selectSymbol_background;
+ // background: $selectSymbol_background;
:deep(.van-tab--active) {
- background: $selectSymbol_background;
+ // background: $selectSymbol_background;
color: $text_color;
}
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 656348a..c0e139b 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -63,8 +63,8 @@
@cancelOrder="cancelOrder" />
</div>
<div class="py-20 px-20" v-else-if="tabType == '2'">
- <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
- :state="item.state" @cancelOrder="cancelOrder" />
+ <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
+ :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
</div>
<div class="py-20 px-20" v-else>
<div class="mb-20">
@@ -126,7 +126,7 @@
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
:showBottom="false" />
</div> -->
-
+
<!-- <div class="fixed-box">
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
<span class="font-30 textColor2">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
@@ -280,8 +280,8 @@
handleImage,
...mapActions('home', [SET_COIN_LIST]),
onUpdate(symbol) { // 更新
- console.log("symbol",symbol);
-
+ console.log("symbol", symbol);
+
this.symbol = symbol
this.closeSocket()
this.init(symbol)
@@ -398,7 +398,7 @@
}, 2000)
}
}
- else{
+ else {
showFailToast(this.$t('请先登录'))
}
},
@@ -544,7 +544,8 @@
@import "@/assets/init.scss";
#cryptos {
- background-color: $mainbgWhiteColor;
+
+ // background-color: $mainbgWhiteColor;
:v-deep(.px-4) {
padding-left: 30px !important;
padding-right: 30px !important;
@@ -555,11 +556,11 @@
padding-bottom: 30px !important;
}
- .diviLine{
+ .diviLine {
background: $mainbgWhiteColor;
}
- .border-b-color{
+ .border-b-color {
border-bottom-color: $inp_b;
padding-bottom: 5px;
}
@@ -648,10 +649,12 @@
.select-box {
width: 220px;
-
- background: $inp-b;
-
+ // background: $inp-b;
margin-right: 20px;
+
+ @include themify() {
+ background: themed("tab_background");
+ }
}
}
diff --git a/src/views/cryptos/promote/init.scss b/src/views/cryptos/promote/init.scss
index 30edd56..bedc58e 100644
--- a/src/views/cryptos/promote/init.scss
+++ b/src/views/cryptos/promote/init.scss
@@ -68,10 +68,6 @@
}
}
- :root {
- --theme-color: #1194F7;
- }
-
/***************** global use framework *****************/
/* flex */
diff --git a/src/views/customerService/index.vue b/src/views/customerService/index.vue
index 60a2619..640b0f4 100644
--- a/src/views/customerService/index.vue
+++ b/src/views/customerService/index.vue
@@ -5,7 +5,7 @@
<div class="px-3.5 py-5" :style="{ 'margin-top': navHeight + 'px' }" v-if="state == 0">
<div class="white">{{ $t('OrdersWill') }} <span style="color: #1194F7">{{ msgTitle }}</span> {{
$t('afterCancel')
- }}</div>
+ }}</div>
<div class="mt-3">
<span class="mr-1" style="color: #8A919E">{{ $t('lumpSum') }}</span>
<span class="white">{{ payInfo.currency }} {{ payInfo.amount }}</span>
@@ -22,14 +22,14 @@
{{ $t('historyMessage') }}
</div>
<ul class="flex flex-col pt-3">
- <li v-for="(item, index) in list" :key="item.id" class="flex flex-col my-3">
+ <li v-for="(item) in list" :key="item.id" class="flex flex-col my-3">
<!-- <p class="font-13 text-center py-2 text-grey font-15" v-if="showTime(index)">{{
item.createtime &&
item.createtime.split(' ')[0]
}}</p> -->
<p class="font-13 text-center pb-3 text-grey font-15">{{
item.createtime
- }}</p>
+ }}</p>
<div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
<template v-if="item.send_receive === 'receive'">
<img src="@/assets/image/service/responser.png" class="w-10 h-10 mr-5" />
@@ -257,7 +257,7 @@
clearIntervalTimer()
})
onBeforeUnmount(() => {
- let lastTimerId = setInterval(() => {}, 1000);
+ let lastTimerId = setInterval(() => { }, 1000);
for (let i = 1; i <= lastTimerId; i++) {
clearInterval(i);
}
@@ -299,10 +299,13 @@
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
- border-right: 10px solid $input_background;
position: absolute;
left: -10px;
top: 10px;
+
+ @include themify() {
+ border-right: 10px solid themed("input_background");
+ }
}
}
@@ -319,12 +322,15 @@
}
.chatBg {
- background: $input_background;
height: 36px;
padding: 8px 18px;
border-radius: 18px;
- color: $text_color;
font-size: 14px;
+
+ @include themify() {
+ background: themed("input_background") !important;
+ color: themed("text_color") !important;
+ }
}
.right-chatBg {
@@ -346,6 +352,8 @@
}
.left-chatBg {
- background: $input_background;
+ @include themify() {
+ background: themed("input_background");
+ }
}
</style>
diff --git a/src/views/homePage/components/head.vue b/src/views/homePage/components/head.vue
index ca5361e..c6b7bd9 100644
--- a/src/views/homePage/components/head.vue
+++ b/src/views/homePage/components/head.vue
@@ -1,63 +1,82 @@
<template>
- <div class="head flex justify-between items-center pl-5 pr-5">
- <div class="more mr-5"><img src="@/assets/imgs/home/more.png" alt="" @click="onRoute('/my')"></div>
- <div class="more_input pl-5 pr-5 flex items-center justify-start mr-5 pt-2" @click="onRoute('/optional/search')">
- <img src="@/assets/imgs/quotes/search.png" alt="">
- <span class="pl-5">{{ $t('请输入关键词搜寻') }}</span>
- </div>
- <div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')"></div>
- <!-- <div class="gift"><img src="@/assets/imgs/home/gift.png" alt=""></div>
- <div class="scan"><img src="@/assets/imgs/home/scan.png" alt=""></div>
- <div class="instruction"><img src="@/assets/imgs/home/instruction.png" alt=""></div> -->
- </div>
+ <van-nav-bar :left-arrow="false" class="head">
+ <template #left>
+ <img src="@/assets/imgs/home/user_img.png" class="user_img" alt="" @click="onRoute('/my')" v-if="userStore.userInfo && userStore.userInfo.token">
+ <div class="textColor2 bzzx" @click="onRoute('/helpCenter')">
+ <van-icon name="search" class="textColor mr-2" />
+ {{ $t("帮助中心") }}
+ </div>
+ </template>
+ <template #right>
+ <img src="@/assets/imgs/home/yl.png" alt="" v-if="store.state.vant.theme == 'light'"
+ @click="store.commit('vant/SET_THEME', 'dark')" class="mr-5 r_img">
+ <img src="@/assets/imgs/home/ty.png" alt="" v-else @click="store.commit('vant/SET_THEME', 'light')"
+ class="mr-5 r_img">
+ <img :src="languageObj.image" alt="" class="gq" @click="onRoute('/language')">
+ <van-icon name="service-o" class="textColor ml-5" @click="onRoute('/customerService')" />
+ </template>
+ </van-nav-bar>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
+import { lang } from "@/config";
+import { useLanguageStore } from '@/store/language.store'
+import { ref } from 'vue';
+import store from '@/store/store'
+import { useUserStore } from '@/store/user';
const { t } = useI18n()
const router = useRouter()
+const userStore = useUserStore()
+
+// 语言切换
+const languageStore = useLanguageStore()
+const languageObj = lang.find(i => i.key == languageStore.language)
+
+// 获取客服链接
+const customer_service_url = ref(store.state.user.customer_service_url)
const onRoute = (path) => {
- router.push(path)
+ if (path == '/customerService') {
+ if (customer_service_url.value) {
+ window.location.href = customer_service_url.value;
+ } else {
+ router.push(path)
+ }
+ } else {
+ router.push(path)
+ }
}
</script>
<style lang="scss" scoped>
.head {
- width: 100%;
- $inp-bg: #F7F7F7;
- $inp-c: #999;
- margin-bottom: 1rem;
-
- .more,
- .gift,
- .scan,
- .instruction {
- width: 3.2rem;
+ @include themify() {
+ border-bottom: themed("divi_line") 1px solid;
}
+}
- .more_input {
- // width: 26rem;
- width: 100%;
- height: 4.5rem;
- background: $inp-bg;
- border-radius: 2.25rem;
- color: $inp-c;
- font-size: 1.5rem;
+.r_img {
+ width: 2.2rem;
+}
- span {
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- white-space: nowrap;
- }
+.user_img {
+ width: 3rem;
+ margin-right: 1rem;
+}
- img {
- width: 2.5rem;
- }
+.bzzx {
+ padding: 0 10rem 0 1rem;
+ border-radius: 3rem;
+ @include themify() {
+ border: themed("input_border") 1px solid;
}
}
+
+.gq {
+ height: 2rem;
+}
</style>
\ No newline at end of file
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 9f15555..180497e 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,7 +1,8 @@
<template>
- <div class="home_page">
- <Head></Head>
+ <Head></Head>
+ <div class="home_page">
+ <!-- <Head></Head>
<div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>
<div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>
<div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div>
@@ -35,40 +36,92 @@
</van-swipe>
</van-notice-bar>
- <!-- <div class="flex justify-between mt-10">
- <van-swipe class="home_swipe_1" :autoplay="2000">
- <van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">
- <img :src="value.img" alt="" class="swipe-item-img">
- </van-swipe-item>
- <template #indicator="{ active, total }">
- <div class="custom-indicator"><span>{{ active + 1 }}</span>/{{ total }}</div>
- </template>
-</van-swipe>
-
-<div style="width:24rem">
- <van-swipe class="home_swipe_2" :autoplay="2000">
- <van-swipe-item v-for="value in swipe2" :key="value.key" class="flex justify-center items-center">
- <img :src="value.img" alt="" class="swipe-item-img">
- </van-swipe-item>
- <template #indicator="{ active, total }">
- <div class="custom-indicator flex justify-center items-center">
- <div v-for="value in total" :key="value" class="ml-1"
- :class="active + 1 === value ? 'active' : ''">
- </div>
- </div>
- </template>
- </van-swipe>
-
- <div class="purchase mt-7 font-bold flex justify-between items-center">
- {{ $t('购买加密货币') }}
- <van-icon name="arrow" />
- </div>
-</div>
-</div> -->
<div id="cryptos" class="pt-10">
<list-quatation :listData="qList" :tabShow="false" />
+ </div> -->
+
+ <div class="home_1 flex justify-around items-center">
+ <div v-for="i in tabbers" :key="i.key" @click="toPage(i.path)">
+ <img :src="i.icon" v-if="storeS.state.vant.theme == 'light'">
+ <img :src="i.icon2" v-else>
+ <div>{{ i.name }}</div>
+ </div>
</div>
+
+ <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>
+ <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
+ <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.uuid)">
+ <div class="flex justify-start items-center">
+ <img :src="item.imgUrl" alt="" class="notice_img mr-5">
+ <div class="notice_content textColor">
+ <div>{{ item.startTime }}</div>
+ <div>{{ item.title }}</div>
+ </div>
+ </div>
+ </van-swipe-item>
+ </van-swipe>
+ </van-notice-bar>
+
+ <div class="tabs flex justify-start items-center textColor1">
+ <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key">
+ {{ i.name }}
+ </div>
+ </div>
+
+ <div id="cryptos">
+ <list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />
+ </div>
+
+ <div class="home_2" @click="toPage('/quotes/index')">
+ {{ $t("更多") }}
+ <van-icon name="arrow-down" />
+ </div>
+
+ <div class="home_3 flex justify-start">
+ <img :src="LOGO" alt="">
+ <span>{{ $t('安全、便利、社交') }}</span>
+ </div>
+
+ <van-collapse v-model="activeName" accordion>
+ <van-collapse-item name="1" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>
+ {{ $t('公司') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/aboutUs')">{{ $t('关于我们') }}</p>
+ <p @click="toPage('/helpCenter')">{{ $t('帮助中心') }}</p>
+ </div>
+ </van-collapse-item>
+ <van-collapse-item name="2" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>
+ {{ $t('法律') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/TermsOfService')">{{ $t('serviceConf') }}</p>
+ </div>
+ </van-collapse-item>
+ <van-collapse-item name="3" class="border_b">
+ <template #title>
+ <div class="flex justify-start items-center">
+ <img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon" v-if="storeS.state.vant.theme == 'light'">
+ <img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>
+ {{ $t('支援') }}
+ </div>
+ </template>
+ <div style="padding-left: 2.3rem;">
+ <p @click="toPage('/customerService')">{{ $t('onLineService') }}</p>
+ </div>
+ </van-collapse-item>
+ </van-collapse>
</div>
</template>
@@ -81,13 +134,15 @@
import { _getHomeList } from '@/service/cryptos.api'
import { _getNewsList1, _getPopupNews } from '@/service/user.api'
import { useStore } from "vuex";
-import { TIME_OUT } from "@/config";
+import { TIME_OUT, LOGO } from "@/config";
import { useUserStore } from '@/store/user';
-import { setStorage,getStorage } from '@/utils/index.js';
- let catchSymbol = getStorage('symbol')
- if(!catchSymbol){
- setStorage('symbol', 'btcusdt');
- }
+import { setStorage, getStorage } from '@/utils/index.js';
+import storeS from '@/store/store'
+
+let catchSymbol = getStorage('symbol')
+if (!catchSymbol) {
+ setStorage('symbol', 'btcusdt');
+}
const userStore = useUserStore()
const { t } = useI18n()
const router = useRouter()
@@ -97,17 +152,28 @@
// { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
// { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
// { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },
- { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
- { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
- { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
+ // { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
+ // { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
+ // { key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
// { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' },/cryptos/Withdraw/withdrawPage
- { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
+ // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
// { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },
- { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },
// { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
- { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
- { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },
+ { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_12a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url), path: '/cryptos/exchangePage' },
+ { key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/ICO/ico' },
+ { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url), path: '/wantBuy' },
+ { key: 13, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10a.png', import.meta.url), icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url), path: '/customerService' },
+]
+
+// 手风琴选中
+const activeName = ref('0')
+
+// tab切换
+const tab = ref(1)
+const tabList = [
+ { name: t('永续合约'), key: 1 },
+ { name: t('现货'), key: 2 },
]
// 获取公告数据
@@ -125,10 +191,21 @@
}
}
+// 获取客服链接
+const customer_service_url = ref(storeS.state.user.customer_service_url)
+
// 跳转页面
const toPage = (path) => {
if (!path) return
- router.push(path)
+ if (path == '/customerService') {
+ if (customer_service_url.value) {
+ window.location.href = customer_service_url.value;
+ } else {
+ router.push(path)
+ }
+ } else {
+ router.push(path)
+ }
}
// 轮播图数据
@@ -155,7 +232,7 @@
if (!(list instanceof Array)) {
return
}
- qList.value = list;
+ qList.value = list.slice(0, 4);
if (timeout.value) {
clearTimeout(timeout.value)
@@ -177,18 +254,34 @@
<style lang="scss">
.home_page {
- background: $white;
min-height: 100vh;
width: 100%;
padding: 1rem 1rem 10rem 1rem;
- // $log-c: #282828;
- $tab-c: #343434;
- $inp-c: #999;
- $crd-b: #f7f7f7;
+ font-size: 1.4rem;
+
+ .home_1 {
+ padding-top: 2rem;
+
+ div {
+ text-align: center;
+ font-size: 1.4rem;
+ }
+
+ img {
+ width: 2.8rem;
+ margin: 0 auto .4rem;
+ }
+ }
.index_notice {
height: 100px;
border-radius: 10px;
+ margin-bottom: 2rem;
+
+ @include themify() {
+ background: themed("main_background");
+ border: themed("border_color") solid 1px;
+ }
.notice-swipe {
height: 82px;
@@ -207,132 +300,187 @@
}
}
- .home_logo {
- width: 100%;
-
- img {
- width: 22.5rem;
- }
- }
-
- .logo_text {
- color: $log-c;
- font-size: 2rem;
- }
-
- .logo_text_small {
- color: $inp-c;
- font-size: 1.5rem;
- }
-
- .login_buts {
- width: 100%;
+ .tabs {
+ font-size: 1.8rem;
&>div {
- width: 21rem;
- height: 5rem;
- line-height: 5rem;
- border-radius: 2.5rem;
- font-size: 1.8rem;
- color: $log-c;
- }
-
- .login_but_z {
- background: $crd-b;
- }
-
- .login_but_d {
- background: $bg_yellow;
+ margin-right: 2rem;
}
}
- .home_grid {
- width: 100%;
+ .home_2 {
+ font-size: 1.5rem;
+ text-align: center;
+ padding-bottom: 1.2rem;
+ margin: 1rem 0 1rem;
- .grid_item {
- width: 25%;
- color: $tab-c;
- font-size: 1.6rem;
-
- .grid_item_img {
- width: 100%;
-
- img {
- width: 6.3rem;
- }
- }
+ @include themify() {
+ border-bottom: themed("divi_line") solid 1px;
}
}
+ .home_3 {
+ padding: 1rem 0;
- .home_swipe_1,
- .home_swipe_2 {
- width: 24rem;
- border-radius: 1rem;
- }
-
- .home_swipe_1 {
- .van-swipe-item {
- height: 23rem;
- background-color: $crd-b;
-
- .swipe-item-img {
- width: 100%;
- }
- }
-
- .custom-indicator {
- position: absolute;
- left: 5px;
- bottom: 5px;
- padding: 2px 5px;
- font-size: 1.8rem;
- background: rgba(255, 255, 255, 0.5);
- color: $inp-c;
-
- span {
- color: $log-c;
- }
+ img {
+ height: 2rem;
+ margin-right: 1rem;
}
}
- .home_swipe_2 {
- .van-swipe-item {
- height: 15rem;
- background-color: $crd-b;
-
- .swipe-item-img {
- width: 100%;
- }
+ .border_b {
+ @include themify() {
+ border-bottom: themed("divi_line") solid 1px;
}
- .custom-indicator {
- position: absolute;
- right: 5px;
- top: 1rem;
- padding: 2px 5px;
+ .van-collapse-item__title--expanded:after {
+ display: none;
+ }
- div {
- background: $inp-c;
- width: 0.6rem;
- height: 0.6rem;
- border-radius: 0.3rem;
- transition: 0.3s all;
- }
+ .van-cell__title {
+ font-weight: 600;
+ }
- .active {
- background: $bg_yellow;
- width: 2rem;
- }
+ .van-collapse-item__content {
+ padding-top: 0;
+ }
+
+ p {
+ font-size: 1.4rem;
+ }
+
+ .border_icon {
+ width: 1.5rem;
+ margin-right: 1rem;
}
}
- .purchase {
- color: $log-c;
- background: $crd-b;
- border-radius: 1rem;
- padding: 1.6rem 1.6rem 2rem 1.6rem;
- font-size: 2rem;
- }
+ // .home_logo {
+ // width: 100%;
+
+ // img {
+ // width: 22.5rem;
+ // }
+ // }
+
+ // .logo_text {
+ // color: $log-c;
+ // font-size: 2rem;
+ // }
+
+ // .logo_text_small {
+ // color: $inp-c;
+ // font-size: 1.5rem;
+ // }
+
+ // .login_buts {
+ // width: 100%;
+
+ // &>div {
+ // width: 21rem;
+ // height: 5rem;
+ // line-height: 5rem;
+ // border-radius: 2.5rem;
+ // font-size: 1.8rem;
+ // color: $log-c;
+ // }
+
+ // .login_but_z {
+ // background: $crd-b;
+ // }
+
+ // .login_but_d {
+ // background: $bg_yellow;
+ // }
+ // }
+
+ // .home_grid {
+ // width: 100%;
+
+ // .grid_item {
+ // width: 25%;
+ // color: $tab-c;
+ // font-size: 1.6rem;
+
+ // .grid_item_img {
+ // width: 100%;
+
+ // img {
+ // width: 6.3rem;
+ // }
+ // }
+ // }
+ // }
+
+
+ // .home_swipe_1,
+ // .home_swipe_2 {
+ // width: 24rem;
+ // border-radius: 1rem;
+ // }
+
+ // .home_swipe_1 {
+ // .van-swipe-item {
+ // height: 23rem;
+ // background-color: $crd-b;
+
+ // .swipe-item-img {
+ // width: 100%;
+ // }
+ // }
+
+ // .custom-indicator {
+ // position: absolute;
+ // left: 5px;
+ // bottom: 5px;
+ // padding: 2px 5px;
+ // font-size: 1.8rem;
+ // background: rgba(255, 255, 255, 0.5);
+ // color: $inp-c;
+
+ // span {
+ // color: $log-c;
+ // }
+ // }
+ // }
+
+ // .home_swipe_2 {
+ // .van-swipe-item {
+ // height: 15rem;
+ // background-color: $crd-b;
+
+ // .swipe-item-img {
+ // width: 100%;
+ // }
+ // }
+
+ // .custom-indicator {
+ // position: absolute;
+ // right: 5px;
+ // top: 1rem;
+ // padding: 2px 5px;
+
+ // div {
+ // background: $inp-c;
+ // width: 0.6rem;
+ // height: 0.6rem;
+ // border-radius: 0.3rem;
+ // transition: 0.3s all;
+ // }
+
+ // .active {
+ // background: $bg_yellow;
+ // width: 2rem;
+ // }
+ // }
+ // }
+
+ // .purchase {
+ // color: $log-c;
+ // background: $crd-b;
+ // border-radius: 1rem;
+ // padding: 1.6rem 1.6rem 2rem 1.6rem;
+ // font-size: 2rem;
+ // }
}
</style>
\ No newline at end of file
diff --git a/src/views/language/index.vue b/src/views/language/index.vue
index e91fdcc..9d9071a 100644
--- a/src/views/language/index.vue
+++ b/src/views/language/index.vue
@@ -20,23 +20,12 @@
import { useI18n } from "vue-i18n";
import { SET_LANGUAGE } from '@/store/types.store'
import { useLanguageStore } from '@/store/language.store'
+import { lang } from '@/config/index'
const { locale, t } = useI18n()
const languageStore = useLanguageStore()
-let lang = ref([
- { title: '繁体中文', key: 'CN', image: new URL('../../assets/image/lang/taiwan.png', import.meta.url) },
- { title: '简体中文', key: 'zh-CN', image: new URL('../../assets/image/lang/zh-CN.png', import.meta.url) },
- { title: 'English', key: 'en', image: new URL('../../assets/image/lang/en-US.png', import.meta.url) },
- { title: '한국인', key: 'Korean', image: new URL('../../assets/image/lang/Korean.png', import.meta.url) },
- { title: 'やまと', key: 'Japanese', image: new URL('../../assets/image/lang/Japanese.png', import.meta.url) },
- { title: 'Deutsch', key: 'de', image: new URL('../../assets/image/lang/de.png', import.meta.url) }, //德语
- { title: 'Français', key: 'fr', image: new URL('../../assets/image/lang/French.png', import.meta.url) }, //法语
- { title: 'Tiếng Việt', key: 'vi', image: new URL('../../assets/image/lang/vi.png', import.meta.url) },//越南语
- { title: 'Italiano', key: 'Italy', image: new URL('../../assets/image/lang/Italy.png', import.meta.url) }, //意大利语
- { title: 'ไทย', key: 'th', image: new URL('../../assets/image/lang/Thai.png', import.meta.url) }, //泰语
-
-])
+// let lang = lang
onMounted(() => {
console.log(locale.value)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5dd7b2e..e6be569 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,15 +1,18 @@
<template>
- <div class="login">
- <div class="top" @click="onRoute('/homePage/index')"><img src="../../assets/image/icon-close.png" alt="" />
- </div>
- <!-- <div class="divider mt-10"></div> -->
+ <van-nav-bar :left-arrow="false" class="head">
+ <template #left>
+ <div class="textColor" @click="onRoute('/')">{{ $t('首页') }}</div>
+ </template>
+ <template #title>
+ <img :src="LOGO" alt="" class="head_logo">
+ </template>
+ <template #right>
+ <img :src="languageObj.image" alt="" class="gq" @click="onRoute('/language')">
+ </template>
+ </van-nav-bar>
- <div class="log flex items-center justify-center flex-col pt-20 mt-10 mb-20 textColor">
- <img :src="LOGO" alt="">
- <span class="font-bold text-5xl mt-10">
- {{ `${$t('欢迎加入')} ${$title}` }}
- </span>
- </div>
+ <div class="login">
+ <div class="login_title textColor">{{ $t('login') }}</div>
<ExInput style="padding-bottom:16px !important;" :placeholderText="getRegType(activeIndex, false)"
v-model="username" :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon"
@@ -18,12 +21,17 @@
<ExInput style="padding-bottom:0 !important;" :placeholderText="$t('entryPassword')" v-model="password"
typeText="password" @pressEnter="verifyLogin" />
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
- <van-button class="w-full" round style="margin-top:50px;" type="primary" @click="verifyLogin">{{ $t('login') }}
+ <div class="forget" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
+
+ <van-button class="w-full btnBackground2 btnText" style="margin-top:2rem;" type="primary"
+ @click="verifyLogin">{{
+ $t('login')
+ }}
</van-button>
- <div class="noTips textColor">
+
+ <div class="noTips textColor1">
{{ $t('noAccount') }}?
- <span class="colorMain" @click="$router.push('/register')">
+ <span class="textColor" @click="$router.push('/register')">
{{ $t('goRegister') }}</span>
</div>
<nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
@@ -36,13 +44,14 @@
import { _exchangerateuserconfig } from "@/service/trade.api";
import { GET_USERINFO } from '@/store/types.store'
import { useUserStore } from '@/store/user';
+import { useLanguageStore } from '@/store/language.store'
import { useI18n } from 'vue-i18n'
import nationalityList from '../authentication/components/nationalityList.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from "vant";
import store from '@/store/store'
-import { LOGO } from "@/config";
+import { LOGO, lang } from "@/config";
const { t } = useI18n()
const router = useRouter()
@@ -157,19 +166,57 @@
console.log(res)
})
}
+
+// 语言切换
+const languageStore = useLanguageStore()
+const languageObj = lang.find(i => i.key == languageStore.language)
+
+const ddddd = () => {
+ if (store.state.vant.theme == 'light') store.commit('vant/SET_THEME', 'dark')
+ else store.commit('vant/SET_THEME', 'light')
+}
</script>
<style lang="scss" scoped>
+.head_logo {
+ height: 3rem;
+}
+
+.gq {
+ height: 2rem;
+}
+
+.head {
+ @include themify() {
+ border-bottom: themed("divi_line") 1px solid;
+ }
+}
+
+::v-deep .van-nav-bar__text {
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+
.login {
width: 100%;
- padding: 15px;
- font-size: 13px;
+ font-size: 1.3rem;
box-sizing: border-box;
- background: $mainbgWhiteColor;
+ padding: 1.5rem;
min-height: 100vh;
+
+ @include themify() {
+ background: themed("main_background");
+ }
:deep(.textColor) {
color: $log-c;
+ }
+
+ .login_title {
+ font-size: 3.5rem;
+ margin-top: 5rem;
+ margin-bottom: 4rem;
}
.divider {
@@ -188,15 +235,9 @@
}
.w-full {
- background: $bg_yellow;
border: none;
- color: $mainBgColor;
font-size: 16px;
font-weight: 600;
- }
-
- .colorMain {
- color: $bg_yellow;
}
}
@@ -237,12 +278,19 @@
}
.forget {
- font-size: 12px;
- line-height: 14px;
- margin-top: 30px;
+ font-size: 1.4rem;
+ line-height: 1.6rem;
+ margin-top: 3.4rem;
+ text-decoration: underline;
}
.noTips {
- margin-top: 22px;
+ margin-top: 2.4rem;
+ text-align: center;
+ font-size: 1.5rem;
+
+ span {
+ text-decoration: underline;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index 3b70fa7..6fbb714 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -1,6 +1,6 @@
<template>
- <div class="assets">
- <div class="assets_title">{{ $t('总资产估值') }}</div>
+ <div class="assets main_background text_color">
+ <!-- <div class="assets_title">{{ $t('总资产估值') }}</div>
<div class="assets_money font-bold mt-5 flex justify-start items-end">
{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
@@ -30,7 +30,6 @@
<van-collapse v-model="activeNames" class="mt-10">
<van-collapse-item :title="$t('分布')" name="1">
- <!-- <div class="divider"></div> -->
<div class="percentage flex just-between items-center">
<div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
</div>
@@ -64,8 +63,6 @@
<span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>
<div class="mr-3">
- <!-- <div class="text-right">0</div>
- <div class="assets_item_light text-right">0.00</div> -->
<div class="text-right" v-if="item.symbol == 'btc'">
{{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
</div>
@@ -83,6 +80,93 @@
{{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
</div>
</div>
+ </div> -->
+
+ <van-nav-bar>
+ <template #left>
+ <div class="assets_tabs flex justify-start items-center textColor1">
+ <div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
+ @click="activeHead = i.key">
+ {{ i.name }}
+ </div>
+ </div>
+ </template>
+ <template #right v-if="activeHead != 0">
+ <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
+ </template>
+ </van-nav-bar>
+
+ <div class="assets_content">
+ <template v-if="activeHead == 0">
+ <div class="assets_1">
+ {{ $t('总资产估值') }}
+ </div>
+ <div class="assets_money mt-5 flex justify-start items-end">
+ {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
+ (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
+
+ <div class="pricing_jj ml-5">
+ {{ pricing }}
+ </div>
+ <van-dropdown-menu style="position: relative;top: .5rem;">
+ <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
+ <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
+ </van-dropdown-item>
+ </van-dropdown-menu>
+ </div>
+ </template>
+
+ <template v-else-if="activeHead == 1">
+ <div class="assets_1">
+ {{ $t('资金账户') }}
+ </div>
+ <div class="assets_money mt-5 flex justify-start items-end">
+ ${{ assetObj.capital }}
+ <span>USD</span>
+ </div>
+ <div class="assets_2 flex justify-around items-center">
+ <div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
+ <img :src="i.icon" alt="" v-if="theme == 'light'">
+ <img :src="i.icon2" alt="" v-else>
+ <div>{{ i.name }}</div>
+ </div>
+ </div>
+
+ <div class="assets_3">
+ <div class="assets_3_head flex justify-between items-center">
+ <span>{{ $t('名称') }}</span>
+ <span>{{ $t('volumn') }}</span>
+ </div>
+ <div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
+ <div class="flex justify-start items-center">
+ <img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`" />
+ <span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
+ </div>
+ <div>
+ <p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
+ <p>≈{{ currency.currency_symbol }}
+ {{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
+ </div>
+ </div>
+ </div>
+ </template>
+
+ <template v-else-if="activeHead == 2">
+ <div class="assets_1">
+ {{ $t('交易账户') }}
+ </div>
+ <div class="flex justify-between items-center">
+ <div class="assets_money mt-5 flex justify-start items-end">
+ ${{ assetObj.contract }}
+ <span>USD</span>
+ </div>
+ <div class="assets_4" @click="toPage('/my/transfer')">
+ <img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
+ <img :src="tabList[2].icon2" alt="" v-else>
+ <p>{{ $t('划转') }}</p>
+ </div>
+ </div>
+ </template>
</div>
</div>
</template>
@@ -107,12 +191,22 @@
const { t } = useI18n()
const activeNames = ref(['1'])
const { dispatch } = useStore();
+const theme = ref(store.state.vant.theme) // 当前主题模式,白天(light)或夜间(dark)
const tabList = [
- { key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/chonbi.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
- { key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tibi.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
- { key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.png', import.meta.url), path: '/my/transfer' },
- { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
+ {
+ key: 1, name: t('充值'), icon: new URL(`@/assets/theme/white/image/assets/recharge.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/recharge.png`, import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true'
+ },
+ {
+ key: 2, name: t('提现'), icon: new URL(`@/assets/theme/white/image/assets/withdrawal.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/withdrawal.png`, import.meta.url), path: '/cryptos/Withdraw/withdrawPage'
+ },
+ {
+ key: 3, name: t('划转'), icon: new URL(`@/assets/theme/white/image/assets/transfer.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/transfer.png`, import.meta.url), path: '/my/transfer'
+ },
+ // { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
]
// 计价切换
@@ -142,6 +236,7 @@
const currency = ref({})
const forexAssets = ref({})
const symbolType = ref('cryptos') //默认etf
+
const getCurrency = async () => {
_getExchangeRate({
token: store.state.user.userInfo.token
@@ -179,16 +274,85 @@
getassets()
getCurrency()
getContractBySymbolType()
-</script>
+// 头部切换项
+const activeHead = ref(0)
+const headList = [
+ { name: t('总资产估值'), key: 0 },
+ { name: t('资金账户'), key: 1 },
+ { name: t('交易账户'), key: 2 },
+]
+</script>
<style lang="scss" scoped>
.assets {
min-height: 100vh;
- background: $mainbgWhiteColor;
- padding: 2.8rem 2rem 10rem 2rem;
- $assets_title_color: #9a9a9a;
- color: $assets_title_color;
+ font-size: 1.4rem;
+
+ ::v-deep .van-nav-bar {
+ border-bottom: $divi_line solid 1px;
+ }
+
+ justify-content: space-around;
+
+ .assets_tabs {
+ font-size: 2rem;
+
+ &>div {
+ margin-right: 2rem;
+ }
+ }
+
+ .assets_content {
+ padding: 16px 16px 10rem;
+ }
+
+ .assets_1 {
+ font-size: 1.5rem;
+ }
+
+ .assets_2 {
+ margin-top: 3rem;
+ font-size: 1.4rem;
+
+ &>div {
+ text-align: center;
+
+ img {
+ height: 2.4rem;
+ margin: 0 auto .4rem;
+ }
+ }
+ }
+
+ .assets_3 {
+ margin-top: 3rem;
+
+ .assets_3_item {
+ margin-bottom: 3.2rem;
+
+ p {
+ text-align: end;
+ }
+
+ img {
+ width: 3.6rem;
+ }
+ }
+
+ .assets_3_head {
+ border-bottom: $divi_line solid 1px;
+ margin-bottom: 1.7rem;
+ }
+ }
+
+ .assets_4 {
+ padding-right: 2rem;
+
+ img {
+ height: 2.4rem;
+ }
+ }
:deep(.van-cell) {
padding-left: 0;
@@ -214,12 +378,20 @@
}
.assets_money {
- color: $text_color4;
- font-size: 3.4rem;
+ font-size: 3rem;
.pricing_jj {
font-size: 1.6rem;
margin-right: -8px;
+ position: relative;
+ top: .5rem;
+ }
+
+ &>span {
+ font-size: 1.6rem;
+ margin-left: .6rem;
+ position: relative;
+ top: 0.5rem;
}
:deep(.van-dropdown-menu__bar) {
@@ -270,12 +442,6 @@
}
}
}
-
- // .divider {
- // height: 1rem;
- // border-radius: 0.5rem;
- // background: $bg_yellow;
- // }
.percentage {
div {
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index 934dd8a..bec45ad 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -1,17 +1,10 @@
<template>
- <section class="my-index" >
- <!-- <fx-header :back="false" :title="$t('my')">
+ <section class="my-index">
+ <assets-head title="">
<template v-slot:right>
<van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
</template>
- </fx-header> -->
- <assets-head title="">
- <!-- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/customerService')" /> -->
- <template v-slot:right>
- <van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
- </template>
- </assets-head>
+ </assets-head>
<div class="px-8 mt-4">
<h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
$t('welcome')
@@ -27,7 +20,8 @@
<div class="mt-4 flex items-start" v-else>
<img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
<div class="ml-5 pt-1 flex flex-col justify-center">
- <div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">{{ userStore.userInfo && userStore.userInfo.username }}</div>
+ <div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">{{ userStore.userInfo &&
+ userStore.userInfo.username }}</div>
<div class="text-sm text-gray-400 mt-5 flex items-center id-text">
ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
src="@/assets/image/idcopy.png" alt="id" @click="copy" /></div>
@@ -41,7 +35,7 @@
<div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">
{{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}
</div>
- <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{$t('信用分')}} : {{userdata.creditScore}}</div>
+ <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{ $t('信用分') }} : {{ userdata.creditScore }}</div>
</div>
</div>
</div>
@@ -56,20 +50,11 @@
<img src="@/assets/imgs/my/安全.png" alt="">
<div>{{ t('安全') }}</div>
</div>
-<!-- <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/changePassword')">
- <img src="@/assets/imgs/my/密码.png" alt="">
- <div>{{ t('修改密码') }}</div>
- </div> -->
<div class="label_item flex flex-col items-center justify-center mt-8"
@click="onRoute('/cryptos/accountChange')">
<img src="@/assets/imgs/my/记录.png" alt="">
<div>{{ t('账变记录') }}</div>
</div>
- <!-- <div class="label_item flex flex-col items-center justify-center mt-8"
- @click="onRoute('/certificationCenter')">
- <img src="@/assets/imgs/my/身份认证.png" alt="">
- <div>{{ t('authVerify') }}</div>
- </div> -->
</div>
</div>
</template>
@@ -104,7 +89,7 @@
<div class="px-4 mt-4">
<p class="w-full flex mt-4 gap-x-4">
<van-button type="primary" class="flex-1" round color="#f7b600" @click="loginOut">{{ $t('loginOut')
- }}</van-button>
+ }}</van-button>
</p>
</div>
</template>
@@ -114,60 +99,57 @@
<script setup>
import { reactive, onMounted, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
-import { _getIdentify, _getKycHighLevel, _logOut,_info ,_customer } from "@/service/user.api.js";
+import { _getIdentify, _getKycHighLevel, _logOut, _info, _customer } from "@/service/user.api.js";
import { useUserStore } from '@/store/user';
import { useI18n } from "vue-i18n";
import useClipboard from "vue-clipboard3";
import { showToast } from "vant";
import addBankIcon from '@/assets/image/userCenter/addBank.png'
-import kycHighStatusIcon from '@/assets/image/userCenter/kycHighStatus.png'
import store from '@/store/store'
const { t } = useI18n()
const { toClipboard } = useClipboard();
const router = useRouter()
const userStore = useUserStore()
-const customer_service_url = ref(null)
+const customer_service_url = ref(store.state.user.customer_service_url)
const status = ref(null)
const kycHighStatus = ref(null)
const userdata = ref({})
-const state = reactive({
- cellList: [
- {
- title: t('safe'), list: [
- { icon: 'shield-o', title: t('safe'), path: '/safety' },
- { icon: 'setting-o', title: t('changePassword'), path: '/changePassword' },
- { icon: addBankIcon, title: t('AddPaymentMethod'), path: '/payMentMethod/list' }
- ]
- },
- {
- title: t('universal'), list: [
- { icon: 'font-o', title: t('language'), path: '/language' },
- { icon: 'service-o', title: t('onLineService'), path: '/customerService' },
- { icon: 'idcard', title: t('authVerify'), path: '/certificationCenter', show: true },
- { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
- { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
- ]
- }
- ]
-})
+
+const tabs = [
+ { icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter' },
+ { icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf' },
+ { icon: new URL('@/assets/imgs/my/my_2a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_2b.png', import.meta.url), title: t('安全'), path: '/safety' },
+ { icon: new URL('@/assets/imgs/my/my_3a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_3b.png', import.meta.url), title: t('账变记录'), path: '/cryptos/accountChange' },
+]
+const tabs2 = [
+ { title: t('language'), path: '/language' },
+ { title: t('onLineService'), path: '/customerService' },
+ { title: t('计价方式'), path: '/cryptos/exchangeRate' },
+ { title: t('AddPaymentMethod'), path: '/payMentMethod/list' },
+ { title: t('帮助中心'), path: '/helpCenter' },
+ { title: t('关于我们'), path: '/aboutUs' },
+]
+
+// 跳转
const onRoute = (path) => {
- if(path=='/customerService'){
- if(customer_service_url.value){
- window.location.href = customer_service_url.value;
- }else{
- router.push(path)
- }
- }else{
- router.push(path)
+ if (path == '/customerService') {
+ if (customer_service_url.value) {
+ window.location.href = customer_service_url.value;
+ } else {
+ router.push(path)
+ }
+ } else {
+ router.push(path)
}
}
onMounted(() => {
if (userStore.userInfo && userStore.userInfo.token) {
getIdentify()
getKycHighLevel()
- getinfo()
- getcustomer()
+ getinfo()
+ } else {
+ router.push('/login')
}
})
const cellList = computed(() => {
@@ -211,8 +193,9 @@
// }
]
}
-
})
+
+// 退出登录
const loginOut = () => {
_logOut({
token: userStore.userInfo.token
@@ -221,14 +204,7 @@
store.state.user.userInfo = {}
})
}
-const getcustomer = () => {
- _customer().then((data) => {
- customer_service_url.value = data.customer_service_url
- console.log(customer_service_url);
- }).catch(error => {
- console.error('Error fetching data:', error);
- });
-};
+// 用户信用分
const getinfo = () => {
_info().then((data) => {
userdata.value = data; // 确保 userdata 被正确声明
@@ -236,16 +212,19 @@
console.error('Error fetching data:', error);
});
};
+// 用户认证状态
const getIdentify = () => {
_getIdentify().then(data => {
status.value = data.status
})
}
+// 当前用户等级
const getKycHighLevel = () => {
_getKycHighLevel().then((data) => {
kycHighStatus.value = data.status
})
}
+// 复制用户code
const copy = async () => {
try {
await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
@@ -257,6 +236,7 @@
</script>
<style lang="scss" scoped>
+
:deep(.van-cell-group__title) {
// background: $main2_background !important;
background: $inp-b !important;
@@ -320,9 +300,11 @@
.label_item {
width: 33%;
font-size: 12px;
- div{
- text-align: center;
- }
+
+ div {
+ text-align: center;
+ }
+
img {
width: 32%;
margin-bottom: 3px;
diff --git a/src/views/payMentMethod/list.vue b/src/views/payMentMethod/list.vue
index fc92540..6610a27 100644
--- a/src/views/payMentMethod/list.vue
+++ b/src/views/payMentMethod/list.vue
@@ -17,7 +17,7 @@
</ul>
<div class="px-4 pt-6 fixed-wrap">
<van-button class="w-full" color="#f7b600" type="primary" round @click="submit">{{ $t('AddPaymentMethod')
- }}</van-button>
+ }}</van-button>
</div>
</div>
</template>
@@ -63,11 +63,13 @@
// height: calc(100vh - 170px);
li {
- // background: $border_color;
- background: $inp-b;
border-bottom: 1px solid $bg_yellow;
position: relative;
+ @include themify() {
+ background: themed("tab_background");
+ }
+
.edit-img {
width: 17px;
height: 17px;
diff --git a/src/views/payMentMethod/selectPay.vue b/src/views/payMentMethod/selectPay.vue
index ed59a90..831e708 100644
--- a/src/views/payMentMethod/selectPay.vue
+++ b/src/views/payMentMethod/selectPay.vue
@@ -107,8 +107,11 @@
<style lang="scss" scoped>
.selectPay {
.index-anchor {
- // background: #232C46;
- background: $mainbgWhiteColor;
+ // background: $mainbgWhiteColor;
+
+ @include themify() {
+ background: themed("main_background");
+ }
}
@@ -129,6 +132,9 @@
.item-cell {
border-bottom: 1px solid #474b62;
font-size: 15px;
- color: $log-c;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index de6ba7b..e46622e 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -1,8 +1,15 @@
<template>
- <div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos">
+ <div class="quotes-list pt-5 pb-40 pl-5 pr-5" id="cryptos">
<Head></Head>
- <list-quatation :listData="qList" />
+
+ <div class="tabs flex justify-start items-center textColor1">
+ <div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key">
+ {{ i.name }}
+ </div>
+ </div>
+
+ <list-quatation :listData="qList" :tabActive="tab" />
</div>
</template>
@@ -11,11 +18,12 @@
import { useStore } from "vuex";
import { _getHomeList } from '@/service/cryptos.api'
import { TIME_OUT } from "@/config";
+import { useI18n } from "vue-i18n";
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
import Head from './components/head.vue'
const store = useStore();
-console.log("aaaaaaaaaaa");
+const { t } = useI18n()
//#region 行情数据----------------------------------------
let qList = ref([])
@@ -46,15 +54,32 @@
}
})
//#endregion----------------------------------------------
+
+// tab切换
+const tab = ref(1)
+const tabList = [
+ { name: t('永续合约'), key: 1 },
+ { name: t('现货'), key: 2 },
+]
</script>
<style lang="scss" scoped>
.quotes-list {
- background: $mainbgWhiteColor;
+ // background: $mainbgWhiteColor;
min-height: 100vh;
:deep(.active) {
background-color: $bg_yellow;
- border-radius: 3rem;
+ // border-radius: 3rem;
+ }
+
+ .tabs {
+ font-size: 1.8rem;
+ margin-bottom: -2rem;
+ margin-top: 2rem;
+
+ &>div {
+ margin-right: 2rem;
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/views/quotes/components/head.vue b/src/views/quotes/components/head.vue
index bd47298..29eaa18 100644
--- a/src/views/quotes/components/head.vue
+++ b/src/views/quotes/components/head.vue
@@ -1,6 +1,7 @@
<template>
<div class="head flex justify-between items-center pl-5 pr-5">
- <div class="more_input pl-20 pr-5 flex items-center justify-start mr-5 pt-2" @click="onRoute('/optional/search')">
+ <div class="more_input pl-20 pr-5 flex items-center justify-start mr-5 pt-2"
+ @click="onRoute('/optional/search')">
<img src="@/assets/imgs/quotes/search.png" alt="">
<span class="pl-5">{{ $t('请输入关键词搜寻') }}</span>
</div>
@@ -30,11 +31,16 @@
.more_input {
width: 100%;
height: 4.5rem;
- background: $inp-bg;
+ // background: $inp-bg;
border-radius: 2.25rem;
- color: $inp-c;
+ // color: $inp-c;
font-size: 1.5rem;
+ @include themify() {
+ background: themed("input_background");
+ color: themed("text_color1");
+ }
+
span {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/views/register/gooleVerify.vue b/src/views/register/gooleVerify.vue
index 4372242..88b7a73 100644
--- a/src/views/register/gooleVerify.vue
+++ b/src/views/register/gooleVerify.vue
@@ -34,7 +34,7 @@
<p>{{ $t('precautionsTips1') }}</p>
<p>{{ $t('precautionsTips2') }}</p>
</div>
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="submit">{{ $t('sure') }}
+ <van-button class="w-full btnBackground2 btnText" style="margin-top:10px;" type="primary" @click="submit">{{ $t('sure') }}
</van-button>
</div>
</template>
diff --git a/src/views/register/identity.vue b/src/views/register/identity.vue
index dd37d0b..ff9c347 100644
--- a/src/views/register/identity.vue
+++ b/src/views/register/identity.vue
@@ -82,7 +82,7 @@
</div>
</div> -->
</template>
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="onSubmit">{{ $t('nextStep') }}
+ <van-button class="w-full btnBackground2 btnText" style="margin-top:10px;" type="primary" @click="onSubmit">{{ $t('nextStep') }}
</van-button>
<nationality-list ref='controlChildRef' :title="$t('selectNation')" @getName="getName" v-if="!disabled()">
</nationality-list>
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index dc0613c..b9dc1bc 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,27 +1,35 @@
<template>
- <div class="register">
- <div class="top" @click="router.go(-1)"><img src="../../assets/image/icon-close.png" alt=""></div>
+ <van-nav-bar :left-arrow="false" class="head">
+ <template #title>
+ <img :src="LOGO" alt="" class="head_logo">
+ </template>
+ <template #right>
+ <img :src="languageObj.image" alt="" class="gq" @click="onRoute('/language')">
+ </template>
+ </van-nav-bar>
+
+ <div class="register mainBackground">
<Step :step="1"></Step>
<div class="title textColor">{{ $t('register') }}</div>
<div class="flex re-tab">
- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{
+ <div :class="activeIndex == 0 ? 'active textColor' : 'textColor1'" @click="changeIndex(0)">{{
$t('account')
- }}</div>
+ }}</div>
<!-- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('email') }}
</div>
<div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{
$t('phoneNum')
}}</div> -->
</div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
- :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <ExInput :placeholderText="getRegType(activeIndex, false)" v-model="username" :area="isArea"
+ :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
- <ExInput :label="$t('setPassword')" :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
- <ExInput :label="$t('repassword')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
- <ExInput :label="$t('setSafeword')" :placeholderText="$t('safewordTips')" v-model="safeword" typeText="password"
+ <ExInput :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
+ <ExInput :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
+
+ <ExInput :placeholderText="$t('safewordTips')" v-model="safeword" typeText="password"
v-if="activeIndex === 1" />
<div class="inputCom" v-if="activeIndex === 1">
- <p class="label textColor">{{ $t('验证码') }}</p>
<div class="iptbox inputBackground">
<input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')"
v-model="verifyCode">
@@ -30,20 +38,25 @@
</span>
</div>
</div>
- <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode" :clearBtn="false" />
+ <ExInput :placeholderText="$t('entryInvitCode')" v-model="invitCode" :clearBtn="false" />
<div class="protocol textColor">
<i @click="agreeProt">
<img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
<img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
</i>
- {{ $t('readAgree') }}<span class="colorMain" @click="router.push('/TermsOfService')">{{
- $t('serviceConf')
- }}</span>
+ {{ $t('readAgree') }}
+ <span @click="router.push('/TermsOfService')">
+ 《{{ $t('serviceConf') }}》
+ </span>
</div>
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="register">{{ $t('register') }}
+ <van-button class="w-full btnBackground2 btnText" style="margin-top:10px;" type="primary" @click="register">{{
+ $t('register') }}
</van-button>
- <div class="noTips textColor">{{ $t('hasAccount') }}<span class="colorMain" @click="router.push('/login')">
- {{ $t('goLogin') }}</span>
+ <div class="noTips textColor1">
+ {{ $t('hasAccount') }}
+ <span class="textColor" @click="router.push('/login')">
+ {{ $t('goLogin') }}
+ </span>
</div>
<nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
@@ -55,6 +68,8 @@
</template>
<script setup>
+import { LOGO, lang } from "@/config";
+import { useLanguageStore } from '@/store/language.store'
import ExInput from "@/components/ex-input/index.vue";
import Step from "./step.vue";
import { _registerUser, _sendVerifyCode } from "@/service/login.api";
@@ -173,7 +188,7 @@
agree.value = !agree.value
}
const register = () => {
- console.log(activeIndex.value,'activeIndex.value')
+ console.log(activeIndex.value, 'activeIndex.value')
if (activeIndex.value == 0) {
if (username.value == '') {
showToast(t('entryAccount'));
@@ -198,7 +213,7 @@
return
}
} else if (activeIndex.value == 2) {
- if(!(/(^[1-9]\d*$)/.test(username.value))){
+ if (!(/(^[1-9]\d*$)/.test(username.value))) {
showToast(t('entryPhone'));
return
}
@@ -285,21 +300,38 @@
}
}
+// 语言切换
+const languageStore = useLanguageStore()
+const languageObj = lang.find(i => i.key == languageStore.language)
</script>
<style lang="scss" scoped>
-.activeBKClick {
- &:active {
- background: $tab_background;
- opacity: 0.5;
- }
+// .activeBKClick {
+// &:active {
+// background: $tab_background;
+// opacity: 0.5;
+// }
+// }
+
+// .activeClick {
+// &:active {
+// background: $mainbgWhiteColor;
+// opacity: 0.5;
+// }
+// }
+
+.head_logo {
+ height: 3rem;
}
-.activeClick {
- &:active {
- background: $mainbgWhiteColor;
- opacity: 0.5;
+.gq {
+ height: 2rem;
+}
+
+.head {
+ @include themify() {
+ border-bottom: themed("divi_line") 1px solid;
}
}
@@ -308,7 +340,6 @@
box-sizing: border-box;
padding: 16px;
font-size: 13px;
- background-color: $mainbgWhiteColor;
}
.top {
@@ -332,30 +363,33 @@
margin-bottom: 22px;
div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
+ // padding: 0 18px;
+ // height: 34px;
+ // line-height: 34px;
+ // text-align: center;
+ // border-radius: 4px;
+ // margin-right: 10px;
+ margin-right: 2rem;
}
.active {
- // background: $US_tabActice_background;
- background: $bg_yellow;
- // color: $color_main;
- color: $text_color4;
+ // background: $bg_yellow;
+ // color: $text_color4;
}
}
.forget {
- color: $color_main;
font-size: 12px;
line-height: 14px;
}
.noTips {
margin-top: 24px;
+ text-align: center;
+
+ span {
+ text-decoration: underline;
+ }
}
.protocol {
@@ -373,11 +407,15 @@
height: 100%;
}
}
+
+ span {
+ text-decoration: underline;
+ text-decoration-style: dashed;
+ }
}
.iptbox {
height: 44px;
- margin-top: 8px;
margin-bottom: 18px;
padding: 0 20px;
display: flex;
@@ -389,10 +427,6 @@
flex: 1;
height: 100%;
border: none;
- }
-
- span {
- color: $color_main;
}
}
</style>
diff --git a/src/views/register/setFond.vue b/src/views/register/setFond.vue
index 1e9e99c..650f982 100644
--- a/src/views/register/setFond.vue
+++ b/src/views/register/setFond.vue
@@ -10,7 +10,8 @@
typeText="password" />
<ExInput :label="$t('repassword')" :placeholderText="$t('surePassword')" v-model="repassword"
typeText="password" />
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="submitBind">{{ $t('sure') }}
+ <van-button class="w-full btnBackground2 btnText" style="margin-top:10px;" type="primary"
+ @click="submitBind">{{ $t('sure') }}
</van-button>
</div>
</div>
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 9201c55..b82074f 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -76,14 +76,14 @@
</div>
</section>
<div class=" rounded-view" key="x">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
+ <PerpetualOpen :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" :currentType="currentType" @changeValueBack="changeValueBack"
@changeCurrentType="changeCurrentType" @ordered="onOrdered">
</PerpetualOpen>
<!-- <div class="line"></div> -->
<!-- 委托/持仓-->
- <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
+ <PerpetualOrder :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold" :futrue-histroy="futrueHistroy"
@tab="onTab" @recall="onRecall">
</PerpetualOrder>
@@ -143,14 +143,14 @@
</div>
</div>
</section>
- <div class=" rounded-view" key="y">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
+ <div class="rounded-view" key="y">
+ <PerpetualOpen :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
</PerpetualOpen>
<!-- <div class="line"></div> -->
<!-- 委托/持仓-->
- <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
+ <PerpetualOrder :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
:futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
</PerpetualOrder>
@@ -719,8 +719,8 @@
@import "@/assets/init.scss";
.trade_new {
- color: $log-c;
- background: $mainbgWhiteColor;
+ // color: $log-c;
+ // background: $mainbgWhiteColor;
min-height: 100vh;
padding: 1.4rem 1.4rem 7rem 1.4rem;
@@ -750,23 +750,11 @@
}
#cryptos {
- background: $mainbgWhiteColor;
+ // background: $mainbgWhiteColor;
$inp-b: #f7f7f7;
:deep(.textColor) {
color: $log-c;
- }
-
- :deep(.long) {
- color: $log-c !important;
- background: $bg_yellow;
- border-radius: 5rem;
- }
-
- :deep(.short) {
- color: $log-c !important;
- background: $bg_yellow;
- border-radius: 5rem;
}
:deep(.poecs) {
@@ -777,20 +765,15 @@
background: $inp-b;
}
- :deep(.greyBg) {
- background: $inp-b;
- }
+ // :deep(.greyBg) {
+ // background: $inp-b;
+ // }
- :deep(.option-box) {
- background: $inp-b;
- box-shadow: 0px 0px 0.1875rem 0.1875rem $inp-b;
- color: $log-c !important;
- }
-
- :deep(.select-box) {
- background: $inp-b;
- color: $log-c !important;
- }
+ // :deep(.option-box) {
+ // background: $inp-b;
+ // box-shadow: 0px 0px 0.1875rem 0.1875rem $inp-b;
+ // color: $log-c !important;
+ // }
:deep(.rounded-lg) {
background: $inp-b;
diff --git a/vite.config.js b/vite.config.js
index 0f9037d..0910bc5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,8 @@
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy';
+const scss_path = `@/assets/theme/index.scss`
+
const isVisualizer = process.env.VISUALIZER === 'show'
export default defineConfig({
base: '', //H5打包用
@@ -25,9 +27,9 @@
css: {
preprocessorOptions: {
scss: {
- additionalData: `@import "@/assets/css/variable.scss";`
+ additionalData: `@import "@/assets/css/variable.scss";@import "${scss_path}";`
},
- }
+ },
},
server: {
open: true,
--
Gitblit v1.9.3