androidCnToWechatGrt/pagesStorage/components/statusTab/index.vue

<template>
	<view class="page">
		<template v-if="list.length">
			<div class="item" :style="{'width':'calc(100% / '+list.length+')'}"
				:class="{'active':idx===index}"
				v-for="(item,index) in list" 
				:key="item.dictValue" 
				@tap="changeType(index,item.dictValue)">
				{{item.dictLabel}}
			</div>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				typeof:Array,
				default:[]
			}
		},
		data(){
			return {
				idx:0
			}
		},
		methods:{
			changeType(index,value){
				this.idx = index;
				this.$emit('changeType',value)
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		height: 102rpx;
		display: flex;
		background: #fff;
		.item{
			height: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #1D2129;
			line-height: 40rpx;
			&.active{
				color: #198CFF;
				font-size: 32rpx;
				font-weight: bold;
				&::after{
					content: '';
					width: 36rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: #198CFF;
					position: absolute;
					left: 50%;
					margin-left: -18rpx;
					bottom: 8rpx;
				}
			}
		}
	}
</style>