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 }]" />
        </div>
        <div :class="['step-container-name', { active: i === stepNumber }]">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepBar',
  props: {
    // 步骤条第几步，以 0 开始
    stepNumber: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      stepList: [
        {
          name: '课程信息'
        },
        {
          name: '选择教材'
        },
        {
          name: '创建任务'
        }
      ]
    };
  },
  methods: {
    stepName(num) {
      if (num === this.stepNumber) {
        return '进行中';
      }
      if (num > this.stepNumber) {
        return '等待中';
      }
      if (num < this.stepNumber) {
        return '已完成';
      }
    }
  }
};
</script>

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

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

    &-wrapper {
      color: #808080;

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

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

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

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

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

      &.active {
        color: #000;

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

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

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