diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/tipsBg.png b/src/assets/newImgs/pumpGY/tipsBg.png
new file mode 100644
index 0000000..7da1414
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/tipsBg.png
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/tipsBg.png b/src/assets/newImgs/pumpGY/tipsBg.png
new file mode 100644
index 0000000..7da1414
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/tipsBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/titleBg.png b/src/assets/newImgs/pumpGY/titleBg.png
deleted file mode 100644
index 08d95b0..0000000
--- a/src/assets/newImgs/pumpGY/titleBg.png
+++ /dev/null
Binary files differ

diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/tipsBg.png b/src/assets/newImgs/pumpGY/tipsBg.png
new file mode 100644
index 0000000..7da1414
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/tipsBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/titleBg.png b/src/assets/newImgs/pumpGY/titleBg.png
deleted file mode 100644
index 08d95b0..0000000
--- a/src/assets/newImgs/pumpGY/titleBg.png
+++ /dev/null
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 3fbf599..eaec872 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,13 +121,13 @@
 
     <!-- 典型项目设施效果 -->
     <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
-      <ProjectDX></ProjectDX>
+      <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import ProjectDX from '@/views/sponeScreen/projectHM/projectDX.vue'; //典型项目设施分析
+import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';

diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/tipsBg.png b/src/assets/newImgs/pumpGY/tipsBg.png
new file mode 100644
index 0000000..7da1414
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/tipsBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/titleBg.png b/src/assets/newImgs/pumpGY/titleBg.png
deleted file mode 100644
index 08d95b0..0000000
--- a/src/assets/newImgs/pumpGY/titleBg.png
+++ /dev/null
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 3fbf599..eaec872 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,13 +121,13 @@
 
     <!-- 典型项目设施效果 -->
     <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
