vue横向时间轴交叉显示

效果图：

sp20221012_111805_945.png

第一步、构建结构
分析效果图得：可分为上中下三个小模块
上：文字部分
中：背景图部分
下：时间部分
使用flex布局和定位完成、交叉样式选用动态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}-{d}'):'' }}</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;）
铺设数据
参考https://blog.csdn.net/weixin_50976973/article/details/122013899