web/apps/bigmember_pc/src/components/coupon/validity.vue

<template>
  <div>
    <div
      class="spec-card"
      :class="{ active: active == item.name }"
      @click="clickCard(item)"
      v-for="(item, index) in list"
      :key="index"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'validity',
  components: {},
  props: {
    deactive: {
      // 默认选中的 name
      type: String,
      default: '2年'
    },
    list: {
      // 传入数据
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      active: ''
    }
  },
  created() {
    this.active = this.deactive
  },
  mounted() {},
  beforeDestroy() {},
  filters: {},
  computed: {},
  watch: {},
  methods: {
    clickCard(item) {
      this.active = item.name
      //  回传当前选中数据
      this.$emit('onclick', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.spec-card {
  position: relative;
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 16px;
  margin-right: 16px;
  width: 140px;
  height: 40px;
  background-color: #f5f6f7;
  border-radius: 4px;
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;

  &.active {
    border-color: #2abed1;
    background-color: #fff;

    &::after {
      content: '';
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 19px;
      height: 19px;
      background-image: url(~@/assets/images/spec-active.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}
</style>