<!-- 通讯录 -->
<template>
	
	<view style="position: fixed; top: 0;bottom: 0; left: 0; right: 0; background-color: #ffffff; z-index: -1;"></view>
	
	<up-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<up-index-anchor :text="indexList[index]"></up-index-anchor>
			<!-- #endif -->
			<up-index-item>
				<!-- #ifndef APP-NVUE -->
				<up-index-anchor :text="indexList[index]" bg-color="#ffffff" height="78rpx" style="border-bottom: none;margin-left: 32rpx;padding: 0rpx;" size="30rpx"></up-index-anchor>
				<!-- #endif -->
				<view class="list-cell" v-for="(cell, index) in item">
					<view class="box">
						<image src="../../static/images/icon/tu4-1.jpg" />
						<view style="margin: auto 0; margin-left: 24rpx;">
							<view><text class="boxtexttop">{{cell}}</text></view>
							<view><text class="boxtextbottom">[签名]这个人很懒，什么都没留下</text></view>
						</view>
					</view>
				</view>
			</up-index-item>
		</template>
	</up-index-list>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 创建响应式数据  
	const indexList = ref(["A", "B", "C", "D"]);
	const itemArr = ref([
		['列表A1', '列表A2', '列表A3'],
		['列表B1', '列表B2', '列表B3'],
		['列表C1', '列表C2', '列表C3'],
		['列表D1', '列表D2', '列表D3']
	]);
</script>

<style scoped>
	.list-cell {
		padding: 0rpx;
	}

	.box {
		width: 750rpx;
		height: 108rpx;
		background: #ffffff;
		display: flex;
	}

	.box>image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		display: block;
		margin: auto 0;
		margin-left: 32rpx;
	}

	.boxtexttop {
		font-weight: 600;
		/* width: 81rpx; */
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}

	.boxtextbottom {
		font-weight: Regular;
		/* width: 291rpx; */
		height: 21rpx;
		font-size: 20rpx;
		text-align: left;
		color: #939393;
	}
</style>