<!--* @Author: CHENJIE* @Date: 2024-10-27 12:13:09* @LastEditors: CHENJIE* @LastEditTime: 2024-10-28 18:26:37* @Description:
-->
<template><div class="box"><el-timeline class="timeline"><el-timeline-itemclass="lineitem":class="activity.done ? 'active' : 'inactive'"v-for="(activity, index) in activities":key="index":timestamp="activity.time"></el-timeline-item></el-timeline></div>
</template>
<script setup>
const activities = [{content: "开工阶段",time: "2018-04-12 20:46",people: "五六七",done: true,},{content: "实施阶段",people: "吉吉国王",done: false,time: "2018-04-03 20:46",},{content: "竣工阶段",done: false,people: "熊大",time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-03 20:46",},{content: "结算阶段",people: "",done: false,time: "2018-04-33 20:46",},
];
</script>
<style lang="scss" scoped>
$login_word: red;
.box {width: 1000px;height: 100px;overflow-x: scroll;
}
.timeline {display: flex;padding: 0;.lineitem {transform: translateX(50%);width: 100px;}
}
:deep(.el-timeline-item__tail) {border-left: none;border-top: 2px solid #e4e7ed;width: 100%;position: absolute;top: 6px;
}
:deep(.el-timeline-item__wrapper) {padding-left: 0;position: absolute;top: 20px;transform: translateX(-50%);text-align: center;
}
</style>