垂直时间轴 左边显示时间或者顺序 右边卡片式显示内容

<template>
    <div class="constructional-step">
      <div class="item-box" :class="index === dataList.length-1?'':'pb20'" v-for="(item,index) in dataList" :key="index + 'step'">
        <div class="vertical-line" v-if="index < dataList.length-1"></div>
        <div class="index-box icon-box text-c">{{ index+1}}</div>
        <div class="card-box">
          <p class="fs16 title-text fw">{{item.title}}</p>
          <p>{{item.content}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "constructionalStep",
      data(){
        return{
          dataList:[
            {
              title:'组建评估小组',
              content:'由HR专家与对应部门的负责人'
            },
            {
              title:'评估前会议',
              content:'以会议的形式确定部门关键岗位；',
            },
            {
              title:'指标提炼',
              content:'依据关键岗位的岗位职责',
            },
           
          ]
        }
      },
    }
</script>

.constructional-step{
  padding: 0 20px;
  line-height: 1.85;
  .item-box{
    position: relative;  //父级定位
    display: flex;  // flex 布局
    align-items:stretch;   // 设置为stretch  直线的高度才会为父级的高度
    .index-box{
      position:absolute;
      top:20px;
    }
    .vertical-line{
      position: absolute;  //设置为absolute 
      left:10px;
      top:20px;
      width: 2px;
      height: 100%;
      border-left: 2px solid $borderColor;
    }
    .card-box{
      width: 100%;
      padding: 20px;
      border-radius:4px;
      background-color:$tableContentColor;
      margin-left: 40px;
    }
  }
}

类似于element ui 的时间线组件。