微信小程序手写时间轴

van组件里的时间轴和ui图的不符，实现后效果图如下：

实现代码

    <view class="mb-20 pd-20 bg-white radius-10">
      <view class="table ptb-40 {{index ==(auditHistoryList.length - 1) ? '' :'bottomBb'}} w100 relative timeStep" wx:for="{{auditHistoryList}}" wx:key="index">
        <view class="td" style="width: 200rpx;">
          <view class="bold text-center">{{item.time}}</view>
          <view class="text-center">{{item.date}}</view>
        </view>
        <view class="td pr-14" style="width: 60rpx;">
          <van-icon name="clock" class="w100 h100" size="20px" color="{{ colorStyle}}" wx:if="{{index == 0 && item.state != '2'}}" />
          <van-icon name="checked" class="w100 h100" size="20px" color="#AAAAAA" wx:else />
        </view>
        <view class="white-line"></view>
        <view class="td pr-10">
          <view class="flex mb-10">
            <view class="pr-10 flex-1">{{item.nodeName}}-{{item.auditUserName}}</view>
            <view class="flex-right">
              <!-- 0 填报上送 1审核中 2 通过  3驳回 -->
              <view class="wMaxText blueTag radius-10 ptb-10 plr-14 blue center" wx:if="{{item.state == '0'}}">提交</view>
              <view class="wMaxText yellowTag radius-10 ptb-10 plr-14 yellow center" wx:if="{{item.state == '1'}}">审批中</view>
              <view class="wMaxText greenTag radius-10 ptb-10 plr-14 green center" wx:if="{{item.state == '2'}}">通过</view>
              <view class="wMaxText redTag radius-10 ptb-10 plr-14 red center" wx:if="{{item.state == '3'}}">驳回</view>
            </view>
          </view>
          <view class="bg-1 pd-14 gray-2" wx:if="{{item.remark && item.remark != ''}}">{{item.remark}}</view>
        </view>
      </view>
    </view>

.table {
  display: table;
}

.td {
  display: table-cell;
}

.white-line {
  width: 1px;
  height: 98%;
  position: absolute;
  top: 42rpx;
  left: 222rpx;
  border: 2rpx dotted #aaa;
  opacity: 0.2;
  z-index: 10;
}

.timeStep:last-child .white-line {
  width: 0px;
  border: none;
}