微信小程序物流快递状态时间轴

wxml:

<view class='g_con'>
  <view class='topExpress'>
    <image class="topExpress-left" src='/image/th.jpg' ></image>
    <view class='topExpress-right'>
      <view class='topExpress-right-top'>运输中</view>
      <view class='topExpress-right-middle'>承运来源：顺丰快递公司</view>
      <view class='topExpress-right-bottom'>运单编号：{{Number}} <text bindtap="oncopyNumber">复制</text> </view>
    </view>
  </view>
 
  <!-- 物流时间轴 -->
  <view class='expressRecord'>
    <!-- 单个物流记录点时间轴：当前正在进行的物流状态 -->
    <view class='expressRecord-single-close' wx:for="{{express}}">
 
      <!-- 左边子容器 -->
      <view class='expressRecord-single-noreach-online-top-close'>
        <!-- 正在进行的时间轴点 -->
        <view class="dot-father">
          <view class='dot-closing'></view>
        </view>
        <!-- 正在进行的时间轴下半个时间线 -->
        <view class='online-bottom'></view>
      </view>
 
      <!-- 右边子容器 -->
      <view class='expressRecord-text'>
        <view class='expressRecord-statusing'>{{item.date}}</view>
        <view class='expressRecord-status-addressing'>
          <view class="place">【{{item.place}}】</view>
          <view class="state">{{item.state}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss:

page {
  background: #f8f8f8;
}
 
.g_con {
  width: 100vw;
  overflow-x: hidden;
}
 
.topExpress {
  width: 686rpx;
  height: 190rpx;
  background: #fff;
  margin: 32rpx auto;
  display: flex;
  border-radius: 8rpx;
  padding: 24rpx;
  Box-sizing: border-Box;
}
 
.topExpress-left {
  width:140rpx;
  height:140rpx;
}
 
.topExpress-right {
  width: 454rpx;
  margin-left: 24rpx;
  font-size: 32rpx;
  color: #333;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}
 
.topExpress-right-middle,.topExpress-right-bottom {
  font-size: 24rpx;
  color: #909090;
}

.topExpress-right-bottom{
  width: 454rpx;
  display: flex;
  justify-content: space-between;
  align-items:center
}

.topExpress-right-bottom text{
  color: #303030;
  border: 2rpx #303030 solid;
  border-radius: 28px;
  padding: 4rpx 20rpx;
}

/* 物流时间轴 */

.expressRecord {
  width: 686rpx;
  padding: 32rpx 32rpx 0rpx 32rpx;
  Box-sizing: border-Box;
  background: #fff;
  border-radius: 8rpx;
  margin: auto;
}

.expressRecord-single-close {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
  color: #909090;
}
.expressRecord-single-close:first-of-type{
  color: #303030;
}

/* 左边子容器 */
 
.expressRecord-single-noreach-online-top-close {
  display: flex;
  flex-direction: column;
  margin-top: 8rpx;
}

 /* 圆点 */
.dot-father{
  width: 16rpx;
  height: 16rpx;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  margin-bottom: 4rpx;
 }
.expressRecord-single-close:first-of-type .dot-father{
  background-color: #303030;
}
.expressRecord-single-close:first-of-type .dot-closing{
  background: #fe4f33;
}
.dot-closing {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #303030;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* 下半个时间线 */
.online-bottom {
  flex: 1;
  width: 4rpx;
  height: 100%;
  background: #303030;
  margin-left:8rpx;
}
.expressRecord-single-close:last-of-type .online-bottom {
  background: #fff;
}
 

/* 右边子容器 */
.expressRecord-statusing {
  font-size: 24rpx;
  margin-left: 20rpx;
}

.expressRecord-status-addressing{
  padding-bottom: 48rpx;
  font-size: 28rpx;
  display: flex;
}
.place{
  width: 112rpx;
}

.state{
  flex: 1;
}

js:

data: {
    express:[{
      date:"2020-11-13 12:30:30",
      place:"武汉",
      state:"武汉转运中心公司 已发出，下一站 深圳转运中心"
    },{
      date:"2020-11-12 11:30:30",
      place:"湖北",
      state:"湖北省孝感市汉川市公司 已打包"
    },{
      date:"2020-10-11 10:30:30",
      place:"湖北",
      state:"湖北省孝感市汉川市公司 已收件"
    }],
    Number:"813291235464"
  },

效果图：

如果只有一个物流信息：

借鉴的原文链接: https://www.cnblogs.com/gavinjay/p/9995853.html.