标签：z-index expr relative 技术 center style tail flex ott
.sec-wrap {
width: 100%;
">;
height: 180rpx;
margin-bottom: 50rpx;
display: flex;
align-items: center;
padding: 0rpx 70rpx;
margin-left: -100rpx;
}
.sec-wrap .exp_box {
position: relative;
height: 120rpx;
margin-left: 100rpx;
}
.sec-wrap .exp_box .state {
color: #d3d3d3;
font-size: 26rpx;
}
.sec-wrap .exp_box .state_active {
background: #f39826;
padding: 10rpx 25rpx;
border-radius: 100rpx;
color: #fff;
margin-top: -25rpx;
}
.sec-wrap .exp_box .state_active:before {
content: ‘‘;
position: absolute;
width: 0;
height: 0;
top: 25rpx;
left: 35rpx;
border-left: 15rpx solid transparent;
border-right: 15rpx solid transparent;
border-top: 15rpx solid #f39826;
}
.sec-wrap .exp_box .dot {
width: 20rpx;
height: 20rpx;
background: #ccc;
border-radius: 100px;
margin: 0 auto;
margin-top: 24rpx;
margin-bottom: 24rpx;
text-align: center;
}
.sec-wrap .exp_box .dot:before {
content: ‘‘;
position: absolute;
width: 145rpx;
height: 4rpx;
left: 56rpx;
top: 59rpx;
background: #ccc;
}
.sec-wrap .exp_box .dot_active {
width: 20rpx;
height: 20rpx;
background: #f39826;
border-radius: 100px;
margin: 0 auto;
margin-top: 25rpx;
text-align: center;
}
.sec-wrap .exp_box .address {
font-size: 26rpx;
}
.state_detail {
background: #fff;
padding: 50rpx 20rpx 50rpx 0rpx;
display: flex;
align-items: center;
position: relative;
}
.state_detail .time {
width: 320rpx;
text-align: center;
}
.state_detail .time .hours {
font-size: 24rpx;
color: #000;
}
.state_detail .time .days {
font-size: 22rpx;
color: #999;
margin-top: 10rpx;
}
.state_detail .time:before {
content: ‘‘;
position: absolute;
height: 50rpx;
width: 1rpx;
left: 100rpx;
top: 130rpx;
background: #ccc;
z-index: 8;
}
.state_detail .state_detail_content .text {
font-size: 28rpx;
}
.state_detail .state_detail_content .active {
color: #000;
}
.state_detail:last-child .time:before {
content: ‘‘;
position: absolute;
height: 0rpx;
width: 0rpx;
}
wxml
<view class="sec-wrap">
<view class="exp_box">
<view class="state">已发货</view>
<view class="dot"/>
<view class="address">{{orderExpress.departLocation}}</view>
</view>
<view class="exp_box" wx:if="{{orderExpress.status==1}}">
<view class="state">运输中</view>
<view class="dot"/>
</view>
<view class="exp_box">
<view class="state">派件中</view>
<view class="dot"/>
</view>
<view class="exp_box">
<view class="state_active">签收</view>
<view class="dot_active"/>
</view>
</view>
<view class="state_detail" wx:for="{{list}}" wx:key="item">
<view class="time">
<view class="days">{{item.updateTime}}</view>
</view>
<view class="state_detail_content">
<view class="text active">{{item.flowName}}</view>
</view>
</view>
微信小程序 -进度条- 物流状态-发货-运输-派件-签收
标签：z-index expr relative 技术 center style tail flex ott
原文地址：https://www.cnblogs.com/wen-/p/12148156.html
