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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM