yihuo/components/spike-tabbar.vue

<template>
    <view class="tabs">
        <view class="flex-align marginL14">
            <view v-for="(item) in tabs" :key="item.label" class="tab marginR12" @click="clickTab(item)">
                <image :src="tab === item.label ? resource.spike_active : resource.spike_tab" class="image" />
                {{item.value}}
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
export default{
    data() {
        return {
            resource,
            tabs:[
                {
                    value: '全部',
                    label: 99
                },
                {
                    value: '进行中',
                    label: 0
                },
                {
                    value: '已售罄',
                    label: 1
                }
            ],
            tab: 99
        }
    },
    methods: {
        clickTab(item) {
            this.tab = item.label
            this.$emit('change', this.tab)
        }
    }
}

</script>

<style lang="scss" scoped>
.tab {
    position: relative;
    width: 217rpx;
    height: 71rpx;
    line-height: 71rpx;
    text-align: center;
    font-size: 40rpx;
    text-shadow: -2px 0 black, 0 2px black,
      2px 0 black, 0 -2px black;

      .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
}
</style>