<view class="tab-control">
<view class="tab-control-box">
<view class="tab-control-box-top">
<view class="tab-control-item"
v-for="(item, index) in tabData"
:key="item.type"
:class="{'active-tab': index == activeIndex}"
@click="activeIndex = index"
>
{{ item.name }}
</view>
</view>
</view>
</view>
样式
.issue-main {
.tab-control {
background: #FC5041;
padding: 20rpx;
height: 360rpx;
background: linear-gradient(-30deg, transparent 50rpx, #FC5041 0) right,
linear-gradient( 30deg, transparent 50rpx, #FC5041 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
.tab-control-box {
width: 100%;
height: 420rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.tab-control-box-top {
width: 100%;
display: flex;
background: #FD7367;
color: #FFFFFF;
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: relative;
z-index: 1;
.tab-control-item {
width: 25%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
}
}
}
}
}
.active-tab {
background: #fff;
color: #FC5041;
font-weight: bold;
border-radius: 20rpx 20rpx 0rpx 0rpx;
height: 80rpx !important;
line-height: 100rpx !important;
transform: translateY(-10rpx);
&::before {
content: '';
position: absolute;
bottom: -20rpx;
left: 0;
width: 100%;
height: 20rpx;
background: inherit; /* 继承父元素背景 */
z-index: -1;
}
}
