手写一个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>

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

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