<!--
 * @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-item
        class="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>