From 9337c3cf960b60078558b7f942fd27f1ab39364b Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Tue, 16 Dec 2025 18:29:46 +0800
Subject: [PATCH] 改黑夜样式
---
src/components/ex-input/index.vue | 43 +
src/views/quotes/components/head.vue | 13
src/config/theme.js | 4
src/views/homePage/components/head.vue | 14
src/views/my/assets.vue | 38 +
src/views/cryptos/Trade/index.vue | 21
src/components/fx-footer/index.vue | 18
src/assets/css/index.scss | 21
src/views/quotes/Detail.vue | 6
src/views/authentication/components/nationalityList.vue | 26
src/views/quotes/components/BuySellTradeTab.vue | 20
src/components/quotes-header/index.vue | 2
src/assets/image/icon_back.png | 0
src/components/ex-input/new-input.vue | 31 +
src/views/quotes/OpenTrade.vue | 6
src/assets/imgs/home/more.png | 0
src/components/foreign/foreign-contract-header/index.vue | 6
src/components/Transform/history-item/index.vue | 37 +
src/components/Transform/trade-order-area/index.vue | 3
src/components/Transform/ex-input/index.vue | 32 +
src/views/cryptos/AccountChange/index.vue | 8
src/views/cryptos/TrendDetails/index.vue | 4
src/views/ICO/ico.vue | 2
src/components/Transform/trade-head/index.vue | 12
src/views/homePage/index.vue | 10
src/assets/css/vant-theme.scss | 276 +++++++++++++++++
src/assets/image/icon_back_1.png | 0
src/components/Transform/mining-exchange-input/index.vue | 42 +
src/store/modules/vant.js | 2
src/assets/init.scss | 15
src/assets/css/variable.scss | 5
src/main.js | 12
src/components/Transform/assets-head/index.vue | 3
src/components/Transform/mining-account/index.vue | 12
src/assets/imgs/quotes/search.png | 0
src/assets/theme/_themes.scss | 3
src/components/fx-header/index.vue | 8
src/views/usStock/components/BuySellTradeTab.vue | 2
src/App.vue | 79 +++-
src/views/usStock/Detail.vue | 6
src/components/Transform/perpetual-open/index.vue | 80 ++--
41 files changed, 703 insertions(+), 219 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 7c128bc..cd79926 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -97,6 +97,7 @@
@import "assets/init";
@import "assets/mixin";
@import "assets/css/variable.scss";
+ @import "assets/theme/index.scss";
.nationList {
.van-action-sheet {
@@ -116,12 +117,16 @@
border-bottom: none;
}
- .van-tabbar-item__text {
- color: #BEC1D2;
- }
+ .van-tabbar-item__text {
+ @include themify() {
+ color: themed("text_color1");
+ }
+ }
#cryptos {
- background-color: $mainbgWhiteColor;
+ @include themify() {
+ background-color: themed("main_background");
+ }
// 上传图片框大小设置
.van-uploader__upload {
@@ -134,13 +139,17 @@
}
.van-uploader__upload {
- background-color: $upload_bg !important;
+ @include themify() {
+ background-color: themed("upload_bg") !important;
+ }
border: 2px dashed #b8bcc5;
}
// tab标签短横线颜色
.van-tabs__line {
- background-color: $active_line !important;
+ @include themify() {
+ background-color: themed("active_line") !important;
+ }
}
.van-tabs__wrap {
@@ -220,8 +229,9 @@
.list-quatation {
.van-cell {
padding: 15px 0 !important;
- background: $mainbgWhiteColor;
- // background: $inp-b;
+ @include themify() {
+ background: themed("main_background");
+ }
&::after {
border: none;
@@ -280,13 +290,17 @@
}
.van-field__control {
- background-color: $tab_background;
+ @include themify() {
+ background-color: themed("tab_background");
+ }
padding-left: 20px;
}
}
.vue-auth-box_ .auth-control_ .range-box {
- background-color: #EAEAEA !important;
+ @include themify() {
+ background-color: themed("tab_background") !important;
+ }
height: 30px !important;
margin-bottom: 40px;
}
@@ -294,7 +308,9 @@
.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
width: 140px !important;
height: 74px !important;
- background: $color_main !important;
+ @include themify() {
+ background: themed("color_main") !important;
+ }
border-radius: 96px !important;
top: -50%;
}
@@ -337,24 +353,32 @@
.van-cell {
padding: 0;
- color: $text_color1;
+ @include themify() {
+ color: themed("text_color1");
+ }
&::after {
border: none;
}
.van-cell__value {
- color: $black;
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
.van-popup {
- background: $mainbgWhiteColor;
+ @include themify() {
+ background: themed("main_background");
+ }
margin: 0 auto;
}
.van-nav-bar__title {
- color: $log-c;
+ @include themify() {
+ color: themed("text_color");
+ }
}
.van-hairline--top-bottom::after,
@@ -363,20 +387,27 @@
}
.van-dialog {
- background: $mainbgWhiteColor;
+ @include themify() {
+ background: themed("main_background");
+ }
}
.van-dialog__header {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
.van-dialog__message--has-title {
- color: $dark-grey;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.van-button--default {
- // background: $main_background;
- color: $dark-grey;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.van-nav-bar {
@@ -385,11 +416,15 @@
}
.van-dropdown-menu__title {
- color: $text_color !important;
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
.van-nav-bar__right {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index f4b1329..12e8b71 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -3,6 +3,8 @@
@tailwind utilities;
@import './variable.scss';
+@import '../theme/index.scss';
+@import './vant-theme.scss';
/* overwite default */
:root {
@@ -22,19 +24,17 @@
-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;
}
+
+/* Vant 组件主题变量已移至 vant-theme.scss */
body {
width: 100vw;
height: 100vh;
- // color: $mainTextColor;
- color: $log-c;
- // background-color: $mainBgColor;
- background-color: $mainbgWhiteColor;
+ @include themify() {
+ background-color: themed("main_background");
+ color: themed("text_color");
+ }
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
@@ -60,7 +60,10 @@
}
input::-webkit-input-placeholder {
- color: #c0c4cc;
+ @include themify() {
+ color: themed("text_color1");
+ }
+ opacity: 0.6;
}
ul,
diff --git a/src/assets/css/vant-theme.scss b/src/assets/css/vant-theme.scss
new file mode 100644
index 0000000..7d3ddd0
--- /dev/null
+++ b/src/assets/css/vant-theme.scss
@@ -0,0 +1,276 @@
+/* Vant 组件黑夜模式主题变量 */
+/* 同时定义在 :root 和 [data-theme="dark"] 上，确保 Vant 组件能正确读取 */
+:root[data-theme="dark"],
+[data-theme="dark"] {
+ /* NavBar 导航栏 */
+ --van-nav-bar-background: #121212 !important;
+ --van-nav-bar-title-text-color: #fff !important;
+ --van-nav-bar-arrow-size: 16px !important;
+
+ /* Uploader 上传 */
+ --van-uploader-upload-background: #474B62 !important;
+
+ /* IndexAnchor 索引 */
+ --van-index-anchor-text-color: #fff !important;
+
+ /* Cell 单元格 */
+ --van-cell-background: #121212 !important;
+ --van-cell-text-color: #fff !important;
+ --van-cell-label-color: #868D9A !important;
+ --van-cell-value-color: #fff !important;
+ --van-cell-border-color: #393E49 !important;
+
+ /* Field 输入框 */
+ --van-field-label-color: #fff !important;
+ --van-field-input-text-color: #fff !important;
+ --van-field-placeholder-text-color: #868D9A !important;
+ --van-field-icon-size: 16px !important;
+ --van-field-clear-icon-size: 16px !important;
+ --van-field-clear-icon-color: #868D9A !important;
+ --van-field-error-message-color: #ee0a24 !important;
+ --van-field-error-message-text-color: #ee0a24 !important;
+ --van-field-background: #242424 !important;
+
+ /* Button 按钮 */
+ --van-button-default-background: #474B62 !important;
+ --van-button-default-color: #fff !important;
+ --van-button-primary-background: #b9f641 !important;
+ --van-button-primary-border-color: #b9f641 !important;
+ --van-button-primary-color: #333 !important;
+ --van-button-success-background: #07c160 !important;
+ --van-button-success-border-color: #07c160 !important;
+ --van-button-warning-background: #ff976a !important;
+ --van-button-warning-border-color: #ff976a !important;
+ --van-button-danger-background: #ee0a24 !important;
+ --van-button-danger-border-color: #ee0a24 !important;
+
+ /* Dialog 对话框 */
+ --van-dialog-background: #121212 !important;
+ --van-dialog-header-font-weight: 500 !important;
+ --van-dialog-header-padding-top: 26px !important;
+ --van-dialog-header-isolated: 16px !important;
+ --van-dialog-message-padding: 26px !important;
+ --van-dialog-message-font-size: 16px !important;
+ --van-dialog-message-line-height: 24px !important;
+ --van-dialog-message-max-height: 60vh !important;
+ --van-dialog-message-text-color: #fff !important;
+ --van-dialog-title-font-size: 18px !important;
+ --van-dialog-title-text-color: #fff !important;
+ --van-dialog-width: 320px !important;
+ --van-dialog-small-screen-width: 90% !important;
+ --van-dialog-border-radius: 8px !important;
+ --van-dialog-close-icon-size: 22px !important;
+ --van-dialog-close-icon-color: #868D9A !important;
+ --van-dialog-close-icon-margin: 16px !important;
+ --van-dialog-button-height: 48px !important;
+ --van-dialog-round-button-height: 36px !important;
+ --van-dialog-confirm-button-text-color: #f7b328 !important;
+
+ /* Popup 弹出层 */
+ --van-popup-background: #121212 !important;
+ --van-popup-transition: transform 0.3s !important;
+ --van-popup-round-border-radius: 20px !important;
+ --van-popup-close-icon-size: 22px !important;
+ --van-popup-close-icon-color: #868D9A !important;
+ --van-popup-close-icon-margin: 16px !important;
+ --van-popup-close-icon-z-index: 1 !important;
+
+ /* ActionSheet 动作面板 */
+ --van-action-sheet-max-height: 80% !important;
+ --van-action-sheet-header-height: 48px !important;
+ --van-action-sheet-header-font-size: 16px !important;
+ --van-action-sheet-description-color: #868D9A !important;
+ --van-action-sheet-description-font-size: 14px !important;
+ --van-action-sheet-description-line-height: 20px !important;
+ --van-action-sheet-item-background: #121212 !important;
+ --van-action-sheet-item-font-size: 16px !important;
+ --van-action-sheet-item-line-height: 22px !important;
+ --van-action-sheet-item-text-color: #fff !important;
+ --van-action-sheet-item-disabled-text-color: #868D9A !important;
+ --van-action-sheet-subname-color: #868D9A !important;
+ --van-action-sheet-subname-font-size: 12px !important;
+ --van-action-sheet-subname-line-height: 18px !important;
+ --van-action-sheet-close-icon-size: 22px !important;
+ --van-action-sheet-close-icon-color: #868D9A !important;
+ --van-action-sheet-close-icon-padding: 0 16px !important;
+ --van-action-sheet-cancel-padding-top: 8px !important;
+ --van-action-sheet-cancel-padding-color: #27293B !important;
+
+ /* Tabbar 标签栏 */
+ --van-tabbar-height: 50px !important;
+ --van-tabbar-z-index: 1 !important;
+ --van-tabbar-background: #1a1a1a !important;
+ --van-tabbar-item-font-size: 12px !important;
+ --van-tabbar-item-text-color: #868D9A !important;
+ --van-tabbar-item-active-color: #f7b328 !important;
+ --van-tabbar-item-active-background: #1a1a1a !important;
+ --van-tabbar-item-margin-bottom: 4px !important;
+ --van-tabbar-item-icon-size: 22px !important;
+ --van-tabbar-item-icon-margin-bottom: 4px !important;
+
+ /* Tabs 标签页 */
+ --van-tabs-nav-background: #121212 !important;
+ --van-tab-text-color: #868D9A !important;
+ --van-tab-active-text-color: #f7b328 !important;
+ --van-tab-disabled-text-color: #868D9A !important;
+ --van-tab-font-size: 14px !important;
+ --van-tabs-line-height: 44px !important;
+ --van-tabs-card-tab-active-color: #f7b328 !important;
+ --van-tabs-bottom-bar-width: 40px !important;
+ --van-tabs-bottom-bar-height: 3px !important;
+ --van-tabs-bottom-bar-color: #f7b328 !important;
+
+ /* Toast 轻提示 */
+ --van-toast-max-width: 70% !important;
+ --van-toast-font-size: 14px !important;
+ --van-toast-text-color: #fff !important;
+ --van-toast-loading-icon-color: #fff !important;
+ --van-toast-line-height: 20px !important;
+ --van-toast-border-radius: 8px !important;
+ --van-toast-background: rgba(0, 0, 0, 0.8) !important;
+ --van-toast-icon-size: 36px !important;
+ --van-toast-text-min-width: 96px !important;
+ --van-toast-text-padding: 8px 12px !important;
+ --van-toast-default-padding: 16px !important;
+ --van-toast-default-width: 88px !important;
+ --van-toast-default-min-height: 88px !important;
+ --van-toast-position-top-distance: 20% !important;
+ --van-toast-position-bottom-distance: 20% !important;
+
+ /* Loading 加载 */
+ --van-loading-text-color: #fff !important;
+ --van-loading-text-font-size: 14px !important;
+ --van-loading-spinner-color: #f7b328 !important;
+ --van-loading-spinner-size: 30px !important;
+
+ /* Picker 选择器 */
+ --van-picker-background: #121212 !important;
+ --van-picker-toolbar-height: 44px !important;
+ --van-picker-title-font-size: 16px !important;
+ --van-picker-title-line-height: 20px !important;
+ --van-picker-title-text-color: #fff !important;
+ --van-picker-action-padding: 0 16px !important;
+ --van-picker-action-font-size: 14px !important;
+ --van-picker-confirm-action-color: #f7b328 !important;
+ --van-picker-cancel-action-color: #868D9A !important;
+ --van-picker-option-font-size: 16px !important;
+ --van-picker-option-text-color: #fff !important;
+ --van-picker-option-disabled-opacity: 0.3 !important;
+ --van-picker-loading-icon-color: #f7b328 !important;
+ --van-picker-mask-color: linear-gradient(180deg, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.4)), linear-gradient(0deg, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.4)) !important;
+
+ /* DropdownMenu 下拉菜单 */
+ --van-dropdown-menu-height: 48px !important;
+ --van-dropdown-menu-background: #121212 !important;
+ --van-dropdown-menu-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
+ --van-dropdown-menu-title-font-size: 15px !important;
+ --van-dropdown-menu-title-text-color: #fff !important;
+ --van-dropdown-menu-title-active-text-color: #f7b328 !important;
+ --van-dropdown-menu-title-disabled-text-color: #868D9A !important;
+ --van-dropdown-menu-title-padding: 0 12px !important;
+ --van-dropdown-menu-title-line-height: 20px !important;
+ --van-dropdown-menu-option-active-color: #f7b328 !important;
+ --van-dropdown-menu-content-max-height: 80% !important;
+
+ /* Notify 消息通知 */
+ --van-notify-text-color: #fff !important;
+ --van-notify-padding: 12px 16px !important;
+ --van-notify-font-size: 14px !important;
+ --van-notify-line-height: 20px !important;
+ --van-notify-primary-background: #f7b328 !important;
+ --van-notify-success-background: #07c160 !important;
+ --van-notify-warning-background: #ff976a !important;
+ --van-notify-danger-background: #ee0a24 !important;
+
+ /* Swipe 轮播 */
+ --van-swipe-indicator-size: 6px !important;
+ --van-swipe-indicator-margin: 0 4px !important;
+ --van-swipe-indicator-active-opacity: 1 !important;
+ --van-swipe-indicator-inactive-opacity: 0.3 !important;
+ --van-swipe-indicator-active-background: #f7b328 !important;
+ --van-swipe-indicator-inactive-background: #868D9A !important;
+
+ /* Grid 宫格 */
+ --van-grid-item-content-padding: 16px 8px !important;
+ --van-grid-item-content-background: #121212 !important;
+ --van-grid-item-content-font-size: 14px !important;
+ --van-grid-item-icon-size: 28px !important;
+ --van-grid-item-text-color: #fff !important;
+ --van-grid-item-text-font-size: 12px !important;
+ --van-grid-item-text-line-height: 16px !important;
+ --van-grid-item-text-margin-top: 8px !important;
+
+ /* List 列表 */
+ --van-list-text-color: #868D9A !important;
+ --van-list-text-font-size: 14px !important;
+ --van-list-text-line-height: 50px !important;
+ --van-list-loading-icon-size: 16px !important;
+ --van-list-finished-text-color: #868D9A !important;
+ --van-list-error-text-color: #ee0a24 !important;
+ --van-list-text-margin-top: 16px !important;
+
+ /* PullRefresh 下拉刷新 */
+ --van-pull-refresh-head-height: 50px !important;
+ --van-pull-refresh-head-font-size: 14px !important;
+ --van-pull-refresh-head-text-color: #868D9A !important;
+
+ /* Search 搜索 */
+ --van-search-padding: 10px 12px !important;
+ --van-search-background: #121212 !important;
+ --van-search-content-background: #242424 !important;
+ --van-search-input-height: 34px !important;
+ --van-search-label-padding: 0 5px !important;
+ --van-search-label-color: #fff !important;
+ --van-search-label-font-size: 14px !important;
+ --van-search-left-icon-color: #868D9A !important;
+ --van-search-action-padding: 0 8px !important;
+ --van-search-action-text-color: #fff !important;
+ --van-search-action-font-size: 14px !important;
+
+ /* Collapse 折叠面板 */
+ --van-collapse-item-content-background: #121212 !important;
+ --van-collapse-item-content-text-color: #fff !important;
+ --van-collapse-item-content-font-size: 14px !important;
+ --van-collapse-item-content-line-height: 1.5 !important;
+ --van-collapse-item-title-disabled-color: #868D9A !important;
+
+ /* Checkbox 复选框 */
+ --van-checkbox-icon-color: #868D9A !important;
+ --van-checkbox-checked-icon-color: #f7b328 !important;
+ --van-checkbox-label-color: #fff !important;
+ --van-checkbox-label-margin: 8px !important;
+
+ /* Radio 单选框 */
+ --van-radio-icon-color: #868D9A !important;
+ --van-radio-checked-icon-color: #f7b328 !important;
+ --van-radio-label-color: #fff !important;
+ --van-radio-label-margin: 8px !important;
+
+ /* Switch 开关 */
+ --van-switch-on-background: #f7b328 !important;
+ --van-switch-off-background: #474B62 !important;
+ --van-switch-node-background: #fff !important;
+
+ /* Stepper 步进器 */
+ --van-stepper-background: #242424 !important;
+ --van-stepper-button-icon-color: #fff !important;
+ --van-stepper-input-text-color: #fff !important;
+ --van-stepper-button-disabled-color: #868D9A !important;
+ --van-stepper-button-disabled-icon-color: #868D9A !important;
+
+ /* Tag 标签 */
+ --van-tag-text-color: #fff !important;
+ --van-tag-border-radius: 2px !important;
+ --van-tag-font-size: 12px !important;
+ --van-tag-line-height: 16px !important;
+ --van-tag-medium-padding: 4px 6px !important;
+ --van-tag-large-padding: 6px 8px !important;
+ --van-tag-round-border-radius: 999px !important;
+ --van-tag-danger-color: #ee0a24 !important;
+ --van-tag-primary-color: #f7b328 !important;
+ --van-tag-success-color: #07c160 !important;
+ --van-tag-warning-color: #ff976a !important;
+ --van-tag-default-color: #242424 !important;
+ --van-tag-plain-background: transparent !important;
+}
+
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 7c029c5..9850b22 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,6 +1,6 @@
$mainBgColor: #131a2e;
$mainTextColor: #fff;
-$mainbgWhiteColor: #fff;
+$mainbgWhiteColor: #111;
$main_background:#f7f7f7; //主题色
$main2_background:#1F233D; //主题浅色背景
@@ -37,8 +37,7 @@
$c2c_background1: #ccc;
$c2c_tab_background:#ccc;
$c2c_tip_background: #aaa;
-// $selectSymbol_background: #131a2e; //自选与选择币种背景颜色
-$selectSymbol_background: #f7f7f7; //自选与选择币种背景颜色
+$selectSymbol_background: #131a2e; //自选与选择币种背景颜色
$US_tab_background: #1D2439;
$US_tabActice_background: #112542;
$lable_color: #B6BDD4;
diff --git a/src/assets/image/icon_back.png b/src/assets/image/icon_back.png
index 13b2635..f6a8c43 100644
--- a/src/assets/image/icon_back.png
+++ b/src/assets/image/icon_back.png
Binary files differ
diff --git a/src/assets/image/icon_back_1.png b/src/assets/image/icon_back_1.png
index f6a8c43..13b2635 100644
--- a/src/assets/image/icon_back_1.png
+++ b/src/assets/image/icon_back_1.png
Binary files differ
diff --git a/src/assets/imgs/home/more.png b/src/assets/imgs/home/more.png
index 26dd7c8..0aff816 100644
--- a/src/assets/imgs/home/more.png
+++ b/src/assets/imgs/home/more.png
Binary files differ
diff --git a/src/assets/imgs/quotes/search.png b/src/assets/imgs/quotes/search.png
index 33881e3..b2f83ce 100644
--- a/src/assets/imgs/quotes/search.png
+++ b/src/assets/imgs/quotes/search.png
Binary files differ
diff --git a/src/assets/init.scss b/src/assets/init.scss
index 3e3f006..848d9ca 100644
--- a/src/assets/init.scss
+++ b/src/assets/init.scss
@@ -1,4 +1,5 @@
/** ************************* overwrite ****************/
+@import './theme/index.scss';
#cryptos {
// * {
@@ -298,7 +299,9 @@
/* background */
.bg-white {
- background: $white;
+ @include themify() {
+ background: themed("main_background");
+ }
}
.bg-black {
@@ -315,7 +318,11 @@
}
.bg-grey {
- background: $grey;
+ // background: $grey;
+
+ @include themify() {
+ background: themed("main_background");
+ }
}
.bg-dark-grey {
@@ -367,7 +374,9 @@
}
.text-black {
- color: $black;
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
.text-dark-black {
diff --git a/src/assets/theme/_themes.scss b/src/assets/theme/_themes.scss
index 444a23e..ec0d017 100644
--- a/src/assets/theme/_themes.scss
+++ b/src/assets/theme/_themes.scss
@@ -43,7 +43,8 @@
tab_color:#333, //tab文字颜色
input_border:#e5e5e5, //输入框边框颜色
),
- dark:(main_background: #121212, //主题色
+ dark:(
+ main_background: #121212, //主题色
text_color: #fff, //文字颜色
text_color1: #868D9A, //文字浅色
text_color2: #B7BDD1, // 资金页面所用对应
diff --git a/src/components/Transform/assets-head/index.vue b/src/components/Transform/assets-head/index.vue
index 9028eb2..e6117bd 100644
--- a/src/components/Transform/assets-head/index.vue
+++ b/src/components/Transform/assets-head/index.vue
@@ -78,8 +78,7 @@
.van-nav-bar__arrow {
font-size: 48px !important;
- // color: $dark-grey;
- color: $log-c;
+ color: $dark-grey;
}
.van-nav-bar__right{
diff --git a/src/components/Transform/ex-input/index.vue b/src/components/Transform/ex-input/index.vue
index 60791b5..7de8376 100644
--- a/src/components/Transform/ex-input/index.vue
+++ b/src/components/Transform/ex-input/index.vue
@@ -7,12 +7,14 @@
<span class="textColor">+{{ dialCode }}</span>
<img src="../../assets/image/login/more.png" alt="">
</div>
- <input autocomplete="new-password" class="inputBackground" v-if="typeText == 'password'" :type="passwordType"
- :placeholder="placeholderText" :value="value" @input="onInput" :disabled="disabled">
+ <input autocomplete="new-password" class="inputBackground" v-if="typeText == 'password'"
+ :type="passwordType" :placeholder="placeholderText" :value="value" @input="onInput"
+ :disabled="disabled">
<input class="inputBackground" v-else type="text" :disabled="disabled" :placeholder="placeholderText"
:value="value" @input="onInput">
<div class="rightCon">
- <div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png" alt="">
+ <div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png"
+ alt="">
</div>
<div class="eyeBox" v-if="typeText == 'password'" @click="changeType">
<img v-if="passwordType == 'password'" src="../../assets/image/login/_close.png" alt="">
@@ -99,9 +101,14 @@
</script>
<style lang="scss" scoped>
+@import "@/assets/theme/index.scss";
+
.inputCom {
- color: $text_color4;
padding-bottom: 44px;
+
+ @include themify() {
+ color: themed("text_color4");
+ }
.iptbox {
height: 88px;
@@ -131,7 +138,10 @@
height: 100%;
border: none;
padding-left: 20px;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.rightCon {
@@ -156,8 +166,11 @@
.tips {
font-size: 26px;
- color: $text_color1;
margin-top: 18px;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
input:-webkit-autofill {
@@ -165,10 +178,13 @@
}
input::-webkit-input-placeholder {
- color: $text_color1;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
.icon {
transform: scale(2);
display: inline-block;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Transform/history-item/index.vue b/src/components/Transform/history-item/index.vue
index 18a67ef..d888e3d 100644
--- a/src/components/Transform/history-item/index.vue
+++ b/src/components/Transform/history-item/index.vue
@@ -105,17 +105,23 @@
}
</script>
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
.history-item {
border-bottom: 1px solid $inp-b;
padding: 40px 0;
:deep(.van-circle__text) {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
:deep(.van-circle__hover) {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
.header-info {
@@ -129,7 +135,9 @@
align-items: center;
span {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
.text-green {
@@ -143,7 +151,10 @@
.text {
font-size: 28px;
- color: $text_color6;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
@@ -151,16 +162,21 @@
flex: 1;
.title {
- color: $dark-grey;
+ // color: $dark-grey;
font-size: 24px;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
}
.text {
font-size: 28px;
-
- color: $text_color;
-
margin-top: 10px;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
@@ -187,8 +203,11 @@
.detailBtn {
border: 1px solid #fff;
- color: $text_color;
justify-content: space-between;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
diff --git a/src/components/Transform/mining-account/index.vue b/src/components/Transform/mining-account/index.vue
index 49ddca7..556205d 100644
--- a/src/components/Transform/mining-account/index.vue
+++ b/src/components/Transform/mining-account/index.vue
@@ -267,12 +267,20 @@
#cryptos {
.account_card {
- background: $inp-b !important;
+ // background: $inp-b !important;
border-radius: 2.5rem;
padding: 1.2rem 2.5rem;
+ @include themify() {
+ background: themed("input_background") !important;
+ }
+
div {
- background: $inp-b !important;
+ // background: $inp-b !important;
+
+ @include themify() {
+ background: themed("input_background") !important;
+ }
}
}
diff --git a/src/components/Transform/mining-exchange-input/index.vue b/src/components/Transform/mining-exchange-input/index.vue
index 18fb87b..d3345cc 100644
--- a/src/components/Transform/mining-exchange-input/index.vue
+++ b/src/components/Transform/mining-exchange-input/index.vue
@@ -72,7 +72,7 @@
class="w-30 h-30 rounded-full mr-10 currency-icon" />
</div>
<div>
- <div class="item-title textColor">{{ strToArr(item.name.toUpperCase(),'/')[0] }}</div>
+ <div class="item-title textColor">{{ strToArr(item.name.toUpperCase(), '/')[0] }}</div>
</div>
</div>
<div class="text-right" v-if="activeIndex == 0">
@@ -235,10 +235,10 @@
this.currencyList = this.allCurrencyList
}
},
- strToArr(str, separator = ',') {
- if (typeof str !== 'string') return [];
- return str.split(separator);
- },
+ strToArr(str, separator = ',') {
+ if (typeof str !== 'string') return [];
+ return str.split(separator);
+ },
},
};
</script>
@@ -256,7 +256,10 @@
.van-action-sheet__item {
background: #0D1323;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
@@ -268,37 +271,50 @@
.exchange-pop {
.tab-list {
- background: $inp-b;
+ // background: $inp-b;
$tab-r: 90px;
border-radius: $tab-r;
height: 180px;
color: $text_color;
+ @include themify() {
+ background: themed("input_background");
+ }
+
.tab-item {
text-align: center;
border-radius: $tab-r;
+
+ @include themify() {
+ background: themed("input_background");
+ }
}
.active {
- background: $bg_yellow;
-
+ background: $bg_yellow !important;
border-radius: $tab-r;
}
}
.title {
- color: $text_color;
- padding: 30px 0 !important
+ padding: 30px 0 !important;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
.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() {
+ background: themed("input_background");
+ color: themed("text_color");
+ }
}
.list {
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index efa2a75..8959a8d 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -123,9 +123,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 +153,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>
@@ -257,7 +258,7 @@
'%,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'
@@ -541,13 +542,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 +625,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 +957,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;
@@ -1156,7 +1161,10 @@
.van-action-sheet__item {
background: transparent !important;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
diff --git a/src/components/Transform/trade-head/index.vue b/src/components/Transform/trade-head/index.vue
index 45a680c..b8e7794 100644
--- a/src/components/Transform/trade-head/index.vue
+++ b/src/components/Transform/trade-head/index.vue
@@ -12,10 +12,10 @@
<img v-if="isReturn" src="@/assets/image/icon_back.png" @click="goBack()" class="w-40 h-40 back mr-50"
alt="">
<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"
+ <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" /> -->
</template>
<!-- 在切换模式下 -->
<template v-if="isChange">
@@ -26,10 +26,10 @@
</template>
<template v-else>
<img src="../../../assets/image/icon_back.png" class="w-40 h-40 back mr-50" alt="" @click="backPath()">
- <!-- <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"
+ <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" /> -->
</template>
</template>
<div class="flex flex-col pl-21" @click="onSidebar">
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index a4fa017..c543156 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -587,7 +587,7 @@
display: flex;
- color: $text_color;
+ color: $text_color3;
font-size: 26px;
align-items: center;
@@ -605,6 +605,7 @@
.active-bg {
background: $input_background;
border-radius: 2.5rem;
+ color: $text_color;
}
.buyandSell {
diff --git a/src/components/ex-input/index.vue b/src/components/ex-input/index.vue
index 70d8e1a..0faa948 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="" />
@@ -109,15 +109,22 @@
</script>
<style lang="scss" scoped>
-@import "@/views/authentication/components/intl.css";
+// @import "@/views/authentication/components/intl.css";
+@import "@/assets/theme/index.scss";
-.textColor{
- color: $text_color;
+.textColor {
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
+
.inputCom {
- color: $text_color;
padding-bottom: 22px;
font-size: 14px;
+
+ @include themify() {
+ color: themed("text_color") !important;
+ }
.iptbox {
height: 44px;
@@ -147,7 +154,10 @@
height: 100%;
border: none;
padding-left: 10px;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
.rightCon {
@@ -172,8 +182,11 @@
.tips {
font-size: 13px;
- color: $text_color1;
margin-top: 9px;
+
+ @include themify() {
+ color: themed("text_color1") !important;
+ }
}
input:-webkit-autofill {
@@ -188,9 +201,11 @@
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..79077ce 100644
--- a/src/components/ex-input/new-input.vue
+++ b/src/components/ex-input/new-input.vue
@@ -115,23 +115,33 @@
</script>
<style lang="scss" scoped>
-@import "@/views/authentication/components/intl.css";
+// @import "@/views/authentication/components/intl.css";
+@import "@/assets/theme/index.scss";
$inp-b: #f5f5f5;
.inputBackground {
background: $inp-b;
border: #d5d5d5 solid 1px;
+
+ // @include themify() {
+ // background: themed("c2c_background") !important;
+ // }
}
.textColor {
- color: $mainBgColor;
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
.inputCom {
- color: $mainBgColor;
padding-bottom: 22px;
font-size: 14px;
+
+ @include themify() {
+ color: themed("text_color") !important;
+ }
.iptbox {
height: 55px;
@@ -161,8 +171,11 @@
height: 100%;
border: none;
padding-left: 10px;
- color: $mainBgColor;
border-radius: 20px;
+
+ @include themify() {
+ color: themed("text_color") !important;
+ }
}
.rightCon {
@@ -187,8 +200,11 @@
.tips {
font-size: 13px;
- color: $text_color1;
margin-top: 9px;
+
+ @include themify() {
+ color: themed("text_color1") !important;
+ }
}
input:-webkit-autofill {
@@ -196,7 +212,10 @@
}
input::-webkit-input-placeholder {
- color: $dark-grey;
+
+ @include themify() {
+ color: themed("text_color1") !important;
+ }
}
.icon {
diff --git a/src/components/foreign/foreign-contract-header/index.vue b/src/components/foreign/foreign-contract-header/index.vue
index a56c647..f6e6a5f 100644
--- a/src/components/foreign/foreign-contract-header/index.vue
+++ b/src/components/foreign/foreign-contract-header/index.vue
@@ -6,10 +6,10 @@
<div class="flex justify-start pt-10 pb-5 before">
<img src="@/assets/image/icon_back_1.png" class="icon_back_1" alt="" @click="jump()">
<div class="flex items-center font-14">
- <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-18 h-18"
- @click="onSidebar"> -->
- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="w-18 h-18"
+ <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-18 h-18"
@click="onSidebar">
+ <!-- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="w-18 h-18"
+ @click="onSidebar"> -->
<div class="flex pl-10 textColor font-700" @click="onSidebar">
<div class="font-35">{{ symbol.toUpperCase() || '--' }}</div>
<div class="ml-15">{{ $t('delivery') }}</div>
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 46c5084..ab54bc0 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -193,24 +193,32 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
:deep(.van-tabbar-item__text) {
font-size: 12px;
color: #7f7f7f;
}
:deep(.van-tabbar-item--active) {
- background-color: $white;
+ @include themify() {
+ background-color: themed("footer_background");
+ }
}
.van-tabbar--fixed {
z-index: 10;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
- background-color: $white;
+ @include themify() {
+ background-color: themed("footer_background");
+ }
}
.van-tabbar--fixed::after {
- border-color: $white;
+ @include themify() {
+ border-color: themed("footer_background");
+ }
}
// .blue {
@@ -218,7 +226,9 @@
// }
.active {
- color: #292929 !important;
+ @include themify() {
+ color: themed("text_color3") !important;
+ }
}
.footer {
diff --git a/src/components/fx-header/index.vue b/src/components/fx-header/index.vue
index 05b8ac5..4450dad 100644
--- a/src/components/fx-header/index.vue
+++ b/src/components/fx-header/index.vue
@@ -37,13 +37,17 @@
</script>
<style lang="scss" scoped>
+@import "@/assets/theme/index.scss";
+
:deep(.van-icon) {
font-size: 18px;
// color: $text_color;
- color: $log-c;
}
:deep(.van-nav-bar__title) {
- color: $log-c;
+ @include themify() {
+ color: themed("text_color");
+ }
+ // color: $text_color;
}
</style>
diff --git a/src/components/quotes-header/index.vue b/src/components/quotes-header/index.vue
index 966844f..d4d616d 100644
--- a/src/components/quotes-header/index.vue
+++ b/src/components/quotes-header/index.vue
@@ -1,5 +1,5 @@
<template lang="pug">
-section.quotes-header.flex.justify-between.p-4.bg-white
+section.quotes-header.flex.justify-between.p-4.mainBackground
div.flex
img.w-8.h-8.mr-4(@click="emitSorts" src="@/components/quotes-header/sort.png" alt="sort")
//- img.w-8.h-8(@click="route('/quotes/edit')" src="@/components/quotes-header/edit.png" alt="edit")
diff --git a/src/config/theme.js b/src/config/theme.js
index 9daf75e..bfece70 100644
--- a/src/config/theme.js
+++ b/src/config/theme.js
@@ -1,4 +1,4 @@
-// let theme = 'dark'
-let theme = 'light'
+let theme = 'dark'
+// let theme = 'light'
export const THEME = theme
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 947c03e..063cd07 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
import { createApp } from 'vue'
import './assets/css/index.scss'
import './assets/css/init.scss'
+import './assets/theme/index.scss'
import 'vant/lib/index.css'
import fxHeader from '@/components/fx-header'
import 'default-passive-events'
@@ -13,8 +14,12 @@
import pinia from '@/store'
import store from '@/store/store'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { getStorage } from '@/utils/utis'
pinia.use(piniaPluginPersistedstate)
+// 初始化主题为黑夜模式
+const theme = getStorage('theme') || 'dark'
+window.document.documentElement.setAttribute('data-theme', theme)
const app = createApp(App)
const title = import.meta.env.VITE_APP__TITLE
@@ -26,4 +31,11 @@
app.use(pinia)
app.use(store)
+// 确保store中的主题状态与DOM同步
app.mount('#app')
+// 在应用挂载后初始化主题
+if (store.state.vant && store.state.vant.theme !== theme) {
+ store.commit('vant/SET_THEME', theme)
+} else if (!store.state.vant || !store.state.vant.theme) {
+ store.commit('vant/SET_THEME', theme)
+}
diff --git a/src/store/modules/vant.js b/src/store/modules/vant.js
index 4e04408..ea0f386 100644
--- a/src/store/modules/vant.js
+++ b/src/store/modules/vant.js
@@ -5,7 +5,7 @@
export default {
namespaced: true,
state: {
- theme: 'light' || getStorage('theme'), // 主题 light(白天)/dark(夜间)
+ theme: getStorage('theme') || 'dark', // 主题 light(白天)/dark(夜间)
},
mutations: {
"SET_THEME"(state, val) { // 修改主题状态
diff --git a/src/views/ICO/ico.vue b/src/views/ICO/ico.vue
index 7049991..b278d6c 100644
--- a/src/views/ICO/ico.vue
+++ b/src/views/ICO/ico.vue
@@ -125,7 +125,7 @@
padding: 1rem 0rem;
.ico_item {
- background-color: #eee;
+ background-color: #333;
padding: .5rem 1rem;
border: #aaa solid 1px;
border-radius: 1rem;
diff --git a/src/views/authentication/components/nationalityList.vue b/src/views/authentication/components/nationalityList.vue
index 7655cd7..e42fdfc 100644
--- a/src/views/authentication/components/nationalityList.vue
+++ b/src/views/authentication/components/nationalityList.vue
@@ -2,8 +2,8 @@
<div class="nationList">
<van-action-sheet v-model:show="isShow" :title="props.title">
<form>
- <van-search class="tabBackground" v-model="val" :placeholder="$t('entrynational')" @input="onSearch(val)"
- @clear="onClear" />
+ <van-search class="tabBackground" v-model="val" :placeholder="$t('entrynational')"
+ @input="onSearch(val)" @clear="onClear" />
</form>
<div class="flex pl-30 pr-30 pt-30 pb-30 justify-between list-view box-border textColor container"
@@ -218,15 +218,7 @@
</script>
<style lang="scss" scoped>
@import "intl.css";
-
-:deep(.van-action-sheet__header) {
- // background-color: $main2_background;
- // color: $text_color;
-}
-
-.container {
- // background-color: $main2_background;
-}
+@import "@/assets/theme/index.scss";
.van-action-sheet__header {
color: $text_color4;
@@ -234,16 +226,20 @@
.nationList {
:deep(.van-field__control) {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
:deep(.van-search__content) {
- background: $tab_background;
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ background: themed("tab_background");
+ }
}
:deep(.van-action-sheet__content) {
- background: $selectSymbol_background;
+ background: $selectSymbol_background;
}
</style>
diff --git a/src/views/cryptos/AccountChange/index.vue b/src/views/cryptos/AccountChange/index.vue
index 8282852..0a994a8 100644
--- a/src/views/cryptos/AccountChange/index.vue
+++ b/src/views/cryptos/AccountChange/index.vue
@@ -202,11 +202,15 @@
box-sizing: border-box;
:deep(.van-tab--active .van-tab__text) {
- color: $text_color;
+ @include themify() {
+ color: themed("text_color");
+ }
}
:deep(.van-tab__text) {
- color: $text_color1;
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 6b046b8..bd101b6 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -651,12 +651,12 @@
.select-box {
width: 220px;
-
- background: $inp-b;
-
margin-right: 20px;
- }
+ @include themify() {
+ background: themed("input_background") !important;
+ }
+ }
}
.z-100 {
@@ -665,8 +665,12 @@
.option-box {
z-index: 99;
- background: $inp-b;
- box-shadow: 0px 0px 0.1875rem 0.1875rem $inp-b;
+
+ @include themify() {
+ background: themed("input_background");
+ box-shadow: 0px 0px 0.1875rem 0.1875rem themed("input_background");
+ color: themed("text_color");
+ }
}
:deep(.van-action-sheet__content) {
@@ -674,7 +678,10 @@
.van-action-sheet__item {
background: transparent;
- color: $text_color;
+
+ @include themify() {
+ color: themed("text_color");
+ }
}
}
diff --git a/src/views/cryptos/TrendDetails/index.vue b/src/views/cryptos/TrendDetails/index.vue
index f52d691..81cc86b 100644
--- a/src/views/cryptos/TrendDetails/index.vue
+++ b/src/views/cryptos/TrendDetails/index.vue
@@ -550,8 +550,8 @@
}
:deep(.van-tabs__nav) {
- // background-color: $night !important;
- background-color: $inp-b !important;
+ background-color: $night !important;
+ // background-color: $inp-b !important;
}
@keyframes animate1 {
diff --git a/src/views/homePage/components/head.vue b/src/views/homePage/components/head.vue
index 4a5725e..39f7d08 100644
--- a/src/views/homePage/components/head.vue
+++ b/src/views/homePage/components/head.vue
@@ -1,10 +1,13 @@
<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">
+ <div class="more mr-5">
+ <img src="@/assets/imgs/home/more.png" alt="" @click="onRoute('/my')">
+ </div>
+
+ <div class="more_input tabBackground1 pl-5 pr-5 flex items-center justify-start mr-5 pt-2">
<img src="@/assets/imgs/quotes/search.png" alt="">
<!-- <span class="pl-5">{{ $t('请输入关键词搜寻') }}</span> -->
- <van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="background-color: #F7F7F7;padding: 0 1rem;"
+ <van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="padding: 0 1rem;"
@input="emit('search', iValue)" />
</div>
<div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')">
@@ -40,8 +43,6 @@
<style lang="scss" scoped>
.head {
width: 100%;
- $inp-bg: #F7F7F7;
- $inp-c: #999;
margin-bottom: 1rem;
.more,
@@ -53,11 +54,10 @@
.more_input {
// width: 26rem;
+ // background: #fff;
width: 100%;
height: 4.5rem;
- background: $inp-bg;
border-radius: 2.25rem;
- color: $inp-c;
font-size: 1.5rem;
span {
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index c80b301..24911b8 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="home_page">
+ <div class="home_page mainBackground textColor">
<Head @search="onSearch"></Head>
<!-- <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div> -->
@@ -112,7 +112,7 @@
// { 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: 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' }
{ key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
@@ -121,7 +121,7 @@
// { key: 9, name: t('划转'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/my/transfer' },
// { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
- { key: 11, name: "STO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
+ // { key: 11, name: "STO", 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: 13, name: t('质押'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '' },
{ key: 14, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10.png', import.meta.url), path: '/customerService' },
@@ -229,12 +229,12 @@
<style lang="scss">
.home_page {
- background: $white;
+ // background: $white;
min-height: 100vh;
width: 100%;
padding: 1rem 1rem 10rem 1rem;
// $log-c: #282828;
- $tab-c: #343434;
+ $tab-c: #888;
$inp-c: #999;
$crd-b: #f7f7f7;
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index c32e872..f6e505d 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -185,12 +185,16 @@
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
.assets {
min-height: 100vh;
background: $mainbgWhiteColor;
padding: 2.8rem 2rem 10rem 2rem;
- $assets_title_color: #9a9a9a;
- color: $assets_title_color;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
:deep(.van-cell) {
padding-left: 0;
@@ -216,8 +220,11 @@
}
.assets_money {
- color: $text_color4;
font-size: 3.4rem;
+
+ @include themify() {
+ color: themed("text_color");
+ }
.pricing_jj {
font-size: 1.6rem;
@@ -249,13 +256,19 @@
.assets_revenue {
font-size: 2rem;
- color: #646464;
font-weight: 600;
+ @include themify() {
+ color: themed("text_color1");
+ }
+
span {
- color: #6e6e6e;
text-decoration: underline dotted;
font-weight: 400;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
}
}
@@ -264,7 +277,10 @@
$item_width: 8.3rem;
width: $item_width;
font-size: 1.8rem;
- color: $text_color4;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
img {
height: $item_width;
@@ -296,8 +312,11 @@
}
.assets_item {
- color: $text_color4;
font-size: 2.1rem;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
.icon {
width: 1.8rem;
@@ -313,8 +332,11 @@
}
.assets_item_light {
- color: #9b9b9b;
font-weight: 300;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
}
}
}
diff --git a/src/views/quotes/Detail.vue b/src/views/quotes/Detail.vue
index f6eb2e1..a0d9aee 100644
--- a/src/views/quotes/Detail.vue
+++ b/src/views/quotes/Detail.vue
@@ -7,10 +7,10 @@
<img src="@/assets/image/back.png" alt="">
</div>
<div class="name-box">
- <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
- @click="onSidebar" /> -->
- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
@click="onSidebar" />
+ <!-- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ @click="onSidebar" /> -->
<p class="title">{{ chartData?.name }} </p>
<p class="type">{{ symbol }}</p>
</div>
diff --git a/src/views/quotes/OpenTrade.vue b/src/views/quotes/OpenTrade.vue
index 8b35659..f6738b5 100644
--- a/src/views/quotes/OpenTrade.vue
+++ b/src/views/quotes/OpenTrade.vue
@@ -7,10 +7,10 @@
<img src="@/assets/image/back.png" alt="" @click="onRoute">
</div>
<p class="title">
- <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
- @click="onSidebar" /> -->
- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
@click="onSidebar" />
+ <!-- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ @click="onSidebar" /> -->
<span class="text">{{ `${symbolName} (${symbol})` }}</span>
</p>
</div>
diff --git a/src/views/quotes/components/BuySellTradeTab.vue b/src/views/quotes/components/BuySellTradeTab.vue
index aff4c8e..1c60f5d 100644
--- a/src/views/quotes/components/BuySellTradeTab.vue
+++ b/src/views/quotes/components/BuySellTradeTab.vue
@@ -47,7 +47,8 @@
<img src="@/assets/image/quotes/grey-select.png" alt="select-icon" class="select-icon" />
</div>
<div class="option-box" v-show="isShow">
- <div class="font-30" v-for="(item, index) in selectData" :key="item.type" @click="selectItem(item, index)">
+ <div class="font-30" v-for="(item, index) in selectData" :key="item.type"
+ @click="selectItem(item, index)">
{{
item.title }}
</div>
@@ -92,7 +93,7 @@
</div>
<van-button type="danger" class="buy-btn" @click="handleOrder()">{{ props.isSell ? (t('卖出'))
: (t('买入'))
- }}</van-button>
+ }}</van-button>
<p class="desc">
<span class="label">
{{ t('IndividualStockPositions') }}:<span class="num">100%</span>
@@ -120,7 +121,8 @@
</ul>
</div>
- <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img " @click="goHistory" />
+ <img src="../../../assets/image/public/record.png" alt="record-img" class="pr-5 record-img "
+ @click="goHistory" />
</div>
</div>
<section class="etf-container">
@@ -255,16 +257,16 @@
</section>
<div class="kline-container flex" v-if="showKlineChart">
<div class="chart-index">
- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" />
+ <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol"
+ @data="onData" :key="`${symbol}-${timeValue}`" />
</div>
</div>
</div>
</section>
</template>
-
+
<script setup>
-import { ref, onMounted, onBeforeUnmount, computed, reactive, onUnmounted, watch,defineExpose } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, reactive, onUnmounted, watch, defineExpose } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Tab, Tabs } from 'vant';
import {
@@ -683,7 +685,7 @@
no_zeroList.value = res.no_zero;
})
}
-const loadInit = () =>{
+const loadInit = () => {
activePercenIndex.value = -1
form.total = ''
form.volume = ''
@@ -750,7 +752,7 @@
}
:deep(.van-overlay) {
- background: rgba(0, 0, 0, .5);
+ background: rgba(255, 2550, 255, .5);
}
:deep(.van-popup) {
diff --git a/src/views/quotes/components/head.vue b/src/views/quotes/components/head.vue
index 5532f01..e41d3b2 100644
--- a/src/views/quotes/components/head.vue
+++ b/src/views/quotes/components/head.vue
@@ -4,7 +4,7 @@
<div class="more_input pl-20 pr-5 flex items-center justify-start mr-5 pt-2">
<img src="@/assets/imgs/quotes/search.png" alt="">
<!-- <span class="pl-5">{{ $t('请输入关键词搜寻') }}</span> -->
- <van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="background-color: #F7F7F7;"
+ <van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="background: none;"
@input="emit('search', iValue)" />
</div>
</div>
@@ -28,20 +28,23 @@
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
.head {
width: 100%;
- $inp-bg: #F7F7F7;
- $inp-c: #999;
margin-bottom: 1rem;
.more_input {
width: 100%;
height: 4.5rem;
- background: $inp-bg;
border-radius: 2.25rem;
- color: $inp-c;
font-size: 1.5rem;
+ @include themify() {
+ background-color: themed("input_background");
+ color: themed("text_color1");
+ }
+
span {
text-overflow: ellipsis;
overflow: hidden;
diff --git a/src/views/usStock/Detail.vue b/src/views/usStock/Detail.vue
index 890e88c..5046206 100644
--- a/src/views/usStock/Detail.vue
+++ b/src/views/usStock/Detail.vue
@@ -7,10 +7,10 @@
<img src="@/assets/image/back.png" alt="">
</div>
<div class="name-box">
- <!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
- @click="onSidebar" /> -->
- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="convert-img"
@click="onSidebar" />
+ <!-- <img src="@/assets/theme/white/image/black-convert.png" alt="convert-img" class="convert-img"
+ @click="onSidebar" /> -->
<p class="title">{{ enName }} </p>
<p class="type">{{ symbol }}</p>
</div>
diff --git a/src/views/usStock/components/BuySellTradeTab.vue b/src/views/usStock/components/BuySellTradeTab.vue
index 825f427..8fc8595 100644
--- a/src/views/usStock/components/BuySellTradeTab.vue
+++ b/src/views/usStock/components/BuySellTradeTab.vue
@@ -603,7 +603,7 @@
}
:deep(.van-overlay) {
- background: rgba(0, 0, 0, .5);
+ background: rgba(255, 2550, 255, .5);;
}
:deep(.van-popup) {
--
Gitblit v1.9.3