700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 修改 elementui nav 下拉菜单内部样式

修改 elementui nav 下拉菜单内部样式

时间:2020-05-30 08:58:24

相关推荐

修改 elementui nav 下拉菜单内部样式

先上效果

我抽离出了一个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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。