From d9e326de18b250180c5d639967774471353d0146 Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Wed, 19 Nov 2025 09:13:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(situational-awareness):=20=E5=B0=86?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A3=E5=8D=95=E4=BD=8D=E9=99=90=E5=88=B6=E5=9C=A8?=
 =?UTF-8?q?1920x1080=E4=BB=A5=E5=86=85=E4=BB=A5=E9=98=B2=E6=AD=A2=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

更新CSS自定义属性，使用clamp()和min()函数处理视口和容器单位，
确保在大屏幕上布局宽度不超过1920px，高度不超过1080px。
调整溢出属性以隐藏水平滚动条，并在需要时允许垂直滚动。
---
 .../3DSituationalAwarenessRefactor/index.vue    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index 2aee13b..6b73b39 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -560,16 +560,16 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
   container-name: situational-awareness;
   container-type: size;
 
-  // 为旧版浏览器提供视口单位回退
-  --cq-inline-100: 100vw;
-  --cq-block-100: 100vh;
+  // 为旧版浏览器提供视口单位回退，封顶 1920×1080
+  --cq-inline-100: clamp(0px, 100vw, 1920px);
+  --cq-block-100: clamp(0px, 100vh, 1080px);
 
-  // 当支持容器单位时覆盖为容器单位
+  // 当支持容器单位时覆盖为容器单位，同样封顶
   @supports (width: 1cqw) {
-    --cq-inline-100: 100cqw;
+    --cq-inline-100: min(100cqw, 1920px);
   }
   @supports (height: 1cqh) {
-    --cq-block-100: 100cqh;
+    --cq-block-100: min(100cqh, 1080px);
   }
 
   // 可配置的布局变量（使用 calc 直接计算，避免函数嵌套）
@@ -586,10 +586,13 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
   position: relative;
   width: 100%;
   height: 100%;
+  // max-width: 1920px;
+  // max-height: 1080px;
   min-width: var(--sa-min-width);
   min-height: var(--sa-min-height);
   background-color: var(--bg-dark);
-  overflow: auto; // 当宿主尺寸 < 最小尺寸时允许滚动
+  overflow-x: hidden;
+  overflow-y: auto; // 当宿主尺寸 < 最小尺寸时允许滚动，达到上限时不放大
 
   // PageHeader 浮在顶部
   > :first-child {