| src/layout/components/Settings/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/layout/components/Sidebar/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/layout/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/settings.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/store/modules/settings.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/styles/sidebar.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/styles/variables.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/layout/components/Settings/index.vue
@@ -26,8 +26,20 @@ style="display: block" :active-color="$store.state.settings.theme" inactive-color="#ccc" active-text="横屏" inactive-text="竖屏" active-text="横向" inactive-text="竖向" /> </div> <div class="drawer-item" style="display: flex;justify-content: space-between"> <span>左侧颜色</span> <el-switch v-model="$store.state.settings.leftBackgroundColorValue" style="display: block" active-color="#304156" :disabled="$store.state.settings.menuIsHorizontal" inactive-color="#ccc" active-text="深色" inactive-text="浅色" /> </div>
@@ -3,14 +3,15 @@ <logo v-if="showLogo" :collapse="isCollapse" /> <div v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal" class="layoutLogo" /> <div v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal" :class="{'leftBackgroundColorValue':$store.state.settings.leftBackgroundColorValue}" class="layoutLogo" /> <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbarWrapperClass"> <el-menu v-if="!$store.state.settings.menuIsHorizontal" :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :background-color="$store.state.settings.leftBackgroundColorValue?'#f8f8fa':variables.menuBg" :text-color="$store.state.settings.leftBackgroundColorValue?`rgb(48, 65, 86,0.8)`:variables.menuText" :active-text-color="variables.menuActiveText" :collapse-transition="false" :unique-opened="false" @@ -107,6 +108,9 @@ height: 90px; background: url("../../../assets/images/layout_logo.png") no-repeat; } .leftBackgroundColorValue{ background-color: #e0e0e0; } .scrollbarWrapperClass { margin-top: 90px; @@ -120,7 +124,6 @@ .el-button--text:focus { color: white; } //#app .sidebar-container .el-submenu .el-menu-item { @@ -167,7 +170,7 @@ cursor: default; } .el-menu { background-color: #213145 !important; } //.el-menu { // background-color: #213145 !important; //} </style> src/layout/index.vue
@@ -1,19 +1,23 @@ <template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <sidebar :class="$store.state.settings.menuIsHorizontal?'sidebar-container-sideBarWidthIsMenuHorizontal':'sidebar-container'" :class="$store.state.settings.menuIsHorizontal? 'sidebar-container-sideBarWidthIsMenuHorizontal': $store.state.settings.leftBackgroundColorValue? 'sidebar-container-leftBackgroundColorValue': 'sidebar-container'" /> <div :class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'" > <div :class="{'fixed-header':fixedHeader}"> <navbar /> <tags-view v-if="needTagsView" /> <navbar/> <tags-view v-if="needTagsView"/> </div> <app-main /> <app-main/> <right-panel v-if="showSettings"> <settings /> <settings/> </right-panel> </div> </div> src/settings.js
@@ -28,6 +28,8 @@ headBackgroundColorValue: false, // 头部背景颜色 menuIsHorizontal: true// 菜单是否是横屏 menuIsHorizontal: false, // 菜单是否是横屏 leftBackgroundColorValue: false// 左侧栏背景颜色 } src/store/modules/settings.js
@@ -1,9 +1,18 @@ import defaultSettings from '@/settings' import variables from '@/styles/element-variables.scss' const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue, menuIsHorizontal } = defaultSettings const { showSettings, tagsView, fixedHeader, sidebarLogo, headBackgroundColorValue, menuIsHorizontal, leftBackgroundColorValue } = defaultSettings const state = { leftBackgroundColorValue: leftBackgroundColorValue,//左边背景颜色 headBackgroundColorValue: headBackgroundColorValue, // 头部背景颜色 menuIsHorizontal: menuIsHorizontal, // 菜单是否是横屏 theme: variables.theme, src/styles/sidebar.scss
@@ -73,7 +73,7 @@ border: none; height: 100%; width: 100% !important; } } // menu hover .submenu-title-noDropdown, @@ -83,11 +83,11 @@ } } .is-active>.el-submenu__title { .is-active > .el-submenu__title { color: $subMenuActiveText !important; } & .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { min-width: $sideBarWidth !important; background-color: $subMenuBg !important; @@ -97,6 +97,95 @@ } } } .sidebar-container-leftBackgroundColorValue { transition: width 0.28s; width: $sideBarWidth !important; background-color: $menuBgLeftBackgroundColorValue; height: 100%; position: fixed; font-size: 0px; top: 0; bottom: 0; left: 0; z-index: 1001; overflow: hidden; // reset element-ui css .horizontal-collapse-transition { transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; } .scrollbar-wrapper { overflow-x: hidden !important; } .el-scrollbar__bar.is-vertical { right: 0px; } .el-scrollbar { height: 100%; } &.has-logo { .el-scrollbar { height: calc(100% - 50px); } } .is-horizontal { display: none; } a { display: inline-block; width: 100%; overflow: hidden; } .svg-icon { margin-right: 16px; } .sub-el-icon { margin-right: 12px; margin-left: -2px; } .el-menu { border: none; height: 100%; width: 100% !important; } // menu hover .submenu-title-noDropdown, .el-submenu__title { &:hover { //background-color: $menuHover !important; background-color: #eee !important; } } .is-active > .el-submenu__title { //color: $subMenuActiveText !important; color: #000 !important; } & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { min-width: $sideBarWidth !important; background-color: #f8f8fa !important; &:hover { //background-color: $subMenuHover !important; background-color: #eee !important; } } } .sidebar-container-sideBarWidthIsMenuHorizontal { transition: width 0.28s; @@ -167,11 +256,11 @@ } } .is-active>.el-submenu__title { .is-active > .el-submenu__title { color: $subMenuActiveText !important; } & .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu > .el-submenu__title, & .el-submenu .el-menu-item { min-width: $sideBarWidth !important; background-color: $subMenuBg !important; @@ -211,7 +300,7 @@ .el-submenu { overflow: hidden; &>.el-submenu__title { & > .el-submenu__title { padding: 0 !important; .svg-icon { @@ -230,8 +319,8 @@ .el-menu--collapse { .el-submenu { &>.el-submenu__title { &>span { & > .el-submenu__title { & > span { height: 0; width: 0; overflow: hidden; @@ -278,17 +367,18 @@ // when menu collapsed .el-menu--vertical { &>.el-menu { & > .el-menu { .svg-icon { margin-right: 16px; } .sub-el-icon { margin-right: 12px; margin-left: -2px; } } .nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu > .el-submenu__title, .el-menu-item { &:hover { // you can use $subMenuHover @@ -297,7 +387,7 @@ } // the scroll bar appears when the subMenu is too long >.el-menu--popup { > .el-menu--popup { max-height: 100vh; overflow-y: auto;
@@ -13,6 +13,9 @@ $sideBarWidthIsMenuHorizontal: 0; //当菜单横屏时的侧边栏高度 $menuBgLeftBackgroundColorValue: #f8f8fa; //当菜单横屏时的侧边栏高度 // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { @@ -25,4 +28,5 @@ subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; sideBarWidthIsMenuHorizontal:$sideBarWidthIsMenuHorizontal; menuBgLeftBackgroundColorValue:$menuBgLeftBackgroundColorValue; }
