hcp_h5/src/components/StepProgress.vue

<template>
  <div class="step-progress">
    <div class="step-wrapper">
      <div v-for="(step, index) in steps" :key="index" class="step">
        <!-- 点 -->
        <div class="circle" :class="{ active: index < activeStep }"></div>

        <!-- 线（最后一个点没有线） -->
        <div
          v-if="index !== steps.length - 1"
          class="line"
          :class="{ active: index < activeStep }"
        ></div>

        <!-- 文本 -->
        <div class="label" :class="{ active: index < activeStep }">{{ step }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  /** 当前激活的步骤 (1~N) */
  activeStep: number
}>()

/** 默认四步 */
const steps = ['确认开票信息', '开票认证', '完成缴税', '提交开票申请']
</script>

<style scoped lang="scss">
.step-progress {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 2vw;
  border-radius: 2vw;

  .step-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
  }

  .step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;

    /* 点 */
    .circle {
      width: 4vw;
      height: 4vw;
      border-radius: 50%;
      background: #dcdcdc;
      z-index: 1;
      transition: background 0.3s ease;

      &.active {
        background: #ff7a00;
      }
    }

    /* 线：在点右侧 */
    .line {
      position: absolute;
      top: 2vw; /* 与圆心对齐 */
      left: 50%;
      width: 100%;
      height: 0.6vw;
      background: #e0e0e0;
      border-radius: 1vw;
      z-index: 0;
      transition: background 0.3s ease;

      &.active {
        background: linear-gradient(90deg, #ff7a00, #ffa94d);
      }
    }

    /* 文本 */
    .label {
      margin-top: 1.6vw;
      font-size: 3.2vw;
      color: #aaa;
      white-space: nowrap;
      transition: color 0.3s ease;

      &.active {
        color: #ff7a00;
        font-weight: 600;
      }
    }
  }

  /* 最后一个点右边不画线 */
  .step:last-child .line {
    display: none;
  }
}
</style>