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

diff --git a/src/assets/newImgs/HMScreen/closeIcon.png b/src/assets/newImgs/HMScreen/closeIcon.png
new file mode 100644
index 0000000..c98e69b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/closeIcon.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 8b7bc67..7122a63 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -5,7 +5,7 @@
     <GisMapMF v-if="menuIndex != 3"></GisMapMF>
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeInUp' : 'animate__fadeInUp']"></Legend>
 
     <!-- 控制面板按钮 -->
     <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
@@ -94,6 +94,9 @@
 // 展开收起
 function controlPanel() {
   showPanel.value = !showPanel.value;
+  if (showPanel.value) {
+    showLegend.value = false;
+  }
 }
 
 // 获取天气信息

diff --git a/src/assets/newImgs/HMScreen/closeIcon.png b/src/assets/newImgs/HMScreen/closeIcon.png
new file mode 100644
index 0000000..c98e69b
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/closeIcon.png
Binary files differ
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 8b7bc67..7122a63 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -5,7 +5,7 @@
     <GisMapMF v-if="menuIndex != 3"></GisMapMF>
 
     <!-- 图例 -->
-    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeOutDown' : '']"></Legend>
+    <Legend :showLegend="showLegend" :class="['animate__animated', showPanel ? 'animate__fadeInUp' : 'animate__fadeInUp']"></Legend>
 
     <!-- 控制面板按钮 -->
     <div :class="['controlHM', showPanel ? 'right30' : 'right520']" v-if="menuIndex != 3">
@@ -94,6 +94,9 @@
 // 展开收起
 function controlPanel() {
   showPanel.value = !showPanel.value;
+  if (showPanel.value) {
+    showLegend.value = false;
+  }
 }
 
 // 获取天气信息
diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue
index 4cff064..bfaa987 100644
--- a/src/views/sponeScreen/gisMF/legendKF.vue
+++ b/src/views/sponeScreen/gisMF/legendKF.vue
@@ -4,7 +4,10 @@
     <!-- 图例框 -->
     <div class="publicLegendHM">
       <div class="legendTitle">
-        <div class="legendName">图层控制</div>
+        <div class="legendName">
+          图层控制
+          <img src="@/assets/newImgs/HMScreen/closeIcon.png" alt="" @click="showLegend = false" />
+        </div>
       </div>
       <div class="legendContent">
         <div v-for="item in legendList" :key="item.layername" style="width: 100%">
@@ -157,16 +160,24 @@
   .publicLegendHM {
     opacity: 0.8;
     .legendTitle {
+      width: 100%;
       height: 46px;
       position: absolute;
       top: 1px;
       background: url('@/assets/cesiumMap/legendIcon/legendTitle_img.png');
       .legendName {
-        margin: 10px 255px 15px 9px;
+        margin: 10px 0px 15px 9px;
         font-family: YouSheBiaoTiHei;
         font-weight: 400;
         font-size: 22px;
         color: #e4f5ff;
+        img {
+          width: 22px;
+          height: 22px;
+          float: right;
+          margin-right: 10px;
+          cursor: pointer;
+        }
       }
     }
     .legendContent {