diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index a5eba20..40d2b85 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -16,6 +16,7 @@
 .ConstrucClass {
   width: 100%;
   height: 260px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 </style>

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index a5eba20..40d2b85 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -16,6 +16,7 @@
 .ConstrucClass {
   width: 100%;
   height: 260px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index f016a6d..bc7eff9 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -70,7 +70,8 @@
 .ConstrucClass {
   width: 100%;
   height: calc(100vh - 530px);
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .HeadContent {
     width: 100%;
     height: 65px;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index a5eba20..40d2b85 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -16,6 +16,7 @@
 .ConstrucClass {
   width: 100%;
   height: 260px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index f016a6d..bc7eff9 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -70,7 +70,8 @@
 .ConstrucClass {
   width: 100%;
   height: calc(100vh - 530px);
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .HeadContent {
     width: 100%;
     height: 65px;
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index d124155..95d84df 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -5,6 +5,9 @@
       <div class="WaterAccumulation">
         <div class="HeadContent">
           <span>积水分析</span>
+          <el-form-item prop="date" style="float: right; width: 130px; margin: 7px 20px 0px 0px">
+            <el-select v-model="riverIndex" size="small"> </el-select>
+          </el-form-item>
         </div>
         <div class="assessment">
           <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
@@ -12,7 +15,49 @@
       </div>
 
       <div class="WaterList">
-        <div class="DropdownBox">11</div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="pipefx" alt="" class="ICON_zp" />
+            <span>片区分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="xmfx" alt="" class="ICON_zp" />
+            <span>项目分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="ssfx" alt="" class="ICON_zp" />
+            <span>设施分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -20,6 +65,9 @@
 
 <script setup>
 import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
+import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
+import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
 
 const chartData2 = ref({
   xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
@@ -28,6 +76,11 @@
   refresh: 1,
 });
 const refresh = ref(1);
+
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
 </script>
 
 <style lang="scss" scoped>
@@ -35,9 +88,10 @@
   margin-top: 10px;
 }
 .ConstrucClass {
-  width: 100%;
-  height: calc(100vh - 580px);
-  background: #07347f;
+  width: 460px;
+  height: calc(100vh - 575px);
+  background: #003b6d;
+  opacity: 0.8;
   .WaterAccumulation {
     width: 95%;
     height: 200px;
@@ -50,6 +104,14 @@
       border: 1px solid #61aff0;
       position: relative;
       top: 2px;
+      span {
+        position: relative;
+        top: 8px;
+        left: 15px;
+        color: #ffffff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+      }
     }
     .assessment {
       width: 100%;
@@ -62,10 +124,32 @@
     margin-top: 10px;
     height: calc(100% - 210px);
     margin: auto;
-    background: red;
+    // background: red;
     .DropdownBox {
-      height: 55px;
-      background: yellow;
+      height: 50px;
+      background: #217dc8;
+      border: 1px solid #61aff0;
+      display: flex;
+      justify-content: space-around;
+      margin: 5px;
+      .analysis {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: red;
+        .ICON_zp {
+          width: 28px;
+          height: 28px;
+          position: relative;
+          top: 32x;
+        }
+      }
+      .Selectionbox {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: yellowgreen;
+      }
     }
   }
 }

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index a5eba20..40d2b85 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -16,6 +16,7 @@
 .ConstrucClass {
   width: 100%;
   height: 260px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index f016a6d..bc7eff9 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -70,7 +70,8 @@
 .ConstrucClass {
   width: 100%;
   height: calc(100vh - 530px);
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .HeadContent {
     width: 100%;
     height: 65px;
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index d124155..95d84df 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -5,6 +5,9 @@
       <div class="WaterAccumulation">
         <div class="HeadContent">
           <span>积水分析</span>
+          <el-form-item prop="date" style="float: right; width: 130px; margin: 7px 20px 0px 0px">
+            <el-select v-model="riverIndex" size="small"> </el-select>
+          </el-form-item>
         </div>
         <div class="assessment">
           <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
@@ -12,7 +15,49 @@
       </div>
 
       <div class="WaterList">
-        <div class="DropdownBox">11</div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="pipefx" alt="" class="ICON_zp" />
+            <span>片区分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="xmfx" alt="" class="ICON_zp" />
+            <span>项目分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="ssfx" alt="" class="ICON_zp" />
+            <span>设施分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -20,6 +65,9 @@
 
 <script setup>
 import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
+import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
+import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
 
 const chartData2 = ref({
   xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
@@ -28,6 +76,11 @@
   refresh: 1,
 });
 const refresh = ref(1);
+
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
 </script>
 
 <style lang="scss" scoped>
@@ -35,9 +88,10 @@
   margin-top: 10px;
 }
 .ConstrucClass {
-  width: 100%;
-  height: calc(100vh - 580px);
-  background: #07347f;
+  width: 460px;
+  height: calc(100vh - 575px);
+  background: #003b6d;
+  opacity: 0.8;
   .WaterAccumulation {
     width: 95%;
     height: 200px;
@@ -50,6 +104,14 @@
       border: 1px solid #61aff0;
       position: relative;
       top: 2px;
+      span {
+        position: relative;
+        top: 8px;
+        left: 15px;
+        color: #ffffff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+      }
     }
     .assessment {
       width: 100%;
@@ -62,10 +124,32 @@
     margin-top: 10px;
     height: calc(100% - 210px);
     margin: auto;
-    background: red;
+    // background: red;
     .DropdownBox {
-      height: 55px;
-      background: yellow;
+      height: 50px;
+      background: #217dc8;
+      border: 1px solid #61aff0;
+      display: flex;
+      justify-content: space-around;
+      margin: 5px;
+      .analysis {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: red;
+        .ICON_zp {
+          width: 28px;
+          height: 28px;
+          position: relative;
+          top: 32x;
+        }
+      }
+      .Selectionbox {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: yellowgreen;
+      }
     }
   }
 }
diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue
index 5732dfb..3b90f59 100644
--- a/src/views/sponeScreen/projectHM/ProjectYype.vue
+++ b/src/views/sponeScreen/projectHM/ProjectYype.vue
@@ -81,7 +81,8 @@
   // width: 100%;
   width: 460px;
   height: 310px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 
   .ConstruList {
     width: 95%;

diff --git a/src/assets/newImgs/HMScreen/20240625101756.jpg b/src/assets/newImgs/HMScreen/20240625101756.jpg
new file mode 100644
index 0000000..34c6c85
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/20240625101756.jpg
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pipefx.png b/src/assets/newImgs/HMScreen/pipefx.png
new file mode 100644
index 0000000..a70dfa9
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pipefx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/ssfx.png b/src/assets/newImgs/HMScreen/ssfx.png
new file mode 100644
index 0000000..b4a82d7
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/ssfx.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/xmfx.png b/src/assets/newImgs/HMScreen/xmfx.png
new file mode 100644
index 0000000..22db249
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/xmfx.png
Binary files differ
diff --git a/src/views/sponeScreen/cityGK/CurrentIssues.vue b/src/views/sponeScreen/cityGK/CurrentIssues.vue
index 49670c8..a31b8de 100644
--- a/src/views/sponeScreen/cityGK/CurrentIssues.vue
+++ b/src/views/sponeScreen/cityGK/CurrentIssues.vue
@@ -90,8 +90,8 @@
 <style lang="scss" scoped>
 .a {
   margin-top: 5px;
-  // height: 260px;
-  //   background: red;
+  height: 200px;
+  // background: red;
   .HeadContent {
     width: 100%;
     height: 30px;
@@ -125,7 +125,7 @@
     }
   }
   .box-body {
-    height: calc(100vh - 770px);
+    height: calc(100vh - 830px);
 
     position: relative;
     overflow: auto;
diff --git a/src/views/sponeScreen/cityGK/cityplanning.vue b/src/views/sponeScreen/cityGK/cityplanning.vue
index 7a36e6e..1c397b6 100644
--- a/src/views/sponeScreen/cityGK/cityplanning.vue
+++ b/src/views/sponeScreen/cityGK/cityplanning.vue
@@ -2,107 +2,109 @@
   <div class="a">
     <div class="partTitleHM">城市规划</div>
     <div class="partContHM">
-      <!-- 水安全规划 -->
-      <div class="rightBox rightBox1">
-        <div class="ListTitle">水安全规划</div>
-        <div class="precedence">
-          <div class="eachinfo">
-            <div class="headText">年径流总量控制率</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <p class="NumberListMB">目标:</p>
-                <p class="NumberList">&nbsp; 70%</p>
+      <div class="hkns">
+        <!-- 水安全规划 -->
+        <div class="rightBox rightBox1">
+          <div class="ListTitle">水安全规划</div>
+          <div class="precedence">
+            <div class="eachinfo">
+              <div class="headText">年径流总量控制率</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <p class="NumberListMB">目标:</p>
+                  <p class="NumberList">&nbsp; 70%</p>
+                </div>
+                <div class="rightText">以上</div>
               </div>
-              <div class="rightText">以上</div>
+            </div>
+          </div>
+          <div class="XqDetails">
+            <div class="DetailsOne">排涝规则</div>
+            <div class="DetailsTwo">
+              <span class="DetailsTwoA">新建改造泵站</span>
+              <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
+            </div>
+            <div class="DetailsTthree">
+              <span>新建雨水管渠</span>
+              <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
             </div>
           </div>
         </div>
-        <div class="XqDetails">
-          <div class="DetailsOne">排涝规则</div>
-          <div class="DetailsTwo">
-            <span class="DetailsTwoA">新建改造泵站</span>
-            <span class="DetailsTwoB"> &nbsp;54</span>&nbsp;座
-          </div>
-          <div class="DetailsTthree">
-            <span>新建雨水管渠</span>
-            <span class="DetailsTthreeA"> &nbsp;723.83</span> &nbsp;公里
-          </div>
-        </div>
-      </div>
-      <!-- 水环境规划 -->
-      <div class="rightBox rightBox2">
-        <div class="ListTitle">水环境规划</div>
-        <div class="precedence" v-for="item in policiesList" :key="item">
-          <div class="eachinfo">
-            <div class="headText">{{ item.name }}</div>
-            <div class="middleext">
-              <div class="middleextA">
-                <span class="NumberListMB">目标:</span>
-                <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+        <!-- 水环境规划 -->
+        <div class="rightBox rightBox2">
+          <div class="ListTitle">水环境规划</div>
+          <div class="precedence" v-for="item in policiesList" :key="item">
+            <div class="eachinfo">
+              <div class="headText">{{ item.name }}</div>
+              <div class="middleext">
+                <div class="middleextA">
+                  <span class="NumberListMB">目标:</span>
+                  <span class="NumberList">&nbsp; {{ item.NumberA }}</span>
+                </div>
+                <div class="rightText">{{ item.content }}</div>
               </div>
-              <div class="rightText">{{ item.content }}</div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- 水生态规划 -->
-      <div class="rightBox rightBox3">
-        <div class="ListTitle">水生态规划</div>
-        <div class="XqDetails" v-for="item in policiesListS">
-          <div class="DetailsAquaticEcology">
-            <div class="icon"></div>
-            {{ item.name }}
-          </div>
-          <div class="DetailsAquaticEcologyTwo">
-            <p class="DetailsTwoA">{{ item.NumberA }}</p>
-            <p class="DetailsTwoB">{{ item.content }}</p>
+        <!-- 水生态规划 -->
+        <div class="rightBox rightBox3">
+          <div class="ListTitle">水生态规划</div>
+          <div class="XqDetails" v-for="item in policiesListS">
+            <div class="DetailsAquaticEcology">
+              <div class="icon"></div>
+              {{ item.name }}
+            </div>
+            <div class="DetailsAquaticEcologyTwo">
+              <p class="DetailsTwoA">{{ item.NumberA }}</p>
+              <p class="DetailsTwoB">{{ item.content }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 水资源规划 -->
-      <div class="rightBox rightBox4">
-        <div class="ListTitle">水资源规划</div>
-        <div class="ListContent">
-          <!-- 雨水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="YStext">雨水资源利用</div>
+        <!-- 水资源规划 -->
+        <div class="rightBox rightBox4">
+          <div class="ListTitle">水资源规划</div>
+          <div class="ListContent">
+            <!-- 雨水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="YStext">雨水资源利用</div>
+              </div>
+              <div>
+                <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
+              </div>
             </div>
-            <div>
-              <RainwaterTakeAdvantage></RainwaterTakeAdvantage>
-            </div>
-          </div>
-          <!-- 污水资源利用 -->
-          <div class="sewageResources">
-            <div class="sewageTop">
-              <div class="wstext">污水资源利用</div>
-              <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
-            </div>
-            <div>
-              <SewageEcharts></SewageEcharts>
+            <!-- 污水资源利用 -->
+            <div class="sewageResources">
+              <div class="sewageTop">
+                <div class="wstext">污水资源利用</div>
+                <div class="wsdescribe">7座污水处理厂总设计规模：55 万吨/日</div>
+              </div>
+              <div>
+                <SewageEcharts></SewageEcharts>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- 供水规划 -->
-      <div class="rightBox rightBox5">
-        <div class="ListTitle">供水规划</div>
-        <div class="ListContent">
-          <div class="waterSupply">
-            <div class="bottomBgc"></div>
-            <div class="eachDescribe">
-              <div class="icon bgcblue"></div>
-              <div class="text">近期</div>
-              <div class="sum colorBlue">68.7</div>
-              <div class="unit">万立方米/日</div>
-            </div>
-            <div class="eachDescribe">
-              <div class="icon bgcYellow"></div>
-              <div class="text">远期</div>
-              <div class="sum colorYellow">88.7</div>
-              <div class="unit">万立方米/日</div>
+        <!-- 供水规划 -->
+        <div class="rightBox rightBox5">
+          <div class="ListTitle">供水规划</div>
+          <div class="ListContent">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="icon bgcblue"></div>
+                <div class="text">近期</div>
+                <div class="sum colorBlue">68.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
+              <div class="eachDescribe">
+                <div class="icon bgcYellow"></div>
+                <div class="text">远期</div>
+                <div class="sum colorYellow">88.7</div>
+                <div class="unit">万立方米/日</div>
+              </div>
             </div>
           </div>
         </div>
@@ -149,247 +151,252 @@
 
 <style lang="scss" scoped>
 .a {
-  height: 500px;
+  height: 560px;
   // background: red;
-  overflow-x: hidden;
-  overflow-y: auto;
-  .rightBox {
-    .ListTitle {
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      // box-sizing: border-box;
-      padding-left: 30px;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      color: #e4f5ff;
-    }
-    .precedence {
-      margin-top: 5px;
-      width: 100%;
-      height: 32px;
-      // line-height: 32px;
-      background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
-      background-size: 100% 100%;
-      .eachinfo {
-        display: flex;
+
+  .hkns {
+    height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .rightBox {
+      // background: blue;
+      .ListTitle {
+        width: 100%;
         height: 32px;
-        color: #b8ecff;
-        //   background: red;
-        .headText {
-          width: 60%;
-          padding-left: 20px;
-          line-height: 32px;
-          font-size: 16px;
-          // background: yellow;
-        }
-        .middleext {
+        line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        // box-sizing: border-box;
+        padding-left: 30px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        color: #e4f5ff;
+      }
+      .precedence {
+        margin-top: 5px;
+        width: 100%;
+        height: 32px;
+        // line-height: 32px;
+        background: url('@/assets/newImgs/HMScreen/DF_img.png') no-repeat;
+        background-size: 100% 100%;
+        .eachinfo {
           display: flex;
-          width: 40%;
-          text-align: center;
-          line-height: 32px;
-          font-size: 16px;
-          // background: blue;
-          .middleextA {
-            width: 65%;
-            text-align: center;
-            //   background: red;
+          height: 32px;
+          color: #b8ecff;
+          //   background: red;
+          .headText {
+            width: 60%;
+            padding-left: 20px;
+            line-height: 32px;
+            font-size: 16px;
+            // background: yellow;
+          }
+          .middleext {
             display: flex;
-            .NumberListMB {
-              // background: #f7c987;
-              width: 40%;
+            width: 40%;
+            text-align: center;
+            line-height: 32px;
+            font-size: 16px;
+            // background: blue;
+            .middleextA {
+              width: 65%;
+              text-align: center;
+              //   background: red;
+              display: flex;
+              .NumberListMB {
+                // background: #f7c987;
+                width: 40%;
+              }
+              .NumberList {
+                // background: lawngreen;
+                width: 60%;
+                font-size: 18px;
+                color: #3afff8;
+              }
             }
-            .NumberList {
-              // background: lawngreen;
-              width: 60%;
-              font-size: 18px;
-              color: #3afff8;
+          }
+          .rightText {
+            width: 35%;
+            line-height: 32px;
+            text-align: center;
+            // background: lawngreen;
+          }
+        }
+      }
+      .XqDetails {
+        margin-top: 8px;
+        height: 32px;
+        display: flex;
+        color: #b8ecff;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: bold;
+        font-size: 15px;
+        // background: red;
+        .DetailsOne {
+          width: 18%;
+          line-height: 30px;
+          text-align: center;
+          //   background: yellow;
+        }
+        .DetailsTwo {
+          width: 40%;
+          line-height: 30px;
+          text-align: center;
+          //   background: blueviolet;
+          .DetailsTwoB {
+            color: #f7c987;
+          }
+        }
+        .DetailsTthree {
+          width: 45%;
+          line-height: 30px;
+          text-align: center;
+          //   background: #3afff8;
+          .DetailsTthreeA {
+            color: #3afff8;
+          }
+        }
+
+        // 水生态规划
+        .DetailsAquaticEcology {
+          width: 45%;
+          line-height: 30px;
+          .icon {
+            display: inline-block;
+            border-color: #3afff8;
+            border-style: solid;
+            border-width: 2px;
+            width: 0;
+            height: 0;
+            margin-right: 7px;
+            position: relative;
+            top: -3px;
+            -moz-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+          }
+          //   background: red;
+        }
+        .DetailsAquaticEcologyTwo {
+          width: 55%;
+          display: flex;
+          //   background: yellowgreen;
+          line-height: 30px;
+          text-align: center;
+          .DetailsTwoA {
+            width: 50%;
+            color: #3afff8;
+            // background: red;
+          }
+          .DetailsTwoB {
+            width: 50%;
+            color: #f7c987;
+            // background: rgb(205, 50, 50);
+          }
+        }
+      }
+      .ListContent {
+        width: 100%;
+        height: calc(100% - 34px);
+        overflow: auto;
+        // background: yellow;
+        .sewageResources {
+          // 污水资源利用
+          .sewageTop {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            padding: 10px 30px 0px 10px;
+            .wsdescribe {
+              color: #fff;
+            }
+            .wstext {
+              color: #ffed52;
+            }
+            .YStext {
+              color: #18ffff;
             }
           }
         }
-        .rightText {
-          width: 35%;
-          line-height: 32px;
-          text-align: center;
-          // background: lawngreen;
-        }
-      }
-    }
-    .XqDetails {
-      margin-top: 8px;
-      height: 32px;
-      display: flex;
-      color: #b8ecff;
-      font-family: SourceHanSansCN-Medium;
-      font-weight: bold;
-      font-size: 15px;
-      // background: red;
-      .DetailsOne {
-        width: 18%;
-        line-height: 30px;
-        text-align: center;
-        //   background: yellow;
-      }
-      .DetailsTwo {
-        width: 40%;
-        line-height: 30px;
-        text-align: center;
-        //   background: blueviolet;
-        .DetailsTwoB {
-          color: #f7c987;
-        }
-      }
-      .DetailsTthree {
-        width: 45%;
-        line-height: 30px;
-        text-align: center;
-        //   background: #3afff8;
-        .DetailsTthreeA {
-          color: #3afff8;
-        }
       }
 
-      // 水生态规划
-      .DetailsAquaticEcology {
-        width: 45%;
-        line-height: 30px;
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -3px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-        }
-        //   background: red;
-      }
-      .DetailsAquaticEcologyTwo {
-        width: 55%;
+      // 供水规划
+      .waterSupply {
+        position: relative;
         display: flex;
-        //   background: yellowgreen;
-        line-height: 30px;
-        text-align: center;
-        .DetailsTwoA {
-          width: 50%;
-          color: #3afff8;
-          // background: red;
-        }
-        .DetailsTwoB {
-          width: 50%;
-          color: #f7c987;
-          // background: rgb(205, 50, 50);
-        }
-      }
-    }
-    .ListContent {
-      width: 100%;
-      height: calc(100% - 34px);
-      overflow: auto;
-      // background: yellow;
-      .sewageResources {
-        // 污水资源利用
-        .sewageTop {
+        justify-content: space-around;
+        align-items: center;
+        .eachDescribe {
           display: flex;
-          justify-content: space-between;
           align-items: center;
           font-family: Source Han Sans CN;
-          font-weight: bold;
-          font-size: 16px;
-          padding: 10px 30px 0px 10px;
-          .wsdescribe {
-            color: #fff;
+          font-weight: 400;
+          padding-top: 5px;
+          .unit {
+            padding-top: 5px;
+            color: #ffffff;
           }
-          .wstext {
+          .icon {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .colorYellow {
             color: #ffed52;
           }
-          .YStext {
+          .colorBlue {
             color: #18ffff;
           }
+          .bgcYellow {
+            background: #ffed52;
+          }
+          .bgcblue {
+            background: #18ffff;
+          }
+          .text {
+            padding: 0 10px 0 6px;
+            font-size: 16px;
+          }
+          .sum {
+            font-size: 20px;
+            padding-right: 10px;
+          }
+        }
+        .bottomBgc {
+          width: 100%;
+          height: 16px;
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
         }
       }
     }
-
-    // 供水规划
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        padding-top: 5px;
-        .unit {
-          padding-top: 5px;
-          color: #ffffff;
-        }
-        .icon {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          background: #ffed52;
-        }
-        .bgcblue {
-          background: #18ffff;
-        }
-        .text {
-          padding: 0 10px 0 6px;
-          font-size: 16px;
-        }
-        .sum {
-          font-size: 20px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: linear-gradient(0deg, rgba(24, 149, 255, 0.5) 0%, rgba(24, 149, 255, 0) 100%);
-      }
+    .rightBox1 {
+      height: 110px;
     }
-  }
-  .rightBox1 {
-    height: 110px;
-  }
-  .rightBox2 {
-    margin-top: 5px;
-  }
+    .rightBox2 {
+      margin-top: 5px;
+    }
 
-  .rightBox3 {
-    margin-top: 5px;
-  }
-  .rightBox4 {
-    margin-top: 5px;
-    height: 200px;
-    //   background: red;
-  }
-  .rightBox5 {
-    margin-top: 5px;
+    .rightBox3 {
+      margin-top: 5px;
+    }
+    .rightBox4 {
+      margin-top: 5px;
+      // height: 200px;
+      //   background: red;
+    }
+    .rightBox5 {
+      margin-top: 5px;
+    }
   }
 }
 </style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index d5ed358..59c4769 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -54,7 +54,7 @@
 .ConstrucClass {
   width: 100%;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
   opacity: 0.8;
   padding: 10px;
   margin: auto;
diff --git a/src/views/sponeScreen/longYW/ManualSampling.vue b/src/views/sponeScreen/longYW/ManualSampling.vue
index 1fd91ab..6111070 100644
--- a/src/views/sponeScreen/longYW/ManualSampling.vue
+++ b/src/views/sponeScreen/longYW/ManualSampling.vue
@@ -122,9 +122,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: 90%;
     opacity: 0.8;
diff --git a/src/views/sponeScreen/longYW/MonitoringStation.vue b/src/views/sponeScreen/longYW/MonitoringStation.vue
index cb76a21..5613a64 100644
--- a/src/views/sponeScreen/longYW/MonitoringStation.vue
+++ b/src/views/sponeScreen/longYW/MonitoringStation.vue
@@ -72,7 +72,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 .ConstrucClass {
   height: 83%;
diff --git a/src/views/sponeScreen/longYW/PromotionTraining.vue b/src/views/sponeScreen/longYW/PromotionTraining.vue
index 2a36bc5..3eb9eb0 100644
--- a/src/views/sponeScreen/longYW/PromotionTraining.vue
+++ b/src/views/sponeScreen/longYW/PromotionTraining.vue
@@ -44,9 +44,10 @@
 <style lang="scss" scoped>
 .longYW {
   margin-top: 10px;
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .ConstrucClass {
     height: calc(100% - 18%);
     overflow: hidden;
@@ -61,13 +62,13 @@
     }
   }
   .PublicityContent {
-    margin: auto;
-    width: 95%;
+    margin: 5px;
+    width: 97%;
     height: 90px;
-    background: #123f86;
+    background: #325ca3c4;
     position: relative;
-    top: 5px;
     display: flex;
+    cursor: pointer;
     .PublicityContentZP {
       width: 20%;
       height: 90px;
@@ -85,7 +86,7 @@
       width: 80%;
       height: 90px;
       margin-left: 5px;
-      cursor: pointer;
+
       // background: blueviolet;
       .PublicityContentXM {
         width: 100%;
diff --git a/src/views/sponeScreen/longYW/PublicAdvice.vue b/src/views/sponeScreen/longYW/PublicAdvice.vue
index 8014cc0..36f6ec1 100644
--- a/src/views/sponeScreen/longYW/PublicAdvice.vue
+++ b/src/views/sponeScreen/longYW/PublicAdvice.vue
@@ -1,14 +1,118 @@
 <template>
   <div class="partTitleHM">公众建议</div>
-  <div class="ConstrucClass">公众建议</div>
+  <div class="ConstrucClass">
+    <div class="MainBox">
+      <div class="AvatarAppearance">
+        <div class="zp">
+          <img :src="tx" alt="" class="txclass" />
+        </div>
+        <div class="NameTime">
+          <p class="Namea">zdl</p>
+          <p class="Timea">2024-05-23 12:20:30</p>
+        </div>
+      </div>
+      <div class="below">
+        <p class="belowNr">海绵项目建设的真不错，下雨也不积水内涝了。</p>
+        <div class="belowZp">
+          <el-image :src="url" style="width: 100px; height: 50px; margin-top: 5px"> </el-image>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import tx from '@/assets/newImgs/HMScreen/20240625101756.jpg';
+const url = 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/03/02/微信图片_20240302202056_20240302202204A004.jpg';
+</script>
 
 <style lang="scss" scoped>
 .ConstrucClass {
-  width: 100%;
+  width: 460px;
   height: 30%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .MainBox {
+    width: 95%;
+    height: 140px;
+    background: #325ca3c4;
+    margin: auto;
+    position: relative;
+    top: 10px;
+    // border: 1px solid #5b93eb;
+    .AvatarAppearance {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-around;
+      // background: yellowgreen;
+      .zp {
+        width: 20%;
+        height: 60px;
+
+        // background: rgb(228, 149, 149);
+        .txclass {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          // background: yellow;
+          position: relative;
+          top: 5px;
+          left: 18px;
+        }
+      }
+      .NameTime {
+        width: 80%;
+        height: 60px;
+        .Namea {
+          width: 100%;
+          height: 30px;
+          // background: red;
+          display: flex;
+          align-items: center;
+          color: #b3e3ff;
+          font-size: 15px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+        }
+        .Timea {
+          width: 100%;
+          height: 30px;
+          color: #5b93eb;
+          font-size: 16px;
+          font-family: SourceHanSansCN-Medium;
+          font-weight: 400;
+          // background: blue;
+        }
+      }
+    }
+    .below {
+      width: 100%;
+      // height: 80px;
+      // background: yellowgreen;
+      .belowNr {
+        width: 95%;
+        color: #b3e3ff;
+        font-size: 15px;
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 400;
+        margin-left: 15px;
+        // height: 30px;
+        // background: red;
+      }
+      .belowZp {
+        margin-left: 15px;
+        width: 95%;
+        // background: yellow;
+      }
+    }
+  }
 }
+// ::v-deep th.el-table__cell,
+// ::v-deep td.el-table__cell {
+//   // 设置position 使得 子元素不与其产生新的层叠关系
+//   position: static;
+// }
 </style>
diff --git a/src/views/sponeScreen/longYW/SewageBOD.vue b/src/views/sponeScreen/longYW/SewageBOD.vue
index c3d0cb0..d422356 100644
--- a/src/views/sponeScreen/longYW/SewageBOD.vue
+++ b/src/views/sponeScreen/longYW/SewageBOD.vue
@@ -45,7 +45,8 @@
   margin-top: 10px;
   width: 100%;
   height: 31%;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .head-right {
     cursor: pointer;
     position: relative;
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index 5bbfa03..7606197 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 海绵综合一张图 长效运维 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 巡查任务 -->
       <InspectionTasks></InspectionTasks>
       <!-- 污水厂进口BOD -->
@@ -9,7 +9,9 @@
       <!-- 监测站点统计 -->
       <MonitoringStation></MonitoringStation>
     </div>
-    <div class="publicRightHM">
+
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- <div class="publicRightHM"> -->
       <!-- 公众建议 -->
       <PublicAdvice></PublicAdvice>
       <!-- 宣传培训 -->
@@ -21,6 +23,7 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
 import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
 import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
@@ -29,7 +32,20 @@
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
 
 const { proxy } = getCurrentInstance();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>
 
diff --git a/src/views/sponeScreen/projectHM/ConstructionStatus.vue b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
index a5eba20..40d2b85 100644
--- a/src/views/sponeScreen/projectHM/ConstructionStatus.vue
+++ b/src/views/sponeScreen/projectHM/ConstructionStatus.vue
@@ -16,6 +16,7 @@
 .ConstrucClass {
   width: 100%;
   height: 260px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 }
 </style>
diff --git a/src/views/sponeScreen/projectHM/ProjectDisplay.vue b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
index f016a6d..bc7eff9 100644
--- a/src/views/sponeScreen/projectHM/ProjectDisplay.vue
+++ b/src/views/sponeScreen/projectHM/ProjectDisplay.vue
@@ -70,7 +70,8 @@
 .ConstrucClass {
   width: 100%;
   height: calc(100vh - 530px);
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
   .HeadContent {
     width: 100%;
     height: 65px;
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index d124155..95d84df 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -5,6 +5,9 @@
       <div class="WaterAccumulation">
         <div class="HeadContent">
           <span>积水分析</span>
+          <el-form-item prop="date" style="float: right; width: 130px; margin: 7px 20px 0px 0px">
+            <el-select v-model="riverIndex" size="small"> </el-select>
+          </el-form-item>
         </div>
         <div class="assessment">
           <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
@@ -12,7 +15,49 @@
       </div>
 
       <div class="WaterList">
-        <div class="DropdownBox">11</div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="pipefx" alt="" class="ICON_zp" />
+            <span>片区分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="xmfx" alt="" class="ICON_zp" />
+            <span>项目分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="DropdownBox">
+          <div class="analysis">
+            <img :src="ssfx" alt="" class="ICON_zp" />
+            <span>设施分析</span>
+          </div>
+          <div class="Selectionbox">
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
+              <el-select v-model="riverIndex" size="small"> </el-select>
+            </el-form-item>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -20,6 +65,9 @@
 
 <script setup>
 import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
+import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
+import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
+import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
 
 const chartData2 = ref({
   xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
@@ -28,6 +76,11 @@
   refresh: 1,
 });
 const refresh = ref(1);
+
+const AllData = reactive({
+  queryParams: {},
+});
+const { queryParams } = toRefs(AllData);
 </script>
 
 <style lang="scss" scoped>
@@ -35,9 +88,10 @@
   margin-top: 10px;
 }
 .ConstrucClass {
-  width: 100%;
-  height: calc(100vh - 580px);
-  background: #07347f;
+  width: 460px;
+  height: calc(100vh - 575px);
+  background: #003b6d;
+  opacity: 0.8;
   .WaterAccumulation {
     width: 95%;
     height: 200px;
@@ -50,6 +104,14 @@
       border: 1px solid #61aff0;
       position: relative;
       top: 2px;
+      span {
+        position: relative;
+        top: 8px;
+        left: 15px;
+        color: #ffffff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+      }
     }
     .assessment {
       width: 100%;
@@ -62,10 +124,32 @@
     margin-top: 10px;
     height: calc(100% - 210px);
     margin: auto;
-    background: red;
+    // background: red;
     .DropdownBox {
-      height: 55px;
-      background: yellow;
+      height: 50px;
+      background: #217dc8;
+      border: 1px solid #61aff0;
+      display: flex;
+      justify-content: space-around;
+      margin: 5px;
+      .analysis {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: red;
+        .ICON_zp {
+          width: 28px;
+          height: 28px;
+          position: relative;
+          top: 32x;
+        }
+      }
+      .Selectionbox {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        // background: yellowgreen;
+      }
     }
   }
 }
diff --git a/src/views/sponeScreen/projectHM/ProjectYype.vue b/src/views/sponeScreen/projectHM/ProjectYype.vue
index 5732dfb..3b90f59 100644
--- a/src/views/sponeScreen/projectHM/ProjectYype.vue
+++ b/src/views/sponeScreen/projectHM/ProjectYype.vue
@@ -81,7 +81,8 @@
   // width: 100%;
   width: 460px;
   height: 310px;
-  background: #07347f;
+  background: #003b6d;
+  opacity: 0.8;
 
   .ConstruList {
     width: 95%;
diff --git a/src/views/sponeScreen/projectHM/index.vue b/src/views/sponeScreen/projectHM/index.vue
index cb5b792..f248bba 100644
--- a/src/views/sponeScreen/projectHM/index.vue
+++ b/src/views/sponeScreen/projectHM/index.vue
@@ -1,13 +1,13 @@
 <template>
   <!-- 海绵综合一张图 项目建设 -->
   <div class="publicContainer">
-    <div class="publicLeftHM">
+    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
       <!-- 建设状态 -->
       <ConstructionStatus></ConstructionStatus>
       <!--  项目展示-->
       <ProjectDisplay></ProjectDisplay>
     </div>
-    <div class="publicRightHM">
+    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <!-- 项目类型 -->
       <ProjectYype></ProjectYype>
       <!--项目评估  -->
@@ -17,12 +17,26 @@
 </template>
 
 <script setup>
+const showPanel = ref(true); //面板展开收起
 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();
-
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    console.log('val---', props.showPanel);
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
 onMounted(() => {});
 </script>