pet-front/otherPages/authentication/components/stepProgress.vue

<template>
  <view>
    <view class="flex-rowl">
      <image src="@/static/images/ydd/logo.png" mode="" class="logo"></image>
      <view class="size-36 fw700 color-fff">
        伴宠师认证
      </view>
    </view>
    <view class="renz flex-rowl mt10">
      <text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text>
      <image src="@/static/images/ydd/more.png" mode=""></image>
    </view>
    <view class="neir bg-fff mt24">
      <view class="steps flex-between">
        <template v-for="(item, index) in steps" :key="`step-${index}`">
          <view v-if="index > 0" class="line" :class="[index < props.step ? 'is-active' : '']"></view>
          <view class="step flex-colc" :class="[index < props.step ? 'is-active' : '']">
            <view class="num mb6 flex-rowc size-26 color-fff">
              {{ index + 1 }}
            </view>
            <text class="size-22 desc">{{ item }}</text>
          </view>
        </template>
      </view>
      <view class="color-ffb size-22 mt32">
        为保证喂养员认证顺利进行，请认真填写并确保信息的真实性
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const props = defineProps({
  step: {
    type: Number,
    default: 0,
  }
})

const steps = reactive(['基本考核', '培训考核', '最终准备'])
</script>

<style lang="scss" scoped>


  .logo {
    width: 194rpx;
    height: 70rpx;
  }

  .renz {

    image {
      width: 26rpx;
      height: 26rpx;
    }
  }

  .neir {
    padding: 47rpx 27rpx 36rpx 27rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    width: 716rpx;

    .steps {
      .line {
        width: 163rpx;
        height: 3rpx;
        background-color: #BDBDBD;
        margin-bottom: 30rpx;
        margin: 0 26rpx;
      }

      .num {
        width: 50rpx;
        height: 50rpx;
        background-color: #BDBDBD;
        border-radius: 50%;
        margin-bottom: 7rpx;
      }

      .desc {
        white-space: nowrap;
      }

      .line.is-active,
      .step.is-active .num {
        background-color: #FFBF60;
      }
    }
  }
</style>