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文章来源地址https://www.toymoban.com/news/detail-861681.html

<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 0 20px 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>

到了这里，关于element -ui 横向时间轴，时间轴悬浮对应日期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！