VUE 开发一套自己的时间轴

最近做VUE开发，要实现时间轴功能，先看效果图

1. 这个空间的主要功能点是蓝色竖线的距离和竖线要随着文字的增多而自动变长，实现思路是竖线为右侧的 border-left
2. 第一个原点为实心，这里循环的时候判断下即可。
3. 下面附上布局

   <div v-for="(item,index) in items" :key="item.id">
        <span :class="{circleOne:index != 0,circle:index == 0}"></span>
        <div
          :class="{rightsborderleft:index != itemsLength,rights:true}"
          style="display: inline-block;"
        >
          <div class="right-content">
            <span class="content-date">{{item.yearMonthDay}}/{{item.week}}</span>
            <span class="content-time">{{item.hourMinuteSecond}}</span>
            <span class="content-status">{{item.stateName}}</span>
            <span style="max-width:700px; vertical-align: top;">
              {{item.remark}}
              <div v-if="item.truckPlate != ''">
                <span>车牌号：{{item.truckPlate}}</span>
                <span style="margin: 0 15px">司机：{{item.driverName}}</span>
                <span>司机手机：{{item.driverTel}}</span>
              </div>
            </span>
          </div>

          <img
            v-if="item.state == 1"
            @click="getItemData(item.logCode)"
            src="@/assets/img/actionBarModify.svg"
          >
          <img
            v-if="item.state == 1"
            @click="deleteItem(item.logCode)"
            src="@/assets/img/actionDelete.svg"
          >
        </div>
      </div>