mint-ui坑爹指南(vue)—— 顶部选项卡Navbar的自定义css样式使用方法

效果

html 

    

      
        我发布的
        我相关的
      
      
        
          
          

            

              

                5月总裁
                已结束
              
              

                发起人:
                程小
                2019.05.16 11:30 - 14:30
                

                第三会议室
              
              

                会议详情
                会议附件
                跟进事项
              
            
            

              返回新建
              确认提交
            
          
        
        
          
          

            

              

                5月总裁2
                已结束
              
              

                发起人:
                程小
                2019.05.16 11:30 - 14:30
                

                第三会议室
              
              

                会议详情
                会议附件
                跟进事项
              
            
            

              返回新建
              确认提交
            
          
        
      
    

 css

  .content {
    background: #efefef;
    padding: 0 30px 0 30px;
    .mint-navbar {
      background: #efefef;
      // 切换 顶部 tab
      .is-selected {
        border-bottom: none;
        color: #ffffff;
        margin-bottom: -0.04rem;
        .mint-tab-item-label {
          background: #3c86f1;
          color: #ffffff;
        }
      }
      .mint-tab-item {
        &:nth-child(1) {
          color: #3c86f1;
          .mint-tab-item-label {
            float: right;
            width: 344px;
            height: 70px;
            line-height: 70px;
            border-radius: 15px 0 0 15px;
            border-top: 2px solid rgba(60, 134, 241, 1);
            border-bottom: 2px solid rgba(60, 134, 241, 1);
            border-left: 2px solid rgba(60, 134, 241, 1);
          }
        }
        &:nth-child(2) {
          color: #3c86f1;
          .mint-tab-item-label {
            float: left;
            width: 344px;
            height: 70px;
            line-height: 70px;
            border-top: 2px solid rgba(60, 134, 241, 1);
            border-bottom: 2px solid rgba(60, 134, 241, 1);
            border-right: 2px solid rgba(60, 134, 241, 1);
            border-radius: 0 15px 15px 0;
          }
        }
      }
    }
  }