Vue实现纵向的物流时间轴效果

前言:

在当今数字化的时代,用户体验的优化至关重要。物流信息的展示作为电商和供应链领域中的关键环节,其呈现方式直接影响着用户对货物运输状态的感知和满意度。

纵向的物流时间轴效果 能够以清晰、直观的方式向用户展示物流的各个关键节点,帮助用户更好地跟踪货物的运输进程。在 Vue 这一强大的前端框架中实现这样的效果,不仅能够提升开发效率,还能为用户带来更加流畅和交互性强的体验。

物流时间轴效果在提升信息呈现的直观性 以及增强用户体验方面表现出色,并且同样适用于其他场景。

一、实现的效果图

注:截图中的数据为模拟的假数据。

二、实现方案

前言中介绍了下物流时间轴的作用和优势,我的项目里就是用了物流时间轴的效果去呈现项目中的【资产动态档案】这一模块,可以直观且清晰的看到各个节点的信息。

  1. 首先用ul-li的方式实现:

代码如下:

html 复制代码
<div class="commonTitle">资产动态档案</div>
<div class="content">
    <ul class="dynamicFiles" v-for="(item,index) in timeAxis" :key="index">
        <li>{{ item.time }}</li>
        <li class="detail">{{ item.address }}</li>
    </ul>
</div>
  1. 此处时间轴中用到的数据暂时先用假数据,大家自行替换即可:
js 复制代码
    // 时间轴列表
    timeAxis: [
        {
          state: 1, // 状态: 1:已完成,0:未完成
          time: '今天2024年5月2日 上午10:50:11',
          address: '【镇江转运中心】已发出 下一站【镇江为民中心】'
        },
        {
          state: 0,
          time: '2024年5月2日 上午10:30:10',
          address: '【镇江转运中心】已收入'
        },
        {
          state: 0,
          time: '2024年5月2日 上午10:10:08',
          address: '【江苏省无锡市富民路】已发出 下一站【镇江中心】'
        },
        {
          state: 0,
          time: '2024年5月2日 上午7:59:24',
          address: '【江苏省无锡市富民路公司】已打包'
        },
        {
          state: 0,
          time: '2024年5月2日 上午6:40:23',
          address: '【江苏省无锡市富民路公司】已收件'
        }
    ],
  1. css样式实现:
css 复制代码
/* 时间轴 */
    .dynamicFiles {
      position: relative;
      line-height: 36px;
      font: 24px PingFangSC-Regular;
      color: #17233d;
      padding-left: 32px;

      .detail {
        margin-top: 8px;
        padding: 12px 20px;
        background: #eaf6ff;
        border-radius: 12px;
      }

      &:before {
        position: absolute;
        margin-top: 8px;
        left: 4px;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: linear-gradient( 318deg, #cbcfe2 0%, #dfe7f0 100%);
        z-index: 1;
      }
      &:after {
        position: absolute;
        top: 12px;
        left: 8px;
        bottom: -28px;
        content: "";
        width: 1px;
        border-right: 1px solid #dde4ef;
      }
      &:not(:first-child) {
        padding-top: 20px;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
      &:first-child {
        &:before {
          background: linear-gradient( 180deg, #4eccfe 0%, #3f90fd 100%);
        }
      }
      &:last-child > .detail {
        background: #ffeaea;
      }
    }

大功告成,可直接复制粘贴!

三、总结

实现方案应该有很多,本文这种仅供参考。有些常见场景的功能和效果,换个场景其实同样适用,不过这也要看各方UI大师的思路和设计稿了。

以上,希望对大家有帮助!

相关推荐
运维-大白同学22 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple2 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式