代码：

<template>
  <div class="app-container">
    <div class="timeLine" style="overflow: hidden;">
      <div class="ul_box">
        <ul class="my_timeline" ref="mytimeline" style="margin-left: 10px;">
          <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index">
            <!--圈圈节点-->
            <div class="my_timeline_node" :style="{'position':index===timeLineList.length-1?'relative':'', 'top':index===timeLineList.length-1?'-4px':''}"></div>
            <!--线-->
            <div class="my_timeline_item_line" v-if="index !== timeLineList.length-1"></div>
            <!--标注-->
            <div class="my_timeline_item_content">
              <span>{{item.things}}</span>
              <span>{{item.timestamp}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  data() {
    return {
      timeLineList: [
        {
          things: '1',
          timestamp: '2021-01-01',
          remark: ''
        },
        {
          things: '2',
          timestamp: '2021-01-31',
          remark: ''
        },
        {
          things: '3',
          timestamp: '2021-05-30',
          remark: ''
        },
        {
          things: '4',
          timestamp: '2021-12-15',
          remark: ''
        },
        {
          things: '5',
          timestamp: '2022-02-20',
          remark: ''
        },
        {
          things: '6',
          timestamp: '2022-05-30',
          remark: '上海明华变更为香港明华'
        },
        {
          things: '7',
          timestamp: '2022-10-15',
          remark: ''
        },
        {
          things: '8',
          timestamp: '2022-21-01',
          remark: '香港明华变更为深圳明华'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.ul_box {
  width: 900px;
  height: 60px;
  display: inline-block;
  float: left;
  margin: 20px 2px;
  overflow: hidden;
}
.my_timeline_item {
  display: inline-block;
  width: 100px;
}
.my_timeline_node {
  width:10px;
  height: 10px;
  color: #467AE9;
  font-size: 18;
  background: #467AE9;
  box-sizing: border-box;
  border-radius: 50%;
}
.my_timeline_item_line {
  width: 90px;
  height: 10px;
  margin: -6px 0 0 10px;
  border-top: 2px solid #E4E7ED;
  border-left: none;
}
.my_timeline_item_content {
  margin: 10px 0 0 -10px;
  display: flex;
  flex-flow: column;
  cursor: pointer;
}
</style>

效果：

思路：

1.使用< ul > 标签定义无序列表；

2.css样式中的display: inline-block属性 用来使< ul >标签横向展示；

3.最后一个是横线，使用数组长度判断其不显示，但此时出现最后一个圆圈的位置没有水平对齐的问题，使用数组长度判断其位置上移。

参考文章：https://www.cnblogs.com/duanzhenzhen/p/10937675.html