mint ui tab html,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;

}

}

}

}

}