nuxtProject/components/common/iconGangwei.vue

<template>
  <div class="gangwei-icon">
    <i :style="iconStyle"></i>
    <p>{{ des.text }}</p>
  </div>
</template>

<script>
export default {
  name: "iconGangwei",
  props: {
    des: {
      type: Object,
      required: true
    }
  },
  computed: {
    iconStyle() {
      return `background-image: url(${this.des.icon})`;
    }
  }
}
</script>

<style lang="scss" scoped>
.gangwei-icon {
  text-align: center;

  i {
    display: block;
    width: 200px;
    height: 160px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  p {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 800;
  }

  @media (max-width: 768px){
    i {
      width: 150px;
      height: 120px;
    }
  }
}
</style>