<template> <!-- 海绵综合一张图首页 --> <div class="hmMainPage"> <!-- 地图 --> <!-- <GisMapMF></GisMapMF> --> <!-- 图例 --> <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend> <!-- 控制面板按钮 --> <div class="controlHM" :style="{ right: showPanel ? '30px' : '520px' }" v-if="menuIndex != 3"> <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" /> <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" /> </div> <!-- 内容-头部 --> <div class="headHM flex"> <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" /> <div class="title">海绵城市综合一张图</div> <div class="menuBtn"> <p v-for="item in menuList" :key="item.id" :class="['btnPart', menuIndex == item.id ? 'btnActive' : '']" @click="menuClick(item.id)" > {{ item.name }} </p> </div> </div> <!-- 内容-内容切换区 --> <div class="contHM"> <City v-if="menuIndex == 1" :showPanel="showPanel"></City> <ProjectHM v-if="menuIndex == 2" :showPanel="showPanel"></ProjectHM> <EvaluationKH v-if="menuIndex == 3" :showPanel="showPanel"></EvaluationKH> <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood> <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW> </div> <!-- 底部装饰 --> <div class="bottomHM"></div> </div> </template> <script setup> import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue'; import Legend from '@/views/sponeScreen/gisMF/legendKF.vue'; import bus from '@/bus'; import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况 import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设 import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估 import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝 import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维 const router = useRouter(); const menuList = ref([ { name: '城市概况', id: 1 }, { name: '项目建设', id: 2 }, { name: '考核评估', id: 3 }, { name: '排水防涝', id: 4 }, { name: '长效运维', id: 5 }, ]); const menuIndex = ref(1); const showPanel = ref(false); const showLegend = ref(false); // 跳转业务系统 function goSystem() { router.push({ path: '/index' }); } // 菜单跳转 function menuClick(id) { menuIndex.value = id; } // 图例控制 function controlLegend() { showLegend.value = !showLegend.value; } // 展开收起 function controlPanel() { showPanel.value = !showPanel.value; } onMounted(() => {}); </script> <style scoped lang="scss"> .hmMainPage { width: 100%; height: 100%; background: #010e22; position: relative; .headHM { position: absolute; top: 0px; left: 0px; z-index: 220; width: 1920px; height: 100px; background: url('@/assets/newImgs/HMScreen/headBg.png') no-repeat; background-size: 100% 100%; .mainYW { width: 50px; height: 44px; cursor: pointer; margin: 10px 10px 0px 30px; } .title { font-family: YouSheBiaoTiHei; font-weight: 400; font-size: 40px; letter-spacing: 10px; color: #ffffff; text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47); margin-top: 5px; } .menuBtn { display: flex; margin-left: 50px; .btnPart { width: 136px; height: 36px; background: url('@/assets/newImgs/HMScreen/btnBg.png') no-repeat; background-size: 100% 100%; text-align: center; line-height: 36px; font-family: YouSheBiaoTiHei; font-weight: 400; font-size: 24px; color: #c9dfff; opacity: 0.78; cursor: pointer; margin-left: 20px; margin-top: 10px; &:hover { color: #f7faff; opacity: 1; } } .btnActive { background: url('@/assets/newImgs/HMScreen/btnActive.png') no-repeat; background-size: 100% 100%; color: #f7faff; opacity: 1; } } } .contHM { position: relative; top: 100px; left: 0px; z-index: 220; } .controlHM { position: absolute; bottom: 50px; z-index: 220; width: 32px; img { width: 32px; height: 32px; cursor: pointer; margin-bottom: 10px; } } .bottomHM { position: absolute; bottom: 0px; left: 0px; z-index: 180; width: 1920px; height: 100px; background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat; background-size: 100% 100%; } } </style>