diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2a1fafb..2c1ad72 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -520,7 +520,8 @@
     display: inline-block;
   }
   .scrollTitle {
-    background: #005cba;
+    background-image: linear-gradient(#004891, #3f80e7);
+    // background: #005cba;
     padding: 8px 3px;
     justify-content: space-around;
     align-items: center;

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2a1fafb..2c1ad72 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -520,7 +520,8 @@
     display: inline-block;
   }
   .scrollTitle {
-    background: #005cba;
+    background-image: linear-gradient(#004891, #3f80e7);
+    // background: #005cba;
     padding: 8px 3px;
     justify-content: space-around;
     align-items: center;
diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
new file mode 100644
index 0000000..17de95f
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -0,0 +1,246 @@
+<template>
+  <!-- 自然地理 -->
+  <div class="partTitleHM">自然地理</div>
+  <div class="partContHM">
+    <div class="ListBox ListBox1">
+      <div class="physicalGeography">
+        <div class="waterSupply">
+          <div class="bottomBgc"></div>
+          <div class="eachDescribe">
+            <div class="text">总面积</div>
+            <div class="sum bgcYellow">6118</div>
+            <div class="unit">km²</div>
+            <div class="icon colorBlue"></div>
+            <div class="text">中心城区</div>
+            <div class="sum colorBlue">647.55</div>
+            <div class="unit">km²</div>
+            <div class="iconTwo bgcblue"></div>
+            <div class="text">建成区</div>
+            <div class="sum bgcblue">117</div>
+            <div class="unit">km²</div>
+          </div>
+        </div>
+      </div>
+      <tslyqk_constituent_3d></tslyqk_constituent_3d>
+    </div>
+    <div class="ListBox ListBox3">
+      <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
+      <div class="ListContent">
+        <div class="SpatialPattern" v-for="item in policiesList">
+          <div class="eachinfo cyan">
+            <div class="number">{{ item.NumberA }}</div>
+            <div class="headText">{{ item.name }}</div>
+            <div class="rightText">{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 降雨特征 -->
+  <div class="Lowerleft">
+    <rainfall />
+  </div>
+</template>
+
+<script setup>
+import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
+const policiesList = ref([
+  {
+    name: '一心',
+    NumberA: '01',
+    content: '中心城区',
+  },
+  {
+    name: '一核',
+    NumberA: '02',
+    content: '开封新区',
+  },
+  {
+    name: '一带',
+    NumberA: '03',
+    content: '沿黄河南岸形成的沿黄生态涵养带',
+  },
+  {
+    name: '三片',
+    NumberA: '04',
+    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
+  },
+  {
+    name: '三廊',
+    NumberA: '05',
+    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
+  },
+]);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.ListBox {
+  .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;
+  }
+  .ListContent {
+    width: 100%;
+    height: calc(100% - 32px);
+    overflow: auto;
+    // background: red;
+  }
+  .SpatialPattern {
+    padding-top: 5px;
+    overflow: auto;
+    // background: red;
+    .eachinfo {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      // background: yellow;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    .headText {
+      font-weight: 500;
+      font-size: 16px;
+      min-width: 50px;
+      color: #18ffff;
+      margin-left: 15px;
+      text-align: center;
+      // background: red;
+    }
+    .rightText {
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出部分省略号 */
+      word-break: break-all; /* break-all(允许在单词内换行。) */
+      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      -webkit-line-clamp: 1; /* 显示的行数 */
+      padding-left: 10px;
+      color: #b8ecff;
+      // background: yellow;
+    }
+    .cyan {
+      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
+      background-size: 100% 100%;
+      .number {
+        color: #d1dff7;
+        font-weight: 400;
+        font-size: 16px;
+        position: relative;
+        left: 8px;
+        // background: blueviolet;
+      }
+    }
+  }
+
+  width: 100%;
+  margin-top: 2px;
+  height: 150px;
+  position: relative;
+  // background: red;
+  .physicalGeography {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // background: yellowgreen;
+    .waterSupply {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
+        display: flex;
+        align-items: center;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 300;
+        // background: red;
+        .unit {
+          padding-top: 2px;
+          color: #ffffff;
+        }
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .iconTwo {
+          display: inline-block;
+          border-color: #18e87a;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .colorYellow {
+          color: #ffed52;
+        }
+        .colorBlue {
+          color: #18ffff;
+        }
+        .bgcYellow {
+          color: #ffed52;
+        }
+        .bgcblue {
+          color: #18e87a;
+        }
+        .text {
+          padding: 0 5px 0 5px;
+          font-size: 16px;
+          color: #b8ecff;
+        }
+        .sum {
+          font-size: 16px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.ListBox3 {
+  margin-top: 20px;
+  height: 235px;
+  // background: red;
+}
+.Lowerleft {
+  margin-top: 15px;
+}
+</style>

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2a1fafb..2c1ad72 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -520,7 +520,8 @@
     display: inline-block;
   }
   .scrollTitle {
-    background: #005cba;
+    background-image: linear-gradient(#004891, #3f80e7);
+    // background: #005cba;
     padding: 8px 3px;
     justify-content: space-around;
     align-items: center;
diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
new file mode 100644
index 0000000..17de95f
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -0,0 +1,246 @@
+<template>
+  <!-- 自然地理 -->
+  <div class="partTitleHM">自然地理</div>
+  <div class="partContHM">
+    <div class="ListBox ListBox1">
+      <div class="physicalGeography">
+        <div class="waterSupply">
+          <div class="bottomBgc"></div>
+          <div class="eachDescribe">
+            <div class="text">总面积</div>
+            <div class="sum bgcYellow">6118</div>
+            <div class="unit">km²</div>
+            <div class="icon colorBlue"></div>
+            <div class="text">中心城区</div>
+            <div class="sum colorBlue">647.55</div>
+            <div class="unit">km²</div>
+            <div class="iconTwo bgcblue"></div>
+            <div class="text">建成区</div>
+            <div class="sum bgcblue">117</div>
+            <div class="unit">km²</div>
+          </div>
+        </div>
+      </div>
+      <tslyqk_constituent_3d></tslyqk_constituent_3d>
+    </div>
+    <div class="ListBox ListBox3">
+      <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
+      <div class="ListContent">
+        <div class="SpatialPattern" v-for="item in policiesList">
+          <div class="eachinfo cyan">
+            <div class="number">{{ item.NumberA }}</div>
+            <div class="headText">{{ item.name }}</div>
+            <div class="rightText">{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 降雨特征 -->
+  <div class="Lowerleft">
+    <rainfall />
+  </div>
+</template>
+
+<script setup>
+import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
+const policiesList = ref([
+  {
+    name: '一心',
+    NumberA: '01',
+    content: '中心城区',
+  },
+  {
+    name: '一核',
+    NumberA: '02',
+    content: '开封新区',
+  },
+  {
+    name: '一带',
+    NumberA: '03',
+    content: '沿黄河南岸形成的沿黄生态涵养带',
+  },
+  {
+    name: '三片',
+    NumberA: '04',
+    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
+  },
+  {
+    name: '三廊',
+    NumberA: '05',
+    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
+  },
+]);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.ListBox {
+  .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;
+  }
+  .ListContent {
+    width: 100%;
+    height: calc(100% - 32px);
+    overflow: auto;
+    // background: red;
+  }
+  .SpatialPattern {
+    padding-top: 5px;
+    overflow: auto;
+    // background: red;
+    .eachinfo {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      // background: yellow;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    .headText {
+      font-weight: 500;
+      font-size: 16px;
+      min-width: 50px;
+      color: #18ffff;
+      margin-left: 15px;
+      text-align: center;
+      // background: red;
+    }
+    .rightText {
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出部分省略号 */
+      word-break: break-all; /* break-all(允许在单词内换行。) */
+      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      -webkit-line-clamp: 1; /* 显示的行数 */
+      padding-left: 10px;
+      color: #b8ecff;
+      // background: yellow;
+    }
+    .cyan {
+      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
+      background-size: 100% 100%;
+      .number {
+        color: #d1dff7;
+        font-weight: 400;
+        font-size: 16px;
+        position: relative;
+        left: 8px;
+        // background: blueviolet;
+      }
+    }
+  }
+
+  width: 100%;
+  margin-top: 2px;
+  height: 150px;
+  position: relative;
+  // background: red;
+  .physicalGeography {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // background: yellowgreen;
+    .waterSupply {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
+        display: flex;
+        align-items: center;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 300;
+        // background: red;
+        .unit {
+          padding-top: 2px;
+          color: #ffffff;
+        }
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .iconTwo {
+          display: inline-block;
+          border-color: #18e87a;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .colorYellow {
+          color: #ffed52;
+        }
+        .colorBlue {
+          color: #18ffff;
+        }
+        .bgcYellow {
+          color: #ffed52;
+        }
+        .bgcblue {
+          color: #18e87a;
+        }
+        .text {
+          padding: 0 5px 0 5px;
+          font-size: 16px;
+          color: #b8ecff;
+        }
+        .sum {
+          font-size: 16px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.ListBox3 {
+  margin-top: 20px;
+  height: 235px;
+  // background: red;
+}
+.Lowerleft {
+  margin-top: 15px;
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index ec0f660..212c4eb 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -2,47 +2,7 @@
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
     <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <!-- 自然地理 -->
-      <div class="partTitleHM">自然地理</div>
-      <div class="partContHM">
-        <div class="ListBox ListBox1">
-          <div class="physicalGeography">
-            <div class="waterSupply">
-              <div class="bottomBgc"></div>
-              <div class="eachDescribe">
-                <div class="text">总面积</div>
-                <div class="sum bgcYellow">6118</div>
-                <div class="unit">km²</div>
-                <div class="icon colorBlue"></div>
-                <div class="text">中心城区</div>
-                <div class="sum colorBlue">647.55</div>
-                <div class="unit">km²</div>
-                <div class="iconTwo bgcblue"></div>
-                <div class="text">建成区</div>
-                <div class="sum bgcblue">117</div>
-                <div class="unit">km²</div>
-              </div>
-            </div>
-          </div>
-          <tslyqk_constituent_3d></tslyqk_constituent_3d>
-        </div>
-        <div class="ListBox ListBox3">
-          <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
-          <div class="ListContent">
-            <div class="SpatialPattern" v-for="item in policiesList">
-              <div class="eachinfo cyan">
-                <div class="number">{{ item.NumberA }}</div>
-                <div class="headText">{{ item.name }}</div>
-                <div class="rightText">{{ item.content }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 降雨特征 -->
-      <div class="Lowerleft">
-        <rainfall />
-      </div>
+      <PhysicalGeography></PhysicalGeography>
     </div>
 
     <!-- 头部 -->
@@ -62,40 +22,14 @@
 
 <script setup>
 import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
-import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
+
 import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
 import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
-
+import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
-const policiesList = ref([
-  {
-    name: '一心',
-    NumberA: '01',
-    content: '中心城区',
-  },
-  {
-    name: '一核',
-    NumberA: '02',
-    content: '开封新区',
-  },
-  {
-    name: '一带',
-    NumberA: '03',
-    content: '沿黄河南岸形成的沿黄生态涵养带',
-  },
-  {
-    name: '三片',
-    NumberA: '04',
-    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
-  },
-  {
-    name: '三廊',
-    NumberA: '05',
-    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
-  },
-]);
+
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -114,172 +48,4 @@
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped>
-.ListBox {
-  .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;
-  }
-  .ListContent {
-    width: 100%;
-    height: calc(100% - 32px);
-    overflow: auto;
-    // background: red;
-  }
-  .SpatialPattern {
-    padding-top: 5px;
-    overflow: auto;
-    // background: red;
-    .eachinfo {
-      width: 100%;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      // background: yellow;
-      margin-bottom: 3px;
-      cursor: pointer;
-    }
-    .headText {
-      font-weight: 500;
-      font-size: 16px;
-      min-width: 50px;
-      color: #18ffff;
-      margin-left: 15px;
-      text-align: center;
-      // background: red;
-    }
-    .rightText {
-      overflow: hidden;
-      text-overflow: ellipsis; /* 超出部分省略号 */
-      word-break: break-all; /* break-all(允许在单词内换行。) */
-      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
-      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-      -webkit-line-clamp: 1; /* 显示的行数 */
-      padding-left: 10px;
-      color: #b8ecff;
-      // background: yellow;
-    }
-    .cyan {
-      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
-      background-size: 100% 100%;
-      .number {
-        color: #d1dff7;
-        font-weight: 400;
-        font-size: 16px;
-        position: relative;
-        left: 8px;
-        // background: blueviolet;
-      }
-    }
-  }
-
-  width: 100%;
-  margin-top: 2px;
-  height: 150px;
-  position: relative;
-  // background: red;
-  .physicalGeography {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    // background: yellowgreen;
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: SourceHanSansCN-Regular;
-        font-weight: 300;
-        // background: red;
-        .unit {
-          padding-top: 2px;
-          color: #ffffff;
-        }
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -2px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-          margin-left: 7px;
-        }
-        .iconTwo {
-          display: inline-block;
-          border-color: #18e87a;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -2px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-          margin-left: 7px;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          color: #ffed52;
-        }
-        .bgcblue {
-          color: #18e87a;
-        }
-        .text {
-          padding: 0 5px 0 5px;
-          font-size: 16px;
-          color: #b8ecff;
-        }
-        .sum {
-          font-size: 16px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-}
-.ListBox3 {
-  margin-top: 20px;
-  height: 235px;
-  // background: red;
-}
-.Lowerleft {
-  margin-top: 15px;
-}
-</style>
+<style lang="scss" scoped></style>

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 2a1fafb..2c1ad72 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -520,7 +520,8 @@
     display: inline-block;
   }
   .scrollTitle {
-    background: #005cba;
+    background-image: linear-gradient(#004891, #3f80e7);
+    // background: #005cba;
     padding: 8px 3px;
     justify-content: space-around;
     align-items: center;
diff --git a/src/views/sponeScreen/cityGK/PhysicalGeography.vue b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
new file mode 100644
index 0000000..17de95f
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/PhysicalGeography.vue
@@ -0,0 +1,246 @@
+<template>
+  <!-- 自然地理 -->
+  <div class="partTitleHM">自然地理</div>
+  <div class="partContHM">
+    <div class="ListBox ListBox1">
+      <div class="physicalGeography">
+        <div class="waterSupply">
+          <div class="bottomBgc"></div>
+          <div class="eachDescribe">
+            <div class="text">总面积</div>
+            <div class="sum bgcYellow">6118</div>
+            <div class="unit">km²</div>
+            <div class="icon colorBlue"></div>
+            <div class="text">中心城区</div>
+            <div class="sum colorBlue">647.55</div>
+            <div class="unit">km²</div>
+            <div class="iconTwo bgcblue"></div>
+            <div class="text">建成区</div>
+            <div class="sum bgcblue">117</div>
+            <div class="unit">km²</div>
+          </div>
+        </div>
+      </div>
+      <tslyqk_constituent_3d></tslyqk_constituent_3d>
+    </div>
+    <div class="ListBox ListBox3">
+      <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
+      <div class="ListContent">
+        <div class="SpatialPattern" v-for="item in policiesList">
+          <div class="eachinfo cyan">
+            <div class="number">{{ item.NumberA }}</div>
+            <div class="headText">{{ item.name }}</div>
+            <div class="rightText">{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 降雨特征 -->
+  <div class="Lowerleft">
+    <rainfall />
+  </div>
+</template>
+
+<script setup>
+import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
+const policiesList = ref([
+  {
+    name: '一心',
+    NumberA: '01',
+    content: '中心城区',
+  },
+  {
+    name: '一核',
+    NumberA: '02',
+    content: '开封新区',
+  },
+  {
+    name: '一带',
+    NumberA: '03',
+    content: '沿黄河南岸形成的沿黄生态涵养带',
+  },
+  {
+    name: '三片',
+    NumberA: '04',
+    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
+  },
+  {
+    name: '三廊',
+    NumberA: '05',
+    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
+  },
+]);
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.ListBox {
+  .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;
+  }
+  .ListContent {
+    width: 100%;
+    height: calc(100% - 32px);
+    overflow: auto;
+    // background: red;
+  }
+  .SpatialPattern {
+    padding-top: 5px;
+    overflow: auto;
+    // background: red;
+    .eachinfo {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      // background: yellow;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    .headText {
+      font-weight: 500;
+      font-size: 16px;
+      min-width: 50px;
+      color: #18ffff;
+      margin-left: 15px;
+      text-align: center;
+      // background: red;
+    }
+    .rightText {
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出部分省略号 */
+      word-break: break-all; /* break-all(允许在单词内换行。) */
+      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      -webkit-line-clamp: 1; /* 显示的行数 */
+      padding-left: 10px;
+      color: #b8ecff;
+      // background: yellow;
+    }
+    .cyan {
+      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
+      background-size: 100% 100%;
+      .number {
+        color: #d1dff7;
+        font-weight: 400;
+        font-size: 16px;
+        position: relative;
+        left: 8px;
+        // background: blueviolet;
+      }
+    }
+  }
+
+  width: 100%;
+  margin-top: 2px;
+  height: 150px;
+  position: relative;
+  // background: red;
+  .physicalGeography {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // background: yellowgreen;
+    .waterSupply {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
+        display: flex;
+        align-items: center;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 300;
+        // background: red;
+        .unit {
+          padding-top: 2px;
+          color: #ffffff;
+        }
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .iconTwo {
+          display: inline-block;
+          border-color: #18e87a;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .colorYellow {
+          color: #ffed52;
+        }
+        .colorBlue {
+          color: #18ffff;
+        }
+        .bgcYellow {
+          color: #ffed52;
+        }
+        .bgcblue {
+          color: #18e87a;
+        }
+        .text {
+          padding: 0 5px 0 5px;
+          font-size: 16px;
+          color: #b8ecff;
+        }
+        .sum {
+          font-size: 16px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.ListBox3 {
+  margin-top: 20px;
+  height: 235px;
+  // background: red;
+}
+.Lowerleft {
+  margin-top: 15px;
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index ec0f660..212c4eb 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -2,47 +2,7 @@
   <!-- 海绵综合一张图 城市概况 -->
   <div class="cityPage">
     <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <!-- 自然地理 -->
-      <div class="partTitleHM">自然地理</div>
-      <div class="partContHM">
-        <div class="ListBox ListBox1">
-          <div class="physicalGeography">
-            <div class="waterSupply">
-              <div class="bottomBgc"></div>
-              <div class="eachDescribe">
-                <div class="text">总面积</div>
-                <div class="sum bgcYellow">6118</div>
-                <div class="unit">km²</div>
-                <div class="icon colorBlue"></div>
-                <div class="text">中心城区</div>
-                <div class="sum colorBlue">647.55</div>
-                <div class="unit">km²</div>
-                <div class="iconTwo bgcblue"></div>
-                <div class="text">建成区</div>
-                <div class="sum bgcblue">117</div>
-                <div class="unit">km²</div>
-              </div>
-            </div>
-          </div>
-          <tslyqk_constituent_3d></tslyqk_constituent_3d>
-        </div>
-        <div class="ListBox ListBox3">
-          <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
-          <div class="ListContent">
-            <div class="SpatialPattern" v-for="item in policiesList">
-              <div class="eachinfo cyan">
-                <div class="number">{{ item.NumberA }}</div>
-                <div class="headText">{{ item.name }}</div>
-                <div class="rightText">{{ item.content }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 降雨特征 -->
-      <div class="Lowerleft">
-        <rainfall />
-      </div>
+      <PhysicalGeography></PhysicalGeography>
     </div>
 
     <!-- 头部 -->
@@ -62,40 +22,14 @@
 
 <script setup>
 import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
-import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
+
 import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
 import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
-
+import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部
 const { proxy } = getCurrentInstance();
 const showPanel = ref(true); //面板展开收起
-const policiesList = ref([
-  {
-    name: '一心',
-    NumberA: '01',
-    content: '中心城区',
-  },
-  {
-    name: '一核',
-    NumberA: '02',
-    content: '开封新区',
-  },
-  {
-    name: '一带',
-    NumberA: '03',
-    content: '沿黄河南岸形成的沿黄生态涵养带',
-  },
-  {
-    name: '三片',
-    NumberA: '04',
-    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
-  },
-  {
-    name: '三廊',
-    NumberA: '05',
-    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
-  },
-]);
+
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -114,172 +48,4 @@
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped>
-.ListBox {
-  .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;
-  }
-  .ListContent {
-    width: 100%;
-    height: calc(100% - 32px);
-    overflow: auto;
-    // background: red;
-  }
-  .SpatialPattern {
-    padding-top: 5px;
-    overflow: auto;
-    // background: red;
-    .eachinfo {
-      width: 100%;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      // background: yellow;
-      margin-bottom: 3px;
-      cursor: pointer;
-    }
-    .headText {
-      font-weight: 500;
-      font-size: 16px;
-      min-width: 50px;
-      color: #18ffff;
-      margin-left: 15px;
-      text-align: center;
-      // background: red;
-    }
-    .rightText {
-      overflow: hidden;
-      text-overflow: ellipsis; /* 超出部分省略号 */
-      word-break: break-all; /* break-all(允许在单词内换行。) */
-      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
-      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-      -webkit-line-clamp: 1; /* 显示的行数 */
-      padding-left: 10px;
-      color: #b8ecff;
-      // background: yellow;
-    }
-    .cyan {
-      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
-      background-size: 100% 100%;
-      .number {
-        color: #d1dff7;
-        font-weight: 400;
-        font-size: 16px;
-        position: relative;
-        left: 8px;
-        // background: blueviolet;
-      }
-    }
-  }
-
-  width: 100%;
-  margin-top: 2px;
-  height: 150px;
-  position: relative;
-  // background: red;
-  .physicalGeography {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    // background: yellowgreen;
-    .waterSupply {
-      position: relative;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .eachDescribe {
-        display: flex;
-        align-items: center;
-        font-family: SourceHanSansCN-Regular;
-        font-weight: 300;
-        // background: red;
-        .unit {
-          padding-top: 2px;
-          color: #ffffff;
-        }
-        .icon {
-          display: inline-block;
-          border-color: #3afff8;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -2px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-          margin-left: 7px;
-        }
-        .iconTwo {
-          display: inline-block;
-          border-color: #18e87a;
-          border-style: solid;
-          border-width: 2px;
-          width: 0;
-          height: 0;
-          margin-right: 7px;
-          position: relative;
-          top: -2px;
-          -moz-transform: rotate(45deg);
-          -webkit-transform: rotate(45deg);
-          -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-          margin-left: 7px;
-        }
-        .colorYellow {
-          color: #ffed52;
-        }
-        .colorBlue {
-          color: #18ffff;
-        }
-        .bgcYellow {
-          color: #ffed52;
-        }
-        .bgcblue {
-          color: #18e87a;
-        }
-        .text {
-          padding: 0 5px 0 5px;
-          font-size: 16px;
-          color: #b8ecff;
-        }
-        .sum {
-          font-size: 16px;
-          padding-right: 10px;
-        }
-      }
-      .bottomBgc {
-        width: 100%;
-        height: 16px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-}
-.ListBox3 {
-  margin-top: 20px;
-  height: 235px;
-  // background: red;
-}
-.Lowerleft {
-  margin-top: 15px;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/sponeScreen/longYW/InspectionTasks.vue b/src/views/sponeScreen/longYW/InspectionTasks.vue
index f6670a1..3071390 100644
--- a/src/views/sponeScreen/longYW/InspectionTasks.vue
+++ b/src/views/sponeScreen/longYW/InspectionTasks.vue
@@ -8,28 +8,38 @@
           v-model="queryParams.date"
           value-format="YYYY-MM"
           placeholder="请选择年月"
+          size="small"
           style="width: 100%"
         ></el-date-picker>
       </el-form-item>
     </div>
   </div>
   <div class="ConstrucClass">
-    <!-- <el-table ref="multipleTableRef" :data="tableData" v-loading="loading" stripe :max-height="230">
-      <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip />
-      <el-table-column label="上传时间" prop="createTime" show-overflow-tooltip />
-    </el-table> -->
+    <div class="scrollMapHM">
+      <div class="scrollTitle flex">
+        <p>巡查任务名称</p>
+        <p>巡查人员</p>
+        <p>巡查状态</p>
+        <p>操作</p>
+      </div>
+      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
+        <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
+          <p class="ellipsis">{{ item.start }}</p>
+          <p class="ellipsis">{{ item.end }}</p>
+          <p class="ellipsis">{{ item.yq }}</p>
+          <p class="ellipsis">{{ item.num }}mm</p>
+          <p class="ellipsis reports" @click="checkReport(item)">详情</p>
+        </div>
+      </Vue3SeamlessScroll>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 const tableData = ref([
-  { fileName: '1q' },
-  { fileName: '1q' },
-  { fileName: '1q' },
-  { fileName: '1q' },
-  { fileName: '1q' },
-  { fileName: '1q' },
-  { fileName: '1q' },
+  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
+  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
 ]);
 const AllData = reactive({
   queryParams: {},
@@ -47,7 +57,7 @@
   cursor: pointer;
   position: relative;
   left: 240px;
-  top: -35px;
+  top: -33px;
   width: 150px;
   height: 32px;