element ui el-menu样式调整
目的:修改hover和active的背景样式,层级对齐(padding,注释的部分)
::v-deep.el-menu { background-color: transparent; .el-menu-item { color: #ffffff; // padding-left: 20px !important; height: 40px; margin: 8px; border-radius: 4px; line-height: 40px; i { color: #ffffff; } } .el-menu-item:hover, .el-menu-item:focus { background-color: transparent; background-image: url("../../../assets/img/menu_bg.png"); background-position: center; // linear-gradient( // to bottom right, // #6691ff, // #6269fc, // #6269fc // ); } .el-menu-item.is-active { color: #ffffff; } .el-submenu__title i { color: #ffffff; } .el-menu-item-group { .el-menu-item-group__title { color: #ffffff; // padding-left: 30px !important; } } .el-submenu { .el-submenu__title { padding-left: 30px !important; &:hover { background-color: transparent; background-image: url("../../../assets/img/menu_bg.png"); background-position: center; } } .el-menu-item { min-width: 180px; // padding-left: 20px !important; } } }
::v-deep样式穿透