-      <ProjectDX></ProjectDX>
+      <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import ProjectDX from '@/views/sponeScreen/projectHM/projectDX.vue'; //典型项目设施分析
+import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
diff --git a/src/views/sponeScreen/projectHM/projectDX.vue b/src/views/sponeScreen/projectHM/projectDX.vue
deleted file mode 100644
index 48f4391..0000000
--- a/src/views/sponeScreen/projectHM/projectDX.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <!-- 典型项目设施分析 -->
-  <div class="projectDXPage">
-    <!-- 分析结果建议 -->
-    <div class="suggest">
-      <div class="title">
-        监测分析建议
-        <el-icon class="iconSug" title="查看过程线" @mouseover="showProgress = true" @mouseout="showProgress = false">
-          <InfoFilled />
-        </el-icon>
-      </div>
-      <p>2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></p>
-      <!-- <p>1,项目设计最大控制容积 <span class="green">3796.52m³</span></p> -->
-      <p>1,项目设计最大控制容积 <span class="green">96.52m³</span></p>
-      <p>2,项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率92%，<span class="green">达标</span></p>
-      <p>3,雨水管网产流开始时间1:45，结束时间4:45，累计流量843.5m³，最大水深0.5m</p>
-    </div>
-
-    <!-- 过程图片 -->
-    <img src="@/assets/newImgs/pumpGY/suggestP.png" alt="过程图片" class="progressP" v-if="showProgress" />
-
-    <!-- 降雨效果 -->
-    <CanvasRain :width="1382" :height="800"></CanvasRain>
-
-    <!-- 水位 水流 -->
-    <img src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" :style="{ height: 30 + 'px' }" />
-
-    <!-- 实时数据 -->
-    <div class="realData">
-      <p style="left: 500px; bottom: 95px">管径：1.4 x 1.0米</p>
-      <p style="left: 700px; bottom: 95px">实时水深：0.3米</p>
-      <p style="right: 230px; bottom: 65px">进口流量：0.1m/s</p>
-      <p style="right: 230px; bottom: 25px">进口SS：85mg/L</p>
-      <p style="left: 60px; bottom: 65px">出口流量：0.23m/s</p>
-      <p style="left: 60px; bottom: 25px">出口SS：66mg/L</p>
-    </div>
-
-    <!-- 监测设备 -->
-    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备左1" style="left: 250px; bottom: 35px" class="equipM" />
-    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备右1" style="right: 420px; bottom: 35px" class="equipM" />
-
-    <!-- 水流方向 -->
-    <div class="waterFX">
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 220px; bottom: 425px; transform: rotate(50deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间1" style="left: 320px; bottom: 625px; transform: rotate(80deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间2" style="left: 360px; bottom: 425px; transform: rotate(80deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间3" style="left: 385px; bottom: 195px; transform: rotate(90deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右1" style="right: 110px; bottom: 425px; transform: rotate(180deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右2" style="right: 350px; bottom: 355px; transform: rotate(120deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右3" style="left: 500px; bottom: 425px; transform: rotate(130deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下1" style="left: 350px; bottom: 5px; transform: rotate(180deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下2" style="right: 480px; bottom: 5px; transform: rotate(180deg)" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import CanvasRain from '@/views/sponeScreen/projectHM/canvasRain.vue';
-const { proxy } = getCurrentInstance();
-const showProgress = ref(false);
-
-onMounted(() => {});
-</script>
-
-<style lang="scss" scoped>
-// prettier-ignore
-.projectDXPage {
-  width: 1382PX;
-  height: 800PX;
-  margin-bottom:20PX;
-  background: url('@/assets/newImgs/pumpGY/dxxmBg.jpg') no-repeat;
-  background-size: 100% 100%;
-  position:relative;
-  .equipM{
-    position: absolute; 
-    z-index: 30;
-    width:10PX;
-    height:73PX;
-  }
-  .progressP{
-    width:50%;
-    left: 405PX; 
-    top: 15PX; 
-    position: absolute; 
-    z-index: 20
-  }
-  .suggest{
-    position:absolute;
-    z-index: 20;
-    left:15PX;
-    top:15PX;
-    width:384PX;
-    background: linear-gradient(90deg, #2D459E 0%, rgba(45,69,158,0.4) 100%);
-    color:#fff;
-    font-size:15PX;
-    .title{
-      width:384PX;
-      height: 42PX;
-      line-height: 42PX;
-      padding-left:45PX;
-      font-size: 16PX;
-      background: url('@/assets/newImgs/pumpGY/titleBg.png') no-repeat;
-      background-size: 100% 100%;
-      .iconSug{
-        float:right;
-        margin:15PX 10PX;
-        cursor: pointer;
-      }
-    }
-    p{
-      padding:0px 20PX;
-      span{
-        font-weight: bold;
-      }
-    }
-  }
-  .waterFlow{
-    width:725PX;
-    position:absolute;
-    z-index: 10;
-    left:243PX;
-    bottom:28PX;
-  }
-  .realData{
-    color:#fff;
-    p{
-      position:absolute;
-      z-index: 10;
-      width:160PX;
-      height: 26PX;
-      line-height: 26PX;
-      text-align: center;
-      background: #004DE0;
-      border-radius: 13PX;
-      font-size:16PX;
-    }
-  }
-  .waterFX{
-    img{
-      position:absolute;
-      z-index: 10;
-    }
-  }
-}
-</style>

diff --git a/src/assets/newImgs/pumpGY/numBg.png b/src/assets/newImgs/pumpGY/numBg.png
new file mode 100644
index 0000000..720e15b
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/numBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/tipsBg.png b/src/assets/newImgs/pumpGY/tipsBg.png
new file mode 100644
index 0000000..7da1414
--- /dev/null
+++ b/src/assets/newImgs/pumpGY/tipsBg.png
Binary files differ
diff --git a/src/assets/newImgs/pumpGY/titleBg.png b/src/assets/newImgs/pumpGY/titleBg.png
deleted file mode 100644
index 08d95b0..0000000
--- a/src/assets/newImgs/pumpGY/titleBg.png
+++ /dev/null
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 3fbf599..eaec872 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,13 +121,13 @@
 
     <!-- 典型项目设施效果 -->
     <el-dialog v-model="showProjectDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
-      <ProjectDX></ProjectDX>
+      <ProjectSSDX></ProjectSSDX>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import ProjectDX from '@/views/sponeScreen/projectHM/projectDX.vue'; //典型项目设施分析
+import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
 import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
 import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
 import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
diff --git a/src/views/sponeScreen/projectHM/projectDX.vue b/src/views/sponeScreen/projectHM/projectDX.vue
deleted file mode 100644
index 48f4391..0000000
--- a/src/views/sponeScreen/projectHM/projectDX.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <!-- 典型项目设施分析 -->
-  <div class="projectDXPage">
-    <!-- 分析结果建议 -->
-    <div class="suggest">
-      <div class="title">
-        监测分析建议
-        <el-icon class="iconSug" title="查看过程线" @mouseover="showProgress = true" @mouseout="showProgress = false">
-          <InfoFilled />
-        </el-icon>
-      </div>
-      <p>2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></p>
-      <!-- <p>1,项目设计最大控制容积 <span class="green">3796.52m³</span></p> -->
-      <p>1,项目设计最大控制容积 <span class="green">96.52m³</span></p>
-      <p>2,项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率92%，<span class="green">达标</span></p>
-      <p>3,雨水管网产流开始时间1:45，结束时间4:45，累计流量843.5m³，最大水深0.5m</p>
-    </div>
-
-    <!-- 过程图片 -->
-    <img src="@/assets/newImgs/pumpGY/suggestP.png" alt="过程图片" class="progressP" v-if="showProgress" />
-
-    <!-- 降雨效果 -->
-    <CanvasRain :width="1382" :height="800"></CanvasRain>
-
-    <!-- 水位 水流 -->
-    <img src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" :style="{ height: 30 + 'px' }" />
-
-    <!-- 实时数据 -->
-    <div class="realData">
-      <p style="left: 500px; bottom: 95px">管径：1.4 x 1.0米</p>
-      <p style="left: 700px; bottom: 95px">实时水深：0.3米</p>
-      <p style="right: 230px; bottom: 65px">进口流量：0.1m/s</p>
-      <p style="right: 230px; bottom: 25px">进口SS：85mg/L</p>
-      <p style="left: 60px; bottom: 65px">出口流量：0.23m/s</p>
-      <p style="left: 60px; bottom: 25px">出口SS：66mg/L</p>
-    </div>
-
-    <!-- 监测设备 -->
-    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备左1" style="left: 250px; bottom: 35px" class="equipM" />
-    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备右1" style="right: 420px; bottom: 35px" class="equipM" />
-
-    <!-- 水流方向 -->
-    <div class="waterFX">
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 220px; bottom: 425px; transform: rotate(50deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间1" style="left: 320px; bottom: 625px; transform: rotate(80deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间2" style="left: 360px; bottom: 425px; transform: rotate(80deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间3" style="left: 385px; bottom: 195px; transform: rotate(90deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右1" style="right: 110px; bottom: 425px; transform: rotate(180deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右2" style="right: 350px; bottom: 355px; transform: rotate(120deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右3" style="left: 500px; bottom: 425px; transform: rotate(130deg)" />
-
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下1" style="left: 350px; bottom: 5px; transform: rotate(180deg)" />
-      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下2" style="right: 480px; bottom: 5px; transform: rotate(180deg)" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import CanvasRain from '@/views/sponeScreen/projectHM/canvasRain.vue';
-const { proxy } = getCurrentInstance();
-const showProgress = ref(false);
-
-onMounted(() => {});
-</script>
-
-<style lang="scss" scoped>
-// prettier-ignore
-.projectDXPage {
-  width: 1382PX;
-  height: 800PX;
-  margin-bottom:20PX;
-  background: url('@/assets/newImgs/pumpGY/dxxmBg.jpg') no-repeat;
-  background-size: 100% 100%;
-  position:relative;
-  .equipM{
-    position: absolute; 
-    z-index: 30;
-    width:10PX;
-    height:73PX;
-  }
-  .progressP{
-    width:50%;
-    left: 405PX; 
-    top: 15PX; 
-    position: absolute; 
-    z-index: 20
-  }
-  .suggest{
-    position:absolute;
-    z-index: 20;
-    left:15PX;
-    top:15PX;
-    width:384PX;
-    background: linear-gradient(90deg, #2D459E 0%, rgba(45,69,158,0.4) 100%);
-    color:#fff;
-    font-size:15PX;
-    .title{
-      width:384PX;
-      height: 42PX;
-      line-height: 42PX;
-      padding-left:45PX;
-      font-size: 16PX;
-      background: url('@/assets/newImgs/pumpGY/titleBg.png') no-repeat;
-      background-size: 100% 100%;
-      .iconSug{
-        float:right;
-        margin:15PX 10PX;
-        cursor: pointer;
-      }
-    }
-    p{
-      padding:0px 20PX;
-      span{
-        font-weight: bold;
-      }
-    }
-  }
-  .waterFlow{
-    width:725PX;
-    position:absolute;
-    z-index: 10;
-    left:243PX;
-    bottom:28PX;
-  }
-  .realData{
-    color:#fff;
-    p{
-      position:absolute;
-      z-index: 10;
-      width:160PX;
-      height: 26PX;
-      line-height: 26PX;
-      text-align: center;
-      background: #004DE0;
-      border-radius: 13PX;
-      font-size:16PX;
-    }
-  }
-  .waterFX{
-    img{
-      position:absolute;
-      z-index: 10;
-    }
-  }
-}
-</style>
diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue
new file mode 100644
index 0000000..9b58f47
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/projectSSDX.vue
@@ -0,0 +1,177 @@
+<template>
+  <!-- 典型项目设施分析 -->
+  <div class="projectDXPage">
+    <!-- 分析结果建议 -->
+    <div class="suggest">
+      <el-icon class="iconSug" title="查看过程线" @mouseover="showProgress = true" @mouseout="showProgress = false">
+        <InfoFilled />
+      </el-icon>
+      <div class="center">2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></div>
+      <!-- <p>1,项目设计最大控制容积 <span class="green">3796.52m³</span></p> -->
+      <div class="cont">
+        <span class="numBg">1</span>
+        项目设计最大控制容积 <span class="green">96.52m³</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">2</span>
+        项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率 <span class="green">92%</span>，
+        <span class="green">达标</span>
+      </div>
+      <div class="cont">
+        <span class="numBg">3</span>
+        雨水管网产流开始时间1:45，结束时间4:45，累计流量 <span class="green">843.5m³</span>， 最大水深<span class="green"> 0.5m</span>
+      </div>
+    </div>
+
+    <!-- 过程图片 -->
+    <img src="@/assets/newImgs/pumpGY/suggestP.png" alt="过程图片" class="progressP" v-if="showProgress" />
+
+    <!-- 降雨效果 -->
+    <CanvasRain :width="1382" :height="800"></CanvasRain>
+
+    <!-- 水位 水流 -->
+    <img src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" :style="{ height: 30 + 'px' }" />
+
+    <!-- 实时数据 -->
+    <div class="realData">
+      <p style="left: 500px; bottom: 95px">管径：1.4 x 1.0米</p>
+      <p style="left: 700px; bottom: 95px">实时水深：0.3米</p>
+      <p style="right: 230px; bottom: 65px">进口流量：0.1m/s</p>
+      <p style="right: 230px; bottom: 25px">进口SS：85mg/L</p>
+      <p style="left: 60px; bottom: 65px">出口流量：0.23m/s</p>
+      <p style="left: 60px; bottom: 25px">出口SS：66mg/L</p>
+    </div>
+
+    <!-- 监测设备 -->
+    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备左1" style="left: 250px; bottom: 35px" class="equipM" />
+    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备右1" style="right: 420px; bottom: 35px" class="equipM" />
+
+    <!-- 水流方向 -->
+    <div class="waterFX">
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 220px; bottom: 425px; transform: rotate(50deg)" />
+
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间1" style="left: 320px; bottom: 625px; transform: rotate(80deg)" />
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间2" style="left: 360px; bottom: 425px; transform: rotate(80deg)" />
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间3" style="left: 385px; bottom: 195px; transform: rotate(90deg)" />
+
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右1" style="right: 110px; bottom: 425px; transform: rotate(180deg)" />
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右2" style="right: 350px; bottom: 355px; transform: rotate(120deg)" />
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右3" style="left: 500px; bottom: 425px; transform: rotate(130deg)" />
+
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下1" style="left: 350px; bottom: 5px; transform: rotate(180deg)" />
+      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下2" style="right: 480px; bottom: 5px; transform: rotate(180deg)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CanvasRain from '@/views/sponeScreen/projectHM/canvasRain.vue';
+const { proxy } = getCurrentInstance();
+const showProgress = ref(false);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss">
+// prettier-ignore
+.projectDXPage {
+  width: 1382PX;
+  height: 800PX;
+  margin-bottom:20PX;
+  background: url('@/assets/newImgs/pumpGY/dxxmBg.jpg') no-repeat;
+  background-size: 100% 100%;
+  position:relative;
+  .equipM{
+    position: absolute; 
+    z-index: 30;
+    width:10PX;
+    height:73PX;
+  }
+  .progressP{
+    width:50%;
+    left: 433PX; 
+    top: 15PX; 
+    position: absolute; 
+    z-index: 20
+  }
+  .suggest{
+    position:absolute;
+    z-index: 20;
+    left:15PX;
+    top:15PX;
+    width:421PX;
+    height:251PX;
+    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
+    background-size: 100% 100%;
+    font-size:14PX;
+    padding:20PX;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #C1E8FF;
+    line-height: 24PX;
+    .iconSug{
+      cursor: pointer;
+      position:absolute;
+      top:20PX;
+      right:20PX;
+      width: 25PX;
+      height: 25PX;
+      svg{
+        width: 25PX;
+        height: 25PX;
+      }
+    }
+    .center{
+      margin:10PX 30px 10PX 0px;
+      text-align: center;
+      font-size:15PX;
+      color:#fff;
+    }
+    .cont{
+      padding-bottom:5PX;
+      margin-bottom:5PX;
+      border-bottom: 1px dashed #6A8CAE;
+      .numBg{
+        width:24PX;
+        height: 18PX;
+        line-height: 18PX;
+        display: inline-block;
+        background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        color: #FFD200;
+      }
+    }
+    span{
+      font-weight: bold;
+    }
+  }
+  .waterFlow{
+    width:725PX;
+    position:absolute;
+    z-index: 10;
+    left:243PX;
+    bottom:28PX;
+  }
+  .realData{
+    color:#fff;
+    p{
+      position:absolute;
+      z-index: 10;
+      width:160PX;
+      height: 26PX;
+      line-height: 26PX;
+      text-align: center;
+      background: #004DE0;
+      border-radius: 13PX;
+      font-size:16PX;
+    }
+  }
+  .waterFX{
+    img{
+      position:absolute;
+      z-index: 10;
+    }
+  }
+}
+</style>