微信小程序做出物流签收信息（步骤条）源码

效果如图：

wxml

<!-- 签收信息 --><view class="Logistics_information"><view class="Logistics_informationBox" wx:for="{{steps}}" wx:key="index"><view class="Logistics_information_left"></view><view class="Logistics_information_right"><view class="imagesimg"><image src="{{item.icon}}" class="imgs {{item.status ?'wl_Order_placed':''}}"></image></view><view class="content"><view class="content_title">{{item.text}}<span class="content_data">{{item.spans}}</span> </view><view class="content_detail">{{item.desc}}</view></view></view></view></view>

wxss

.Logistics_information{width: 600rpx;margin:0 auto;margin-top: 40rpx;/* border:1px solid red; */
}
/* .van-icon{width: 52rpx;height: 52rpx;border: 1px solid red;/* background-color: chartreuse; *//* background-image:url(/images/allOrders/position.png) no-repeat !important;/* background:url(/images/allOrders/wl_Delivered.png) no-repeat; *//* background-size: 100%; *//* }   *//* .van-icon:before{display: none;border: 1px solid red;width: 52rpx;height: 52rpx;background-image:url(/images/allOrders/position.png) no-repeat !important;background-size: 100%;} */
.Logistics_informationBox{display: flex;
}
.Logistics_informationBox .Logistics_information_left{width: 4rpx;background-color: #C9C9C9;
}
.Logistics_informationBox:last-child .Logistics_information_left{width: 0;/* display: none;  */}
.Logistics_informationBox .Logistics_information_right{display: flex;height: 130rpx;
}.Logistics_information_right .imagesimg .wl_Order_placed{width: 52rpx !important;height: 52rpx !important;background-color: #fff !important;margin-left: -28rpx !important;margin-right: 30rpx !important;}
.Logistics_information_right .imagesimg .imgs{margin-left: -12rpx;width: 18rpx;height: 18rpx;background-color: #fff;margin-right: 49rpx;}
.Logistics_information_right .content{/* margin-left: 25rpx; */}
.Logistics_information_right .content .content_title{width: 150rpx;font-size: 18rpx;font-family: SimHei;font-weight: 400;color: #8A8A8A;display: flex;justify-content: space-between;}.Logistics_informationBox:first-child .Logistics_information_right .content .content_title{color: #EB7A00 !important;}
.Logistics_information_right .content .content_title .content_data{font-size: 14rpx;font-family: SimHei;font-weight: 400;color: #8A8A8A;
}
.Logistics_information_right .content .content_detail{margin-top: 15rpx;width: 500rpx;height: 14rpx;font-size: 14rpx;font-family: SimHei;font-weight: 400;color: #8A8A8A;
}

Page({/*** 页面的初始数据*/data: {steps: [{text: '已签收',spans:'03-02  19:00',desc: '您已在上海宝山完成签收，签收人：罗先生；',icon:'/images/allOrders/wl_Signed_in.png',status:true},{text: '派送中',spans:'03-02  19:00',desc: '【上海市】上海市宝山区宝山派件员：找中期 电话：',icon:'/images/allOrders/wl_In_delivery.png',status:true},{spans: '03-02  19:00',desc: '上海转运中心 已收入，下一站 上海宝山',icon:'/images/allOrders/wl_icon.png',status:false},{spans: '03-02  19:00',desc: '上海转运中心 已收入',icon:'/images/allOrders/wl_icon.png',status:false},{spans: '03-02  19:00',desc: '柳州转运中心 已发出，下一站 上海转运中心',icon:'/images/allOrders/wl_icon.png',status:false},{spans: '03-02  19:00',desc: '广西柳州市公司 已发出，下一站 柳州转运中心',icon:'/images/allOrders/wl_icon.png',status:false},{spans: '03-02  19:00',desc: '广西柳州市公司  揽件',icon:'/images/allOrders/wl_icon.png',status:false},{text: '已发货',spans:'03-02  19:00',desc: '包裹正在等待揽收',icon:'/images/allOrders/wl_Delivered.png',status:true},{text: '已下单',spans:'03-02  19:00',desc: '商品已下单',icon:'/images/allOrders/wl_Order_placed.png',status:true},],},

有些被注释的可删除

微信小程序做出物流签收信息（步骤条）源码相关推荐

基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
asp.net+sqlserver+微信小程序社区型果蔬配送平台-计算机毕业设计源码11635
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区型果蔬配送平台小程序被用户普遍使用,为方 ...
计算机毕业设计PHP基于微信小程序寸金校园租车平台（源码+程序+uni+lw+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: phpStudy+ Vscode +Mysql5.7 + HBuilderX+Navicat11+Vue ...
node.js+小程序基于微信小程序的校园失物招领系统毕业设计源码072343
微信小程序的校园失物招领系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
springboot基于微信小程序的校园外卖系统毕业设计-附源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...

微信小程序做出物流签收信息（步骤条）源码

微信小程序做出物流签收信息（步骤条）源码相关推荐

最新文章

热门文章

微信小程序做出 物流签收信息（步骤条） 源码

微信小程序做出 物流签收信息（步骤条） 源码相关推荐

最新文章

热门文章

微信小程序做出物流签收信息（步骤条）源码

微信小程序做出物流签收信息（步骤条）源码相关推荐