zhywpt-sp/subpackage/personal-center/remind/components/evaluate-tab-item.vue

<!-- 评价列表筛选 item -->
<template>
	<view class="tabs">
		<view class="tab as-gravity-center" v-for="(tab,index) in tabs" :key="index"
			:class="curIndex === index ? 'active' : 'normal'" @click="tabClickHandle(tab,index)">
			{{tab}}
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	defineProps({
		tabs: {
			type: Array,
			default: () => {
				return [];
			}
		}
	})

	const curIndex = ref(0);
	const emit = defineEmits(['tabClick'])

	const tabClickHandle = (item, index) => {
		curIndex.value = index;
		emit('tabClick', item);
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		// margin-right: -30rpx;
		// margin-top: -16rpx;
		padding: 30rpx;
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		box-sizing: border-box;
		width: 100%;

		.tab {
			font-size: 24rpx;
			min-width: 135rpx;
			height: 52rpx;
			border-radius: 26rpx;
			margin-right: 30rpx;
			margin-top: 16rpx;
		}

		.normal {
			color: #333333;
			background-color: white;
			border: 1px solid #999999;
		}

		.active {
			color: white;
			background: #00B38B;
		}
	}
</style>