@import "mixins"; :root { --el-menu-item-height: 42px; --el-menu-sub-item-height: 42px; --el-menu-hover-bg-color: transparent; } .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-sub-menu__title { //--el-menu-horizontal-sub-item-height: 42px; height: 42px; line-height: 42px; .le-pick-icon { font-size: 18px; margin-right: 4px; } } $active_color: var(--el-menu-active-color); // 公用的 菜单样式 .layout-menu-wrap, .layout-menu-popper-wrap, .layout-wrap--columns { // 折叠情况 &.el-menu--collapse { .le-pick-icon { margin-right: 0; } // 折叠后无子菜单 样式类 .el-menu-tooltip__trigger { justify-content: center; } } .le-pick-icon { margin-right: 4px; font-size: 18px; } .el-sub-menu { &.is-active { & > .el-sub-menu__title { //color: var(--el-menu-active-color); color: $active_color; } } } .el-menu-item, .el-sub-menu__title { margin-top: 5px; } .el-menu-item.is-active { color: $active_color; &::before { background-color: $active_color; } } .el-menu-item:hover { &::before { background-color: $active_color; } } .el-sub-menu__title:hover { &::before { background-color: $active_color; } } .el-menu-item, .el-sub-menu__title { @include hover-bg-opacity(8px, $active_color); } } // 菜单折叠情况: // 由于 vertical collapsed 出现样式问题 进行隐藏 .layout-menu-popper-wrap.el-menu--vertical, .layout-menu-popper-wrap.el-menu--horizontal { // el-menu--horizontal: layout-top 模式 // el-menu--vertical: layout-vertical 模式 & > .el-menu { /*.svg-icon { margin-right: 16px; }*/ } // 子菜单太长时出现滚动条 > .el-menu--popup { max-height: 60vh; overflow-y: auto; &::-webkit-scrollbar{width:2px;height:2px} &::-webkit-scrollbar-track{border-radius:2px;background: $le-bg-color_1;} & > li:first-child { margin-top: 0; } } }