wxml：
<view class="step"> <view class="progress"> <view class="step_box step_box1"> <view class="radius rad_1 radius_active"></view> <view class="step_title">基本信息</view> </view> <view class="step_box step_box2"> <view class="radius rad_2 "></view> <view class="step_title">项目信息</view> </view> <view class="step_box step_box3"> <view class="radius rad_3 "></view> <view class="step_title">需求信息</view> </view> <progress percent="{{percent}}" activeColor="#F86221" backgroundColor="#E0E2E7" stroke-width="2" class="pro_border" /> </view> </view>wxss:
.step{ height: 200rpx; display: flex; align-items: center; justify-content: center; background: #fff; margin-bottom: 16rpx; padding-bottom: 20rpx; } /* progress */ .progress{ width:70%; height: 60rpx; /* margin:auto; */ position: relative; display: -webkit-flex; align-items: center; } .progress .pro_border{ width:100%; } .step_box{ position: absolute; top: 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: -30px; } .pro_border{ height: 4rpx; } .progress .radius{ /* position: absolute; */ width:40rpx; height: 40rpx; border-radius: 50%; background: #E0E2E7; font-family: PingFangSC-Semibold; font-size: 30rpx; color: #737586; text-align:center; /* top:0; */ } .progress .radius_active{ background: #F86221; color:#fff; } .step_box1{ left:0; } .step_box2{ left:50%; } .step_box3{ right:0; margin-right: -30px; } .step_title{ font-size: 28rpx; margin-top: 10rpx; }js:
data:{ //percent:0 percent:50 percent:100 percent: 0, }来源：51CTO
作者：Archer_yy
链接：https://blog.csdn.net/Dilemma_me/article/details/101100506