<template>
	<view style="display: flex;">
		<view>
			<image src="../../static/images/sign/return.png" />
		</view>
		<view>
			<u-tabs :lineWidth="25" :lineHeight="2" itemStyle="padding:11px;" lineColor="#3477fc" :list="list1"
				@change="tabChange"></u-tabs>
		</view>
	</view>


	<view v-if="NewIndex === 1">
		<view style="position: fixed; top: 0;bottom: 1122rpx; left: 0; right: 0;background: linear-gradient(0deg, #ffffff, #c9f6f5); z-index: -1;"></view>	
		<messagenotificationVue></messagenotificationVue>
	</view>

	<view v-if="NewIndex === 0">
		<addressbookVue></addressbookVue>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	
	import messagenotificationVue from "./messagenotification.vue";
	import addressbookVue from "./addressbook.vue";
	const list1 = reactive([{
			name: '通讯录'
		},
		{
			name: '消息'
		}
	])
	
	
	const NewIndex = ref(0);
	
	function tabChange(index) {
		console.log('当前选中的选项卡索引：', index);
		NewIndex.value = index.index;
	}
</script>

<style>
	image {
		width: 31rpx;
		height: 44rpx;
	}
</style>