deming/pageE/order/Logistics.vue

<template>
	<view class="logistics">
		<view class="logistics-info">
			<view class="express">
				<image src="../static/mine/23.png"></image>
				<view class="dispatcher-info">
					<view>派件员：xxx</view>
					<view>手机：123456789</view>
				</view>
			</view>
			<view class="express-status">
				<image src="../static/mine/23.png"></image>
				<view>
					<view class="status">物流状态：已签收</view>
					<view>承运来源：百世快递</view>
					<view>运单编号：3253463464777</view>
					<view>官方电话：4009-565-656</view>
				</view>
			</view>
		</view>
		<view class="logistics-tracking">
			<view class="title">物流跟踪</view>
			<view class="main">
				<view v-for="(item, index) in list" :key="index" class="logistics-item">
					<view class="info u-line-2">{{ item.address }}</view>
					<view class="date">{{ item.date }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{
					address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
					date: '2019-12-25  09:38:21'
				},
				{
					address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
					date: '2019-12-25  09:38:21'
				},
				{
					address: '[北京市]【已签收，本人签收】,感谢使用百事快递，期待再次为您服务',
					date: '2019-12-15  09:38:20'
				},
				{
					address: '卖家已发货',
					date: '2019-12-15  09:38:20'
				}
			]
		}
	}
};
</script>
<style lang="scss" scoped>
.logistics {
	min-height: calc(100vh - var(--window-top));
	padding: 40rpx 30rpx;
	border-top: 1rpx solid #ECECEC;
	.logistics-info {
		.express {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			> image {
				flex-shrink: 0;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 35rpx;
			}
			.dispatcher-info {
				font-size: 26rpx;
				color: rgba(51,51,51,1);
				> view:first-child {
					margin-bottom: 19rpx;
				}
			}
		}
		.express-status {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				width: 690rpx;
				height: 2rpx;
				background: rgba(236,236,236,1);
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
			> image {
				flex-shrink: 0;
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				margin-right: 29rpx;
			}
			> view {
				.status {
					font-size: 26rpx;
					color: rgba(51,51,51,1);
					margin-bottom: 29rpx !important;
				}
				> view {
					font-size: 24rpx;
					color:rgba(102,102,102,1);
					&:not(:last-child) {
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
	.logistics-tracking {
		padding-top: 35rpx;
		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			margin-bottom: 35rpx;
		}
		.main {
			.logistics-item {
				&:not(:last-child) {
					margin-bottom: 75rpx;
				}
				.info {
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(51,51,51,1);
					line-height: 38rpx;
					margin-bottom: 14rpx;
				}
				.date {
					font-size: 22rpx;
					font-weight: 500;
					color: rgba(153,153,153,1);
				}
			}
		}
	}
}
</style>