<view class="wraper"> <!-- 物流信息 --> <view class="kuaidiInfo"> <view class="kuaidiIcon"> <image src="../../../images/icon_logistics.png"></image> </view> <view class="kuaidiDetails"> <view>物流状态: <text class="satus">签收</text></view> <view class="company">承运来源: <text>百世</text></view> <view class="number">运单编号: <text>211200439374</text></view> </view> </view> <!-- 物流跟踪 --> <view class="kuaidi_follow"> <view class="follow_title">物流跟踪</view> <view class="follow_satus"> <view class="follow_address"> <view class="label default"></view> <view class="address default">上海市|签收|上海市【宝山顾村】,拍照签收 已签收</view> <view class="date">2016-08-30 <text class="time">11:31:44</text></view> </view> <view class="follow_address"> <view class="label"></view> <view class="address">上海市|派件|上海市【宝山顾村】,【冯师傅/18917596580】正在派件</view> <view class="date">2016-08-30 <text class="time">11:31:44</text></view> </view> <view class="follow_address"> <view class="label"></view> <view class="address">上海市|发件|上海市【上海转运中心】,正发往【上海嘉定转运中心】</view> <view class="date">2016-08-30 <text class="time">11:31:44</text></view> </view> <view class="follow_address"> <view class="label"></view> <view class="address">上海市|发件|上海市【上海转运中心】,正发往【上海嘉定转运中心】</view> <view class="date">2016-08-30 <text class="time">11:31:44</text></view> </view> </view> </view> </view> |
/*物流信息*/ page{ background: #f3f3f3; } .kuaidiInfo{ background: #fff; width: 100%; height:220rpx; margin-top: 30rpx; } .kuaidiInfo .kuaidiIcon{ float: left; width: 120rpx; height: 120rpx; margin: 50rpx; } .kuaidiInfo .kuaidiIcon image{ width: 100%; height: 100%; } .kuaidiInfo .kuaidiDetails{ float: left; margin-top: 33rpx; } .kuaidiInfo .kuaidiDetails .company{ line-height: 70rpx; } .kuaidiInfo .kuaidiDetails .satus{ color: #f23b4d; } /*物理跟踪*/ .kuaidi_follow{ width: 100%; background: #fff; padding: 0 50rpx; box-sizing: border-box; } .kuaidi_follow .follow_title{ line-height: 70rpx; font-size: 40rpx; border-bottom: 1rpx solid #d5d5d5; } .kuaidi_follow .follow_satus{ border-left: 1rpx solid #d5d5d5; } .kuaidi_follow .follow_satus .follow_address{ border-bottom: 1rpx solid #d5d5d5; margin: 0 20rpx; margin-top: 25rpx; padding-bottom: 25rpx; position: relative; } .kuaidi_follow .follow_satus .follow_address .address{ line-height: 60rpx; } .kuaidi_follow .follow_satus .follow_address .label{ width: 25rpx; height: 25rpx; border-radius: 50%; position: absolute; left: -30rpx; top: -5rpx; background: #d5d5d5; } .kuaidi_follow .follow_satus .follow_address .label.default{ background: #f23b4d; } .kuaidi_follow .follow_satus .follow_address .default{ color: #f23b4d; } |
// pages/userhome/address/address.js Page({ data:{}, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序详细物流跟踪状态页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。