<template>
	<view class="container">
		<view class="search">
			<u-search placeholder="搜索同事" height="78" :show-action="false" v-model="keyword"></u-search>
		</view>
		<view class="list-box">
			<view class="item" v-for="(item,index) in listData" :key="index">
				<view class="spell">{{item.first}}</view>
				<view class="subitem" v-for="(subitem,ind) in item.cell" :key="ind">
					<image class="avatar" v-if="subitem.personImage" :src="subitem.personImage" mode="" />
					<view class="avatar1" v-if="!subitem.personImage">{{subitem.personName.substring(0,1)}}</view>
					<view class="info">
						<view class="info-left">
							<view class="name">{{subitem.personName}}</view>
							<view class="desc">{{subitem.deptName}}</view>
						</view>
						<image class="phone-icon" src="/static/my/phone_icon.png" mode="" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				listData: [
					{
						first: 'a',
						cell:[{
							 "deptName": "a政部",
								"tellPhone": "18811152687",
								"namespell": "a",
								"personName": "安丽红",
								"personImage": "/static/avatar.png" 
						},{
							"deptName": "ab政部",
								"tellPhone": "18811152687",
								"namespell": "a",
								"personName": "安丽红",
								"personImage": "/static/avatar.png" 
						}
						]
					},{
						first: 'b',
						cell:[{
							 "deptName": "b政部",
								"tellPhone": "18811152687",
								"namespell": "b",
								"personName": "丽红",
								"personImage": "" 
						}]
					},{
						first: 'c',
						cell:[{
							 "deptName": "c政部",
								"tellPhone": "18811152687",
								"namespell": "c",
								"personName": "王丽红",
								"personImage": "" 
						}]
					}
				]
			};
		},
		onLoad(options) {
		},
		onShow() {
		
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
.container{
	width: 750rpx;
	min-height: 100vh;
	background: #F8F8F8;
	.search{
		width: 100%;
		height: 110rpx;
		padding: 16rpx 30rpx;
		background: #fff;
	}
	.list-box{
		.item{
			.spell{
				height: 64rpx;
				line-height: 64rpx;
				padding-left: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.subitem{
				background: #fff;
				height: 136rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				&:last-child{
					.info{
						border: 0
					}
				}
				.avatar{
					width: 88rpx;
					height: 88rpx;
					background: #F2F3F5;
					border-radius: 50%;
				}
				.avatar1{
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					background: #F2F3F5;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.info{
					height: 136rpx;
					margin-left: 20rpx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #e0e0e0;
					.info-left{
						.name{
							height: 45rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 45rpx;
							margin-bottom: 3rpx;
						}
						.desc{
							height: 40rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
					.phone-icon{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
}
</style>
