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

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

   <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>

Original url: Access
Created at: 2019-09-24 21:45:20
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到