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

@@ -136,13 +136,6 @@ const handleClose = () => {
 @use '@/styles/mixins.scss' as *;
 
 .emergency-force-tooltip {
-  // CSS 变量：控制背景图片尺寸和内边距
-  // 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
-  --tooltip-top-height: 68px;
-  --tooltip-bottom-height: 68px;
-  --tooltip-side-padding: 24px;
-  --tooltip-body-padding: 16px;
-
   position: absolute;
   z-index: 9999;
   pointer-events: auto;
@@ -152,42 +145,14 @@ const handleClose = () => {
 
   min-width: 200px;
   max-width: 300px;
+  padding: 1rem;
 
-  // 上下 padding 需要容纳顶部和底部图片 + 内容间距
+  // 与左右面板一致的样式
-  // 左右 padding 保持一致
+  background: rgba(9, 22, 45, 0.95);
-  padding: calc(var(--tooltip-top-height))
+  border: 1px solid rgba(71, 186, 255, 0.4);
-    var(--tooltip-side-padding)
+  border-radius: 0.5rem;
-    calc(var(--tooltip-bottom-height));
+  backdrop-filter: blur(12px);
-
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
-  // 三段式可拉伸背景：顶部固定高度、中部可拉伸、底部固定高度
-  background-image:
-    url('@/views/cockpit/assets/emergencyForceTooltip/top.png'),
-    url('@/views/cockpit/assets/emergencyForceTooltip/bottom.png'),
-    url('@/views/cockpit/assets/emergencyForceTooltip/middle.png');
-
-  // 顶部/底部/中部都不重复，中部通过 background-size 拉伸填充
-  background-repeat: no-repeat, no-repeat, no-repeat;
-
-  // 背景定位：顶部居中对齐顶边，底部居中对齐底边
-  // 中部略向上偏移 1px，结合高度 +2px 在上下各覆盖 1px 避免子像素渲染缝隙
-  background-position:
-    center top,
-    center bottom,
-    center calc(var(--tooltip-top-height) - 1px);
-
-  // 背景尺寸：顶部/底部高度固定
-  // 中部填充剩余空间并增加 2px，在上下各多覆盖约 1px 避免间隙
-  background-size:
-    100% var(--tooltip-top-height),
-    100% var(--tooltip-bottom-height),
-    100% calc(100% - var(--tooltip-top-height) - var(--tooltip-bottom-height) + 2px);
-
-  // 移除原有的 border 和 border-radius，使用图片背景
-  border: none;
-
-  // 保留毛玻璃效果和阴影以增强视觉层次
-  // backdrop-filter: blur(12px);
-  // box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
 
   color: #fff;
   font-size: 14px;
@@ -208,28 +173,31 @@ const handleClose = () => {
   }
 }
 
-// 关闭按钮 - 仅作为透明点击热区，视觉由背景图中的关闭图标承载
+// 关闭按钮
 .close-button {
   position: absolute;
-  top: 18px;
+  top: 0.5rem;
-  right: 2px;
+  right: 0.5rem;
   width: 24px;
   height: 24px;
   padding: 0;
-
+  background: rgba(255, 255, 255, 0.1);
-  // 透明化所有视觉元素，仅保留点击功能
+  border: 1px solid rgba(255, 255, 255, 0.2);
-  border: none;
+  border-radius: 50%;
-  background: transparent;
+  color: #fff;
-  color: transparent;
+  font-size: 18px;
-  font-size: 0;
   line-height: 1;
-  box-shadow: none;
   cursor: pointer;
+  transition: all 0.2s ease;
 
-  // 为键盘用户提供可见的焦点轮廓（仅在键盘导航时显示）
+  &:hover {
-  &:focus-visible {
+    background: rgba(255, 255, 255, 0.2);
-    outline: 2px solid rgba(255, 255, 255, 0.8);
+    border-color: rgba(71, 186, 255, 0.6);
-    outline-offset: 2px;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
   }
 }
 
@@ -273,9 +241,8 @@ const handleClose = () => {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-
+  background: rgba(9, 22, 45, 0.95);
-  // 使用半透明背景，让背景图片纹理仍然可见
+  border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 1);
   backdrop-filter: blur(12px);
 
   span {

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

@@ -14,7 +14,7 @@
         <!-- 六边形徽章容器 -->
         <div class="badge-container">
           <!-- 六边形徽章 -->
-          <div class="level-badge" :style="{ backgroundImage: `url(${level.warningIcon})` }">
+          <div class="level-badge">
             <!-- <img
               src="../assets/img/weather-badge-hexagon.png"
               alt="badge"
@@ -70,10 +70,6 @@ import { ref } from 'vue'
 // 导入图片
 import glowTopIcon from '../assets/img/weather-badge-glow-top.png'
 import glowBottomIcon from '../assets/img/weather-badge-glow-bottom.png'
-import blueWarningIcon from '../assets/img/weather-badge-blue-warning.png'
-import yellowWarningIcon from '../assets/img/weather-badge-yellow-warning.png'
-import orangeWarningIcon from '../assets/img/weather-badge-orange-warning.png'
-import redWarningIcon from '../assets/img/weather-badge-red-warning.png'
 
 const warningLevels = ref([
   {
@@ -82,8 +78,7 @@ const warningLevels = ref([
     count: 320,
     color: 'rgba(132, 199, 255, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon,
+    glowBottomIcon: glowBottomIcon
-    warningIcon: blueWarningIcon
   },
   {
     id: 2,
@@ -91,8 +86,7 @@ const warningLevels = ref([
     count: 36,
     color: 'rgba(215, 209, 38, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon,
+    glowBottomIcon: glowBottomIcon
-    warningIcon: yellowWarningIcon
   },
   {
     id: 3,
@@ -100,8 +94,7 @@ const warningLevels = ref([
     count: 2,
     color: 'rgba(255, 114, 0, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon,
+    glowBottomIcon: glowBottomIcon
-    warningIcon: orangeWarningIcon
   },
   {
     id: 4,
@@ -109,8 +102,7 @@ const warningLevels = ref([
     count: 1,
     color: 'rgba(255, 32, 0, 1)',
     glowTopIcon: glowTopIcon,
-    glowBottomIcon: glowBottomIcon,
+    glowBottomIcon: glowBottomIcon
-    warningIcon: redWarningIcon
   }
 ])
 
@@ -179,9 +171,9 @@ const districts = ref([
   .level-badge {
     position: relative;
     width: vw(80);
-    height: vh(70);
+    height: vh(90);
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
     z-index: 2;
     background: url(../assets/img/weather-badge-bg.png) center center / 100% 100% no-repeat;