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

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
new file mode 100644
index 0000000..27641d0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/beselected.png b/src/assets/newImgs/HMScreen/beselected.png
new file mode 100644
index 0000000..b56881d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/beselected.png
Binary files differ

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
new file mode 100644
index 0000000..27641d0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/beselected.png b/src/assets/newImgs/HMScreen/beselected.png
new file mode 100644
index 0000000..b56881d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/beselected.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index d40e4a5..ed0eeb5 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -491,8 +491,8 @@
   z-index: 220;
   padding: 10px;
 }
-.headHM{
-  height: 174px;
+.headHMA {
+  height: 150px;
   width: 920px;
   position: absolute;
   top: 0px;
@@ -505,6 +505,3 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
-
-
-

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
new file mode 100644
index 0000000..27641d0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/beselected.png b/src/assets/newImgs/HMScreen/beselected.png
new file mode 100644
index 0000000..b56881d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/beselected.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index d40e4a5..ed0eeb5 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -491,8 +491,8 @@
   z-index: 220;
   padding: 10px;
 }
-.headHM{
-  height: 174px;
+.headHMA {
+  height: 150px;
   width: 920px;
   position: absolute;
   top: 0px;
@@ -505,6 +505,3 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
-
-
-
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b2f2e2c..96efdfd 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -155,7 +155,7 @@
   .controlHM {
     position: absolute;
     right: 500px;
-    bottom: 20px;
+    bottom: 50px;
     z-index: 220;
     width: 32px;
     img {

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
new file mode 100644
index 0000000..27641d0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/beselected.png b/src/assets/newImgs/HMScreen/beselected.png
new file mode 100644
index 0000000..b56881d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/beselected.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index d40e4a5..ed0eeb5 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -491,8 +491,8 @@
   z-index: 220;
   padding: 10px;
 }
-.headHM{
-  height: 174px;
+.headHMA {
+  height: 150px;
   width: 920px;
   position: absolute;
   top: 0px;
@@ -505,6 +505,3 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
-
-
-
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b2f2e2c..96efdfd 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -155,7 +155,7 @@
   .controlHM {
     position: absolute;
     right: 500px;
-    bottom: 20px;
+    bottom: 50px;
     z-index: 220;
     width: 32px;
     img {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
new file mode 100644
index 0000000..0c014b9
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="HeadContent">
+    <div class="one">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">入选</div>
+        <div class="SelectiontimeB">2022年5月</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="two">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">建设期</div>
+        <div class="SelectiontimeB">2022年-2024年</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="three">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">评估期</div>
+        <div class="SelectiontimeB">2025年</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="four">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">长效运维期</div>
+        <div class="SelectiontimeB">2024年-2030年</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.HeadContent {
+  height: 100px;
+  width: 100%;
+  margin-top: 50px;
+  //   border: 1px solid red;
+  display: flex;
+  .one,
+  .two,
+  .three,
+  .four {
+    width: 30%;
+    height: 100px;
+    // border: 1px solid blue;
+    display: flex;
+  }
+
+  .PhotoClass {
+    width: 40%;
+    height: 100px;
+    // background: red;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+
+    .PhotoClassA {
+      width: 50px;
+      height: 50px;
+      position: relative;
+      left: 10px;
+      background: url('@/assets/newImgs/HMScreen/beselected.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .Selectiontime {
+    width: 60%;
+    height: 100px;
+    // background: blueviolet;
+
+    .SelectiontimeA {
+      width: 100%;
+      height: 50px;
+      color: #b8ecff;
+      font-size: 16px;
+      font-family: SourceHanSansCN-Regular;
+      line-height: 70px;
+      //   background: red;
+    }
+    .SelectiontimeB {
+      width: 100%;
+      height: 50px;
+      color: #3afff8;
+      font-size: 16px;
+      //   line-height: 50px;
+      //   background: rgb(66, 50, 205);
+    }
+  }
+  .IconClass {
+    width: 10%;
+    height: 100px;
+    // background: yellowgreen;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    .IconClassZp {
+      width: 20px;
+      height: 20px;
+      position: relative;
+      //   left: 10px;
+      background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

diff --git a/src/assets/newImgs/HMScreen/arrow_img.png b/src/assets/newImgs/HMScreen/arrow_img.png
new file mode 100644
index 0000000..27641d0
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/arrow_img.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/beselected.png b/src/assets/newImgs/HMScreen/beselected.png
new file mode 100644
index 0000000..b56881d
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/beselected.png
Binary files differ
diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index d40e4a5..ed0eeb5 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -491,8 +491,8 @@
   z-index: 220;
   padding: 10px;
 }
-.headHM{
-  height: 174px;
+.headHMA {
+  height: 150px;
   width: 920px;
   position: absolute;
   top: 0px;
@@ -505,6 +505,3 @@
   width: 5px; /* 定义滚动条的宽度 */
   // height: 5px;
 }
-
-
-
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index b2f2e2c..96efdfd 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -155,7 +155,7 @@
   .controlHM {
     position: absolute;
     right: 500px;
-    bottom: 20px;
+    bottom: 50px;
     z-index: 220;
     width: 32px;
     img {
diff --git a/src/views/sponeScreen/cityGK/headHMAimg.vue b/src/views/sponeScreen/cityGK/headHMAimg.vue
new file mode 100644
index 0000000..0c014b9
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/headHMAimg.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="HeadContent">
+    <div class="one">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">入选</div>
+        <div class="SelectiontimeB">2022年5月</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="two">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">建设期</div>
+        <div class="SelectiontimeB">2022年-2024年</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="three">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">评估期</div>
+        <div class="SelectiontimeB">2025年</div>
+      </div>
+      <div class="IconClass">
+        <div class="IconClassZp"></div>
+      </div>
+    </div>
+    <div class="four">
+      <div class="PhotoClass">
+        <div class="PhotoClassA"></div>
+      </div>
+      <div class="Selectiontime">
+        <div class="SelectiontimeA">长效运维期</div>
+        <div class="SelectiontimeB">2024年-2030年</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.HeadContent {
+  height: 100px;
+  width: 100%;
+  margin-top: 50px;
+  //   border: 1px solid red;
+  display: flex;
+  .one,
+  .two,
+  .three,
+  .four {
+    width: 30%;
+    height: 100px;
+    // border: 1px solid blue;
+    display: flex;
+  }
+
+  .PhotoClass {
+    width: 40%;
+    height: 100px;
+    // background: red;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+
+    .PhotoClassA {
+      width: 50px;
+      height: 50px;
+      position: relative;
+      left: 10px;
+      background: url('@/assets/newImgs/HMScreen/beselected.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .Selectiontime {
+    width: 60%;
+    height: 100px;
+    // background: blueviolet;
+
+    .SelectiontimeA {
+      width: 100%;
+      height: 50px;
+      color: #b8ecff;
+      font-size: 16px;
+      font-family: SourceHanSansCN-Regular;
+      line-height: 70px;
+      //   background: red;
+    }
+    .SelectiontimeB {
+      width: 100%;
+      height: 50px;
+      color: #3afff8;
+      font-size: 16px;
+      //   line-height: 50px;
+      //   background: rgb(66, 50, 205);
+    }
+  }
+  .IconClass {
+    width: 10%;
+    height: 100px;
+    // background: yellowgreen;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    .IconClassZp {
+      width: 20px;
+      height: 20px;
+      position: relative;
+      //   left: 10px;
+      background: url('@/assets/newImgs/HMScreen/arrow_img.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 295f6a9..5a9f820 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -46,7 +46,9 @@
     </div>
 
     <!-- 头部 -->
-    <div class="headHM"></div>
+    <div class="headHMA">
+      <headHMAimg></headHMAimg>
+    </div>
 
     <div class="publicRightHM">
       <!-- 城市规划 -->
@@ -62,8 +64,8 @@
 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'; //头部
 
 const { proxy } = getCurrentInstance();
 const policiesList = ref([