效果圖：

sp20221012_111805_945.png

第一步挠日、構(gòu)建結(jié)構(gòu)
分析效果圖得：可分為上中下三個小模塊
上：文字部分
中：背景圖部分
下：時間部分
使用flex布局和定位完成飞蛹、交叉樣式選用動態(tài)class篩選
针饥、此處背景圖有三種樣式吻谋、需要判斷條件帽芽、完成的顯示淺色背景鸠姨、未完成的顯示深色背景菩颖、正在完成的顯示橙色背景噪珊。

    <div v-for="(item,index) in list" :key="index" class="box">
      <!-- 文字 -->
      <div class="code" :class="{'box-check':check(index) ,'none':item.date == '','now':currentIndex == index }">
        <h3>{{ item.trackName ? item.trackName:'' }}</h3>
        <!-- 小豎線 -->
        <div :class="{'code-line':true,'code-line1':check(index)}" />
      </div>
      <!-- 背景圖 -->
      <div class="line">
        <div class="cur">
          <img v-if="item.date==='' && !(currentIndex == index)" src="../../../../assets/image/schedule_3.png" alt="">
          <img v-else-if="currentIndex == index" src="../../../../assets/image/schedule_2.png" alt="">
          <img v-else src="../../../../assets/image/schedule_1.png" alt="">
        </div>
      </div>
      <!-- 時間 -->
      <div class="code1" :class="{'box-check1':check(index)}">
        <h3>{{ item.date? parseTime(new Date(item.date), '{y}-{m}-e8iqcwg'):'' }}</h3>
      </div>
    </div>
  </div>
css部分

.time-box {
  width: 100%;
  display: flex;
  overflow: auto;
  position: relative;

    .box{
      height: 200px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  //圖
    .line{
   width: 100%;
    .cur {
    // box-shadow: 0px 1px 11px rgba(27, 84, 197, 0.95);
    img{
  width: 100%;
  height: 100%;
      }
  }
}
.box-check{
    position: relative;
    top:110px
}
.box-check1{
    position: relative;
    top:-65px
}
//還沒進行的文字
.none{
  border: 1px solid  rgb(27, 38, 87);
  color:#1f3663;
  margin-left: 6px;
}
//正在進行的文字
.now{
  border: 1px solid  rgb(189, 145, 69);
  color:#d69c4a;
}
}

.code {
  margin-left: 25px;
  margin-bottom: 20px;
    width: 100px;
    border: 1px solid  rgb(67, 104, 189);
    height: 50px;
    color:#438dbd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .code-line{
      position: absolute;
      top: 50px;
      height: 24px;
      width: 1px;
      background:  rgb(32, 59, 119);
    }
    .code-line1{
      position: absolute;
      top: -25px;
      height: 25px;
      width: 1px;
      background: rgb(32, 59, 119);
    }
}
.code1 {
  margin-left: 15px;
    width: 100px;
    height: 50px;
    color:rgba(255,255,255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

（如果是縱向時間軸谤职、完成交叉的話可以使用flex屬性主軸交叉完成flex-direction: row-reverse;）
鋪設(shè)數(shù)據(jù)
參考https://blog.csdn.net/weixin_50976973/article/details/122013899