diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
new file mode 100644
index 0000000..1c63534
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="partTitleHM">建设状态</div>
+
+  <div class="ConstrucClass">图例</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 260px;
+  background: #07347f;
+}
+</style>

diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
new file mode 100644
index 0000000..1c63534
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="partTitleHM">建设状态</div>
+
+  <div class="ConstrucClass">图例</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 260px;
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
new file mode 100644
index 0000000..43069df
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">详情</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 530px);
+  background: #07347f;
+}
+</style>

diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
new file mode 100644
index 0000000..1c63534
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="partTitleHM">建设状态</div>
+
+  <div class="ConstrucClass">图例</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 260px;
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
new file mode 100644
index 0000000..43069df
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">详情</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 530px);
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
new file mode 100644
index 0000000..65b8213
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">
+      <div class="WaterAccumulation">积水分析_icon</div>
+
+      <div class="WaterList">111</div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 580px);
+  background: #07347f;
+  .WaterAccumulation {
+    width: 100%;
+    height: 200px;
+    // background: yellow;
+  }
+  .WaterList {
+    margin-top: 10px;
+    height: calc(100% - 210px);
+    // background: red;
+  }
+}
+</style>

diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
new file mode 100644
index 0000000..1c63534
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="partTitleHM">建设状态</div>
+
+  <div class="ConstrucClass">图例</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 260px;
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
new file mode 100644
index 0000000..43069df
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">详情</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 530px);
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
new file mode 100644
index 0000000..65b8213
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">
+      <div class="WaterAccumulation">积水分析_icon</div>
+
+      <div class="WaterList">111</div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 580px);
+  background: #07347f;
+  .WaterAccumulation {
+    width: 100%;
+    height: 200px;
+    // background: yellow;
+  }
+  .WaterList {
+    margin-top: 10px;
+    height: calc(100% - 210px);
+    // background: red;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue
new file mode 100644
index 0000000..bbd1f1c
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectYype.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="partTitleHM">项目类型</div>
+  <div class="ConstrucClass">项目类型</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 310px;
+  background: #07347f;
+}
+</style>

diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
new file mode 100644
index 0000000..1c63534
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="partTitleHM">建设状态</div>
+
+  <div class="ConstrucClass">图例</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 260px;
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
new file mode 100644
index 0000000..43069df
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">详情</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 530px);
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
new file mode 100644
index 0000000..65b8213
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="publicContainerA">
+    <div class="partTitleHM">项目展示列表</div>
+    <div class="ConstrucClass">
+      <div class="WaterAccumulation">积水分析_icon</div>
+
+      <div class="WaterList">111</div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.publicContainerA {
+  margin-top: 10px;
+}
+.ConstrucClass {
+  width: 100%;
+  height: calc(100vh - 580px);
+  background: #07347f;
+  .WaterAccumulation {
+    width: 100%;
+    height: 200px;
+    // background: yellow;
+  }
+  .WaterList {
+    margin-top: 10px;
+    height: calc(100% - 210px);
+    // background: red;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue
new file mode 100644
index 0000000..bbd1f1c
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ProjectYype.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="partTitleHM">项目类型</div>
+  <div class="ConstrucClass">项目类型</div>
+</template>
+<script setup></script>
+
+<style lang="scss" scoped>
+.ConstrucClass {
+  width: 100%;
+  height: 310px;
+  background: #07347f;
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/index.vue b/src/views/sponeScreen/projectHM/index.vue
index 6d4251f..cb5b792 100644
--- a/src/views/sponeScreen/projectHM/index.vue
+++ b/src/views/sponeScreen/projectHM/index.vue
@@ -1,9 +1,26 @@
 <template>
   <!-- 海绵综合一张图 项目建设 -->
-  <div class="publicContainer">项目建设</div>
+  <div class="publicContainer">
+    <div class="publicLeftHM">
+      <!-- 建设状态 -->
+      <ConstructionStatus></ConstructionStatus>
+      <!--  项目展示-->
+      <ProjectDisplay></ProjectDisplay>
+    </div>
+    <div class="publicRightHM">
+      <!-- 项目类型 -->
+      <ProjectYype></ProjectYype>
+      <!--项目评估  -->
+      <ProjectEvaluation></ProjectEvaluation>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
+import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
+import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
+import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目展示
 const { proxy } = getCurrentInstance();
 
 onMounted(() => {});