vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）

直接上效果图片

<template>
  <!-- 审批流程 -->
  <div>
    <van-steps direction="vertical" active="-1">
      <van-step>
        <template #inactive-icon>
          <div class="relative">
            <img :src="girlIcon" />
            <img class="absolute right-0 bottom-0" :src="checkIcon" />
          </div>
        </template>

        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="tj-color">提交</div>
            <div class="text-xs">张三</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
      </van-step>

      <van-step>
        <template #inactive-icon>
          <div class="relative">
            <img :src="girlIcon" />
            <img class="absolute right-0 bottom-0" :src="closeIcon" />
          </div>
        </template>

        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="bh-color">护士长驳回</div>
            <div class="text-xs">张三</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
        <div class="flex items-end justify-between ml-10 py-1 px-2 shbg rounded text-sm mt-2"
          >审核意见审核意见审核意见审核意见审核意审核意见审核意见审核意见审核意见审核意审核意见审核意见审核意见审核意见审核意443</div
        >
      </van-step>

      <van-step>
        <template #inactive-icon>
          <div>
            <img :src="manIcon" />
            <img class="absolute right-0 bottom-0" :src="spIcon" />
          </div>
        </template>
        <div class="flex items-end justify-between pl-10">
          <div>
            <div class="sh-color">待护士长审核</div>
          </div>
          <div>2021-12-30 17:20</div>
        </div>
      </van-step>
    </van-steps>
  </div>
</template>

<script setup>
  import girlIcon from '@/assets/images/icon/girl.png';
  import manIcon from '@/assets/images/icon/man.png';
  import checkIcon from '@/assets/images/icon/check.png';
  import spIcon from '@/assets/images/icon/sp.png';
  import closeIcon from '@/assets/images/icon/close.png';

  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
</script>

<style lang="scss" scoped>
  $tj-color: #4caf50;
  $sh-color: #ef6c00;
  $bh-color: #d32f2f;
  ::v-deep(.van-step__circle-container) {
    left: 7px;
  }
  ::v-deep(.van-step__line) {
    left: 7px;
  }
  ::v-deep([class*='van-hairline']:after) {
    border: 0 dashed var(--van-border-color);
  }
  .tj-color {
    color: $tj-color;
    font-size: 15px;
  }
  .sh-color {
    color: $sh-color;
    font-size: 15px;
  }
  .bh-color {
    color: $bh-color;
    font-size: 15px;
  }
  .shbg {
    background-color: #f0f1f0;
  }
</style>