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

59 lines
1.4 KiB
Vue
Raw Normal View History

2024-04-18 17:01:10 +08:00
<!--
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.701vw;
height: 1.701vw;
background: #ccc2;
}
</style>