zoukankan      html  css  js  c++  java
  • 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样式穿透

  • 相关阅读:
    【SCOI 2011】 糖果
    【POJ 3159】 Candies
    【POJ 1716】 Integer Intervals
    【POJ 2983】 Is the information reliable?
    【POJ 1364】 King
    【POJ 1201】 Intervals
    【POJ 1804】 Brainman
    6月10日省中提高组题解
    【POJ 3352】 Road Construction
    【POJ 1144】 Network
  • 原文地址:https://www.cnblogs.com/em2464/p/14296616.html
Copyright © 2011-2022 走看看