From 4931fb42270d5fd00a0a22270d684476ffa53917 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Sat, 11 Oct 2025 18:35:08 +0800
Subject: [PATCH] 1
---
src/assets/theme/index.scss | 244 ++++++++++++++++++++++++++++++++++
src/store/modules/vant.js | 18 ++
src/views/homePage/components/head.vue | 10 +
src/assets/theme/_themes.scss | 88 ++++++++++++
vite.config.js | 2
src/views/cryptos/Recharge/rechargePage.vue | 8
src/assets/theme/_handle.scss | 21 +++
src/store/store.js | 2
8 files changed, 387 insertions(+), 6 deletions(-)
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/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/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..0f102cd 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -8,6 +8,7 @@
import c2c from "@/store/modules/c2c";
// import exchangeRate from './modules/exchangeRate'
import createPersistedState from "vuex-persistedstate";
+import vant from "@/store/modules/vant";
const store = {
plugins: [createPersistedState()],
@@ -27,6 +28,7 @@
c2cBuy,
c2cSell,
c2c,
+ vant,
// exchangeRate
},
};
diff --git a/src/views/cryptos/Recharge/rechargePage.vue b/src/views/cryptos/Recharge/rechargePage.vue
index 4b94379..e21618e 100644
--- a/src/views/cryptos/Recharge/rechargePage.vue
+++ b/src/views/cryptos/Recharge/rechargePage.vue
@@ -31,13 +31,13 @@
{{ $t('粘贴') }}</div>
</div>
</div> -->
- <div class="mb-20">
+ <!-- <div class="mb-20">
<div class="font-28 textColor">{{ $t('充币数量') }}</div>
<div>
<input v-model="amount" class="input-view w-full font-28 textColor inputBackground"
:placeholder="$t('请输入充币数量')" />
</div>
- </div>
+ </div> -->
<div>
<div class="font-28 textColor">{{ $t('链名称') }}</div>
<div class="flex ">
@@ -59,8 +59,8 @@
<div class="pl-30 pr-30">
<!-- <div class="font-30 mb-27 textColor">{{ $t('重要提示') }}</div> -->
<!-- <div class="font-28 text-grey" v-html="tip"></div> -->
- <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">{{ $t('下一步')
- }}</button>
+ <!-- <button class="btnMain text-white next-btn font-30 rounded-lg" @click="nextBtn">{{ $t('下一步')
+ }}</button> -->
</div>
</div>
</div>
diff --git a/src/views/homePage/components/head.vue b/src/views/homePage/components/head.vue
index 24c36e9..4a5725e 100644
--- a/src/views/homePage/components/head.vue
+++ b/src/views/homePage/components/head.vue
@@ -7,7 +7,12 @@
<van-field v-model="iValue" :placeholder="$t('请输入关键词搜寻')" style="background-color: #F7F7F7;padding: 0 1rem;"
@input="emit('search', iValue)" />
</div>
- <div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')"></div>
+ <div class="scan"><img src="@/assets/image/assets-center/language.png" alt="" @click="onRoute('/language')">
+ </div>
+
+ <!-- <div class="" @click="store.commit('vant/SET_THEME', 'dark')">切换1</div>
+ <div class="" @click="store.commit('vant/SET_THEME', 'light')">切换2</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> -->
@@ -18,6 +23,7 @@
import { useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import { ref } from 'vue';
+import store from '@/store/store'
const { t } = useI18n()
const router = useRouter()
@@ -28,8 +34,8 @@
const iValue = ref('')
const emit = defineEmits(['search'])
-</script>
+</script>
<style lang="scss" scoped>
.head {
diff --git a/vite.config.js b/vite.config.js
index 0f9037d..615b577 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,6 +7,7 @@
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打包用
@@ -26,6 +27,7 @@
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/css/variable.scss";`
+ // additionalData: `@import "@/assets/css/variable.scss";@import "${scss_path}";`
},
}
},
--
Gitblit v1.9.3