From b8372600430a475e06b3cc595fd7e9c350fd7b9a Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Wed, 2 Sep 2020 12:34:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/asset/style/element-ui.scss | 32 ++++++++++ vue/src/asset/style/index.scss | 10 ++-- vue/src/asset/style/variables.scss | 31 +++++----- vue/src/component/ContextMenu/index.vue | 2 +- vue/src/layout/component/Aside/index.vue | 1 + vue/src/layout/component/Aside/style.scss | 73 ++++++++--------------- 6 files changed, 81 insertions(+), 68 deletions(-) diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss index cca84a5..61eba47 100644 --- a/vue/src/asset/style/element-ui.scss +++ b/vue/src/asset/style/element-ui.scss @@ -93,6 +93,38 @@ color: $--color-primary; } +.el-menu { + border: none; + height: 100%; + width: 100%; + + &::-webkit-scrollbar { + width: 0; + } + + .icon { + margin-right: 16px; + } + + //子级菜单激活时，父级同样高亮 + .el-menu-item.is-active, + .is-active > .el-submenu__title { + color: $--color-primary !important; + } + + //箭头图标与字体同色 + .el-submenu__title i { + color: inherit; + } + + //弹出菜单 + &.el-menu--popup { + max-height: 88vh; + margin-bottom: 0.5vh; + overflow-y: overlay; + } +} + .el-message { @include deep-shadow; @include max-mobile-width; diff --git a/vue/src/asset/style/index.scss b/vue/src/asset/style/index.scss index 0209eca..947b032 100644 --- a/vue/src/asset/style/index.scss +++ b/vue/src/asset/style/index.scss @@ -1,10 +1,10 @@ -@import "variables"; +@import "./variables"; @import "~element-ui/packages/theme-chalk/src/index"; -@import 'display'; -@import "transition"; -@import "element-ui"; @import "~@ele/style/index.scss"; -@import "nprogress"; +@import "./element-ui"; +@import './display'; +@import "./transition"; +@import "./nprogress"; body { height: 100%; diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss index 4e2e964..c83d939 100644 --- a/vue/src/asset/style/variables.scss +++ b/vue/src/asset/style/variables.scss @@ -5,6 +5,12 @@ $--color-warning: #FF5722; $--color-danger: #F44336; $--color-info: #009688; +//覆盖el-menu的hover背景颜色 +$--menu-item-hover-fill: none; + +//引入element的scss时需要覆盖字体路径 +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + @mixin clearfix { &::after { visibility: hidden; @@ -26,19 +32,19 @@ $--color-info: #009688; } } -//el-sub-menu的背景色 -$sub-menu-background: #1f2d3d; -//覆盖el-menu的背景色 -$--menu-background-color: #304156; -//覆盖el-menu的文字颜色 -$--menu-item-font-color: hsla(0, 0%, 99.6%, .65); -//el-menu的文字hover颜色 -$--menu-item-hover-color: #fefefe; -//覆盖el-menu的文字hover背景颜色 -$--menu-item-hover-fill: none; +//侧边菜单icon的大小 +$aside-icon-size: 16px; +//侧边栏菜单的背景色 +$aside-menu-background: #304156; +//侧边栏子菜单的背景色 +$aside-sub-menu-background: #1f2d3d; +//侧边栏菜单文字的颜色 +$aside-menu-item-color: hsla(0, 0%, 99.6%, .65); +//侧边栏菜单文字的hover颜色 +$aside-menu-item-hover-color: #fefefe; //侧边栏宽度 -$side-bar-width: 208px; +$aside-width: 208px; //头部导航栏高度 $nav-height: 50px; //头部多页签栏高度 @@ -47,9 +53,6 @@ $tags-view-height: 40px; //路由页面的margin $page-view-margin: 15px; -//引入element的scss时需要覆盖字体路径 -$--font-path: '~element-ui/lib/theme-chalk/fonts'; - // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { diff --git a/vue/src/component/ContextMenu/index.vue b/vue/src/component/ContextMenu/index.vue index 955346e..888800f 100644 --- a/vue/src/component/ContextMenu/index.vue +++ b/vue/src/component/ContextMenu/index.vue @@ -67,7 +67,7 @@ export default { .contextmenu { margin: 0; - background: $--menu-background-color; + background: $aside-menu-background; z-index: 10; position: absolute; list-style-type: none; diff --git a/vue/src/layout/component/Aside/index.vue b/vue/src/layout/component/Aside/index.vue index 16fe181..ba2081d 100644 --- a/vue/src/layout/component/Aside/index.vue +++ b/vue/src/layout/component/Aside/index.vue @@ -57,6 +57,7 @@ export default { asideClass() { return { 'aside': true, + 'el-menu--vertical': true, 'mobile': this.device === 'mobile', 'collapse': this.collapse, 'hide': this.hideSidebar diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/layout/component/Aside/style.scss index 2e273a3..4e65f8b 100644 --- a/vue/src/layout/component/Aside/style.scss +++ b/vue/src/layout/component/Aside/style.scss @@ -1,12 +1,11 @@ @import "~@/asset/style/variables.scss"; -$iconSize: 16px; - +//侧边栏 .aside { display: flex; flex-direction: column; - width: $side-bar-width; - background-color: $--menu-background-color; + width: $aside-width; + background-color: $aside-menu-background; font-size: 0; flex-shrink: 0; height: 100vh; @@ -19,20 +18,20 @@ $iconSize: 16px; position: fixed; } - //折叠设置 + //折叠状态 &.collapse { - width: $iconSize + 20px * 2; + width: $aside-icon-size + 20px * 2; .sidebar-item-content { display: none; } } - //自动隐藏 + //隐藏状态 &.hide { width: 0; pointer-events: none; - transform: translateX(-$side-bar-width); + transform: translateX(-$aside-width); } .sidebar-logo-container { @@ -81,37 +80,25 @@ $iconSize: 16px; } } -.el-menu { - border: none; - height: 100%; - width: 100%; +//垂直菜单 +.el-menu--vertical .el-menu { + background-color: $aside-menu-background; overflow-y: auto; - &::-webkit-scrollbar { - width: 0; - } + //菜单的文字以及hover颜色 + .el-menu-item, + .el-submenu__title { + color: $aside-menu-item-color; - .icon { - margin-right: 16px; - } - - //菜单hover - .el-menu-item:hover, - .el-submenu__title:hover { - color: $--menu-item-hover-color; - - } - - //子级菜单激活时，父级同样高亮 - .el-menu-item.is-active, - .is-active > .el-submenu__title { - color: $--color-primary !important; + &:hover { + color: $aside-menu-item-hover-color; + } } //子级菜单的背景颜色 &.el-menu--inline, .el-submenu .el-submenu > .el-submenu__title { - background-color: $sub-menu-background; + background-color: $aside-sub-menu-background; } //子级菜单内阴影 @@ -119,26 +106,16 @@ $iconSize: 16px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45) } - //箭头图标与字体同色 - .el-submenu__title i { - color: inherit; - } - - //折叠时的弹出菜单 - &.el-menu--popup { - max-height: 88vh; - margin-bottom: 0.5vh; - overflow-y: overlay; - - .popover-menu__title { - cursor: auto; - color: $--menu-item-hover-color; - text-align: center; - border-bottom: 1px solid $sub-menu-background; - } + //设置了显示弹出菜单的父级 + &.el-menu--popup .popover-menu__title { + cursor: auto; + color: $aside-menu-item-hover-color; + text-align: center; + border-bottom: 1px solid $aside-sub-menu-background; } } +//移动端侧边栏展开时的遮罩 .aside-hidden-mask { background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px);