<!-- 
    filename: ContainerIcon.vue
    author: liubin
    date: 2024-04-09 16:41:36
    description: 
-->

<template>
  <div class="container-icon" :style="bgStyle"></div>
</template>

<script>
import prod from "@/assets/images/companyData/prod-minor.png";
import store from "@/assets/images/companyData/store.png";
import energy from "@/assets/images/companyData/energy.png";
import order from "@/assets/images/companyData/order.png";

export default {
  name: "ContainerIcon",
  components: {},
  props: {
    icon: {
      type: String,
      default: "prod",
    },
  },
  data() {
    return {};
  },
  computed: {
    bgStyle() {
      return {
        prod:
          "background: url(" + prod + ") no-repeat center center / 100% 100%",
        store:
          "background: url(" + store + ") no-repeat center center / 100% 100%",
        energy:
          "background: url(" + energy + ") no-repeat center center / 100% 100%",
        order:
          "background: url(" + order + ") no-repeat center center / 100% 100%",
      }[this.icon];
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.container-icon {
  //   width: 32px;
  //   height: 32px;
  width: 1.701vw;
  height: 1.701vw;
  background: #ccc2;
}
</style>
