caimei-applets-caimei/pages/seller/notice/components/notice-server-tab.vue

<template>
    <view class="tabList">
        <view
            v-for="item in tabList"
            :key="item.type"
            class="tab"
            @click="changeAct(item)"
            :class="activeLink === item.type ? 'active' : ''"
        >
            {{ item.value }}
        </view>
    </view>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: () => ''
        }
    },
    data() {
        return {
            tabList: [
                {
                    type: '',
                    value: '机构访问通知'
                },
                {
                    type: '1',
                    value: '内容库访问通知'
                }
            ],
            activeLink: ''
        }
    },
    methods: {
        changeAct(item) {
            this.activeLink = item.type
            this.$emit('input', this.activeLink)
        }
    }
}
</script>

<style scoped lang="scss">
.tabList {
    display: flex;
    position: sticky;
    top: 0;
    left: 24rpx;
    align-items: center;
    z-index: 999;
    .tab {
        background-color: #fff;
        white-space: nowrap;
        text-align: center;
        flex: 1;
        padding: 10rpx;
        margin-bottom: 24rpx;
        font-size: 28rpx;
        font-weight: bold;
        box-sizing: border-box;
        &.active {
            color: #ff5800;
            border-color: 1px solid #ff5800;
        }
    }
}
</style>