pillow_customize_app/pages/pages_zhentou/order/express.vue

<template>
	<view class="process_more">
		<view class="com_box">
			<view class="com_txt">
				顺丰快递
			</view>
			<view class="com_num">
				SH189165496411
			</view>
		</view>
		<!-- 步骤条 -->
		<view class="pro_box">
			<view class="set-2" :key="index" v-for="(item,index) in options">
				<view class="img-border">
					<view class="left_img"></view>
				</view>
				<view v-if='index!=0' class="left_line_up"></view>
				<view v-if='index!=options.length-1' class="left_line_down"></view>
				<view class="set-view">
					<view :class="index == 0 ? 'active' : ''" class="set-view-test3">{{item.status}}</view>
					<view :class="index == 0 ? 'active' : ''" class="set-view-test4">{{item.context}}</view>
					<view class="set-view-test">
						<view class="set-view-test2">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						status: '投柜或驿站',
						context: '【青岛市】 快件已被 菜鸟的【青岛康泰源惠客友超市店】代收，【取件地址：青岛康泰源惠客友超市店】，请及时取件。如有疑问请联系：15805321109，投诉电话：0532-88985563',
						time: '2023-08-18 10:33:33'
					},
					{
						status: '派件',
						context: '【青岛市】青岛市中五二部（0532-88985563）业务员【杨金梅,19106394524】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系投诉电话：0532-88985563）',
						time: '2023-08-18 08:08:38'
					},
					{
						status: '在途',
						context: '【青岛市】 快件已到达 青岛市中五二部',
						time: '2023-08-18 08:08:33'
					},
					{
						status: '在途',
						context: '【青岛市】 快件已发往 青岛市中五二部',
						time: '2023-08-18 04:36:56'
					},
					{
						status: '在途',
						context: '【青岛市】 快件已到达 青岛中转部',
						time: '2023-08-18 01:04:40'
					},
					{
						status: '在途',
						context: '【昆明市】 快件已发往 青岛中转部',
						time: '2023-08-16 00:51:30'
					},
					{
						status: '在途',
						context: '【昆明市】 快件已到达 昆明中转',
						time: '2023-08-15 15:30:16'
					}, {
						status: '在途',
						context: '【丽江市】 快件已发往 昆明中转',
						time: '2023-08-14 19:02:02'
					}, {
						status: '揽收',
						context: '【丽江市】 【丽江华坪县】（0888-8834031） 的 P1陈平（15108866686） 已揽收',
						time: '2023-08-14 19:01:18'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.process_more {
		height: 100%;
		overflow-y: hidden;

		.com_box {
			width: 690rpx;
			height: 90rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			display: flex;
			align-items: center;

			.com_txt {
				margin-left: 38rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				color: #333;
			}

			.com_num {
				font-size: 26rpx;
				color: #333;
			}
		}

		.pro_box {
			width: 690rpx;
			height: 75%;
			overflow-y: auto;
			overflow-x: hidden;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 30rpx 0;

			.process_text {
				position: relative;

				.process_left {
					position: absolute;
					top: 200rpx;
					left: 40rpx;

					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}

			.set-2:last-child::after {
				display: none;
			}

			.set-2 {
				border-radius: 10rpx;
				width: 600rpx;
				margin-left: 100rpx;
				margin-top: 60rpx;
				position: relative;

				.set-view {
					width: 493rpx;

					.set-view-test {
						margin: 0 auto;
						// padding-top: 20rpx;
						padding-bottom: 20rpx;

						.set-view-test2 {
							width: 100%;
							height: 26rpx;
							font-family: Gibson;
							font-size: 20rpx;
							color: #999;
						}
					}

					.set-view-test3 {
						margin: 0 auto;
						font-size: 26rpx;
						color: #666;

						&.active {
							color: #333;
						}
					}

					.set-view-test4 {
						margin: 20rpx auto;
						font-size: 22rpx;
						color: #999;

						&.active {
							color: #333;
						}
					}
				}
			}

			/* 普通 */
			.set-2 .img-border {
				width: 18rpx;
				height: 17rpx;
				background: gray;
				border-radius: 50%;
				position: absolute;
				top: 6%;
				margin-top: -1rpx;
				left: -58rpx;
				z-index: 100;
			}

			/* 特殊 */
			.set-2:nth-of-type(1)>.img-border {
				width: 38rpx;
				height: 38rpx;
				background: #FFCCD8;
				border-radius: 50%;
				position: absolute;
				top: 0%;
				margin-top: -3rpx;
				left: -68rpx;
				z-index: 100;
			}

			.set-2:nth-of-type(1) .left_img {
				border-radius: 50%;
				width: 16rpx;
				height: 16rpx;
				background: #FE3666;
				top: 50%;
				margin-top: 13rpx;
				margin-left: 10rpx;
			}

			.left_line_up {
				position: absolute;
				top: 0;
				left: -52upx;
				height: 70%;
				margin-top: -22rpx;
				border-style: solid;
				border-left: 1rpx;
				border-color: #ccc;
			}

			.left_line_down {
				position: absolute;
				top: 50%;
				left: -52upx;
				height: 60%;
				margin-top: 22rpx;
				border-style: solid;
				border-left: 1rpx;
				border-color: #ccc;

			}

			.set-2:nth-of-type(1) .left_line_down {
				top: 0;
				height: 105%;
			}

			.set-2:last-of-type .left_line_up {
				height: 10%;
			}
		}
	}
</style>