assess-app/page_task/task_details/module/steps.vue

<template>
	<view class="">
		<view class="sys-background-fff m-20 p-20 r-20">
			<view class="row-c" v-for="(item,index) in list" :key="index">
				<view class="column-c" style="position: relative;top: 45rpx;">
					<image class="wh-36"
						:src="item.is_dot == 1? '/static/img/login/Checked1@3x.png':'/static/img/login/Checked2@3x.png'"
						mode="aspectFill"></image>
					<view class="steps-line" :style="{opacity:index == list.length - 1?0:1}"></view>
				</view>
				<view class="sys-from-background-color steps-item p-20 r-20 column flex m-l20">
					<text class="size-24 text-color-576">2024-12-20 12:45:00</text>
					<view v-if="index == list.length - 1">
						<text class="size-28 text-color-000 sys-weight-600">归档确认：</text>
						<text class="size-28 text-color-576">-- -- -- --</text>
					</view>
					<view v-else>
						<text class="size-28 text-color-666">外访：</text>
						<text class="size-28 text-color-12 sys-weight-600">张三</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				list2: [{
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '卖家发货',
					desc: '2018-11-12'
				}, {
					title: '买家签收',
					desc: '2018-11-13'
				}, {
					title: '交易完成',
					desc: '2018-11-14'
				}],
				list: [{
					is_dot: 1,
					time: '2024-12-20 12:45:00',
					type: '签约',
					name: '张三'
				}, {
					is_dot: 1,
					time: '2024-12-20 12:45:00',
					type: '签约',
					name: '张三'
				}, {
					is_dot: 1,
					time: '2024-12-20 12:45:00',
					type: '签约',
					name: '张三'
				}, {
					is_dot: 1,
					time: '2024-12-20 12:45:00',
					type: '签约',
					name: '张三'
				}, {
					is_dot: 0,
					time: '2024-12-20 12:45:00',
					type: '签约',
					name: '张三'
				}]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.steps-item:last-child {
		margin-bottom: 0;
	}

	.steps-line {
		width: 2rpx;
		background-color: #D9D9D9;
		height: 90rpx;
	}
</style>