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

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainSJ.png b/src/assets/newImgs/HMScreen/rainSJ.png
new file mode 100644
index 0000000..e5852e5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainSJ.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainSJ.png b/src/assets/newImgs/HMScreen/rainSJ.png
new file mode 100644
index 0000000..e5852e5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainSJ.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/yiLD.png b/src/assets/newImgs/HMScreen/yiLD.png
new file mode 100644
index 0000000..e05e4ab
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/yiLD.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainSJ.png b/src/assets/newImgs/HMScreen/rainSJ.png
new file mode 100644
index 0000000..e5852e5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainSJ.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/yiLD.png b/src/assets/newImgs/HMScreen/yiLD.png
new file mode 100644
index 0000000..e05e4ab
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/yiLD.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 174b622..d95fc38 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -59,26 +59,9 @@
     </div>
 
     <!-- 项目分区建议 -->
-    <div :class="['projectArea', showPanel ? 'right30' : 'right480']" v-if="menuIndex == 2">
-      <!-- 古城片区 -->
-      <div v-if="areaObj.value == '0'">
-        <p>以优质的"蓝绿"基底为基础，系统提升片区韧性</p>
-        <p>治理前：泵站总开机时长23小时40分；抽排量12.5万吨；径流总量控制率45%</p>
-        <p>治理后：泵站总开机时长13小时21分；抽排量7.1万吨；径流总量控制率72%</p>
-      </div>
-      <!-- 城东南片区 -->
-      <div v-if="areaObj.value == '1'">
-        <p>以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理</p>
-        <p>治理前：易涝积水点2处，合流制溢流频次控制在20次以上</p>
-        <p>治理后：易涝积水点2处全面消除，合流制溢流频次控制在10次以内，内涝标准达到20年一遇</p>
-      </div>
-      <!-- 保税区片区 -->
-      <div v-if="areaObj.value == '2'">
-        <p>以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用</p>
-        <p>治理前：5处易涝积水点，雨水收集量：0.3万吨</p>
-        <p>治理后：0处易涝积水点，雨水收集量：5.3万吨</p>
-      </div>
-    </div>
+    <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 800px" append-to-body>
+      <ProjectArea :areaObj="areaObj"></ProjectArea>
+    </el-dialog>
 
     <!-- 下垫面统计的图例说明 -->
     <div class="landAreaC" v-if="menuIndex == 1">
@@ -139,6 +122,7 @@
 </template>
 
 <script setup>
+import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
@@ -162,6 +146,7 @@
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
 const showRainFlow = ref(false);
