一個(gè)月左右沒更新博客了,最近有點(diǎn)懶了哈(工作上真的忙),很多工作上學(xué)習(xí)到的東西都沒有及時(shí)分享出來,有點(diǎn)愧疚,不過自己最近一直在收集資料和學(xué)習(xí)一些新技術(shù),最主要是想要構(gòu)建自己的前端技術(shù)體系和自定義一個(gè)前 ...
一個(gè)月左右沒更新博客了,最近有點(diǎn)懶了哈(工作上真的忙),很多工作上學(xué)習(xí)到的東西都沒有及時(shí)分享出來,有點(diǎn)愧疚,不過自己最近一直在收集資料和學(xué)習(xí)一些新技術(shù),最主要是想要構(gòu)建自己的前端技術(shù)體系和自定義一個(gè)前端規(guī)范文檔,哈哈哈。說重點(diǎn)啦,微信小程序里面開發(fā)的商城模塊還挺多的,剛好寫了一個(gè)物流狀態(tài)的時(shí)間軸,簡(jiǎn)單分享一下哈。 (一)實(shí)現(xiàn)效果真機(jī)測(cè)試的結(jié)果(圖片忘記縮小了) (三)實(shí)現(xiàn)代碼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)單號(hào):813291235464788594view>
<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>
<view class='expressRecord-single-close'>
<view class='expressRecord-single-noReach-online-top-close'>
<view class='online-top-closing'>view>
<view class='dot-closing'>view>
<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>
<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;
}
復(fù)制代碼
|
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。