cip-components/main/cip-main-nav/index.less

// 水平模式时高度强制设置为100%
.@{elNamespace}-menu--horizontal.@{elNamespace}-menu.cip-main-nav{
  height: 100%;
}
.cip-main-nav.@{elNamespace}-menu, .cip-menu-popper{
  border:none;
  .cip-menu__title{
    flex-grow: 2;
  }
  // 展开后父菜单徽标消失
  .@{elNamespace}-sub-menu.is-opened{
    > .@{elNamespace}-sub-menu__title {
      .cip-menu__badge {
        visibility: hidden;
      }
    }
  }
  .@{elNamespace}-menu-item{ // 与el-sub-menu的表现不同在收缩时会套一个el-popper导致无法正常居中
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: normal;
    .cip-menu__badge{
      margin-left:8px;
    }
    [class~=iconfont], [class^=el-icon-], .cip-svg-icon, > svg, .@{elNamespace}-menu-tooltip__trigger > svg{
      width: 15px;
      height: 15px;
      margin-right: 5px;
      text-align: center;
      font-size: var(--el-menu-item-font-size);
      vertical-align: middle;
      overflow: visible;
      & ~ .cip-menu__title {
        margin-left: 10px;
      }
    }
  }
  .@{elNamespace}-sub-menu__title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: normal;
    .cip-menu__badge{
      margin: 0 16px 0 8px;
    }
    [class~=iconfont], [class^=el-icon-], .cip-svg-icon, > svg{
      width: 15px;
      height: 15px;
      margin-right: 5px;
      text-align: center;
      font-size: var(--el-menu-item-font-size);
      vertical-align: middle;
      overflow: visible;
      & ~ .cip-menu__title {
        margin-left: 10px;
      }
    }
  }
  .@{elNamespace}-sub-menu{
    [class~=iconfont], [class^=el-icon-], .cip-svg-icon{
      text-align: center;
      font-size: var(--el-menu-item-font-size);
      //vertical-align: middle;
    }
  }
}

.cip-menu-popper{
  .@{elNamespace}-menu-item,.@{elNamespace}-sub-menu__title{
    .cip-menu__badge{
      flex-shrink: 0;
      margin: 0 8px 0 8px;
    }
  }
}
.cip-main-nav.@{elNamespace}-menu--collapse{
  .@{elNamespace}-menu-item{
    line-height: var(--el-menu-item-height);
  }
}