手写一个uniapp的步骤条组件

<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>

<script>
	export default {
		data() {
			return {
				options:[
					{
						text1:'经办意见经办意办意见经办意见经办意见',
                        time:'2021-3-21 12:00:12'
					},
					{
						text1:'经办办意经办意见经办意见经经见意见经办意见经办意见经办意见经办意见经办意见经办意见经办意见',
                        time:'2022-5-21 2:00:12'
					},
					{
						text1:'经办意见经办意见经办意见经办意见经办意见'
                        ,
                        time:'2011-3-21 21:00:02'
					},
					{
						text1:'经办经办意见经办意见经办经办意见经办意见经办意见经办意见经办意见经办意见经办意见经办意见'
                        ,
                        time:'1981-3-21 145:50:12'
					},
					{
						text1:'经办意见经办意办意见经办意见经办意见'
                        ,
                        time:'2121-3-01 12:20:16'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
		.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: 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: #FFCCD8;
            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: #FE3666;
                    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>

样式图大概是，可以随意替换图片等