yudao-init/src/views/dashboard/components/ContainerIcon.vue

<!--
    filename: ContainerIcon.vue
    author: liubin
    date: 2024-04-09 16:41:36
    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 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%",
      }[this.icon];
    },
  },
  methods: {},
};
</script>

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