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不需要修改。

預覽