web/src/components/common/SpecCard.vue

<template>
  <div class="spec-card" :class="{ active: active }" @click="clickCard">
    <span class="float-tip" :class="floatTipClass" v-if="showFloatTip">
      <slot name="float-tip">
        <span class="icon-crown"></span>
        <span v-if="defaultFloatTipText">{{ defaultFloatTipText }}</span>
      </slot>
    </span>
    <slot name="default"></slot>
  </div>
</template>

<script>
export default {
  name: 'spec-card-active',
  props: {
    defaultFloatTipText: {
      type: String,
      default: ''
    },
    floatTipClass: {
      type: String,
      default: ''
    },
    showFloatTip: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickCard () {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.spec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #f5f6f7;
  border-radius: 8px;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  &.active {
    border-color: #2abed1;
    background-color: #fff;
    &::after {
      content: '';
      position: absolute;
      right: -2px;
      bottom: -2px;
      width: 26px;
      height: 26px;
      background-image: url(~@/assets/images/spec-active.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .float-tip {
    position: absolute;
    // left: 0px;
    left: -2px;
    top: 0px;
    padding: 0 8px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    border-radius: 8px 2px 10px 2px;
    background-color: #2abed1;
    z-index: 9;
    .icon-crown{
      display: inline-block;
      width: 12px;
      height: 10px;
      margin-right: 4px;
      background: url('~@/assets/images/icon/icon-crown.png') no-repeat center;
      background-size: cover;
      ::before{
        content: ''!important;
      }
    }
  }
}
</style>