element -ui 横向时间轴，时间轴悬浮对应日期

效果：

<el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label="周期性巡视" name="zqxxs" key="zqxxs"class="scrollable-tab-pane"><div v-if="timelineList == ''"
                  style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;"><p style="color: #32bfb0;">
                    当前没有周期性巡视数据
                  </p></div><div class="timelineProcessBox" v-for="(item, index) in timelineList":key="index"><div style="margin-right: 20px;color: #797979;">{{ index +1}}</div><div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div><el-timeline class="timeline"><el-timeline-item class="lineitem" placement="top":class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"
                      v-for="(activity, activityIndex) in item":key="activityIndex":hide-timestamp="true":timestamp="activity.time"><el-tooltip slot="dot"class="item" effect="dark":disabled="!activity.done":content="activity.time" placement="top-start"><div class="dot"></div></el-tooltip><span style="display: flex; flex-direction: column"><span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">{{ activity.content }}</span></span></el-timeline-item></el-timeline></div></el-tab-pane><el-tab-pane label="临时性巡视" name="second" key="second"class="scrollable-tab-pane"><div v-if="timelineList1 == ''"
                  style="margin: auto;display: flex; align-items: center;justify-content: center;height: 200px;"><p style="color: #32bfb0;">
                    当前没有临时性巡视数据
                  </p></div><div class="timelineProcessBox" v-for="(item, index) in timelineList1":key="index"><div style="margin-right: 20px;color: #797979;">{{ index +1}}</div><div class="button1" @click="handleItemClick(activities[0])">{{ activities[0].lineName }}</div><el-timeline class="timeline"><el-timeline-item class="lineitem" placement="top":class="activity.done && item[activityIndex + 1].done ? 'el-timeline-item-active' : 'inactive'"
                      v-for="(activity, activityIndex) in item":key="activityIndex":hide-timestamp="true":timestamp="activity.time"><el-tooltip slot="dot"class="item" effect="dark":disabled="!activity.done":content="activity.time" placement="top-start"><div class="dot"></div></el-tooltip><span style="display: flex; flex-direction: column"><span style="margin: 5px 0; font-size: 15px;margin-left: 1rem;">{{ activity.content }}</span></span></el-timeline-item></el-timeline></div></el-tab-pane></el-tabs>

data:

const activities =[{
    content: '',
    time: '',
    done: false,
    id: '',
    lineId: '',
    lineName: '',
    planId: '',

  },
  {
    content: '计划开始时间',
    time: '',
    done: false,
  },
  {
    content: '结果编制时间',
    time: '',
    done: false,
  },
  {
    content: '结果编制时间',
    time: '',
    done: false,
  },
]

methods

