<template>
	<view>
		<view class="logistics_info">
			<view class="logistics_info_image"></view>
			<view class="logistics_info_right">
				<view class="info_right_title">Signed for</view>
				<text>FedEx  Express</text>
				<view class="info_right_num">
					<text>Order number : 5859595940</text>
					<view class="copy">Copy</view>
				</view>
			</view>
		</view>
		<view class="logistics_details">
			<view class="logistics_step step_active">
				<text>
					 Your express delivery has been signed, the signer is 
					 your little rabbit, Zhang has unusual problems or need 
					 to complain please call if there is unusual, problems or 
					 need to complain please call abnormal problems or 
					 need to complain
				</text>
				<view class="logistics_step_time">2020.12.13  23:54:12</view>
			</view>
			<view class="logistics_step">
				<text>
					 【cotton town, Shantou】your bunny, Xiao Zhang,has 
					 been picked up. If you have any unusual problems 
					 or need to complain, please call 12563555
				</text>
				<view class="logistics_step_time">2020.12.13  23:54:12</view>
			</view>
			<view class="logistics_step">
				<text>
					 The order is confirmed, the merchant has been order
					 informed of the distribution
				</text>
				<view class="logistics_step_time">2020.12.13  23:54:12</view>
			</view>
			<view class="logistics_step">
				<text>
					 You have submitted your order, please wait for 
					 system confirmation
				</text>
				<view class="logistics_step_time">2020.12.13  23:54:12</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				

			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.logistics_info{
		border-top: 14.67rpx #F6F5FA solid;
		padding: 32rpx 0;
		padding-left: 29.33rpx;
		display: flex;
		align-items: center;
		
		.logistics_info_image{
			width: 133.33rpx;
			height: 133.33rpx;
			background-color: #999999;
			
		}
		.logistics_info_right{
			margin-left: 33.33rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			
			.info_right_title{
				color: #DE3139;
				font-size: 29.33rpx;
				font-weight: bold;
				margin-bottom: 10.33rpx;
			}
			.info_right_num{
				display: flex;
				align-items: center;
				margin-top: 9.67rpx;
				.copy{
					height: 41.33rpx;
					line-height: 41.33rpx;
					text-align: center;
					background-color: #F6F5FA;
					font-size: 24rpx;
					border-radius: 20.67rpx;
					margin-left: 26.67rpx;
					padding: 0 18.67rpx	;
				}
			}
		}
	}
	
	.logistics_details{
		border-top: 14.67rpx #F6F5FA solid;
		padding-left: 28rpx;
		padding-right: 24rpx;
		padding-top: 64rpx;
		
		.logistics_step{
			color: #999999;
			font-size: 26.67rpx;
			font-weight: 400;
			padding-bottom: 74rpx;
			padding-left: 33.33rpx;
			position: relative;
			&:before{
				content: "";
				width: 17.33rpx;
				height: 17.33rpx;
				background-color: #EDEDED;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 50%;
				z-index: 99;
			}
			&::after{
				content: "";
				width: 1px;
				height: 95%;
				background-color: #EDEDED;
				position: absolute;
				left: 9.5rpx;
				bottom: 0;
				border-radius: 50%;
				
			}
			&:last-child{
				
				&::after{
					content: none;
				}
			}
			
			.logistics_step_time{
				
				font-size: 22rpx;
				margin-top: 13.33rpx;
			}
		}
	}
	.step_active{
		color: #333333 !important;
		
		&:before{
			background-color:#333333 !important;
		}
		
	}
	.step_active1{
		&::after{
			background-color: #333333 !important;
			
		}
	}
</style>