wx-qhb/pageD/logisticsProgress/component/progress.vue

<template>
	<view>
		<view v-for="(item,index) in logisticsList" :key="index" class="information">
			<view class="basis">
				<view class="dot" v-if="item.title" :style="item.status?'background-color:#f83224':''">
				</view>
				<view class="dot-1" v-else :style="item.status?'background-color:#f83224':''">
				</view>

				<view class="name" :style="item.status?'color:#f83224':''">
					{{item.title}}
				</view>
				<view class="time" :style="item.status?'color:#f83224':''">
					{{item.time}}
				</view>
			</view>
			<view class="shu" v-show="index < logisticsList.length-1&&!item.imageUrl"> </view>
			<view class="shu-1" v-show="index < logisticsList.length-1&&item.imageUrl"> </view>
			
			<view class="does" :id="'does'+index" :style="item.status?'color:#333':''">
				{{ item.does }}
			</view>
			<view class="img-1" v-if="item.imageUrl">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			logisticsList: {
				typeof: Array,
				default: []
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="scss">

		.information {
			position: relative;
		}
	.basis {
		display: flex;
		align-items: center;
		margin-top: 28rpx;
		.dot {
			border-radius: 50%;
			background-color: rgba(227, 227, 227, 1);
			width: 18rpx;
			height: 18rpx;
			margin-right: 20rpx;
			z-index: 100;
		}

		.dot-1 {
			border-radius: 50%;
			background-color: rgba(227, 227, 227, 1);
			width: 10rpx;
			height: 10rpx;
			margin-right: 20rpx;
			margin-left: 4rpx;
			z-index: 100;
		}

		.name {
			font-size: 28rpx;
			margin-right: 20rpx;
		}

		.time {
			font-size: 24rpx;
		}
	}
	.img-1{
		background-color: #D8D8D8;
		border-radius: 4rpx;
		width: 608rpx;
		height: 368rpx;
		margin-left: 30rpx;
		margin-bottom: 28rpx;
	}
	.shu {
		position: absolute;
		height: 126rpx;
		width: 2rpx;
		background-color: rgba(151, 151, 151, .6);
		left: 8rpx;
		top: 22rpx;
	}
	.shu-1{
		
			position: absolute;
			height: 484rpx;
			width: 2rpx;
			background-color: rgba(151, 151, 151, .6);
			left: 8rpx;
			top: 22rpx;
	}

	.does {
		font-size: 24rpx;
		color: rgba(119, 119, 119, .8);
		margin: 8rpx 0 0 36rpx;
		height: 60rpx;
	}
</style>