提交 2054ab0f 编写于 作者: Mr.奇淼('s avatar Mr.奇淼(

主题色功能bug修复

上级 f42c6775
...@@ -118,13 +118,31 @@ export const user = { ...@@ -118,13 +118,31 @@ export const user = {
token(state) { token(state) {
return state.token return state.token
}, },
mode(state) {
return state.userInfo.sideMode
},
sideMode(state) { sideMode(state) {
if (state.userInfo.sideMode === 'dark') {
return '#191a23'
} else if (state.userInfo.sideMode === 'light') {
return '#fff'
} else {
return state.userInfo.sideMode return state.userInfo.sideMode
}
}, },
baseColor(state) { baseColor(state) {
if (state.userInfo.sideMode === 'dark') {
return '#fff'
} else if (state.userInfo.sideMode === 'light') {
return '#191a23'
} else {
return state.userInfo.baseColor return state.userInfo.baseColor
}
}, },
activeColor(state) { activeColor(state) {
if (state.userInfo.sideMode === 'dark' || state.userInfo.sideMode === 'light') {
return '#1890ff'
}
return state.userInfo.activeColor return state.userInfo.activeColor
} }
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
:tab="item" :tab="item"
class="gva-tab" class="gva-tab"
> >
<span slot="label" :style="{color: activeColor}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span> <span slot="label" :style="{color: activeValue===name(item)?activeColor:'#333'}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="true" :collapse-transition="true"
:default-active="active" :default-active="active"
:background-color="backgroundColor" :background-color="sideMode"
:active-text-color="activeColor" :active-text-color="activeColor"
:text-color="textColor" :text-color="baseColor"
class="el-menu-vertical" class="el-menu-vertical"
unique-opened unique-opened
@select="selectMenuItem" @select="selectMenuItem"
...@@ -38,25 +38,7 @@ export default { ...@@ -38,25 +38,7 @@ export default {
}, },
computed: { computed: {
...mapGetters('router', ['asyncRouters']), ...mapGetters('router', ['asyncRouters']),
...mapGetters('user', ['baseColor', 'activeColor', 'sideMode']), ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
backgroundColor() {
if (this.sideMode === 'dark') {
return '#191a23'
} else if (this.sideMode === 'light') {
return '#fff'
} else {
return this.sideMode
}
},
textColor() {
if (this.$store.getters['user/sideMode'] === 'dark') {
return '#fff'
} else if (this.$store.getters['user/sideMode'] === 'light') {
return '#191a23'
} else {
return this.baseColor
}
}
}, },
watch: { watch: {
$route() { $route() {
......
...@@ -9,15 +9,15 @@ ...@@ -9,15 +9,15 @@
> >
<div class="setting_body"> <div class="setting_body">
<div class="setting_card"> <div class="setting_card">
<div class="setting_title">侧边栏主题</div> <div class="setting_title">侧边栏主题 (注:自定义请先配置背景色)</div>
<div class="setting_content"> <div class="setting_content">
<div class="theme-box"> <div class="theme-box">
<div class="item" @click="changeMode('light')"> <div class="item" @click="changeMode('light')">
<i v-if="sideMode === 'light'" class="el-icon-check check" /> <i v-if="mode === 'light'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"> <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
</div> </div>
<div class="item" @click="changeMode('dark')"> <div class="item" @click="changeMode('dark')">
<i v-if="sideMode === 'dark'" class="el-icon-check check" /> <i v-if="mode === 'dark'" class="el-icon-check check" />
<img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"> <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
</div> </div>
</div> </div>
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters('user', ['sideMode', 'baseColor', 'activeColor']) ...mapGetters('user', ['sideMode', 'baseColor', 'activeColor', 'mode'])
}, },
methods: { methods: {
handleClose() { handleClose() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册