【uniapp】自定义步骤条样式

代码实现

<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);}
}