lixin-web/webapp/less/admin/nav.less

vue and bootstrap

.admin-nav{
  width: 220px;
  left: 0;
  height: 100%;
  &.el-menu{
    background: #fff;
    position: absolute;
  }
  & + div{
    margin-left: 220px;
    border-left:1px solid @gray-light;
    min-height: 700px;
    position: relative;
    padding-bottom: 40px;
    > .bg{
      position: absolute;
      left: 0;
      right: 0;
      top: 38px;
      bottom: 0;
      background: #fff;
      & + div{
        position: relative;
      }
    }
  }
  .el-submenu__title{
    [class^="imoon-"]{
      margin-right: 10px;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      text-align: center;
      line-height: 24px;

    }
  }
  .el-menu-item{
    padding-left: 55px!important;
  }
  .imoon-pay{
    font-size:18px;
    &:before{
      margin-left: 1px;
      margin-top: 1px;
    }
  }
}

.el-menu{
  .el-submenu{
    &:first-child{
      .el-submenu__title{
        border-top:none;
      }
    }
    .el-menu-item{
      height: 38px;
      line-height: 38px;
    }
  }
  .el-submenu .el-menu,.el-submenu__title:hover{
    background: transparent;
  }
  .el-submenu{
    .el-menu-item{
      &:hover{
        background: @admin-module-bg;

      }
      &.is-active{
        color: @text-color;
        background: @admin-module-bg;
      }
    }
    &.is-opened{
      .el-submenu__title{
        border-bottom-color:@gray-light!important;
      }
    }
  }
  .el-submenu__title{
    height: 38px;
    line-height: 37px;
    border-top:1px solid fade(@gray-light,75);
    border-bottom:1px solid transparent!important;
  }

}

.admin-nav-breadcrumb{
  background: fade(@admin-module-bg,80);
  padding-left: 10px;
  &:extend(.clearfix all);
  border-bottom:1px solid @gray-light;
  line-height: 37px;
  height: 38px;
  font-size:@font-size-medium;
  li{
    float: left;
    &:last-child{
      color: @link-color;
      &:not(:empty):before{
        content: '>';
        color: @text-color;
        margin: 0 5px;
      }
    }
  }
}