主题颜色保存配置
This commit is contained in:
parent
b6f13c546b
commit
2575c17f47
|
@ -176,12 +176,6 @@
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* submenu item */
|
|
||||||
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
||||||
height: 50px !important;
|
|
||||||
line-height: 50px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* text color */
|
/* text color */
|
||||||
.text-navy {
|
.text-navy {
|
||||||
color: #1ab394;
|
color: #1ab394;
|
||||||
|
|
|
@ -35,7 +35,6 @@ export default {
|
||||||
if (typeof val !== 'string') return
|
if (typeof val !== 'string') return
|
||||||
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
const themeCluster = this.getThemeCluster(val.replace('#', ''))
|
||||||
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
|
||||||
console.log(themeCluster, originalCluster)
|
|
||||||
|
|
||||||
const $message = this.$message({
|
const $message = this.$message({
|
||||||
message: ' Compiling the theme',
|
message: ' Compiling the theme',
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
>
|
>
|
||||||
<template v-for="(item, index) in topMenus">
|
<template v-for="(item, index) in topMenus">
|
||||||
<el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
|
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
|
||||||
><svg-icon :icon-class="item.meta.icon" />
|
><svg-icon :icon-class="item.meta.icon" />
|
||||||
{{ item.meta.title }}</el-menu-item
|
{{ item.meta.title }}</el-menu-item
|
||||||
>
|
>
|
||||||
|
@ -42,6 +42,9 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
theme() {
|
||||||
|
return this.$store.state.settings.theme;
|
||||||
|
},
|
||||||
// 顶部显示菜单
|
// 顶部显示菜单
|
||||||
topMenus() {
|
topMenus() {
|
||||||
let topMenus = [];
|
let topMenus = [];
|
||||||
|
@ -149,7 +152,7 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.el-menu--horizontal > .el-menu-item {
|
.el-menu--horizontal > .el-menu-item {
|
||||||
float: left;
|
float: left;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -162,7 +165,13 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu--horizontal > .el-menu-item.is-active {
|
.el-menu--horizontal > .el-menu-item.is-active {
|
||||||
border-bottom: 3px solid #409eff;
|
border-bottom: 3px solid #{'var(--theme)'};
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* submenu item */
|
||||||
|
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||||
|
height: 50px !important;
|
||||||
|
line-height: 50px !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -77,13 +77,11 @@ export default {
|
||||||
components: { ThemePicker },
|
components: { ThemePicker },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
theme: this.$store.state.settings.theme,
|
||||||
sideTheme: this.$store.state.settings.sideTheme
|
sideTheme: this.$store.state.settings.sideTheme
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
theme() {
|
|
||||||
return this.$store.state.settings.theme
|
|
||||||
},
|
|
||||||
fixedHeader: {
|
fixedHeader: {
|
||||||
get() {
|
get() {
|
||||||
return this.$store.state.settings.fixedHeader
|
return this.$store.state.settings.fixedHeader
|
||||||
|
@ -138,6 +136,7 @@ export default {
|
||||||
key: 'theme',
|
key: 'theme',
|
||||||
value: val
|
value: val
|
||||||
})
|
})
|
||||||
|
this.theme = val;
|
||||||
},
|
},
|
||||||
handleTheme(val) {
|
handleTheme(val) {
|
||||||
this.$store.dispatch('settings/changeSetting', {
|
this.$store.dispatch('settings/changeSetting', {
|
||||||
|
@ -161,7 +160,8 @@ export default {
|
||||||
"tagsView":${this.tagsView},
|
"tagsView":${this.tagsView},
|
||||||
"fixedHeader":${this.fixedHeader},
|
"fixedHeader":${this.fixedHeader},
|
||||||
"sidebarLogo":${this.sidebarLogo},
|
"sidebarLogo":${this.sidebarLogo},
|
||||||
"sideTheme":"${this.sideTheme}"
|
"sideTheme":"${this.sideTheme}",
|
||||||
|
"theme":"${this.theme}"
|
||||||
}`
|
}`
|
||||||
);
|
);
|
||||||
setTimeout(loading.close(), 1000)
|
setTimeout(loading.close(), 1000)
|
||||||
|
|
|
@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } =
|
||||||
|
|
||||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
|
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
|
||||||
const state = {
|
const state = {
|
||||||
theme: variables.theme,
|
theme: storageSetting.theme || variables.theme,
|
||||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||||
showSettings: showSettings,
|
showSettings: showSettings,
|
||||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
||||||
|
|
Loading…
Reference in New Issue