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

效果如图：

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;
}

js

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

      },
    ],

  },

有些被注释的可删除