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

  • 相关阅读:
    全文本的检索
    网卡配置
    linux解压命令
    Session
    swoole安装
    Linux 系统磁盘满处理方法
    php写入和读取文件内容
    PHP读取文件夹的文件列表
    php 公历农历互相转换
    PHP实现RESTful风格的API实例
  • 原文地址:https://www.cnblogs.com/em2464/p/14296616.html
Copyright © 2011-2022 走看看