手动封装一个timeLine时间线，点击有动态效果

html部分

  <div id="time-line">
    <div
      class="item"
      v-for="(item, index) in items"
      :key="index"
      @click="handleClick(item.index, item.content)"
    >
      <div class="item-index">{{ item.index }}</div>
      <div class="item-content">{{ item.content }}</div>
    </div>
  </div>

js数据代码

<script>
export default {
  name: "timeLine",
  data() {
    return {
      items: [
        {
          index: "2020-5-1 13:14:50",
          content: "开始时间",
        },
        { 
          index: "2020-6-1 13:14:50", 
          content: "运行时间" 
        },
        {
          index: "2020-7-1 13:14:50",
          content: "还在运行时间",
        },
        {
          index: "2020-8-1 13:14:50",
          content: "继续运行时间",
        },
        { 
          index: "2020-9-1 13:14:50", 
          content: "最后运行时间" 
        },
        { 
          index: "2020-10-1 13:14:50", 
          content: "运行结束时间" 
         },
      ],
    };
  },
  methods: {
    handleClick(index, content) {
      console.info("index:" + index + "\n" + "content:" + content);
    },
  },
};
</script>

style样式代码

.item {
  margin-left: 30px; /*用左边margin显示时间线*/
  width: calc(100% - 30px); /*因为左边部分用于显示时间线，所以右边部分减去30px*/
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 30px;
  cursor: pointer;
  .item-index {
    line-height: 12px;
    font-size: 14px;
    position: relative;
    color: #656565;
  }
  .item-content {
    width: 100%;
    height: auto; /*由内容决定*/
    font-size: 16px;
    position: relative;
    white-space: pre-wrap; /*保留空白符序列，但是正常地进行换行*/
    word-wrap: break-word; /*在长单词或 URL 地址内部进行换行*/
  }
}
.item::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #91c2fc;
  position: absolute;
  left: -15px;
}
.item:last-child::after {
  display: none;
}
.item::after {
  content: "";
  width: 3px;
  height: calc(100% + 30px); /*加上10px是item底部的margin*/
  background-color: #91c2fc;
  position: absolute;
  top: 0;
  left: -11px;
}
.item:hover::before {
  transform: scale3d(1.2, 1.2, 1);
  background-color: #569ffb;
}

.item:hover::after {
  transform: scale3d(1.1, 1, 1);
  background-color: #569ffb;
}

.item:hover .item-index {
  transform: scale3d(1.01, 1.01, 1);
  color: #343434;
}