实现效果

html

<ul class="time-axis"  :class="{ 'is-done': item.state === 1 }" v-for="(item,index) in timeAxis" :key="index">
  <li>{{ item.time }}</li>
  <li>{{ item.address }}</li>
</ul>

js

// 展示时间轴的详情列表
      timeAxis: [
        {
          state: 1, // 状态： 1:已完成，0:未完成
          time: '2019年11月2日 下午8:50:12',
          address: '【杭州转运中心】已发出 下一站【杭州石桥城配中心】'
        },
        {
          state: 1,
          time: '2019年11月2日 下午8:45:11',
          address: '【杭州转运中心】已收入'
        },
        {
          state: 0,
          time: '2019年11月2日 下午8:10:09',
          address: '【浙江省杭州市秋涛路】已发出 下一站【杭州中心】'
        },
        {
          state: 0,
          time: '2019年11月2日 下午7:58:23',
          address: '【浙江省杭州市秋涛路公司】已打包'
        },
        {
          state: 0,
          time: '2019年11月2日 下午7:55:30',
          address: '【浙江省杭州市秋涛路公司】已收件'
        }
      ],

css

/* 时间轴 */
@b time-axis {
  color: #262626;
  position: relative;
  padding-left: 30px;
  list-style: none;
  &:before {
    position: absolute;
    margin-top: 8px;
    left: 4px;
    content: " ";
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #e8e8e8;
  }
  &:after {
    position: absolute;
    top: 16px;
    left: 8px;
    bottom: -19px;
    content: " ";
    width: 1px;
    border-right: 1px solid #e8e8e8;
  }
  &:not(:first-child) {
    padding-top: 8px;
  }
  &:last-child {
    &:after {
      display: none;
    }
  }
  &.is-done {
    &:after {
      border-color: #0091fa;
    }
    &:before {
      background-color: #1874ff;
      box-shadow: #1874ff 0 0 10px;
    }
  }
}