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

html 

 
 

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="content">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     <mt-navbar class="page-part" v-model="selected">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <mt-tab-item class="my" id="1">我发布的
     
     </mt-tab-item>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <mt-tab-item id="2">我相关的
     
     </mt-tab-item>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     </mt-navbar>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     <mt-tab-container v-model="selected">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <mt-tab-container-item id="1">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     <!-- <mt-cell :key="n" v-for="n in 10" :title="'内容 ' + n"/> -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     <div class="myRelease">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     <div class="myReleaseOne">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="top">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>5月总裁
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>已结束
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="middle">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>发起人:
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>程小
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>2019.05.16 11:30 - 14:30
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <br>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>第三会议室
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="bottom">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span @click="this.releaseDetails">会议详情
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span @click="this.releaseAttachment">会议附件
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span @click="this.fellowIssues">跟进事项
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     <div class="btn">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <mt-button type="default" size="large">返回新建
     
     </mt-button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <mt-button type="default" size="large">确认提交
     
     </mt-button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     </mt-tab-container-item>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <mt-tab-container-item id="2">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     <!-- <mt-cell :key="n" v-for="n in 4" :title="'测试 ' + n"/> -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     <div class="myRelease">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     <div class="myReleaseOne">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="top">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>5月总裁2
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>已结束
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="middle">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>发起人:
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>程小
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>2019.05.16 11:30 - 14:30
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <br>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>第三会议室
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <div class="bottom">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span @click="this.correlationDetails">会议详情
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>会议附件
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     <span>跟进事项
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     <div class="btn">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <mt-button type="default" size="large">返回新建
     
     </mt-button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
              
     
     <mt-button type="default" size="large">确认提交
     
     </mt-button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
          
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     </mt-tab-container-item>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
      
     
     </mt-tab-container>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     </div>
    
    
   
   
 
 

 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;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
               }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
           }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }