手写一个uniapp的步骤条组件

在template实现

<template>
	<view class="process_more">
		<!-- 步骤条 -->
			<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="set-view-test">
                        <view class="set-view-test2">{{item.time}}</view>
					</view>
					<view class="set-view-test3">{{item.text1}}</view>

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

js中（样式图大概是，可以随意替换图片等）

// 步骤条
				options: [{
						text1: '打卡时间 09:01:01',
						time: '上班打卡 09:01:01'
					},
					{
						text1: '2022-5-21 2:00:12',
						time: '下班打卡'
					},
				]

CCS里面实现 

<style lang="scss">
	/* 时间线 */
	.process_more {
		background-color: #fff;
	}

	.process_text {

		position: relative;

		.process_left {
			position: absolute;
			top: 170rpx;
			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: 26rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #EFEFEF;

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

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

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

	}

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

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

	.left_line_up {
		position: absolute;
		top: 0;
		left: -52upx;
		height: 50%;
		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;
	}
</style>