<view class="process">
<view class="line">
<view class="line-inner" style="width:2%"></view>
<view class="active circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
<view class="circle"></view>
</view>
<view class="line-txt">
<view class="active item">开工</view>
<view class="item">准备</view>
<view class="item">打拆</view>
<view class="item">水电</view>
<view class="item">防水</view>
<view class="item">泥木</view>
<view class="item">油漆</view>
<view class="item">竣工</view>
<view class="item">入住</view>
</view>
</view>
css:
/* pages/test01/index.wxss */
.process {
padding: 24rpx;
}
.process .line {
width: 702rpx;
height: 6rpx;
border-radius: 3rpx;
background: #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.process .line .line-inner {
height: 6rpx;
border-radius: 3rpx;
background: #e34a2b;
position: absolute;
}
.process .line .circle {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background: #eee;
}
.process .line .active {
background: #e34a2b;
}
.process .line-txt {
width: 702rpx;
display: flex;
margin-top: 20rpx;
justify-content: space-between;
}
.process .line-txt .item {
color: #666;
}
.process .line-txt .active {
color: #e34a2b;
}
