vue移动端时间线

根据框架vux改写的时间线（https://doc.vux.li/zh-CN/components/timeline.html）

<template>
    <div class="time-line">
      <ul class="timeline">
        <li class="timeline-item" v-for="item in timelineOption" :key="item.id">
          <div class="item-left">
            <div class="item-spot"></div>
            <div class="item-line" v-if="item.people"></div>
            <div class="item-createTime">
              <span class="item-date">{{item.createTime.slice(5, 10)}}</span>
              <span class="item-time">{{item.createTime.slice(11, 19)}}</span>
            </div>
          </div>
          <div class="item-right">
            <div class="item-title">{{item.title}}</div>
            <div class="item-content" v-if="item.people">处理人：{{item.people}}</div>
          </div>
        </li>
      </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      timelineOption: [{
        id: 0,
        title: '开始',
        people: '我',
        createTime: '2021-12-17 10:37:22'
      },
      {
        id: 1,
        title: '阶段一',
        people: '你',
        createTime: '2021-12-18 10:37:22'
      },
      {
        id: 2,
        title: '阶段二',
        people: '他',
        createTime: '2021-12-19 10:37:22'
      },
      {
        id: 3,
        title: '结束',
        people: '',
        createTime: ''
      }]
    }
  }
}
</script>
<style lang="scss">
.time-line{
  padding: 1rem;
  .timeline{
    margin-left: 3.5rem;
    .timeline-item{
      position: relative;
      display: flex;
      height: 7.125rem;
      .item-left{
        position: relative;
        top: 0.25rem;
        width: 1rem;
        .item-spot{
          width: 0.75rem;
          height: 0.75rem;
          border: 0.0625rem solid #2F78EC;
          border-radius: 50%;
          background-color: #FFFFFF;
        }
        .item-line{
          position: absolute;
          content: '';
          height: calc(100% - 0.875rem);
          width: 0.0625rem;
          left: 0.40625rem;
          top: 0.875rem;
          background-color: #BBBBBB;
        }
        .item-createTime{
          position: absolute;
          top: -0.25rem;
          left: -3.5rem;
          width: 4rem;
          color: #999999;
          .item-date{
            font-size: 0.875rem;
          }
          .item-time{
            font-size: 0.75rem;
          }
        }
      }
      .item-right{
        padding-left: 1rem;
        flex: 1;
        .item-title{
          color: #2F78EC;
        }
        .item-content{
          width: calc(100% - 2.5rem);
          margin-top: 1rem;
          padding: 1.125rem;
          background-color: #F2F2F2;
          font-size: 0.875rem;
          color: #999999;
        }
      }
    }
  }
}
</style>