微信小程序物流页面和样式

效果图

wxml代码

<view class="log" wx:if='{{code == 0}}'>

  <view class='log_top'>

    <view class='log_top_title'>快递公司：{{expressCom}} </view>

    <view class='log_top_title'>运单编号：{{expressSn}}</view>

    <view class='log_top_title'>物流状态：{{status}}</view>

  </view>

  <view class="log_content"  wx:if="{{list.length > 0}}">

    <view class="log_content_box">

      <view class="log_content_box_add" wx:for="{{list}}" wx:key="{{index}}">

        <view class="spot {{index === 0 ? 'default' : ''}}"></view>

        <view class="address {{index === 0 ? 'default' : ''}}">{{item.context}}</view>

        <view class="data {{index === 0 ? 'default' : ''}}">{{item.time}}</view>

      </view>

    </view>

  </view>

  <view wx:else class="kuaidi_wu">暂无物流信息</view>

</view>

wxss 代码

page {background: #f3f3f3;}

.log_top{width: 100%;height: 160rpx;background: white;margin-bottom: 20rpx;}

.log_top .log_top_title{width:100%;height: 40rpx;float: left;padding-left: 20rpx;padding-top: 10rpx;font-size: 28rpx;}

.log_content{width: 100%;background: #fff;padding: 20rpx 50rpx;box-sizing: border-box;}

.log_content .log_content_box{border-left:1rpx solid #d5d5d5;}

.log_content .log_content_box .log_content_box_add{

  border-bottom:1rpx solid #d5d5d5;margin: 0 20rpx;margin-top: 25rpx;padding-bottom: 25rpx;position: relative;font-size:26rpx;

}

.log_content .log_content_box .log_content_box_add .address{line-height: 40rpx;}

.log_content .log_content_box .log_content_box_add .spot{

  width: 25rpx;height: 25rpx;border-radius: 50%;position: absolute;left:-30rpx;top:-5rpx;background:#d5d5d5;

}

.log_content .log_content_box .log_content_box_add .spot.default{background:#f23b4d;}

.log_content .log_content_box .log_content_box_add .default{color:#f23b4d;}

.kuaidi_wu{padding:120rpx 0rpx;text-align:center;font-size:28rpx;background:white}

.logfooter{margin:120rpx auto;text-align:center;font-size:28rpx;}