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.activitiesconst { 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 = planStartTimelist[1].done = true}if (planEndTime) {list[2].time = planEndTimelist[2].done = true}if (resultRedactTime) {// console.log(resultRedactTime, "resultRedactTime")list[3].time = resultRedactTimelist[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.activitiesconst { 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 = planStartTimelist[1].done = true}if (planEndTime) {list[2].time = planEndTimelist[2].done = true}if (resultRedactTime) {console.log(resultRedactTime, "resultRedactTime")list[3].time = resultRedactTimelist[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 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>