+const showProjectArea = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -271,6 +256,7 @@
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
+    showProjectArea.value = true;
   });
   // 降雨特征点击
   bus.on('checkRainL', params => {
@@ -301,7 +287,7 @@
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .hmMainPage {
   width: 100%;
   height: 100%;

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainSJ.png b/src/assets/newImgs/HMScreen/rainSJ.png
new file mode 100644
index 0000000..e5852e5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainSJ.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/yiLD.png b/src/assets/newImgs/HMScreen/yiLD.png
new file mode 100644
index 0000000..e05e4ab
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/yiLD.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 174b622..d95fc38 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -59,26 +59,9 @@
     </div>
 
     <!-- 项目分区建议 -->
-    <div :class="['projectArea', showPanel ? 'right30' : 'right480']" v-if="menuIndex == 2">
-      <!-- 古城片区 -->
-      <div v-if="areaObj.value == '0'">
-        <p>以优质的"蓝绿"基底为基础，系统提升片区韧性</p>
-        <p>治理前：泵站总开机时长23小时40分；抽排量12.5万吨；径流总量控制率45%</p>
-        <p>治理后：泵站总开机时长13小时21分；抽排量7.1万吨；径流总量控制率72%</p>
-      </div>
-      <!-- 城东南片区 -->
-      <div v-if="areaObj.value == '1'">
-        <p>以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理</p>
-        <p>治理前：易涝积水点2处，合流制溢流频次控制在20次以上</p>
-        <p>治理后：易涝积水点2处全面消除，合流制溢流频次控制在10次以内，内涝标准达到20年一遇</p>
-      </div>
-      <!-- 保税区片区 -->
-      <div v-if="areaObj.value == '2'">
-        <p>以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用</p>
-        <p>治理前：5处易涝积水点，雨水收集量：0.3万吨</p>
-        <p>治理后：0处易涝积水点，雨水收集量：5.3万吨</p>
-      </div>
-    </div>
+    <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 800px" append-to-body>
+      <ProjectArea :areaObj="areaObj"></ProjectArea>
+    </el-dialog>
 
     <!-- 下垫面统计的图例说明 -->
     <div class="landAreaC" v-if="menuIndex == 1">
@@ -139,6 +122,7 @@
 </template>
 
 <script setup>
+import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
@@ -162,6 +146,7 @@
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
 const showRainFlow = ref(false);
+const showProjectArea = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -271,6 +256,7 @@
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
+    showProjectArea.value = true;
   });
   // 降雨特征点击
   bus.on('checkRainL', params => {
@@ -301,7 +287,7 @@
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .hmMainPage {
   width: 100%;
   height: 100%;
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index c048145..68fc98f 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -160,7 +160,7 @@
 ]);
 
 const AllData = reactive({
-  queryParams: { BODName: '1', area: '0', pipe: '1', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '1' },
+  queryParams: { BODName: '1', area: '', pipe: '', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '1' },
 });
 const { queryParams } = toRefs(AllData);
 
@@ -181,7 +181,7 @@
   newfiberMapbox.map.easeTo({
     center: areaList.value[val].lonlat,
     zoom: 13.9,
-    pitch: 55,
+    pitch: 30,
   });
 }
 </script>

diff --git a/src/assets/newImgs/HMScreen/areaBg.png b/src/assets/newImgs/HMScreen/areaBg.png
new file mode 100644
index 0000000..cdc71b5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/areaBg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/hourSC.png b/src/assets/newImgs/HMScreen/hourSC.png
new file mode 100644
index 0000000..1b3d12d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/hourSC.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpCP.png b/src/assets/newImgs/HMScreen/pumpCP.png
new file mode 100644
index 0000000..949db2f
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpCP.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pumpLL.png b/src/assets/newImgs/HMScreen/pumpLL.png
new file mode 100644
index 0000000..d6ef636
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pumpLL.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/rainSJ.png b/src/assets/newImgs/HMScreen/rainSJ.png
new file mode 100644
index 0000000..e5852e5
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/rainSJ.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/yiLD.png b/src/assets/newImgs/HMScreen/yiLD.png
new file mode 100644
index 0000000..e05e4ab
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/yiLD.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 174b622..d95fc38 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -59,26 +59,9 @@
     </div>
 
     <!-- 项目分区建议 -->
-    <div :class="['projectArea', showPanel ? 'right30' : 'right480']" v-if="menuIndex == 2">
-      <!-- 古城片区 -->
-      <div v-if="areaObj.value == '0'">
-        <p>以优质的"蓝绿"基底为基础，系统提升片区韧性</p>
-        <p>治理前：泵站总开机时长23小时40分；抽排量12.5万吨；径流总量控制率45%</p>
-        <p>治理后：泵站总开机时长13小时21分；抽排量7.1万吨；径流总量控制率72%</p>
-      </div>
-      <!-- 城东南片区 -->
-      <div v-if="areaObj.value == '1'">
-        <p>以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理</p>
-        <p>治理前：易涝积水点2处，合流制溢流频次控制在20次以上</p>
-        <p>治理后：易涝积水点2处全面消除，合流制溢流频次控制在10次以内，内涝标准达到20年一遇</p>
-      </div>
-      <!-- 保税区片区 -->
-      <div v-if="areaObj.value == '2'">
-        <p>以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用</p>
-        <p>治理前：5处易涝积水点，雨水收集量：0.3万吨</p>
-        <p>治理后：0处易涝积水点，雨水收集量：5.3万吨</p>
-      </div>
-    </div>
+    <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 800px" append-to-body>
+      <ProjectArea :areaObj="areaObj"></ProjectArea>
+    </el-dialog>
 
     <!-- 下垫面统计的图例说明 -->
     <div class="landAreaC" v-if="menuIndex == 1">
@@ -139,6 +122,7 @@
 </template>
 
 <script setup>
+import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
 import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
@@ -162,6 +146,7 @@
 const stationCode = ref('');
 const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
 const showRainFlow = ref(false);
+const showProjectArea = ref(false);
 const menuList = ref([
   { name: '城市概况', id: 1 },
   { name: '项目建设', id: 2 },
@@ -271,6 +256,7 @@
   // 获取项目片区点击
   bus.on('checkProjectArea', params => {
     areaObj.value = params;
+    showProjectArea.value = true;
   });
   // 降雨特征点击
   bus.on('checkRainL', params => {
@@ -301,7 +287,7 @@
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .hmMainPage {
   width: 100%;
   height: 100%;
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index c048145..68fc98f 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -160,7 +160,7 @@
 ]);
 
 const AllData = reactive({
-  queryParams: { BODName: '1', area: '0', pipe: '1', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '1' },
+  queryParams: { BODName: '1', area: '', pipe: '', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '1' },
 });
 const { queryParams } = toRefs(AllData);
 
@@ -181,7 +181,7 @@
   newfiberMapbox.map.easeTo({
     center: areaList.value[val].lonlat,
     zoom: 13.9,
-    pitch: 55,
+    pitch: 30,
   });
 }
 </script>
diff --git a/src/views/sponeScreen/projectHM/projectArea.vue b/src/views/sponeScreen/projectHM/projectArea.vue
new file mode 100644
index 0000000..b23566a
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/projectArea.vue
@@ -0,0 +1,199 @@
+<template>
+  <!-- 项目分区建议 -->
+  <div class="areaProject">
+    <!-- 古城片区 -->
+    <div v-if="areaObj.value == '0'">
+      <p>古城片区：以优质的"蓝绿"基底为基础，系统提升片区韧性。片区共谋划项目27个，以改造类项目为主，海绵总投资约13.38亿元</p>
+      <div class="zlBefore">
+        <div class="bg">治理前</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/hourSC.png" alt="" class="img" />
+            <div>
+              <div>泵站总开机时长</div>
+              <div class="num">23小时40分钟</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
+            <div>
+              <div>泵站总抽排量</div>
+              <div class="num">12.5万吨</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpLL.png" alt="" class="img" />
+            <div>
+              <div>径流总量控制率</div>
+              <div class="num">45%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="zdAfter">
+        <div class="bg">治理后</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/hourSC.png" alt="" class="img" />
+            <div>
+              <div>泵站总开机时长</div>
+              <div class="num">13小时21分</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
+            <div>
+              <div>泵站总抽排量</div>
+              <div class="num">7.1万吨</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpLL.png" alt="" class="img" />
+            <div>
+              <div>径流总量控制率</div>
+              <div class="num">72%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 城东南片区 -->
+    <div v-if="areaObj.value == '1'">
+      <p>城东南片区：以解决内涝积水和溢流污染为导向，从源头到末端实现污涝协同治理。</p>
+      <div class="zlBefore">
+        <div class="bg">治理前</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
+            <div>
+              <div>易涝积水点</div>
+              <div class="num">2处</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
+            <div>
+              <div>合流制溢流频次</div>
+              <div class="num">>20次</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="zdAfter">
+        <div class="bg">治理后</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
+            <div>
+              <div>易涝积水点</div>
+              <div class="num">0处</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/pumpCP.png" alt="" class="img" />
+            <div>
+              <div>合流制溢流频次</div>
+              <div class="num">10次</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 保税区片区 -->
+    <div v-if="areaObj.value == '2'">
+      <p>
+        保税区片区：以连片打造为目标，降低高硬化面积区域雨水径流对市政管网的冲击，实现雨水资源化利用。片区内谋划实施项目12个项目包，共包含35个子项（产业园区内主要为新建项目，产业园区外项目以改造为主），海绵总投资：2.93亿元
+      </p>
+      <div class="zlBefore">
+        <div class="bg">治理前</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
+            <div>
+              <div>易涝积水点</div>
+              <div class="num">5处</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/rainSJ.png" alt="" class="img" />
+            <div>
+              <div>雨水收集量</div>
+              <div class="num">0.3万吨</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="zdAfter">
+        <div class="bg">治理后</div>
+        <div class="flex flex-justcontent-spacearound mt-10 content">
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/yiLD.png" alt="" class="img" />
+            <div>
+              <div>易涝积水点</div>
+              <div class="num">0处</div>
+            </div>
+          </div>
+          <div class="flex">
+            <img src="@/assets/newImgs/HMScreen/rainSJ.png" alt="" class="img" />
+            <div>
+              <div>雨水收集量</div>
+              <div class="num">5.3万吨</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  areaObj: { type: Object },
+});
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.areaProject {
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  color: #ffffff;
+  .zdAfter {
+    margin: 30px auto;
+  }
+  .content {
+    .flex {
+      align-items: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #b8ecff;
+      width: 33%;
+
+      .img {
+        width: 80px;
+        height: 78px;
+        margin-right: 20px;
+      }
+      .num {
+        font-family: YouSheBiaoTiHei;
+        color: #13b4ff;
+        font-size: 24px;
+        margin-top: 8px;
+      }
+    }
+  }
+
+  .bg {
+    width: 748px;
+    height: 34px;
+    line-height: 30px;
+    background: url('@/assets/newImgs/HMScreen/areaBg.png') no-repeat;
+    background-size: 100% 100%;
+    padding-left: 30px;
+  }
+}
+</style>