Vue step垂直步骤条左右内容轮换展示

先上效果图：

主要代码：

<template>
  <div class="step_box" :class="{
    isright: (props.stepIndex+1)%2 === 0, 
    isfirst: props.stepIndex === 0,
    islast: props.stepIndex === props.total-1
  }">
    <div class="flex_1 cover_img">
      <coverImg></coverImg>
    </div>
    <div class="icon_dot"><img src="@/assets/images/news/icon_dot.png" alt=""></div>
    <div class="flex_1 cover_text">
      <p>{{ props.stepItem.date }}</p>
      <p>{{ props.stepItem.desc }}</p>
    </div>
  </div>
</template>

<script setup>
import coverImg from '@/views/pages/about/coverImg'

const props = defineProps({
  stepItem: Object,
  stepIndex: Number,
  total: Number
})

</script>

<style lang='scss' scoped>
.step_box{
  display: flex;
  justify-content: center;
  height: 400px;
  &.isright{
    flex-direction:row-reverse;
    .cover_text{
      text-align: right !important;
    }
  }
  &.isfirst{
    .icon_dot::after{
      height: 50%;
      top: unset;
      bottom: 0;
    }
  }
  &.islast{
    .icon_dot::after{
      height: 50%;
    }
  }
  .flex_1{
    width: 500px;
    &.cover_img{
      display: flex;
      align-items: center;
    }
    &.cover_text{
      text-align: left;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      >p{
        width: 100%;
        margin: 5px 0;
        &:first-child{
          font-size: 20px;
          color: #000;
          margin-top: 25px;
        }
        &:nth-child(2){
          font-size: 14px;
          color: #656565;
        }
      }
    }
  }
  .icon_dot{
    margin: 0 80px;
    display: flex;
    align-items: center;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      height: 100%;
      width: 1px;
      background: #BCBCBC;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    img{
      width: 29px;
      height: 29px;
      position: relative;
      z-index: 9;
    }
  }
}
</style>