
<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(){
// 页面关闭
}
})
|
模板简介:该模板名称为【微信小程序详细物流跟踪状态页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。