步驟條純css

<!-- Step.vue  -->
<template>
  <div>
    <Alert show-icon style="width: 900px;">審批單號：{{stepInfo.no}}</Alert>
    <div class="stepOut">
      <ul class="ulStyle">
        <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
          <p class="stepStatus">{{stepItem.title}}</p>
          <!-- 模擬步驟條的節點，此處爲圓圈 -->
          <Icon type="ios-checkmark-circle-outline" class="iconAir" v-if="stepItem.status===0"/>
          <Icon type="ios-close-circle-outline" class="iconAir2" v-else/>
          <!-- 模擬步驟條連接線，動態顯示  -->
          <!-- <div :class="stepInfo.step >= index+2 ? 'line lineActive':'line'" v-show="index!==stepInfo.list.length-1"></div> -->
          <div class="line lineActive" v-show="index!==stepInfo.list.length-1" v-if="stepInfo.step >= index+2"></div>
          <div class="line lineActive2" v-show="index!==stepInfo.list.length-1" v-else></div>
          <p class="stepStatus">{{stepItem.tag}}</p>
          <p :style="stepItem.status===0?'color: green;':'color: red'">{{stepItem.opinion}}</p>
          <p class="statusTime">{{stepItem.time}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MySteps',
  props: {
    // 傳遞步驟參數
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0,
          no:''
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.stepOut {
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: left;
  .ulStyle {
      list-style: none;
      // width: 100%;
      justify-content: space-between;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: scroll;
      display: flex;
      margin-bottom: -9px;
  }
  .stepItem {
    width: 210px;
    height: 70px;
    float: left;
    font-family: SimSun;
    font-size: 16px;
    text-align: center;
    position: relative;
    .icon {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: rgba(226, 226, 226, 1);
      margin: 0 auto;
      position: relative;
      z-index: 888;
    }
    .active {
      background-color: #2d8cf0;
    }
    .line {
      position: absolute;
      top: 6px;
      left: 50%;
      border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
      width: 260px;
      z-index: 111;
      width: 170px;
    }
    .lineActive {
      margin: 36px 0px 0px 20px;
      border-bottom: 2px solid #2d8cf0;
      width: 115px;
    }
    .lineActive2 {
      margin: 36px 0px 0px 20px;
      border-bottom: 2px solid red;
      width: 115px;
    }
    .iconAir {
      // margin: 0 30px 11px 0px;
      margin: 0 0px 11px 0px;
      color: #2d8cf0;
    }
    .iconAir2 {
      margin: 0 0px 11px 0px;
      color: red;
    }
    .stepStatus {
      color: rgba(87, 87, 87, 1);
      line-height: 36px;
    }
    .statusTime {
      color: rgba(87, 87, 87, 1);
      opacity: 0.5;
    }
  }
}
</style>

後來我又更新了一下，也不知道哪個好看，就都留在這吧

<template>
  <div>
    <Alert show-icon style="width: 900px;">審批單號：{{stepInfo2.no}}</Alert>
    <div class="stepOut">
      <ul class="ulStyle">
        <li class="stepItem" v-for="(stepItem, index) in stepInfo2.list" :key="index">
          <p class="stepStatus">{{stepItem.username||'_'}}</p>
          <!-- 模擬步驟條的節點，此處爲圓圈 -->
          <Icon type="ios-close-circle-outline" class="iconAir2" v-if="index===stepInfo2.step"/>
          <Icon type="ios-checkmark-circle-outline" class="iconAir" v-else/>
          <!-- 模擬步驟條連接線，動態顯示  -->
          <!-- <div :class="stepInfo2.step >= index+2 ? 'line lineActive':'line'" v-show="index!==stepInfo2.list.length-1"></div> -->
          <div class="line lineActive2" v-show="index!==stepInfo2.list.length-1"  v-if="index===stepInfo2.step-1"></div>
          <div class="line lineActive" v-show="index!==stepInfo2.list.length-1" v-else></div>
          <p class="stepStatus">{{stepItem.NAME_}}</p>
          <p :style="index<stepInfo2.step?'color: green;':'color: red'">{{stepItem.outcome}}</p>
          <Tooltip content="審覈開始時間" placement="top-start">
            <p class="statusTime">{{stepItem.START_TIME_}}</p>
          </Tooltip></br>
          <Tooltip content="審覈結束時間" placement="top-start">
            <p class="statusTime">{{stepItem.END_TIME_}}</p>
          </Tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'MySteps',
  props: {
    // 傳遞步驟參數
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0,
          no:''
        }
      }
    }
  },
  data(){
      return{
        stepInfo2: {
          list: [],//審批節點信息
          step: 0,//異常位置，如果沒有駁回的就給他數組長度
          no:''//審批單號
        },
      }},
  methods : {
    showapprovalDetail(params,tableName,stateColName){
      if(`${params.row[stateColName]}`==='1'){
        this.stepInfo2={
          list: [],
          step: 0,
          no:params.row["contract_no"]
        }
      }else{
        this.$Spin.show({ render: h => { return h("div", [ h("Icon", { props: { type: "ios-loading", size: 50 } }), h("div",{ style:{ marginTop: '10px' } }, '加載中。。。')]); } });
        this.Http(this.Api.queryAuditProcess, {orderId:tableName==='kzsp'?params.row["pid"]:params.row["id"],token:Cookies.get("token_back"),tableName:tableName}).then(res => {
          this.stepInfo2={
            list: res.data.object.reverse(),
            step: `${params.row[stateColName]}`==='4'?res.data.object.length-1:res.data.object.length+1,
            no:params.row["contract_no"]
          }
          this.$Spin.hide();
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.stepOut {
  width: 100%;
  height: 190px;
  display: flex;
  justify-content: left;
  .ulStyle {
      list-style: none;
      // width: 100%;
      justify-content: space-between;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: scroll;
      display: flex;
      margin-bottom: -9px;
  }
  .stepItem {
    width: 210px;
    height: 70px;
    float: left;
    font-family: SimSun;
    font-size: 16px;
    text-align: center;
    position: relative;
    margin-right: 10px;
    margin-left: 50px;
    .icon {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: rgba(226, 226, 226, 1);
      margin: 0 auto;
      position: relative;
      z-index: 888;
    }
    .active {
      background-color: #2d8cf0;
    }
    .line {
      position: absolute;
      top: 6px;
      left: 50%;
      border-bottom: 1px dashed rgba(3, 2, 2, 0.7);
      width: 260px;
      z-index: 111;
      width: 170px;
    }
    .lineActive {
      margin: 36px 20px 0px 20px;
      border-bottom: 2px solid #2d8cf0;
      // width: 115px;
      // min-width: 110px;
      // max-width: 155px;
    }
    .lineActive2 {
      margin: 36px 20px 0px 20px;
      border-bottom: 2px solid red;
      // width: 115px;
      // min-width: 110px;
      // max-width: 155px;
    }
    .iconAir {
      // margin: 0 30px 11px 0px;
      margin: 0 0px 11px 0px;
      color: #2d8cf0;
    }
    .iconAir2 {
      margin: 0 0px 11px 0px;
      color: red;
    }
    .stepStatus {
      color: rgba(87, 87, 87, 1);
      line-height: 36px;
    }
    .statusTime {
      color: rgba(87, 87, 87, 1);
      opacity: 0.5;
    }
  }
}
</style>