Vue tab切换

原创 linyang 随笔 Vue 213阅读 2018-07-03 15:46:10 举报

```sass/scss

.tab {
margin-bottom: 10px;
&-title {
background: #fff;
height: 50px;
line-height: 50px;
padding-left: 15px;
box-sizing: border-box;
font-size: 15px;
color: #4d4d4d;
}
&-nav {
position: relative;
background-color: white;
list-style: none;
display: flex;
.item {
padding: 17px 0;
flex: 1;
text-align: center;
font-size: 15px;
line-height: 1;
color: #2f2f2f;
&:nth-child(2) {
&.on {
&:after {
left: 5%;
width: 90%;
}
}
}
&:nth-child(4) {
&.on {
&:after {
left: 10%;
width: 80%;
}
}
}
&.on {
color: #ce3533;
position: relative;
&:after {
content: '';
bottom: 0;
width: 60%;
left: 20%;
background: #ce3533;
height: 2px;
position: absolute;
}
}
}
&:before {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
content: '';
transform: scaleY(.5);
transform-origin: 0 100%;
border-bottom: 1px solid #e4e4e4;
}
}
.content {
background-color: white;
.link {
display: block;
padding: 18px 15px;
font-size: 14px;
color: #2f2f2f;
line-height: 1;
box-sizing: border-box;
}
}
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复