| | |
| | | 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;
|
| | |
| | | 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',
|
| | |
| | | @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 |
| | | > |
| | |
| | | }; |
| | | }, |
| | | computed: { |
| | | theme() { |
| | | return this.$store.state.settings.theme; |
| | | }, |
| | | // 顶部显示菜单 |
| | | topMenus() { |
| | | let topMenus = []; |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | <style lang="scss"> |
| | | .el-menu--horizontal > .el-menu-item { |
| | | float: left; |
| | | height: 50px; |
| | |
| | | } |
| | | |
| | | .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> |
| | |
| | | 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
|
| | |
| | | key: 'theme',
|
| | | value: val
|
| | | })
|
| | | this.theme = val;
|
| | | },
|
| | | handleTheme(val) {
|
| | | this.$store.dispatch('settings/changeSetting', {
|
| | |
| | | "tagsView":${this.tagsView},
|
| | | "fixedHeader":${this.fixedHeader},
|
| | | "sidebarLogo":${this.sidebarLogo},
|
| | | "sideTheme":"${this.sideTheme}"
|
| | | "sideTheme":"${this.sideTheme}",
|
| | | "theme":"${this.theme}"
|
| | | }`
|
| | | );
|
| | | setTimeout(loading.close(), 1000)
|
| | |
| | |
|
| | | 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,
|