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