<template>
	<view>
		<uni-search-bar
			@confirm="search"
			:radius="16"
			:focus="true"
			v-model="searchValue"
			@input="input"
			@clear="clear"
			:clearButton="'always'"
			:cancelButton="'none'"
			:bgColor="'#f6f8fa'"
		></uni-search-bar>
		<view class="yaoqingList">
			<view class="yaoqingHeader flex justifyBetween alignC">
				<view class="yaoqingHeaderLift flex justifyC alignC">
					全部
					<image src="../../static/evering/ic_21.png" mode="widthFix"></image>
				</view>
				<view class="yaoqingHeaderRight">共有120人</view>
			</view>
			<view class="yaoqingPerson flex" v-for="(item, i) in yaoqingPerson" :key="i">
				<image :src="item.personImage" mode="widthFix" class="personImage"></image>
				<view class="personMessage">
					<view class="personMessageOne flex justifyBetween">
						<view class="personName">{{ item.personName }}</view>
						<view class="personXX">{{ item.personXX }}</view>
					</view>
					<view class="personMessageTwo flex justifyBetween" style="margin-top: 10rpx;">
						<view class="personPhone">{{ item.personPhone }}</view>
						<view class="personTime">{{ item.personTime }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			yaoqingPerson: [
				{
					personImage: '/static/evering/touXiang.png',
					personName: '孙美丽',
					personXX: '已报名',
					personPhone: '18742564459',
					personTime: '2020-12-19'
				},
				{
					personImage: '/static/evering/touXiang.png',
					personName: '孙美丽',
					personXX: '已报名',
					personPhone: '18742564459',
					personTime: '2020-12-19'
				},
				{
					personImage: '/static/evering/touXiang.png',
					personName: '孙美丽',
					personXX: '',
					personPhone: '18742564459',
					personTime: '2020-12-19'
				},
				{
					personImage: '/static/evering/touXiang.png',
					personName: '孙美丽',
					personXX: '已报名',
					personPhone: '18742564459',
					personTime: '2020-12-19'
				}
			]
		};
	},
	methods: {
		input(res) {
			console.log('----input:', res);
		},
		clear(res) {
			console.log('----clear:', res);
		}
	}
};
</script>

<style>
.yaoqingList {
	margin-top: 12rpx;
	padding: 0 32rpx;
}
.yaoqingHeader {
	margin-bottom: 40rpx;
}
.yaoqingHeaderLift {
	width: 156rpx;
	height: 64rpx;
	background-image: url(/static/evering/ic_20.png);
	background-size: cover;
	color: rgba(50, 50, 51, 1);
	font-size: 28rpx;
	font-weight: 400;
}
.yaoqingHeaderLift image {
	width: 20rpx;
	height: 20rpx;
	margin-left: 18rpx;
}
.yaoqingHeaderRight {
	height: 36rpx;
	color: rgba(50, 50, 51, 1);
	font-size: 26rpx;
	font-weight: 400;
	text-align: left;
}
.yaoqingPerson {
	width: 686rpx;
	height: 112rpx;
	margin-top: 32rpx;
}

.personImage {
	width: 80rpx;
	height: 80rpx;
	margin-right: 26rpx;
	border-radius: 40rpx;
}
.personMessage {
	width: 580rpx;
	height: 112rpx;
	border-bottom: 1rpx #ebedf0 solid;
}
.personName {
	height: 40rpx;
	color: rgba(50, 50, 51, 1);
	font-size: 28rpx;
	font-weight: 600;
	font-family: 'PingFang SC';
}
.personXX {
	width: 72rpx;
	height: 34rpx;
	opacity: 1;
	color: rgba(254, 149, 21, 1);
	font-size: 24rpx;
	font-weight: 600;
	font-family: 'PingFang SC';
}
.personPhone {
	height: 34rpx;
	opacity: 1;
	color: rgba(50, 50, 51, 1);
	font-size: 24rpx;
	font-weight: 400;
	font-family: 'PingFang SC';
	text-align: left;
}
.personTime {
	height: 34rpx;
	opacity: 1;
	color: rgba(50, 50, 51, 1);
	font-size: 24rpx;
	font-weight: 400;
	font-family: 'PingFang SC';
	text-align: left;
}
</style>