vue项目中利用css实现简单的时间轴

需求

竖直方向上是一栏时间轴（显示时分秒），水平方向上可以选择时间(日期)，且可以横向滑动.

实现

竖向

先写一个大的div，包含整个卡片的内容，里面有一张圆点图片，一条时间线，还有里面的时间信息，图片文字信息。
时间线的思路是：利用css 中border边框来显示，如果要加入动态效果，比如改变颜色，可以通过JS或者hover属性来切换这条线的颜色。
实现的效果图：

html:

<div class="message">
    <div class="circle"><img src="../../../static/icon/main.png" alt=""></div><span class="time">{
   {
   item.time}}</span>
    <div class="lineborder">
      <img src="../../../static/icon/main.png" alt="">
      <!--<p>text</p>-->
    </div>
  </div>

CSS：

.message{
    display: block;
    width: 100%;
    height: 450rpx;
  }
  .circle{
    margin-left: 28rpx;
    margin-right