vue实现物流时间轴效果

是小张吖~

已于 2022-04-27 17:13:02 修改

阅读量1.2k

点赞数 2

文章标签： vue.js 前端 css

于 2022-04-27 17:00:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56272227/article/details/124455229

版权

实现效果

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>

// 展示时间轴的详情列表
      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: '【浙江省杭州市秋涛路】已