微信小程序物流详情页面

wxml文件

<view>

  <view class='topExpress'>

    <view class='topExpress-left'>
      <image src='../../images/america.png' style='width:80rpx;height:80rpx;border-radius:50%;'></image>
    </view>
    <view class='topExpress-right'>
      <view class='topExpress-right-top'>xx速递</view>
      <view class='topExpress-right-middle'>运单号：xxxxxxxxxxxxxxxxxx</view>
      <view class='topExpress-right-bottom'>官方电话 xxxxxxxx</view>
    </view>

  </view>

  <view class='express-container'>

    <view class='express-item' wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="*this">

      <view class='express-left-date'>
        <view>{{item % 2 == 0 ? '昨天' : '2018-11-21'}}</view>
        <view>10:30</view>
      </view>

      <!-- 左边子容器 -->
      <view class='express-middle-axis'>
        <!-- 显示顶部收的圆点 -->
        <view class='dot-shou' wx:if="{{index==0}}">收</view>
        <!-- 正在进行的时间轴上半个时间线 -->
        <view class='online-top-closing'></view>
        <!-- 正在进行的时间轴点 -->
        <view class='dot-closing'></view>
        <!-- 正在进行的时间轴下半个时间线 -->
        <view class='online-bottom'></view>
        <!-- 显示尾部的圆点 -->
        <view class='dot-closing' wx:if="{{index==list.length - 1}}"></view>
      </view>

      <!-- 右边子容器 -->
      <view class='express-right'>
        <view class='express-statusing'>运输中</view>
        <view class='express-status-address'>【上海市】快件已从上海航空部发出，准备发往深圳转运中心</view>
      </view>

    </view>

  </view>

</view>

wxss文件

page {
  font-size: 0.8rem;
}

.topExpress {
  width: 720rpx;
  height: 180rpx;
  background: whitesmoke;
  margin: 10rpx auto;
  display: flex;
  border-radius: 5px;
}

.topExpress-left {
  width: 100rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topExpress-right {
  color: #333;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-start;
  padding: 20rpx 5rpx;
}

.topExpress-right-middle {
  font-size: 0.8rem;
}

.topExpress-right-bottom {
  color: #666;
}

.express-container {
  width: 720rpx;
  margin: 10rpx auto;
  background: whitesmoke;
  border-radius: 5px;
  padding: 10rpx 0;
}

.express-item {
  display: flex;
  width: 100%;
  justify-content: start;
}

.express-middle-axis {
  display: flex;
  width: 48rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.express-left-date {
  display: flex;
  width: 300rpx;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.online-top-closing {
  width: 1px;
  height: 80rpx;
  background: #d7d7d7;
}

.dot-closing {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin-top: 6rpx;
  margin-bottom: 6rpx;
  background: #fe4f33;
}

.dot-shou {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background: #999;
  font-size: 18rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.online-bottom {
  width: 1px;
  height: 80rpx;
  background: #999;
}

.express-right {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  margin: 0 20rpx;
  justify-content: center;
}

js文件

// pages/expressDetail/expressDetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
})

没有处理数据的逻辑，js不需要修改。

预览