内容提交

longyvfengyun

2023-06-27 7916e4ccc9fa28838b348ac07e53673833903140

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script setup>
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";
 
const {
    isCollapse
} = slideMenu();
 
const {
    homeContentDom,
    cWidth, cHeight,
    dWidth, dHeight,
    setContainerSize
} = homeContentModule();
 
const {homeInfo} = homeInfoModule();
 
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"
            :visible="item.pos.visible"
            :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-plus.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>