css实现timeline时间线

效果：

实现：

<template>
  <ul class="timeline">
    <li class="timeline-item">
      <div class="time">
        <p>XX年XX月XX日</p>
        <p>00:00:00</p>
      </div>
      <i class="circle"></i>
      <div class="detail">
        <div class="timeline-title">标题1</div>
        <div class="timeline-content">
          <p>
            文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1
            文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1文本1
          </p>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="time">
        <p>XX年XX月XX日</p>
        <p>00:00:00</p>
      </div>
      <i class="circle"></i>
      <div class="detail">
        <div class="timeline-title">标题2</div>
        <div class="timeline-content">
          <p>
            文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2文本2
          </p>
        </div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="time">
        <p>XX年XX月XX日</p>
        <p>00:00:00</p>
      </div>
      <i class="circle"></i>
      <div class="detail">
        <div class="timeline-title">标题3</div>
        <div class="timeline-content">
          <p>
            文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3文本3
          </p>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
ul,
li {
  list-style: none;
}
.timeline {
  width: 500px;
  padding: 0;
  margin: 0 auto;
  .timeline-item {
    padding-left: 150px;
    position: relative;
    margin-bottom: 10px;
    &::before {
      content: "";
      position: absolute;
      left: 130px;
      height: 100%;
      border-left: 2px dotted #569fff;
      top: 15px;
    }
    .time {
      position: absolute;
      left: 0;
    }
    .detail {
      .timeline-title {
        font-weight: bold;
        font-size: 20px;
      }
      // .timeline-content {
      //   min-height: 100px;
      // }
    }
    .circle {
      width: 15px;
      height: 15px;
      border: 1px solid #4f9efd;
      position: absolute;
      left: 123px;
      top: 5px;
      background: #efefef;
      border-radius: 50%;
      &::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #4f9efd;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .timeline-item:last-child {
    margin-bottom: 0;
    &::before {
      height: 0;
    }
  }
}
</style>