uniapp自定义选项卡

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