自定义步骤条

 <!-- 自定义步骤条 -->

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

    }

  }

}