async handleClick(tab, event){if (tab.label == '周期性巡视'){
        this.timelineList = [];const{data: gmData }= await xsjcgz({tourType:"周期性巡视"});
        this.zqxxsList = gmData.data;this.zqxxsList.forEach(item =>{let list = this.activities
          const{ resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;
          list[0].id = item.id;
          list[0].lineId = item.lineId;
          list[0].lineName = item.lineName;
          list[0].planId = item.planId;if (planPublishTime){
            list[0].time = planPublishTime;
            list[0].done = true;}if (planStartTime){
            list[1].time = planStartTime
            list[1].done = true
          }if (planEndTime){
            list[2].time = planEndTime
            list[2].done = true
          }if (resultRedactTime){
            // console.log(resultRedactTime,"resultRedactTime")
            list[3].time = resultRedactTime
            list[3].done = true
          }
          this.timelineList.push(list)});}else if (tab.label == '临时性巡视'){
        this.timelineList1 = [];const{data: gmData }= await xsjcgz({tourType:"临时性巡视"});
        this.zqxxsList = gmData.data;this.zqxxsList.forEach(item =>{let list = this.activities
          const{ resultRedactTime, planEndTime, planStartTime, planPublishTime } = item.plan;
          list[0].id = item.id;
          list[0].lineId = item.lineId;
          list[0].lineName = item.lineName;
          list[0].planId = item.planId;if (planPublishTime){
            list[0].time = planPublishTime;
            list[0].done = true;}if (planStartTime){
            list[1].time = planStartTime
            list[1].done = true
          }if (planEndTime){
            list[2].time = planEndTime
            list[2].done = true
          }if (resultRedactTime){
            console.log(resultRedactTime,"resultRedactTime")
            list[3].time = resultRedactTime
            list[3].done = true
          }
          this.timelineList1.push(list)});

        // console.log(this.timelineList," this.timelineList")}},

style

<style lang="scss" scoped>
.scrollable-tab-pane {
  height:300px;/* 设置固定高度 */
  overflow-y: auto;/* 垂直滚动条 */}

.timelineProcessBox {
  width:64rem;
  height:50px;
  border:1px solid #60d6cd;// background: rgba($color: #3bcdc2, $alpha:0.3);
  background: #eff8f8;
  border-radius:6px;margin-bottom:20px;
  padding:20px;
  box-sizing: content-box;display: flex;
  align-items: center;

  .button1 {display: flex;
    align-items: center;
    justify-content: center;color: #0e8ca1;
    font-weight: bold;
    font-size:18px;
    border:1px solid #666;
    width:120px;
    height:40px;
    border-radius:5px;}

  .timeline {display: flex;
    flex:1;margin:40px auto;

    .lineitem {transform: translateX(50%);
      width:22%;}}}//圆点样式
.dot{
  border-bottom:4px solid #3bcdc2 !important;
  background: #fff;
  width:11px;
  height:11px;
  border-radius:50%;
  border:4px solid #3bcdc2;}// 流程线条样式
::v-deep .el-timeline-item__tail {
  border-left: none !important;
  border-top:4px solid #e4e7ed !important;
  width:100% !important;
  position: absolute !important;
  top:0px;}::v-deep .el-timeline-item__wrapper {
  padding-left:0;
  position: absolute !important;
  top:20px !important;transform: translateX(-50%)!important;text-align: center !important;}::v-deep .el-timeline-item__timestamp {
  font-size:14px;}::v-deep .el-timeline-item__dot {margin-top:-10px;}

.el-timeline-item-active {::v-deep .el-timeline-item__node {
    background-color: #06b6a9 !important;}::v-deep .el-timeline-item__tail {
    border-color: #06b6a9 !important;}//&:last-child {//::v-deep .el-timeline-item__tail {//     border-color: #e4e7ed !important;//}//}}//选项卡右侧
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
  float:right;}// 有active样式的下一个li
.el-timeline-item-active+li {::v-deep .el-timeline-item__node {
    background-color:"#000";}}</style><style lang="scss" scoped>
.el-dialog3 .el-dialog__header {/*display: none;*/pointer-events: fill;}

.el-dialog3 .el-dialog {
  height:80% !important;
  overflow: auto;}

.tubiao {
  overflow-y: auto;
  width:1820px;
  height:61rem;/* 设置一个固定的高度 */margin: auto;}

.list-title {
  padding:20px 020px 0;}

.el-col1 {margin-left:50px;}

.left_div2 {
  height:28rem;}

.timeaxis {
  width:800px;
  height:200px;margin-top:30px;}

.box {
  float:left;
  width:180px;}

.circular {
  border:2px solid #67c23a;
  width:10px;
  height:10px;
  border-radius:10px;
  background: white;margin: auto;margin-bottom:-4px;
  position:relative;
  top:-8px;left:85px;}

.item {
  border-bottom:1px solid #409eff;
  position:relative;

  .left{
    position: absolute;left:55px;
    top:-25px;}

  .center {
    position: absolute;left:165px;
    top:-26px;}}

.item2 {
  position:relative;

  .bottom {
    position: absolute;left:75px;
    top:0px;}}</style>