uniapp实现快递页面

<view class="box2">
			<view class="flow flex-y-center">
				<view class="line"></view>
				<view>
					<view class="item flex-y-center" v-for="(item,index) in flow">
						<view class="dot flex-grow-0"></view>
						<view class="flex-grow-1">
							<view class="title">{{item.title}}</view>
							<view class="name">{{item.name}} {{item.phone}}</view>
							<view class="time">{{item.time}}</view>

						</view>
					</view>
				</view>
			</view>
		</view>

flow: [{
					title: '配送员已送至顾客',
					time: '2022-10-25 12:56',
					name: '兰轩陈心悦',
					phone: '12463724732'
				}, {
					title: '配送员已收单',
					time: '2022-10-25 12:56',
					name: '兰轩陈心悦',
					phone: '12463724732'
				}, {
					title: '配送员将转单至站点（兰轩寝室大厅）',
					time: '2022-10-25 12:56',
					name: '校内谢俊',
					phone: '12463724732'
				}, {
					title: '配送员已收单',
					time: '2022-10-25 12:56',
					name: '校内谢俊',
					phone: '12463724732'
				}],

 

 

.box2 {
		background: #fff;
		margin: 0 20rpx;
		border-radius: 10rpx;

		.flow {
			position: relative;
			overflow: hidden;
			margin: 20rpx 30rpx;

			.line {
				height: 65%;
				width: 1px;
				background: #eff0f2;
				position: absolute;
				left: 9rpx;
				z-index: 0;
			}

			.item {
				margin: 38rpx 0;

				.dot {
					width: 20rpx;
					height: 20rpx;
					background: #eff0f2;
					border-radius: 50%;
					position: relative;
					margin-right: 32rpx;

				}

				.title {
					color: #a5a5a5;
				}

				.name {
					font-size: 0.75rem;
					margin-top: 5rpx;
					color: #707070;
				}

				.time {
					font-size: 0.75rem;
					margin-top: 5rpx;
					color: #707070;
				}

			}

			.item:nth-child(1) {
				color: #3493ff;

				.title {
					color: #3493ff;
				}

				.name {

					color: #3493ff;
				}

				.time {

					color: #3493ff;
				}

				.dot {
					background: #3493ff;

				}
			}
		}
	}

实现效果