<!--
 * @Author: zhp
 * @Date: 2024-04-28 13:42:51
 * @LastEditTime: 2024-07-09 16:55:58
 * @LastEditors: zhp
 * @Description:
-->

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

<script>
import cube from "@/assets/images/homeindex/fto-icon.png";
import chip from "@/assets/images/homeindex/chip-icon.png";
import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
import bipv from "@/assets/images/homeindex/bipv-icon.png";
import water from "@/assets/images/homeindex/water-icon.png";
import gas from "@/assets/images/homeindex/gas-icon.png";
import ware from "@/assets/images/homeindex/ware-icon.png";
import flash from "@/assets/images/homeindex/flash-icon.png";
import std from "@/assets/images/homeindex/std-icon.png";


export default {
  name: "ContainerIcon",
  components: {},
  props: {
    icon: {
      type: String,
      default: "cube",
    },
  },
  data() {
    return {};
  },
  computed: {
    bgStyle() {
      return {
        cube:
          "background: url(" + cube + ") no-repeat center center / 100% 100%",
        chip:
          "background: url(" + chip + ") no-repeat center center / 100% 100%",
        chip2:
          "background: url(" + chip2 + ") no-repeat center center / 100% 100%",
        bipv:
          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
        std: "background: url(" + std + ") no-repeat center center / 100% 100%",
        water: "background: url(" + water + ") no-repeat center center / 100% 100%",
        gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
        flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
        ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
      }[this.icon];
    },
  },
  methods: {},
};
</script>

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