From 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 19 May 2025 16:43:12 +0800
Subject: [PATCH] 样式修改
---
src/page/themeModel/index.vue | 114 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 61 insertions(+), 53 deletions(-)
diff --git a/src/page/themeModel/index.vue b/src/page/themeModel/index.vue
index 4da390e..c878b2b 100644
--- a/src/page/themeModel/index.vue
+++ b/src/page/themeModel/index.vue
@@ -1,78 +1,86 @@
<template>
- <div class="lang">
- <assets-head :title="$t('主题设置')" />
- <div v-for="(item, index) in themeList" :key="index"
- class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 "
- @click="changeModel(item.type)">
- <div class="lang-title flex items-center font-26 textColor">
- {{ $t(item.title) }}
- </div>
+ <div class="lang">
+ <assets-head :title="$t('主题设置')" />
+ <div
+ v-for="(item, index) in themeList"
+ :key="index"
+ class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35"
+ @click="changeModel(item.type)"
+ >
+ <div class="lang-title flex items-center font-26 textColor">
+ {{ $t(item.title) }}
+ </div>
- <img class="w-40 h-40 lh-40" v-if="item.type == theme" src="../../assets/image/public/checked.png" />
- </div>
+ <img
+ class="w-40 h-40 lh-40"
+ v-if="item.type == theme"
+ src="../../assets/image/public/checked.png"
+ />
</div>
+ </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import assetsHead from "@/components/assets-head";
-import { setStorage, getStorage } from '@/utils/utis'
+import { setStorage, getStorage } from "@/utils/utis";
export default {
- data() {
- return {
- type: 'white',
- themeList: [
- {
- title: '白天模式',
- type: 'light',
- },
- {
- title: '黑夜模式',
- type: 'dark',
- },
- ]
- }
+ data() {
+ return {
+ type: "dark",
+ // type: 'white',
+ themeList: [
+ // {
+ // title: '白天模式',
+ // type: 'light',
+ // },
+ {
+ title: "黑夜模式",
+ type: "dark",
+ },
+ ],
+ };
+ },
+ components: {
+ assetsHead,
+ },
+ computed: {
+ ...mapGetters("home", ["theme"]),
+ },
+ methods: {
+ ...mapMutations("home", ["SET_THEME"]),
+ changeModel(type) {
+ this.type = type;
+ this.SET_THEME(type);
},
- components: {
- assetsHead,
- },
- computed: {
- ...mapGetters('home', ['theme'])
- },
- methods: {
- ...mapMutations('home', ['SET_THEME']),
- changeModel(type) {
- this.type = type;
- this.SET_THEME(type)
- }
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
.lang {
- width: 100%;
- box-sizing: border-box;
+ width: 100%;
+ box-sizing: border-box;
}
.CommonProblem-padding {
- padding-left: 50px;
- padding-right: 50px;
+ padding-left: 50px;
+ padding-right: 50px;
}
.lang-padding {
- padding: 43px 35px 43px 35px;
- box-sizing: border-box;
+ padding: 43px 35px 43px 35px;
+ box-sizing: border-box;
- @include themify() {
- border-bottom: 1px solid themed("line_color");
- }
+ @include themify() {
+ border-bottom: 1px solid themed("line_color");
+ }
- font-weight: 400;
- font-size: 35px;
- color: #000000;
- display: flex;
+ font-weight: 400;
+ font-size: 35px;
+ color: #000000;
+ display: flex;
}
.lang-flex {
- flex: 1;
+ flex: 1;
}
</style>
--
Gitblit v1.9.3