先上效果
我抽离出了一个scss 文件,如下:
自己动手,把$xxx 变量改成自己对应的就行
<style lang="scss">// 修改弹出层激活的样式.el-menu--popup > div:has(.is-active){background-color: $subColor !important;border-left: 2px solid #ed1c24 !important;}// 修改弹出层hover样式.el-menu--popup > div:has(.el-menu-item) :hover{background-color: $subColor !important;border-left: 2px solid #ed1c24 !important;color: $menuActiveText !important;}// 添加虚线.el-menu--popup> div {border-bottom: 1px dashed rgba(201, 211, 213, 0.7) !important;}// 修改element菜单的样式.el-menu {border: none;height: 100%;width: 100%;background-color: $menuBg !important;/**配色 */.el-menu-item {background-color: $menuBg !important;color: $menuText !important;&:hover {background-color: $subColor !important;border-left: 2px solid #ed1c24 !important;color: $menuActiveText !important;}&.is-active {background-color: $subColor !important;border-left: 2px solid #ed1c24 !important;color: $menuActiveText !important;}}.el-submenu__title {background-color: $menuBg !important;&:hover {background-color: $subColor !important;border-left: 2px solid #ed1c24;color: $menuActiveText !important;}}.el-submenu.is-active > .el-submenu__title {color: $menuText !important;&:hover,&:hover > i {color: $menuActiveText !important;}}// 一级菜单加上横向实线,二级菜单虚线.submenu-title-noDropdown,.el-submenu__title {border-bottom: 1px solid rgba(201, 211, 213, 0.3) !important;}// 二级菜单添加虚线.el-menu--inline > div {border-bottom: 1px dashed rgba(201, 211, 213, 0.7) !important;}}</style>