feat: 调整冰雪阻断大屏的头部图

packages/screen/src/views/cockpit/components/CockpitLayout.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="cockpit-layout">
     <!-- <PageHeader /> -->
+    <PageHeader />
     <div class="cockpit-main">
       <!-- 地图底层 -->
       <div class="map-layer">
@@ -26,17 +27,14 @@
       </div>
 
       <!-- 图例工具栏 -->
-      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
+      <LegendToolbar class="legend-toolbar" v-model="legendToolActiveItem" :legendKeys="legendKeys"
+        @marker-toggle="handleLegendMarkerToggle" />
 
       <!-- 应急力量详情提示框 -->
-      <EmergencyForceTooltip
+      <EmergencyForceTooltip :visible="emergencyForceInteraction.tooltipVisible.value"
-        :visible="emergencyForceInteraction.tooltipVisible.value"
+        :position="emergencyForceInteraction.tooltipPosition.value" :data="emergencyForceInteraction.tooltipData.value"
-        :position="emergencyForceInteraction.tooltipPosition.value"
+        :loading="emergencyForceInteraction.loading.value" :error="emergencyForceInteraction.error.value"
-        :data="emergencyForceInteraction.tooltipData.value"
+        @close="emergencyForceInteraction.hideTooltip" />
-        :loading="emergencyForceInteraction.loading.value"
-        :error="emergencyForceInteraction.error.value"
-        @close="emergencyForceInteraction.hideTooltip"
-      />
     </div>
   </div>
 </template>
@@ -607,6 +605,7 @@ onBeforeUnmount(() => {
   @supports (width: 1cqw) {
     --cq-inline-100: 100cqw;
   }
+
   @supports (height: 1cqh) {
     --cq-block-100: 100cqh;
   }
@@ -623,13 +622,15 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   min-height: var(--cockpit-min-height);
-  min-width: 0; /* 允许 flex 子元素收缩 */
+  min-width: 0;
+  /* 允许 flex 子元素收缩 */
 
   background: url(../assets/img/cockpit-main-bg.png) no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
-  overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
+  overflow: auto;
+  /* 当宿主高度 < 最小高度时允许滚动 */
 }
 
 /* 窄容器嵌入的紧凑布局（<1100px 宽度）*/
@@ -641,8 +642,10 @@ onBeforeUnmount(() => {
 .cockpit-main {
   position: relative;
   flex: 1;
-  min-height: 0; /* 允许网格在 flex 上下文中收缩 */
+  min-height: 0;
-  overflow: hidden; /* 防止内容溢出 */
+  /* 允许网格在 flex 上下文中收缩 */
+  overflow: hidden;
+  /* 防止内容溢出 */
 }
 
 /* 地图底层 - 填满整个容器 */
@@ -658,7 +661,8 @@ onBeforeUnmount(() => {
   position: absolute;
   inset: 0;
   z-index: 1;
-  pointer-events: none; /* 不阻挡交互 */
+  pointer-events: none;
+  /* 不阻挡交互 */
   background: url(../assets/img/遮罩层.png) no-repeat center/cover;
 }
 
@@ -672,7 +676,8 @@ onBeforeUnmount(() => {
   gap: var(--cockpit-gap);
   height: 100%;
   box-sizing: border-box;
-  pointer-events: none; /* 容器不拦截事件，让中间区域透明 */
+  pointer-events: none;
+  /* 容器不拦截事件，让中间区域透明 */
 }
 
 /* 中间占位区域 - 透明且不可交互，点击穿透到地图 */
@@ -685,10 +690,13 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: var(--cockpit-gap);
-  min-width: 0; /* 防止在窄容器中溢出 */
+  min-width: 0;
-  min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
+  /* 防止在窄容器中溢出 */
+  min-height: 0;
+  /* 允许 flex 子元素收缩并启用滚动 */
   padding: 1rem;
-  pointer-events: auto; /* 恢复面板的交互能力 */
+  pointer-events: auto;
+  /* 恢复面板的交互能力 */
 }
 
 /* 图例工具栏 - 居中显示在底部 */
@@ -698,6 +706,7 @@ onBeforeUnmount(() => {
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
-  pointer-events: auto; /* 确保图例可交互 */
+  pointer-events: auto;
+  /* 确保图例可交互 */
 }
 </style>

packages/screen/src/views/cockpit/components/PageHeader.vue

@@ -1,8 +1,6 @@
 <template>
   <header class="page-header">
     <div class="header-bg">
-      <h1 class="title">安全保通服务</h1>
-      <button class="app-button">应用</button>
     </div>
   </header>
 </template>
@@ -14,7 +12,7 @@
 @use '@/styles/mixins.scss' as *;
 
 .page-header {
-  height: vh(137);
+  height: vw(111);
   background: url(../assets/img/header-bg.png) no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -23,15 +21,6 @@
   position: relative;
 }
 
-.header-bg {
-  background-image: url(../assets/img/header-title-bg.png);
-  width: 100%;
-  height: vh(107);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
 
 .title {
   color: rgba(255, 255, 255, 1);
@@ -43,24 +32,4 @@
   text-align: center;
 }
 
-.app-button {
-  position: absolute;
-  right: vw(40);
-  top: 50%;
-  transform: translateY(-50%);
-  width: vw(165);
-  height: vh(44);
-  background: url(../assets/img/header-btn-app-bg.png) no-repeat;
-  background-size: 100% 100%;
-  color: rgba(255, 255, 255, 1);
-  font-size: fs(16);
-  font-family: SourceHanSansCN-Regular, sans-serif;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.3s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
 </style>