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样式穿透

posted @ 2021-01-19 10:33  聂小恶  阅读(15164)  评论(0编辑  收藏  举报