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; } } } } }