vue实现物流时间轴效果 vue实现物流时间轴效果

本文实例为大家分享了vue实现物流时间轴效果的具体代码，供大家参考，具体内容如下
son组件(物流时间轴组件)

文章图片

.steps-wrap {ul {padding: 0 16px; li {display: flex; line-height: 1rem; color: #999; .time {text-align: center; width: 80px; font-size: 12px; }.circle {position: relative; z-index: 999; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 16px; height: 16px; top: 0; .icon {width: 100%; height: 100%; }.circle-icon {position: relative; z-index: 999; display: inline-block; border-radius: 50%; width: 8px; height: 8px; background-color: #333333; }}.message {padding: 0 0 1.6rem 25px; font-size: 12px; flex: 1; border-left: 1px solid #999999; margin-left: -8px; }&:last-child {.message {border-left: 1px solid transparent; }}}}}

parent组件

.logistics {.item {display: flex; align-items: center; /* 垂直居中 */padding: 12px 24px; .left {width: 50px; height: 50px; object-fit: cover; }.text {flex: 1; p {margin: 0; padding-left: 12px; }}.refresh {width: 24px; height: 24px; }}.empty {display: flex; justify-content: center; align-items: center; padding-top: 48px; font-size: 14px; span {padding-left: 12px; }}}

接口数据格式

{"Status": "true","StatusCode": "200","Msg": "成功","Timestamp": 1584005302985,"Sign": null,"Result": [{"state": "签收","status": "3","com": "SF","nu": "SF1018384252542","data": [{"context": "[上海市]顺丰速运已收取快件","time": "2020-03-01 18:16:59","ftime": "2020-03-01 18:16:59"}, {"context": "[上海市]快件在【上海青浦重固营业点】已装车,准备发往【上海华新集散中心】","time": "2020-03-01 18:40:14","ftime": "2020-03-01 18:40:14"}, {"context": "[上海市]快件已发车","time": "2020-03-01 18:42:12","ftime": "2020-03-01 18:42:12"}, {"context": "[上海市]快件到达【上海华新集散中心】","time": "2020-03-01 19:01:08","ftime": "2020-03-01 19:01:08"}, {"context": "[上海市]快件在【上海华新集散中心】已装车,准备发往【全国航空枢纽（萧山】","time": "2020-03-01 20:01:27","ftime": "2020-03-01 20:01:27"}, {"context": "[上海市]快件已发车","time": "2020-03-01 20:48:53","ftime": "2020-03-01 20:48:53"}, {"context": "[杭州市]快件到达【全国航空枢纽（萧山】","time": "2020-03-01 23:20:28","ftime": "2020-03-01 23:20:28"}, {"context": "[杭州市]快件在【全国航空枢纽（萧山】已装车,准备发往【石家庄高开集散中心】","time": "2020-03-02 01:31:35","ftime": "2020-03-02 01:31:35"}, {"context": "[杭州市]快件在【杭州飞往石家庄航班上】已起飞","time": "2020-03-02 04:15:00","ftime": "2020-03-02 04:15:00"}, {"context": "[石家庄市]快件到达【石家庄】，准备发往【石家庄高开集散中心】","time": "2020-03-02 06:02:00","ftime": "2020-03-02 06:02:00"}, {"context": "[石家庄市]快件到达【石家庄高开集散中心】","time": "2020-03-02 08:21:18","ftime": "2020-03-02 08:21:18"}, {"context": "[石家庄市]快件在【石家庄高开集散中心】已装车,准备发往【邢台高新集散点】","time": "2020-03-02 09:15:47","ftime": "2020-03-02 09:15:47"}, {"context": "[石家庄市]快件已发车","time": "2020-03-02 09:16:05","ftime": "2020-03-02 09:16:05"}, {"context": "[邢台市]快件到达【邢台高新集散点】","time": "2020-03-02 11:48:24","ftime": "2020-03-02 11:48:24"}, {"context": "[邢台市]快件在【邢台高新集散点】已装车,准备发往【邢台市沙河市宋璟营业点】","time": "2020-03-02 13:17:55","ftime": "2020-03-02 13:17:55"}, {"context": "[邢台市]快件已发车","time": "2020-03-02 13:18:54","ftime": "2020-03-02 13:18:54"}, {"context": "[邢台市]快件到达【邢台市沙河市宋璟营业点】","time": "2020-03-02 13:46:04","ftime": "2020-03-02 13:46:04"}, {"context": "[邢台市]正在派送途中,请您准备签收(派件人:邓朋飞,电话:18631965961)","time": "2020-03-02 13:59:33","ftime": "2020-03-02 13:59:33"}, {"context": "[邢台市]快件交给邓朋飞,正在派送途中（联系电话：18631965961,顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听！）","time": "2020-03-02 14:04:19","ftime": "2020-03-02 14:04:19"}, {"context": "[邢台市]您的快件已签收，如有疑问请电联小哥【邓朋飞，电话：18631965961】。疫情期间顺丰每日对网点消毒、小哥每日测温、配戴口罩，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）","time": "2020-03-02 14:37:20","ftime": "2020-03-02 14:37:20"}, {"context": "[邢台市]在官网\"运单资料&签收图\",可查看签收人信息","time": "2020-03-02 14:37:20","ftime": "2020-03-02 14:37:20"}]}, {"state": "签收","status": "3","com": "YD","nu": "3103140966821","data": [{"context": "上海普陀区徐公司进行揽件扫描","time": "2020-02-13 20:13:39","ftime": "2020-02-13 20:13:39"}, {"context": "上海分拨中心在分拨中心进行称重扫描","time": "2020-02-13 23:22:20","ftime": "2020-02-13 23:22:20"}, {"context": "上海分拨中心进行装车扫描，发往：江苏苏州分拨中心","time": "2020-02-14 00:29:45","ftime": "2020-02-14 00:29:45"}, {"context": "江苏苏州分拨中心在分拨中心进行卸车扫描","time": "2020-02-24 04:36:07","ftime": "2020-02-24 04:36:07"}, {"context": "江苏苏州分拨中心从站点发出，本次转运目的地：江苏苏州相城区公司","time": "2020-02-24 04:55:10","ftime": "2020-02-24 04:55:10"}, {"context": "江苏苏州相城区公司万里路便民寄存分部进行派件扫描；派送业务员：付龙龙；联系电话：18751166952","time": "2020-02-24 09:22:13","ftime": "2020-02-24 09:22:13"}, {"context": "江苏苏州相城区公司万里路便民寄存分部进行派件扫描；派送业务员：付龙龙；联系电话：18751166952","time": "2020-02-24 09:30:24","ftime": "2020-02-24 09:30:24"}, {"context": "江苏苏州相城区公司万里路便民寄存分部快件已被快件已被本人签收。如有问题请电联业务员：付龙龙【18751166952】。相逢是缘,如果您对我的服务感到满意,给个五星好不好？【请在评价小件员处给予五星好评】","time": "2020-02-24 11:11:05","ftime": "2020-02-24 11:11:05"}]}, {"state": "签收","status": "3","com": "ZTO","nu": "73122326322138","data": [{"context": "【苏州市】【昆山】（0512-83630555、0512-87807044）的 CK（18762410718）已揽收","time": "2019-11-07 18:42:40","ftime": "2019-11-07 18:42:40"}, {"context": "【苏州市】快件已经到达【昆山】","time": "2019-11-07 22:37:12","ftime": "2019-11-07 22:37:12"}, {"context": "【苏州市】快件离开【昆山】已发往【无锡中转部】","time": "2019-11-07 22:49:26","ftime": "2019-11-07 22:49:26"}, {"context": "【无锡市】快件已经到达【无锡中转部】","time": "2019-11-08 05:15:58","ftime": "2019-11-08 05:15:58"}, {"context": "【无锡市】快件离开【无锡中转部】已发往【南京中转部】","time": "2019-11-08 05:16:50","ftime": "2019-11-08 05:16:50"}, {"context": "【南京市】快件已经到达【南京中转部】","time": "2019-11-08 10:04:29","ftime": "2019-11-08 10:04:29"}, {"context": "【南京市】快件离开【南京中转部】已发往【南京浦口区】","time": "2019-11-08 10:12:19","ftime": "2019-11-08 10:12:19"}, {"context": "【南京市】快件已经到达【南京浦口区】","time": "2019-11-08 13:03:28","ftime": "2019-11-08 13:03:28"}, {"context": "【南京市】【南京浦口区】的中院（13291283965）正在第1次派件, 请保持电话畅通,并耐心等待（95720为中通快递员外呼专属号码，请放心接听）。小哥今日体温正常，将佩戴口罩为您投递，也可以联系小哥将您的快递，放到您指定的代收点，祝您身体健康！","time": "2019-11-08 13:06:57","ftime": "2019-11-08 13:06:57"}, {"context": "【南京市】快件已由【菜鸟的南信大西苑滨江楼底菜鸟驿站】代签收, 如有问题请电联（13291283965 / 95311）, 感谢您使用中通快递, 期待再次为您服务!","time": "2019-11-08 13:40:19","ftime": "2019-11-08 13:40:19"}]}],"AlertType": "toast"}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。