<template>
	<view class="expertTeamPage">
		<image :class="['bg', 'bg_1']" v-show="curTabIndex==1"
			:src="$baseUrl + 'homepage/et_bg_1.jpg'" 
			mode="aspectFit">
		</image>
		<image :class="['bg', 'bg_2']" v-show="curTabIndex==2"
			:src="$baseUrl + 'homepage/et_bg_2.jpg'" 
			mode="aspectFit">
		</image>
		<image :class="['bg', 'bg_3']" v-show="curTabIndex==3"
			:src="$baseUrl + 'homepage/et_bg_3.jpg'" 
			mode="aspectFit">
		</image>
		<view class="tab_box">
			<view class="tab tab_1" @tap="onSelTab(1)"></view>
			<view class="tab tab_2" @tap="onSelTab(2)"></view>
			<view class="tab tab_3" @tap="onSelTab(3)"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	const curTabIndex = ref(1);
	
	onLoad((options) => {
		curTabIndex.value = options.tab
		console.log('接收到的参数:', curTabIndex.value)
	});
	const onSelTab = (index) => {
		curTabIndex.value = index;
	}
</script>

<style lang="less" scoped>
	.expertTeamPage {
		position: absolute;
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;

		.bg {
			position: absolute;
			width: 100vw;
			height: auto;
			background-size: 100% 100%;
		}

		.bg_1 {
			height: 1476rpx;
		}

		.bg_2 {
			height: 6108rpx;
		}

		.bg_3 {
			height: 2503rpx;
		}
		.tab_box{
			position: absolute;
			top: 505rpx;
			z-index: 100;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			gap: 0rpx;
			opacity: 0;
			.tab {
				// position: absolute;
				width: 230rpx;
				height: 60rpx;
			}
			.tab_1{
				// left: 45rpx;
				background-color: red;
			}
			.tab_2{
				// left: 290rpx;
				background-color: #00ff00;
			}
			.tab_3{
				// left: 510rpx;
				background-color: #0f0f0f;
			}
		}
	}
</style>