vue3 带分支的步骤条（css）

<template>
  <div class="setps">
    <div class="setps_content">
      <div class="setps_css">
        <div style="width: 100%"></div>
        <div class="setps_dot" :style="data[1][0].done ? 'background: #1677ff;' : ''"></div>
        <div class="setps_line" :style="data[1][0].done ? 'background: #1677ff;' : ''"></div>
      </div>
      <div class="setps_text">
        <p class="text_admin" :style="data[1][0].done ? 'color: #1677ff;' : ''">{{
          data[1][0].stepDesc
        }}</p>
        <p class="text_name" :style="data[1][0].done ? 'color: #1677ff;' : ''">{{
          data[1][0].operatorName
        }}</p>
      </div>
    </div>
    <div class="setps_content">
      <div class="setps_css">
        <div class="setps_line" :style="data[1][0].done ? 'background: #1677ff;' : ''"></div>
        <div class="setps_dot" :style="data[2][0].done ? 'background: #1677ff;' : ''"></div>
        <div class="setps_line" :style="data[2][0].done ? 'background: #1677ff;' : ''"></div>
      </div>
      <div class="setps_text">
        <p class="text_admin" :style="data[2][0].done ? 'color: #1677ff;' : ''">{{
          data[2][0].stepDesc
        }}</p>
        <p class="text_name" :style="data[2][0].done ? 'color: #1677ff;' : ''">{{
          data[2][0].operatorName
        }}</p>
      </div>
    </div>
    <!-- 两个节点 -->
    <div class="setps_two">
      <div class="step_left" :style="data[2][0].done ? 'background: #1677ff;' : ''"></div>
      <div class="step_center">
        <div class="setp_center_content str">
          <div class="setps_css">
            <div class="setps_line" :style="data[2][0].done ? 'background: #1677ff;' : ''"></div>
            <div class="setps_dot" :style="data[3][0].done ? 'background: #1677ff;' : ''"></div>
            <div class="setps_line" :style="data[3][0].done ? 'background: #1677ff;' : ''"></div>
          </div>
          <div class="setps_text">
            <p class="text_admin" :style="data[3][0].done ? 'color: #1677ff;' : ''">{{
              data[3][0].stepDesc
            }}</p>
            <p class="text_name" :style="data[3][0].done ? 'color: #1677ff;' : ''">{{
              data[3][0].operatorName
            }}</p>
          </div>
        </div>
        <div class="setp_center_content nav">
          <div class="setps_css">
            <div class="setps_line" :style="data[2][0].done ? 'background: #1677ff;' : ''"></div>
            <div class="setps_dot" :style="data[3][1].done ? 'background: #1677ff;' : ''"></div>
            <div class="setps_line" :style="data[3][1].done ? 'background: #1677ff;' : ''"></div>
          </div>
          <div class="setps_text">
            <p class="text_admin" :style="data[3][1].done ? 'color: #1677ff;' : ''">{{
              data[3][1].stepDesc
            }}</p>
            <p class="text_name" :style="data[3][1].done ? 'color: #1677ff;' : ''">{{
              data[3][1].operatorName
            }}</p>
          </div>
        </div>
      </div>
      <div
        class="step_right"
        :style="data[3][0].done && data[3][1].done ? 'background: #1677ff;' : ''"
      ></div>
    </div>
    <div class="setps_content">
      <div class="setps_css">
        <div
          class="setps_line"
          :style="data[3][0].done && data[3][1].done ? 'background: #1677ff;' : ''"
        ></div>
        <div
          class="setps_dot"
          :style="data[3][0].done && data[3][1].done ? 'background: #1677ff;' : ''"
        ></div>
        <div style="width: 100%"></div>
      </div>
      <div class="setps_text">
        <p class="text_admin" :style="data[3][0].done && data[3][1].done ? 'color: #1677ff;' : ''"
          >完成</p
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Steps } from 'ant-design-vue';

const data = ref({
  1: [
    {
      stepDesc: '提交',
      operatorName: '张三',
      done: true,
    },
  ],
  2: [
    {
      stepDesc: '经理',
      operatorName: '李四',
      done: true,
    },
  ],
  3: [
    {
      stepDesc: '总监',
      operatorName: '王五',
      done: true,
    },
    {
      stepDesc: '副总监',
      operatorName: '赵六',
      done: true,
    },
  ],
});
onMounted(() => {});
</script>

<style lang='less' scoped>
.setps {
  display: flex;
  .setps_content {
    width: 25%;
    .setps_css {
      padding-top: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      .setps_dot {
        width: 27px;
        height: 10px;
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        margin: 0 20px;
      }

      .setps_line {
        background: rgba(0, 0, 0, 0.15);
        height: 2px;
        width: 100%;
      }
    }
    .setps_text {
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      .text_admin {
        font-size: 16px;
      }
      .text_name {
      }
    }
  }
  .setps_two {
    width: 25%;
    display: flex;
  }

  // 两个节点
  .step_left {
    background: rgba(0, 0, 0, 0.15);
    height: 130px;
    width: 2px;
  }
  .step_right {
    background: rgba(0, 0, 0, 0.15);
    height: 130px;
    width: 2px;
  }
  .step_center {
    width: 98%;
  }
  .setp_center_content {
    .setps_css {
      width: 100%;
      display: flex;
      align-items: center;
      .setps_dot {
        width: 27px;
        height: 10px;
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        margin: 0 20px;
      }

      .setps_line {
        // background: #1677ff; 蓝色
        background: rgba(0, 0, 0, 0.15);
        height: 2px;
        width: 100%;
      }
    }
    .setps_text {
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.45);
      text-align: center;
      .text_admin {
        font-size: 16px;
      }
      .text_name {
      }
    }
  }
  .nav {
    margin-top: 65px;
  }
  .str {
    margin-top: -5px;
  }
  .active {
    background: #1677ff;
    color: #1677ff;
  }
}
</style>

效果