From cb9fa33b5ad26cf9c7ab22e20eb6f2f6a505c054 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: Mon, 19 Apr 2021 17:05:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/assets/styles/ruoyi.scss | 6 ------ ruoyi-ui/src/components/ThemePicker/index.vue | 1 - ruoyi-ui/src/components/TopNav/index.vue | 15 ++++++++++++--- ruoyi-ui/src/layout/components/Settings/index.vue | 8 ++++---- ruoyi-ui/src/store/modules/settings.js | 2 +- 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss index 579e82d..55118fa 100644 --- a/ruoyi-ui/src/assets/styles/ruoyi.scss +++ b/ruoyi-ui/src/assets/styles/ruoyi.scss @@ -176,12 +176,6 @@ color: #FFFFFF; } -/* submenu item */ -.el-menu--horizontal > .el-submenu .el-submenu__title { - height: 50px !important; - line-height: 50px !important; -} - /* text color */ .text-navy { color: #1ab394; diff --git a/ruoyi-ui/src/components/ThemePicker/index.vue b/ruoyi-ui/src/components/ThemePicker/index.vue index 9a77cd3..5c16ee4 100644 --- a/ruoyi-ui/src/components/ThemePicker/index.vue +++ b/ruoyi-ui/src/components/ThemePicker/index.vue @@ -35,7 +35,6 @@ export default { if (typeof val !== 'string') return const themeCluster = this.getThemeCluster(val.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) - console.log(themeCluster, originalCluster) const $message = this.$message({ message: ' Compiling the theme', diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue index c5e0e01..6f7b688 100644 --- a/ruoyi-ui/src/components/TopNav/index.vue +++ b/ruoyi-ui/src/components/TopNav/index.vue @@ -5,7 +5,7 @@ @select="handleSelect" > <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" /> {{ item.meta.title }}</el-menu-item > @@ -42,6 +42,9 @@ export default { }; }, computed: { + theme() { + return this.$store.state.settings.theme; + }, // 顶部显示菜单 topMenus() { let topMenus = []; @@ -149,7 +152,7 @@ export default { }; </script> -<style lang="scss" scoped> +<style lang="scss"> .el-menu--horizontal > .el-menu-item { float: left; height: 50px; @@ -162,7 +165,13 @@ export default { } .el-menu--horizontal > .el-menu-item.is-active { - border-bottom: 3px solid #409eff; + border-bottom: 3px solid #{'var(--theme)'}; color: #303133; } + +/* submenu item */ +.el-menu--horizontal > .el-submenu .el-submenu__title { + height: 50px !important; + line-height: 50px !important; +} </style> diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue index eba8139..efdc0fd 100644 --- a/ruoyi-ui/src/layout/components/Settings/index.vue +++ b/ruoyi-ui/src/layout/components/Settings/index.vue @@ -77,13 +77,11 @@ export default { components: { ThemePicker }, data() { return { + theme: this.$store.state.settings.theme, sideTheme: this.$store.state.settings.sideTheme }; }, computed: { - theme() { - return this.$store.state.settings.theme - }, fixedHeader: { get() { return this.$store.state.settings.fixedHeader @@ -138,6 +136,7 @@ export default { key: 'theme', value: val }) + this.theme = val; }, handleTheme(val) { this.$store.dispatch('settings/changeSetting', { @@ -161,7 +160,8 @@ export default { "tagsView":${this.tagsView}, "fixedHeader":${this.fixedHeader}, "sidebarLogo":${this.sidebarLogo}, - "sideTheme":"${this.sideTheme}" + "sideTheme":"${this.sideTheme}", + "theme":"${this.theme}" }` ); setTimeout(loading.close(), 1000) diff --git a/ruoyi-ui/src/store/modules/settings.js b/ruoyi-ui/src/store/modules/settings.js index 7192f1c..aeedaba 100644 --- a/ruoyi-ui/src/store/modules/settings.js +++ b/ruoyi-ui/src/store/modules/settings.js @@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' const state = { - theme: variables.theme, + theme: storageSetting.theme || variables.theme, sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,