<template>
	<div class="people">
		<div class="people-both">
			<div class="people-title">
				<h4>联系人</h4>
				<ul class="title-ul">
					<li v-for="item,bot in lilist"  @click="line(bot)"  :class="{white:bot==para}">
					{{item}}
					 <p v-show="bot==para"></p>
				</li>
				</ul>
			</div>
			<div class="people-content">
				<div class="people-top" v-show="bot==para">
					<ul>
						<li v-for="item in peoplelist">
							<img src="../assets/img/drawable-mdpi/people.png">
							<p>
								<span>{{item.name}}</span>
								<span class="certi" v-if="item.state==0">未认证</span>
								<span class="certified" v-else>已实名</span><br>
								<span>{{item.telephone}}</span>
							</p>
						</li>
						
					</ul>
			</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				para:'',
				bot:'',
				lilist:['个人','企业'],
				peoplelist:[
				{
					name:'齐天大圣',
					state:1,
					telephone:'18566668888'
				},
				{
					name:'齐天大圣',
					state:0,
					telephone:'18566668888'
				},
				{
					name:'杭州复杂美科技有限公司',
					state:0,
					telephone:'18566668888'
				},
				{
					name:'杭州复杂美科技有限公司',
					state:1,
					telephone:'18566668888'
				},
				{
					name:'齐天大圣',
					state:1,
					telephone:'18566668888'
				},
				{
					name:'齐天大圣',
					state:0,
					telephone:'18566668888'
				}
				]
			}
		},
		mounted(){

		},
		methods:{
		line(a){
	           this.para = a;
	     	}
		}
	}
</script>
<style scoped>
	.people{
		.certified{
									display: inline-block;
									width: 1.388889rem;
									height: 0.555556rem;
									line-height: 0.555556rem;
									text-align: center;
									background-color: #60c0ff;
									border-radius: 0.277778rem;
									font-size: 0.333333rem;
									color: #ffffff;
									margin-left: 0.15rem;
								}
			.certi{
				display: inline-block;
				font-size: 0.333333rem;
				color: #f00;
				margin-left: 0.15rem;
			}
			.people-both{
			width: 100%;
			.people-title{
				height: 4.041667rem;
				background: #60c0ff;
				width: 100%;
				h4{
					text-align: center;
					color: #fff;
					font-size: 0.472222rem;
					padding: 0.541667rem 0;
				}
				.title-ul{
					width: 100%;
					font-size: 0.388889rem;
					color: #c6e5fa;
					li{
						float: left;
						width: 50%;
						text-align: center;
						p{
							height: 0.055556rem;
							width: 0.416667rem;
							background: #fff;
							margin: 0 auto;
							margin-top: 0.166667rem;
						}
					}
					.white{
						color:#fff; 
					}
				}
			}
			.people-content{
				background: #fafafa;
				z-index: -10000;
				width: 100%;
				padding: 0 0.416667rem;
				.people-top{
					float: left;
					margin-top: -1.111111rem;
					width: 100%;
					padding-bottom: 2rem;
					ul{
						li{ 
							  width: 9.166667rem;
							  height: 1.666667rem;
							  background-color: #ffffff;
								box-shadow: 0px 3px 21px 5px 
								rgba(96, 192, 255, 0.35);
								border-radius: 10px;
								margin-bottom: 0.277778rem;
								padding: 0.222222rem 0.291667rem;
							img{
								float: left;
								margin-right: 0.291667rem;
							}
							p{
								float: left;
								span:nth-of-type(1){
									font-family: FZLTHJW--GB1-0;
									font-size: 0.444444rem;
									color: #1491e2
								}
								span:nth-of-type(3){
									display: inline-block;
									color: #666666;
									font-size: 0.388889rem;
									padding-top: 0.1rem;
								}
							}
						}
					}
				}
			}
	}
}
</style>