<template>
	<div>
		<div class="content">
			<!-- tab切换 -->
			<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="jjlist" v-if="index==1">
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>派单号  3233232</p>
								<p>顺丰 432432432</p>
								<p><span>收</span>收件人21321321</p>
								<p>2021-09-12 10:31</p>
							</div>
						</div>
						<p>已揽件</p>
					</div>
					<div class="list_bot">
						<p>拒收</p>
						<p>代收</p>
						<p>延迟</p>
						<p>签收</p>
					</div>
				</div>
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>派单号  3233232</p>
								<p>顺丰 432432432</p>
								<p><span>收</span>收件人21321321</p>
								<p>2021-09-12 10:31</p>
							</div>
						</div>
						<p>已揽件</p>
					</div>
					<div v-show="show" class="list_bot">
						<p>拒收</p>
						<p>代收</p>
						<p>延迟</p>
						<p>签收</p>
					</div>
					<div class="fast">
						<p>同城急送</p>
					</div>
				</div>
			</div>
			
			<!-- 收件 -->
			<div class="sjlist" v-if="index==2">
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>派单号  32332321</p>
								<p>顺丰 432432432</p>
								<p><span>收</span>收件人21321321</p>
								<p>2021-09-12 10:31</p>
							</div>
						</div>
						<p>配送中</p>
					</div>
					<div class="list_bot">
						<p>拒收</p>
						<p>代收</p>
						<p>延迟</p>
						<p>签收</p>
					</div>
				</div>
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>派单号  3233232</p>
								<p>顺丰 432432432</p>
								<p><span>收</span>收件人21321321</p>
								<p>2021-09-12 10:31</p>
							</div>
						</div>
						<p>配送中</p>
					</div>
					<div class="list_bot">
						<p>拒收</p>
						<p>代收</p>
						<p>延迟</p>
						<p>签收</p>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 底部 -->
		<tabbar></tabbar>
	</div>
</template>

<script>
export default {
    data() {
      return {
		index:1,
		show:false
      };
    },
    created:function(){
      console.log(this.$store.state.openId)
    },
    methods:{
      tab(obj){
      	this.index=obj
      },
    }
  };
</script>

<style lang="less" scoped>
  .content{
	  padding: 0rem .33rem 1.2rem;
	  .tab{
	  	font-size: .36rem;
	  	color: #00c4b8;
	  	padding: .2rem .0rem;			
	  	div{
	  		display: flex;
	  		border: .01rem solid #00c4b8;
	  		text-align: center;			
	  		border-radius: .05rem;
	  		p{
	  			flex: 1;
	  			padding: .1rem 0rem;
	  							
	  		}
	  		p.active{
	  			background: #00c4b8;
	  			color: white;
	  		}
	  	}
	  	
	  }
	  .jjlist{
		  font-size: .3rem;
		  color: #999999;
		  .listinfo{
			  background: white;
			  padding: .33rem .33rem .2rem;
			  border-radius: .05rem;
			  margin-bottom: .2rem;
			  position: relative;
			  .list_top{
				  display: flex;
				  justify-content: space-between;
				  .list_top_left{				  			  
					  img{
						  display: inline-block;
						  width: .9rem;
						  height: .9rem;
						  position: relative;
						  top:-.3rem;
					  }
					  div{
						 width: 4rem;	
						 margin-left: .2rem;
						 display: inline-block;
						 line-height: 150%;
						p:nth-of-type(1){
							font-size: .3rem;
							font-weight: bold;
							color: #333;
						}
                        p:nth-of-type(3){
							font-size: .24rem;
							color: #333;
							span{
								width: .37rem;
								height: .37rem;
								color: white;
								border-radius: 50%;
								background: #cc9a09;
								display: inline-block;
								text-align: center;
								line-height: .37rem;
								margin-right: .1rem;
							}
						}
                        p:nth-of-type(4){
							font-size: .2rem;
						}												  
					  }
				  }
				  >p{
					  font-size: .24rem;
					  color: #f5693d;
					  font-weight: bold;
				  }
			  }
			  .list_bot{
				  text-align: right;
				  border-top: .01rem solid #ededed;
				  padding-top: .2rem;
				  p{
					  display: inline-block;
					  font-size: .24rem;
					  padding: .16rem .4rem;
					  border-radius: .05rem;
				  }
				  p:nth-of-type(1){
					  border:.01rem solid #263fbf;
					  color: #263fbf;
				  }
				  p:nth-of-type(2){
				  	border:.01rem solid #408cc7;
				  	color: #408cc7;				  
				  }
				  p:nth-of-type(3){
				  	border:.01rem solid #d5a43c;
				  	color: #d5a43c;				  
				  }
				  p:nth-of-type(4){
				  	border:.01rem solid #e24444;
				  	color: #e24444;				  
				  }
			  }
			  .fast{
				  background: url(../assets/images/status.png) no-repeat center;
				  background-size: 100% 100%;
				  color: white;
				  position: absolute;
				  bottom: 0px;
				  right: 0px;
				  width: 1rem;
				  height: .4rem;
				  text-align: center;
				  line-height: .4rem;
				  font-size: .2rem;
			  }
		  }
	  }
	  .sjlist{
	  		  font-size: .3rem;
	  		  color: #999999;
	  		  .listinfo{
	  			  background: white;
	  			  padding: .33rem .33rem .2rem;
	  			  border-radius: .05rem;
	  			  margin-bottom: .2rem;
	  			  .list_top{
	  				  display: flex;
	  				  justify-content: space-between;
	  				  .list_top_left{				  			  
	  					  img{
	  						  display: inline-block;
	  						  width: .9rem;
	  						  height: .9rem;
	  						  position: relative;
	  						  top:-.3rem;
	  					  }
	  					  div{
	  						 width: 4rem;	
	  						 margin-left: .2rem;
	  						 display: inline-block;
	  						 line-height: 150%;
	  						p:nth-of-type(1){
	  							font-size: .3rem;
	  							font-weight: bold;
	  							color: #333;
	  						}
	                    p:nth-of-type(3){
	  							font-size: .24rem;
	  							color: #333;
	  							span{
	  								width: .37rem;
	  								height: .37rem;
	  								color: white;
	  								border-radius: 50%;
	  								background: #cc9a09;
	  								display: inline-block;
	  								text-align: center;
	  								line-height: .37rem;
	  								margin-right: .1rem;
	  							}
	  						}
	                    p:nth-of-type(4){
	  							font-size: .2rem;
	  						}												  
	  					  }
	  				  }
	  				  >p{
	  					  font-size: .24rem;
	  					  color: #f5693d;
	  					  font-weight: bold;
	  				  }
	  			  }
	  			  .list_bot{
	  				  text-align: right;
	  				  border-top: .01rem solid #ededed;
	  				  padding-top: .2rem;
	  				  p{
	  					  display: inline-block;
	  					  font-size: .24rem;
	  					  padding: .16rem .4rem;
	  					  border-radius: .05rem;
	  				  }
	  				  p:nth-of-type(1){
	  					  border:.01rem solid #263fbf;
	  					  color: #263fbf;
	  				  }
	  				  p:nth-of-type(2){
	  				  	border:.01rem solid #408cc7;
	  				  	color: #408cc7;				  
	  				  }
	  				  p:nth-of-type(3){
	  				  	border:.01rem solid #d5a43c;
	  				  	color: #d5a43c;				  
	  				  }
	  				  p:nth-of-type(4){
	  				  	border:.01rem solid #e24444;
	  				  	color: #e24444;				  
	  				  }
	  			  }
	  		  }
	  }
  }
</style>
