<template>
	<div>
		
		<div class="content">
			<p>收件查询</p>
			<div class="jjlist">
				<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>2021-09-12 10:31</p>
							</div>
						</div>
						<p>已揽件</p>
					</div>
					<div class="fast">
						<p>同城急送</p>
					</div>
				</div>
			</div>
			<div class="info">
				<p>收件人：</p>
				<p>公司：</p>
				<p>座位：</p>
				<p>手机：</p>
				<p>智能柜：</p>
				<p>快件类型：</p>
				<p>是否私人件：</p>
				<p>是否问题件：</p>
				<p>是否已派件：</p>
				<p>备注：</p>
				<div class="pjinfo">
					<p>3-27 17:27　　派件中，收派员【杨柳青】</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				titlename: "查快递"
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: .2rem .33rem;
		font-size: .3rem;
		>p{
			font-size: .3rem;
			text-align: center;
			margin-bottom: .2rem;
		}
		.info {
			padding: .4rem;
			background: white;
			line-height: 200%;
			color: #666666;

			.pjinfo {
				margin-top: .1rem;
				border-top: .01rem solid #f0efef;
				padding-top: .1rem;
			}
		}

		.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: -.1rem;
						}

						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: .2rem;
							}
						}
					}

					>p {
						font-size: .24rem;
						color: #f5693d;
						font-weight: bold;
					}
				}
                .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;
			  }				
				
			}
		}
	}
</style>
