mint-ui坑爹指南(vue)—— 顶部选项卡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;
          }
        }
      }
    }
  }