diff --git a/packages/screen/src/views/cockpit/components/EmergencyForceTooltip.vue b/packages/screen/src/views/cockpit/components/EmergencyForceTooltip.vue index 67e531a..e869e8a 100644 --- a/packages/screen/src/views/cockpit/components/EmergencyForceTooltip.vue +++ b/packages/screen/src/views/cockpit/components/EmergencyForceTooltip.vue @@ -136,6 +136,13 @@ 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; @@ -145,14 +152,42 @@ const handleClose = () => { min-width: 200px; max-width: 300px; - padding: 1rem; - // 与左右面板一致的样式 - background: rgba(9, 22, 45, 0.95); - border: 1px solid rgba(71, 186, 255, 0.4); - border-radius: 0.5rem; - backdrop-filter: blur(12px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); + // 上下 padding 需要容纳顶部和底部图片 + 内容间距 + // 左右 padding 保持一致 + padding: calc(var(--tooltip-top-height)) + var(--tooltip-side-padding) + calc(var(--tooltip-bottom-height)); + + // 三段式可拉伸背景：顶部固定高度、中部可拉伸、底部固定高度 + 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; @@ -173,31 +208,28 @@ const handleClose = () => { } } -// 关闭按钮 +// 关闭按钮 - 仅作为透明点击热区，视觉由背景图中的关闭图标承载 .close-button { position: absolute; - top: 0.5rem; - right: 0.5rem; + top: 18px; + right: 2px; width: 24px; height: 24px; padding: 0; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 50%; - color: #fff; - font-size: 18px; + + // 透明化所有视觉元素，仅保留点击功能 + border: none; + background: transparent; + color: transparent; + font-size: 0; line-height: 1; + box-shadow: none; cursor: pointer; - transition: all 0.2s ease; - &:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(71, 186, 255, 0.6); - transform: scale(1.1); - } - - &:active { - transform: scale(0.95); + // 为键盘用户提供可见的焦点轮廓（仅在键盘导航时显示） + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.8); + outline-offset: 2px; } } @@ -241,8 +273,9 @@ 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 { diff --git a/packages/screen/src/views/cockpit/components/WeatherWarning.vue b/packages/screen/src/views/cockpit/components/WeatherWarning.vue index 573e8c9..4d07ce3 100644 --- a/packages/screen/src/views/cockpit/components/WeatherWarning.vue +++ b/packages/screen/src/views/cockpit/components/WeatherWarning.vue @@ -14,7 +14,7 @@
-
+