diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss index e0783d5..54aa635 100644 --- a/vue/src/asset/style/element-ui.scss +++ b/vue/src/asset/style/element-ui.scss @@ -102,18 +102,6 @@ display: none; } - .el-menu-item, - .el-submenu__title { - //文字超出截断 - > span { - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - word-break: break-all; - } - } - //子级菜单激活时,父级同样高亮 .el-menu-item.is-active, .is-active > .el-submenu__title { @@ -136,7 +124,7 @@ min-width: 160px; padding: 0; margin-bottom: 0.5vh; - overflow-y: overlay; + overflow-y: auto; .el-menu-item, .el-submenu__title { diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss index 80fe713..3badceb 100644 --- a/vue/src/asset/style/variables.scss +++ b/vue/src/asset/style/variables.scss @@ -61,7 +61,7 @@ $menu-padding: $menu-icon-size + $menu-icon-text-gap; //暗色菜单的背景色 $menu-dark-background: #304156; //暗色子级菜单的背景色 -$sub-menu-dark-background: #1f2d3d; +$sub-menu-dark-background: darken($menu-dark-background, 5%); //暗色主菜单的背景色(用于双层侧边栏的主菜单和顶部导航栏) $root-menu-dark-background: #001529; //亮色菜单的文字颜色 @@ -86,10 +86,10 @@ $navbar-padding-left: 12px; $navbar-item-light-color: $menu-text-light-color; //暗色导航栏的功能项颜色 $navbar-item-dark-color: rgba(255, 255, 255, .85); -//亮色导航栏的功能项hover颜色 +//亮色导航栏的功能项hover背景颜色 $navbar-item-hover-light-color: rgba(255, 255, 255, .85); -//暗色导航栏的功能项hover颜色 -$navbar-item-hover-dark-color: #0f2438; +//暗色导航栏的功能项hover背景颜色 +$navbar-item-hover-dark-color: lighten($root-menu-dark-background, 5%); //多页签栏高度 $tags-view-height: 32px; diff --git a/vue/src/component/menu/NavMenu/style.scss b/vue/src/component/menu/NavMenu/style.scss index b6f9126..f448f63 100644 --- a/vue/src/component/menu/NavMenu/style.scss +++ b/vue/src/component/menu/NavMenu/style.scss @@ -46,13 +46,14 @@ &.el-menu, .el-menu { - //菜单的文字以及hover颜色 + //菜单文字 .el-menu-item, .el-submenu__title { - //菜单文字的最大宽度 > .menu-item-content { + text-overflow: ellipsis; + overflow: hidden; //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度 - max-width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px; + width: $aside-width - $menu-padding * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px; } } diff --git a/vue/src/component/menu/NavMenu/theme-dark.scss b/vue/src/component/menu/NavMenu/theme-dark.scss index 75262dc..8a68da8 100644 --- a/vue/src/component/menu/NavMenu/theme-dark.scss +++ b/vue/src/component/menu/NavMenu/theme-dark.scss @@ -16,14 +16,13 @@ } //子级菜单的背景颜色 - &.el-menu--inline, - .el-submenu .el-submenu > .el-submenu__title { + &.el-menu--inline { background-color: $sub-menu-dark-background; } //子级菜单内阴影 &.el-menu--inline { - box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45) + box-shadow: inset 0 2px 8px darken($sub-menu-dark-background, 10%) } //设置了显示弹出菜单的父级