uniapp 选项卡 好改

<template>
    <view>
        <view class="content">
            <block v-for="(item,index) in items" :key="index">
                <view :class="['default',subscript== index?'subscript':'']" @click="subscript=index">{{item}}</view>
            </block>
        </view>
        <view class="" v-show="subscript == 0">
            我是选项卡一
        </view>
        <view class="" v-show="subscript == 1">
            我是选项卡二
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                subscript: 0,
                items: ['选项卡一', '选项卡二']
            }
        },
    }
</script>

<style>
    .content {
        background-color: #FFFFFF;
        height: 100upx;
        display: flex;
    }

    .default {
        font-size: 32upx;
        flex: 1;
        text-align: center;
        color: #666666;
        height: 100upx;
        line-height: 100upx;
        position: relative;
    }

    .subscript {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #4DB046;
    }

    .subscript:after {
        content: '';
        position: absolute;
        bottom: -2rpx;
        top: auto;
        left: 42%;
        height: 6rpx;
        width: 44rpx;
        background-color: #4DB046;
    }

</style>