前言:
在当今数字化的时代,用户体验的优化至关重要。物流信息的展示作为电商和供应链领域中的关键环节,其呈现方式直接影响着用户对货物运输状态的感知和满意度。
纵向的物流时间轴效果 能够以清晰、直观的方式向用户展示物流的各个关键节点,帮助用户更好地跟踪货物的运输进程。在
Vue
这一强大的前端框架中实现这样的效果,不仅能够提升开发效率,还能为用户带来更加流畅和交互性强的体验。物流时间轴效果在提升信息呈现的直观性 以及增强用户体验方面表现出色,并且同样适用于其他场景。
一、实现的效果图
注:截图中的数据为模拟的假数据。
二、实现方案
前言中介绍了下物流时间轴的作用和优势,我的项目里就是用了物流时间轴的效果去呈现项目中的【资产动态档案】这一模块,可以直观且清晰的看到各个节点的信息。
- 首先用
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>
- 此处时间轴中用到的数据暂时先用假数据,大家自行替换即可:
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: '【江苏省无锡市富民路公司】已收件'
}
],
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大师的思路和设计稿了。
以上,希望对大家有帮助!