一個月左右沒更新博客了,最近有點(diǎn)懶了哈(工作上真的忙),很多工作上學(xué)習(xí)到的東西都沒有及時分享出來,有點(diǎn)愧疚,不過自己最近一直在收集資料和學(xué)習(xí)一些新技術(shù),最主要是想要構(gòu)建自己的前端技術(shù)體系和自定義一個前端規(guī)范文檔,哈哈哈。說重點(diǎn)啦,微信小程序里面開發(fā)的商城模塊還挺多的,剛好寫了一個物流狀態(tài)的時間軸,簡單分享一下哈。
真機(jī)測試的結(jié)果(圖片忘記縮小了)
頁面布局拆分:
簡單的說:就是父級容器下,左邊的子級容器是設(shè)置絕對定位(記得父級要設(shè)置相對定位哈),然后自己調(diào)位置,中間子級容器下放三個子容器(設(shè)置時間軸線、點(diǎn)的樣式),右邊的子級容器設(shè)置; wxml代碼有備注信息 。
1、wxml代碼:
<view class='g_con'> <view class='topExpress'> <view class='topExpress-left'> <image src='/images/Exchange_goods_map_1.png' style='width:60rpx;height:60rpx;border-radius:50%;'></image> </view> <view class='topExpress-right'> <view class='topExpress-right-top'>圓通速遞</view> <view class='topExpress-right-middle'>運(yùn)單號:813291235464788594</view> <view class='topExpress-right-bottom'>官方電話 95554 ></view> </view> </view> <!-- 物流時間軸 --> <view class='expressRecord'> <!-- 頂部收貨地址 --> <view class='expressRecord-getAddress'> <view class='expressRecord-top'> <view class='getAddress-icon'> 收 </view> <view class='getAddress-text'>[收貨地址] 廣東省深圳市南山區(qū) 南山街道 億利達(dá)大廈</view> </view> </view> <!-- 頂部收貨地址半個時間軸線 --> <view class='noReach-online-top-close'></view> <!-- 單個物流記錄點(diǎn)時間軸:當(dāng)前正在進(jìn)行的物流狀態(tài) --> <view class='expressRecord-single-close'> <!-- 左邊子容器 --> <view class='expressRecord-single-noReach-online-top-close'> <!-- 正在進(jìn)行的時間軸上半個時間線 --> <view class='online-top-closing'></view> <!-- 正在進(jìn)行的時間軸點(diǎn) --> <view class='dot-closing'></view> <!-- 正在進(jìn)行的時間軸下半個時間線 --> <view class='online-bottom'></view> </view> <!-- 右邊子容器 --> <view class='expressRecord-text'> <view class='expressRecord-statusing'>運(yùn)輸中</view> <view class='expressRecord-status-addressing'>武漢轉(zhuǎn)運(yùn)中心公司 已發(fā)出,下一站 深圳轉(zhuǎn)運(yùn)中心</view> </view> <!-- 相對父級容器絕對定位的日期 --> <view class='expressRecord-dating'> <view class='expressRecord-date-text'> 昨天 </view> <view class='expressRecord-date-time'> 20:39 </view> </view> </view> <!-- 單個物流記錄點(diǎn)時間軸:已經(jīng)過去的物流狀態(tài) --> <view class='expressRecord-single-close'> <view class='expressRecord-single-noReach-online-top-close'> <view class='online-top-close'></view> <view class='dot-close'></view> <view class='online-bottom'></view> </view> <view class='expressRecord-text'> <view class='expressRecord-status'></view> <view class='expressRecord-status-address'>武漢轉(zhuǎn)運(yùn)中心公司 已收入</view> </view> <view class='expressRecord-date'> <view class='expressRecord-date-text'> 昨天 </view> <view class='expressRecord-date-time'> 20:37 </view> </view> </view> <view class='expressRecord-single-close'> <view class='expressRecord-single-noReach-online-top-close'> <view class='online-top-close'></view> <view class='dot-close'></view> <view class='online-bottom'></view> </view> <view class='expressRecord-text'> <view class='expressRecord-status'></view> <view class='expressRecord-status-address'>湖北省孝感市漢川市公司 已打包</view> </view> <view class='expressRecord-date'> <view class='expressRecord-date-text'> 昨天 </view> <view class='expressRecord-date-time'> 14:37 </view> </view> </view> <view class='expressRecord-single-close'> <view class='expressRecord-single-noReach-online-top-close'> <view class='online-top-close'></view> <view class='dot-close'></view> <view class='online-bottom'></view> </view> <view class='expressRecord-text'> <view class='expressRecord-status'>已攬件</view> <view class='expressRecord-status-address'>湖北省孝感市漢川市公司 已收件</view> </view> <view class='expressRecord-date'> <view class='expressRecord-date-text'> 昨天 </view> <view class='expressRecord-date-time'> 14:17 </view> </view> </view> <view class='expressRecord-single-close'> <view class='expressRecord-single-noReach-online-top-close'> <view class='online-top-close'></view> <view class='dot-close'></view> <!-- 起始位置,下半個時間軸線不用 --> <view class='online-bottom-start'></view> </view> <view class='expressRecord-text'> <view class='expressRecord-status'>已發(fā)貨</view> <view class='expressRecord-status-address'>賣家發(fā)貨</view> </view> <view class='expressRecord-date'> <view class='expressRecord-date-text'> 昨天 </view> <view class='expressRecord-date-time'> 13:50 </view> </view> </view> </view> </view> 復(fù)制代碼 2、wxss代碼: page { background: #f4f4f4; } .g_con { width: 100vw; overflow-x: hidden; } .topExpress { width: 710rpx; height: 155rpx; background: #fff; margin: 10rpx auto; display: flex; border-radius: 10rpx; } .topExpress-left { width: 100rpx; height: 100%; display: flex; justify-content: center; align-items: center; } .topExpress-right { font-size: 26rpx; color: #333; display: flex; justify-content: space-around; flex-direction: column; align-items: flex-start; padding: 20rpx 0; } .topExpress-right-middle { font-size: 22rpx; } .topExpress-right-bottom { font-size: 20rpx; color: #666; } .expressRecord { width: 710rpx; padding-top: 30rpx; padding-bottom: 200rpx; background: #fff; margin: 0 auto; border-radius: 10rpx; } .expressRecord-getAddress { width: 100%; font-size: 22rpx; color: #999; display: flex; } .expressRecord-top { width: 100%; display: flex; justify-content: flex-start; align-items: center; } .getAddress-icon { width: 30rpx; height: 30rpx; border-radius: 50%; background: #999; font-size: 18rpx; color: #fff; display: flex; justify-content: center; align-items: center; margin-left: 80rpx; } .getAddress-text { margin-left: 20rpx; } .noReach-online-top-close { width: 1rpx; height: 50rpx; background: #d7d7d7; margin-left: 95rpx; } .expressRecord-single-close { width: 100%; height: 122rpx; display: flex; justify-content: flex-start; align-items: center; position: relative; } .expressRecord-single-noReach-online-top-close { display: flex; flex-direction: column; } .online-top-closing { width: 1rpx; height: 50rpx; background: #d7d7d7; margin-left: 95rpx; } .online-top-close { width: 1rpx; height: 50rpx; background: #999; margin-left: 95rpx; } .dot-closing { width: 10rpx; height: 10rpx; border-radius: 50%; margin-left: 90rpx; margin-top: 6rpx; margin-bottom: 6rpx; background: #fe4f33; } .dot-close { width: 10rpx; height: 10rpx; border-radius: 50%; margin-left: 90rpx; margin-top: 6rpx; margin-bottom: 6rpx; background: #999; } .online-bottom { width: 1rpx; height: 50rpx; background: #999; margin-left: 95rpx; } .online-bottom-start { width: 1rpx; height: 50rpx; /* background: #999; */ margin-left: 95rpx; } .expressRecord-text { margin-left: 30rpx; } .expressRecord-statusing { font-size: 26rpx; color: #333; } .expressRecord-status-addressing { font-size: 22rpx; color: #333; } .expressRecord-status { font-size: 26rpx; color: #999; } .expressRecord-status-address { font-size: 22rpx; color: #999; } .expressRecord-dating { position: absolute; height: 100%; /* top: 0; bottom: 0; */ left: 20rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #333; } .expressRecord-date { position: absolute; height: 100%; /* top: 0; bottom: 0; */ left: 20rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #999; } .expressRecord-date-text { font-size: 24rpx; } .expressRecord-date-time { font-size: 18rpx; } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)