first

pageProduct/components/my-tabs.vue

@@ -0,0 +1,44 @@
+<template>
+	<view class="u-flex tabs">
+		<view class="u-flex-1 u-text-center item"
+		 :class="{active:index===current}"
+		 @tap="changeCurrent(index)" v-for="(item,index) in props.list" :key="index">
+			{{item}}
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+	const props=defineProps({
+		list:{type:Array}
+	})
+	const emit=defineEmits(['change'])
+	let current=ref(0)
+	function changeCurrent(index){
+		current.value=index
+	}
+	watch(()=>current.value,()=>{
+		emit('change',current.value)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.tabs{
+		padding: 4rpx 10rpx;
+		background: #E6F0FF;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		font-family: Source Han Sans CN, Source Han Sans CN;
+		font-size: 28rpx;
+		color: #318AFE;
+		.item{
+			padding: 8rpx 0;
+			transition: all .3s ease-in-out;
+		}
+		.item.active{
+			border-radius: 8rpx 8rpx 8rpx 8rpx;
+			background-color: $my-main-color;
+			color: #fff;
+		}
+	}
+</style>