diff --git a/yudao-ui-admin/src/assets/styles/sidebar.scss b/yudao-ui-admin/src/assets/styles/sidebar.scss index 2f368c3dd..d2a7453f3 100644 --- a/yudao-ui-admin/src/assets/styles/sidebar.scss +++ b/yudao-ui-admin/src/assets/styles/sidebar.scss @@ -3,15 +3,15 @@ .main-container { min-height: 100%; transition: margin-left .28s; - margin-left: $sideBarWidth; + margin-left: $base-sidebar-width; position: relative; } .sidebar-container { -webkit-transition: width .28s; transition: width 0.28s; - width: $sideBarWidth !important; - background-color: $menuBg; + width: $base-sidebar-width !important; + background-color: $base-menu-background; height: 100%; position: fixed; font-size: 0px; @@ -81,12 +81,12 @@ } & .theme-dark .is-active > .el-submenu__title { - color: $subMenuActiveText !important; + color: $base-menu-color-active !important; } & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { - min-width: $sideBarWidth !important; + min-width: $base-sidebar-width !important; &:hover { background-color: rgba(0, 0, 0, 0.06) !important; @@ -95,10 +95,10 @@ & .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .el-submenu .el-menu-item { - background-color: $subMenuBg !important; + background-color: $base-sub-menu-background !important; &:hover { - background-color: $subMenuHover !important; + background-color: $base-sub-menu-hover !important; } } } @@ -154,7 +154,7 @@ } .el-menu--collapse .el-menu .el-submenu { - min-width: $sideBarWidth !important; + min-width: $base-sidebar-width !important; } // mobile responsive @@ -165,14 +165,14 @@ .sidebar-container { transition: transform .28s; - width: $sideBarWidth !important; + width: $base-sidebar-width !important; } &.hideSidebar { .sidebar-container { pointer-events: none; transition-duration: 0.3s; - transform: translate3d(-$sideBarWidth, 0, 0); + transform: translate3d(-$base-sidebar-width, 0, 0); } } } diff --git a/yudao-ui-admin/src/assets/styles/variables.scss b/yudao-ui-admin/src/assets/styles/variables.scss index 452a1ece0..34484d47e 100644 --- a/yudao-ui-admin/src/assets/styles/variables.scss +++ b/yudao-ui-admin/src/assets/styles/variables.scss @@ -8,37 +8,47 @@ $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; -// sidebar -$menuText:#bfcbd9; -$menuActiveText:#409EFF; -$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 +// 默认菜单主题风格 +$base-menu-color:#bfcbd9; +$base-menu-color-active:#f4f4f5; +$base-menu-background:#304156; +$base-logo-title-color: #ffffff; -$menuBg:#304156; -$menuHover:#263445; -$sidebarTitle: #ffffff; +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; -$menuLightBg:#ffffff; -$menuLightHover:#f0f1f5; -$sidebarLightTitle: #001529; +$base-sub-menu-background:#1f2d3d; +$base-sub-menu-hover:#001528; -$subMenuBg:#1f2d3d; -$subMenuHover:#001528; +// 自定义暗色菜单风格 +/** +$base-menu-color:hsla(0,0%,100%,.65); +$base-menu-color-active:#fff; +$base-menu-background:#001529; +$base-logo-title-color: #ffffff; -$sideBarWidth: 200px; +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background:#000c17; +$base-sub-menu-hover:#001528; +*/ + +$base-sidebar-width: 200px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { - menuText: $menuText; - menuActiveText: $menuActiveText; - subMenuActiveText: $subMenuActiveText; - menuBg: $menuBg; - menuHover: $menuHover; - menuLightBg: $menuLightBg; - menuLightHover: $menuLightHover; - subMenuBg: $subMenuBg; - subMenuHover: $subMenuHover; - sideBarWidth: $sideBarWidth; - sidebarTitle: $sidebarTitle; - sidebarLightTitle: $sidebarLightTitle + menuColor: $base-menu-color; + menuLightColor: $base-menu-light-color; + menuColorActive: $base-menu-color-active; + menuBackground: $base-menu-background; + menuLightBackground: $base-menu-light-background; + subMenuBackground: $base-sub-menu-background; + subMenuHover: $base-sub-menu-hover; + sideBarWidth: $base-sidebar-width; + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: $base-logo-light-title-color } diff --git a/yudao-ui-admin/src/layout/components/Sidebar/Logo.vue b/yudao-ui-admin/src/layout/components/Sidebar/Logo.vue index 2c081d740..5a0cb5d85 100644 --- a/yudao-ui-admin/src/layout/components/Sidebar/Logo.vue +++ b/yudao-ui-admin/src/layout/components/Sidebar/Logo.vue @@ -1,13 +1,13 @@