<script setup>
|
import CardBox from "@/components/CardBox.vue";
|
import {onMounted, onUnmounted, watch} from "vue";
|
import MapPin from "@/components/MapPin.vue";
|
import slideMenu from "@/views/mainLayout/js/slideMenu";
|
import homeContentModule from "@/views/home/js/homeContentModule";
|
import homeInfoModule from "@/views/home/js/homeInfoModule";
|
import {Setting} from "@element-plus/icons-vue";
|
|
const {
|
isCollapse
|
} = slideMenu();
|
|
const {
|
homeContentDom,
|
cWidth, cHeight,
|
dWidth, dHeight,
|
setContainerSize
|
} = homeContentModule();
|
|
const {homeInfo} = homeInfoModule();
|
|
homeInfo[0].hum = 123;
|
|
watch(isCollapse, ()=>{
|
setTimeout(()=>{
|
setContainerSize();
|
}, 500);
|
});
|
|
onMounted(()=>{
|
setContainerSize();
|
// 监听windows窗口的缩放,绑定resize事件
|
window.addEventListener("resize", setContainerSize);
|
});
|
|
|
onUnmounted(()=>{
|
// 销毁resize事件
|
window.removeEventListener("resize", setContainerSize);
|
});
|
</script>
|
|
<template>
|
<div class="home-content" ref="homeContentDom">
|
<map-pin
|
v-for="(item, index) in homeInfo" :key="'key'+index"
|
:name="item.name"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="item.pos.x" :y="item.pos.y"></map-pin>
|
<div class="card-box-list">
|
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.home-content {
|
position: relative;
|
height: 100%;
|
background-image: url("./images/home.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
</style>
|
