image.png
在開發(fā)者工具中預(yù)覽效果
電商平臺(tái)少不了物流信息的跟蹤距辆，如上圖箫措，我們?cè)撊绾巫龅侥兀?br>
來看看的下面的解析圖：
- 從wxml中可以看到塑陵，我們是遍歷了一個(gè)數(shù)組才有了圖一的列表爱态，而列表的主要有兩個(gè)容器組成 l_box 和 l_content谭贪。
- 從審查元素可以看出境钟，其實(shí)豎直線是l_box 的border ,而圈圈是l_box的一個(gè)after偽類锦担。該偽類為一個(gè)有background和border的圓。
- 而小三角為l_content的after偽類
- 圈圈和小三角的默認(rèn)顏色都是灰色慨削，那什么時(shí)候變成亮色呢洞渔？ 就是根據(jù)數(shù)組的index來判斷啦套媚。
image.png
wxml代就如上圖，具體的css樣式如下：
page{
background: #f2f2f2;
}
.container{
margin-top: 20rpx;
font-size: 28rpx;
background-color: #fff;
}
.l_title{
padding: 10rpx 20rpx;
border-bottom: 1px solid #f2f2f2;
}
.l_box{
border-left: 1px solid #EEF0F2;
padding: 20rpx 0 20rpx 50rpx;
margin-left: 30rpx;
position: relative;
}
.l_box::after{
content: '';
display: inline-block;
position: absolute;
left: -15rpx;
top: 60rpx;
width: 20rpx;
height: 20rpx;
border-radius: 20rpx;
background: #BDBDBD;
border: 2px solid #EEE;
}
.l_content{
position: relative;
background: #eef0f2;
padding: 10rpx 20rpx;
border-radius: 10rpx;
font-size: 26rpx;
}
.l_content::after{
content: '';
display: inline-block;
position: absolute;
left: -20rpx;
top: 36rpx;
border-left: 20rpx solid #fff;
border-bottom: 20rpx solid #eef0f2;
}
.l_first{
border-left: 1px solid #eeb60e;
}
.l_first::after{
background: #eeb60e;
border: 2px solid #EEE;
}
.l_first_content{
background: #06a943;
color: #fff;
}
.l_first_content::after{
border-bottom-color: #06a943;
}
