diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/iconPane.png b/src/assets/newImgs/HMScreen/iconPane.png
new file mode 100644
index 0000000..1450cf1
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconPane.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/iconPane.png b/src/assets/newImgs/HMScreen/iconPane.png
new file mode 100644
index 0000000..1450cf1
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconPane.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 191ee98..74a2815 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -451,3 +451,43 @@
     }
   }
 }
+// 海绵综合一张图样式
+.partTitleHM {
+  width: 460px;
+  height: 41px;
+  line-height: 41px;
+  background: url('@/assets/newImgs/HMScreen/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #e4f5ff;
+  padding-left: 30px;
+}
+.partContHM {
+  background: #003b6d;
+  opacity: 0.8;
+  width: 460px;
+  margin-top: -3px;
+  padding: 10px;
+}
+.publicLeftHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+  overflow-y: auto;
+}
+.publicRightHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  overflow-y: auto;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+}

diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/iconPane.png b/src/assets/newImgs/HMScreen/iconPane.png
new file mode 100644
index 0000000..1450cf1
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconPane.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 191ee98..74a2815 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -451,3 +451,43 @@
     }
   }
 }
+// 海绵综合一张图样式
+.partTitleHM {
+  width: 460px;
+  height: 41px;
+  line-height: 41px;
+  background: url('@/assets/newImgs/HMScreen/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #e4f5ff;
+  padding-left: 30px;
+}
+.partContHM {
+  background: #003b6d;
+  opacity: 0.8;
+  width: 460px;
+  margin-top: -3px;
+  padding: 10px;
+}
+.publicLeftHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+  overflow-y: auto;
+}
+.publicRightHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  overflow-y: auto;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+}
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index ef28c1b..20a5186 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -5,12 +5,37 @@
     <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend :showLegend="showLegend"></Legend> -->
 
-    <!-- 内容 -->
+    <!-- 控制面板按钮 -->
+    <div class="controlHM">
+      <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>
 </template>
@@ -19,12 +44,40 @@
 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(true);
+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>
@@ -35,7 +88,6 @@
   height: 100%;
   background: #010e22;
   position: relative;
-  z-index: 210;
   .headHM {
     position: absolute;
     top: 0px;
@@ -49,6 +101,65 @@
       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;
+    right: 500px;
+    bottom: 20px;
+    z-index: 220;
+    width: 32px;
+    img {
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      margin-bottom: 10px;
     }
   }
 }

diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/iconPane.png b/src/assets/newImgs/HMScreen/iconPane.png
new file mode 100644
index 0000000..1450cf1
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconPane.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 191ee98..74a2815 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -451,3 +451,43 @@
     }
   }
 }
+// 海绵综合一张图样式
+.partTitleHM {
+  width: 460px;
+  height: 41px;
+  line-height: 41px;
+  background: url('@/assets/newImgs/HMScreen/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #e4f5ff;
+  padding-left: 30px;
+}
+.partContHM {
+  background: #003b6d;
+  opacity: 0.8;
+  width: 460px;
+  margin-top: -3px;
+  padding: 10px;
+}
+.publicLeftHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+  overflow-y: auto;
+}
+.publicRightHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  overflow-y: auto;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+}
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index ef28c1b..20a5186 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -5,12 +5,37 @@
     <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend :showLegend="showLegend"></Legend> -->
 
-    <!-- 内容 -->
+    <!-- 控制面板按钮 -->
+    <div class="controlHM">
+      <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>
 </template>
@@ -19,12 +44,40 @@
 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(true);
+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>
@@ -35,7 +88,6 @@
   height: 100%;
   background: #010e22;
   position: relative;
-  z-index: 210;
   .headHM {
     position: absolute;
     top: 0px;
@@ -49,6 +101,65 @@
       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;
+    right: 500px;
+    bottom: 20px;
+    z-index: 220;
+    width: 32px;
+    img {
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      margin-bottom: 10px;
     }
   }
 }
diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 4313b5d..33c5de5 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -20,7 +20,6 @@
 // 兼容城管委15楼大屏3800*866和1920*1080
 function setScreenType() {
   let widths = window.innerWidth;
-  console.log('widths---', widths);
   if (widths > 3500) {
     ifCGW.value = true;
   } else {

diff --git a/src/assets/newImgs/HMScreen/iconLegend.png b/src/assets/newImgs/HMScreen/iconLegend.png
new file mode 100644
index 0000000..bf37c44
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconLegend.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/iconPane.png b/src/assets/newImgs/HMScreen/iconPane.png
new file mode 100644
index 0000000..1450cf1
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/iconPane.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 191ee98..74a2815 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -451,3 +451,43 @@
     }
   }
 }
+// 海绵综合一张图样式
+.partTitleHM {
+  width: 460px;
+  height: 41px;
+  line-height: 41px;
+  background: url('@/assets/newImgs/HMScreen/partBg.png') no-repeat;
+  background-size: 100% 100%;
+  font-family: YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 22px;
+  color: #e4f5ff;
+  padding-left: 30px;
+}
+.partContHM {
+  background: #003b6d;
+  opacity: 0.8;
+  width: 460px;
+  margin-top: -3px;
+  padding: 10px;
+}
+.publicLeftHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+  overflow-y: auto;
+}
+.publicRightHM {
+  height: calc(100vh - 110px);
+  border: 1px solid red;
+  overflow-y: auto;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 220;
+  padding: 10px;
+}
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index ef28c1b..20a5186 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -5,12 +5,37 @@
     <!-- <GisMapMF></GisMapMF> -->
 
     <!-- 图例 -->
-    <Legend></Legend>
+    <!-- <Legend :showLegend="showLegend"></Legend> -->
 
-    <!-- 内容 -->
+    <!-- 控制面板按钮 -->
+    <div class="controlHM">
+      <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>
 </template>
@@ -19,12 +44,40 @@
 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(true);
+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>
@@ -35,7 +88,6 @@
   height: 100%;
   background: #010e22;
   position: relative;
-  z-index: 210;
   .headHM {
     position: absolute;
     top: 0px;
@@ -49,6 +101,65 @@
       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;
+    right: 500px;
+    bottom: 20px;
+    z-index: 220;
+    width: 32px;
+    img {
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      margin-bottom: 10px;
     }
   }
 }
diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 4313b5d..33c5de5 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -20,7 +20,6 @@
 // 兼容城管委15楼大屏3800*866和1920*1080
 function setScreenType() {
   let widths = window.innerWidth;
-  console.log('widths---', widths);
   if (widths > 3500) {
     ifCGW.value = true;
   } else {
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 6e1b4f5..b140c6b 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -1,11 +1,37 @@
 <template>
   <!-- 海绵综合一张图 城市概况 -->
-  <div class="publicContainer">城市概况</div>
+  <div class="cityPage">
+    <div class="publicLeftHM">
+      <!-- 自然地理 -->
+      <div class="partTitleHM">自然地理</div>
+      <div class="partContHM">自然地理自然地理</div>
+    </div>
+
+    <div class="publicRightHM">
+      <!-- 城市规划 -->
+      <div class="partTitleHM">城市规划</div>
+      <div class="partContHM">城市规划城市规划城市规划</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+  },
+  { immediate: true }
+);
+
 onMounted(() => {});
 </script>