GCLS_Page_Learn/src/components/StepBar.vue

<template>
  <div class="step">
    <div class="step-container">
      <div v-for="(item, i) in stepList" :key="i">
        <div :class="['step-container-wrapper', { active: i === stepNumber }]">
          <span :class="['step-number', { completed: i < stepNumber }]" v-text="i < stepNumber ? '√' : i + 1"></span>
          <span class="step-name">{{ stepName(i) }}</span>
          <span v-if="i < 2" :class="['step-line', { completed: i < stepNumber }]"></span>
        </div>
        <div :class="['step-container-name', { active: i === stepNumber }]">
          {{ $t(item.name) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepBar'
};
</script>

<script setup>
import { inject } from 'vue';

const props = defineProps({
  // 步骤条第几步，以 0 开始
  stepNumber: {
    default: 0,
    type: Number
  }
});

const stepList = [
  {
    name: 'Key264'
  },
  { name: 'Key275' },
  { name: 'Key265' }
];

const $t = inject('$t');
function stepName(num) {
  if (num === props.stepNumber) return $t('Key282');
  if (num > props.stepNumber) return $t('Key263');
  if (num < props.stepNumber) return $t('Key623');
}
</script>

<style lang="scss" scoped>
.step {
  position: fixed;
  top: $header-h;
  left: 0;
  z-index: 9;
  width: 100%;
  height: $step-h;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;

  &-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $basic-width;
    min-width: $basic-width;
    height: 100%;
    margin: 0 auto;

    &-wrapper {
      color: #808080;

      .step-number {
        padding: 9px 14px;
        border: 1px solid #808080;
        border-radius: 50%;

        &.completed {
          color: $basic-color;
          border-color: $basic-color;
        }
      }

      .step-name {
        margin-left: 16px;
      }

      .step-line {
        display: inline-block;
        width: 240px;
        height: 1px;
        margin: 0 24px 0 48px;
        vertical-align: middle;
        background-color: #d9d9d9;

        &.completed {
          background-color: $basic-color;
        }
      }

      &.active {
        color: #000;

        .step-number {
          color: #fff;
          background-color: $basic-color;
          border-color: $basic-color;
        }
      }
    }

    &-name {
      padding-left: 54px;
      margin-top: 18px;
      font-size: 14px;
      color: #808080;

      &.active {
        color: #000;
      }
    }
  }
}
</style>