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 {
    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;
      cursor: pointer;

      &.active {
        .simple-step__line {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          @include themify($themes) {
            background-color: themed('color');
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 768px) {
  .simple-step {
    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;
      cursor: pointer;

      &.active {
        color: #282828;

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