代码实现
<view class="steps-wrap">
<view class="flex-box">
<view class="number active-number">1</view>
<view class="desc active-desc">步骤1</view>
<view :class="['line', activeStep == 1 ? 'line1' : 'line3']"></view>
</view>
<view class="flex-box">
<view :class="['number', activeStep == 1 ? '' : 'active-number']">2</view>
<view :class="['desc', activeStep != 1 ? 'active-desc' : '']">步骤2</view>
<view :class="['line', activeStep == 1 ? 'line2' : activeStep == 2 ? 'line1' : 'line3']"></view>
</view>
<view class="flex-box">
<view :class="['number', activeStep == 3 ? 'active-number' : '']">3</view>
<view :class="['desc', activeStep == 3 ? 'active-desc' : '']">步骤3</view>
</view>
</view>
.steps-wrap {
padding: 36rpx 0 0;
display: flex;
align-items: center;
.flex-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.number {
position: relative;
z-index: 5;
width: 40rpx;
height: 40rpx;
background: #9cccff;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.active-number {
background: var(--recruit-color);
}
.desc {
font-size: 24rpx;
color: #c8c8c8;
line-height: 34rpx;
margin-top: 20rpx;
font-weight: 500;
text-align: center;
}
.active-desc {
color: #484848;
}
.line {
position: absolute;
top: 18rpx;
left: 50%;
z-index: 1;
width: 100%;
height: 4rpx;
}
.line1 {
background: linear-gradient(90deg, #3a9aff 0%, #9cccff 21%, #9cccff);
}
.line2 {
background: #9cccff;
}
.line3 {
background: var(--recruit-color);
}
}
