<!– 自定义步骤条 –>
<view class=”step-container”>
<view class=”step-box”>
<view class=”step-one”>
<text class=”lg text-green cuIcon-radiobox step-one-icon”></text>
<view
class=”step-one-back”
:class=”stepChange >= 1 ? ‘bg-green’ : ‘bg-gray'”
></view>
</view>
<view class=”step-one”>
<text
class=”lg cuIcon-radiobox step-one-icon”
:class=”stepChange >= 1 ? ‘text-green’ : ‘text-gray'”
></text>
<view
class=”step-one-back”
:class=”stepChange >= 2 ? ‘bg-green’ : ‘bg-gray'”
></view>
</view>
<view class=”step-one”>
<text
class=”lg cuIcon-radiobox step-one-icon”
:class=”stepChange >= 2 ? ‘text-green’ : ‘text-gray'”
></text>
<view
class=”step-one-back”
:class=”stepChange >= 3 ? ‘bg-green’ : ‘bg-gray'”
></view>
</view>
<view class=”step-one”>
<text
class=”lg cuIcon-radiobox step-one-icon”
:class=”stepChange >= 3 ? ‘text-green’ : ‘text-gray'”
></text>
</view>
</view>
<view class=”step-textBox”>
<view class=”text-green”>1.基础资料</view>
<view class=”margin-left” :class=”stepChange >= 1 ? ‘text-green’ : ””
>2.相关资料</view
>
<view class=”margin-left” :class=”stepChange >= 2 ? ‘text-green’ : ””
>3.户籍资料</view
>
<view class=”margin-left” :class=”stepChange >= 3 ? ‘text-green’ : ””
>4.其他资料</view
>
</view>
</view>
<button @click=”numberChange(stepChange)”>按钮</button>
ts
stepChange = 0;
numberChange(res: any) {
this.stepChange = res + 1;
}
less
.step-container {
.step-box {
margin-left: 30rpx;
display: flex;
flex-direction: row;
.step-one {
margin-left: -2rpx;
.step-one-icon {
border-radius: 50%;
width: 38rpx;
height: 38rpx;
background-color: rgb(239, 239, 237);
font-size: 70rpx;
transition-duration: 1s;
}
.step-one-back {
margin-top: -48rpx;
margin-left: 56rpx;
width: 132rpx;
height: 24rpx;
transition-duration: 1s;
}
}
}
.step-textBox {
margin-left: 20rpx;
display: flex;
flex-direction: row;
}
}
.container {
.successBox {
margin-top: 64rpx;
margin-left: -28rpx;
align-items: center;
.iconYes {
font-size: 40rpx;
color: #06cb7c;
}
.success {
padding-left: 14rpx;
font-size: 56rpx;
}
.examine {
padding-left: 16rpx;
font-size: 28rpx;
color: #101010;
}
}
}