caimei-authentic-www/components/SimpleStep/index.vue

<template>
  <div class="simple-step">
    <div
      class="simple-step__item"
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: item.id === active }"
    >
      <span v-text="item[label]"></span>
      <span class="simple-step__line"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'simple-step',
  props: {
    list: {
      type: Array,
      default: [],
    },
    label: {
      type: String,
      default: 'label',
    },
    active: {
      type: Number,
      default: 0,
    },
  },
}
</script>

<style lang="scss" scoped>
// pc端
@media screen and (min-width: 768px) {
  .simple-step {
    @include useTheme() {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 24px 0;

      .simple-step__item {
        font-size: 24px;
        color: #282828;

        position: relative;
        padding-bottom: 4px;
        &.active {
          .simple-step__line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: fetch('color');
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 768px) {
  .simple-step {
    @include useTheme() {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 8vw 0 6vw;

      .simple-step__item {
        font-size: 4.2vw;
        color: #999;

        position: relative;
        padding-bottom: 1.2vw;

        &.active {
          color: #282828;

          .simple-step__line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.5vw;
            background-color: fetch('color');
          }
        }
      }
    }
  }
}
</style>