横向时间轴

效果图：

html代码： 

<div class="timeLine">
  <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 ? '28px' : '' }">
          <span>{{ item.things }}</span>
        </div>
        <!--线-->
        <div class="my_timeline_item_line" v-if="index !== timeLineList.length - 1"></div>
        <!--标注-->
        <div class="my_timeline_item_content">
          <span>{{ item.timestamp }}</span>
        </div>
      </li>
    </ul>
  </div>
</div>

 css代码：

.ul_box {
  width: 900px;
  height: 150px;
  display: inline-block;
  margin: 20px 2px;
  overflow: hidden;

  .my_timeline_item {
    display: inline-block;
    width: 100px;

    .my_timeline_node {
      width: 80px;
      height: 80px;
      color: #467AE9;
      font-size: 18;
      background: #467AE9;
      box-sizing: border-box;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        color: black;
      }
    }

    .my_timeline_item_line {
      width: 90px;
      height: 10px;
      margin: -40px 0 0 10px;
      border-top: 2px solid #467AE9;
      border-left: none;
    }

    .my_timeline_item_content {
      margin: 35px 0 0 0;
      display: flex;
      flex-flow: column;
      cursor: pointer;
    }
  }
}

js代码:

timeLineList: [
  {
    things: '1',
    timestamp: '2021-01-01',
  },
  {
    things: '2',
    timestamp: '2021-01-31',
  },
  {
    things: '3',
    timestamp: '2021-05-30',
  },
  {
    things: '4',
    timestamp: '2021-12-15',
  },
  {
    things: '5',
    timestamp: '2022-02-20',
  },
  {
    things: '6',
    timestamp: '2022-05-30',
  },
  {
    things: '7',
    timestamp: '2022-10-15',
  },
  {
    things: '8',
    timestamp: '2022-21-01',
  }
]

开发时偶尔会用到的横向时间轴，这写的比较基础部分，有不同的地方，在基础上自己添加也比较容易~~