小程序进度条 PHP,微信小程序 -进度条- 物流状态-发货-运输-派件-签收(示例代码)...

.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

已发货

{{orderExpress.departLocation}}

运输中

派件中

签收

{{item.updateTime}}

{{item.flowName}}