微信小程式--------商品物流跟蹤模板
話不多講，先上圖
wxml:
<!-- ------------------------------------------------------------開始------------------------------------------- -->
<view class="wraper">
<!-- 物流資訊 -->
<view class='xbq-express'>
<view class='xbq-greencar'></view>
<view class='xbqsf'>順豐快遞（單號:13456）</view>
</view>
<view class='xbq-bar'></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>
<!-- -----------------------------------------------------------結束----------------------------------------- -->
wxss:
/* ----------------------------------------------------開始---------------------------------- */
.xbq-express{
width: 100%;
height: 100rpx;
background: white;
}
.xbq-greencar{
width: 50rpx;
height: 50rpx;
background: green;
margin-top: 20rpx;
margin-left: 20rpx;
float: left;
}
.xbqsf{
width:600rpx;
height: 50rpx;
/* background: forestgreen; */
float: left;
margin-left: 20rpx;
margin-top: 20rpx;
}
/*物流資訊*/
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;
}
.xbq-bar{
width: 100%;
height: 20rpx;
background: #f3f3f3;
}
/*物理跟蹤*/
.kuaidi_follow{
width: 100%;
background: #fff;
padding: 20rpx 50rpx;
box-sizing: border-box;
}
.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;
}
/* --------------------------------------------------結束--------------------------------- */
js:
Page({
data:{},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的引數
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})
-------------------------------------------------------簡單模板，不成敬意-------------------------------------------------------------