<template>
	<div>
		
		<!-- table切换 -->
		<div class="tab">
			<div>
				<p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
				<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
			</div>		
		</div>
		<!-- 内容 -->
		<div class="content">
			<div v-if="index==1">
				<div class="list">
					<div class="list_top">
						<p>派单号 213213213</p>
						<p>2021-02-12 10:30</p>
					</div>
					<div class="list_bottom">
						<div class="list_bottom_left">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
						<div class="list_bottom_mid">
							<img src="../assets/images/ad_icon1.png" alt="">
							<span></span>
							<p>已签收</p>
						</div>
						<div class="list_bottom_right">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="list_top">
						<p>派单号 213213213</p>
						<p>2021-02-12 10:30</p>
					</div>
					<div class="list_bottom">
						<div class="list_bottom_left">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
						<div class="list_bottom_mid">
							<img src="../assets/images/ad_icon1.png" alt="">
							<span></span>
							<p>已签收</p>
						</div>
						<div class="list_bottom_right">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
					</div>
				</div>
			</div>
			<div v-if="index==2">
				<div class="list">
					<div class="list_top">
						<p>派单号 213213213</p>
						<p>2021-02-12 10:30</p>
					</div>
					<div class="list_bottom">
						<div class="list_bottom_left">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
						<div class="list_bottom_mid">
							<img src="../assets/images/ad_icon1.png" alt="">
							<span></span>
							<p>已签收</p>
						</div>
						<div class="list_bottom_right">
							<p>王守业</p>
							<p>19898765765</p>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				titlename:"我的快件",
				index:1,
			}
		},
		methods:{
			tab(obj){
				this.index=obj
			}
		}
	}
</script>

<style scoped lang="less">
	.tab{
		font-size: .36rem;
		color: #8c8c8c;
		background: white;
		div{
			display: flex;
			text-align: center;			
			border-radius: .05rem;
			justify-content: center;
			p{
				padding: .2rem .3rem;
				margin: 0px .4rem;				
			}
			p.active{
				color: #00c4b8;
				border-bottom: .02rem solid #00c4b8;
			}
		}		
	}
	.content{
		padding: .33rem;
		.list{			
			background: white;
			font-size: .3rem;
			color: #333;
			padding: .2rem .4rem;
					margin-bottom: .2rem;
			.list_top{
				font-size: .24rem;
				color: #999;
				display: flex;
				justify-content: space-between;
				margin-bottom: .3rem;
			}
			
			.list_bottom{
				display: flex;
				justify-content: space-between;
				.list_bottom_left{
					text-align: center;
					padding-top: .3rem;
					p:nth-of-type(2){
						font-size: .24rem;
						margin-top: .2rem;
					}
				}
				.list_bottom_mid{
					text-align: center;
					img{
						width: .6rem;
						height: .6rem;
					}
					span{
						display: block;
						width: 2rem;
						height: .05rem;
						border-radius: 50%;
						background: #00c4b8;
						margin: .15rem 0rem;
					}
					p{
						color: #f5693d;
						font-size: .26rem;
					}
				}
				.list_bottom_right{
					padding-top: .3rem;
					text-align: center;
					p:nth-of-type(2){
						font-size: .24rem;
						margin-top: .2rem;
					}
				}
			}
		}
	}
	
</style>
