refactor(situational-awareness): 将视口单位限制在1920x1080以内以防止溢出

更新CSS自定义属性,使用clamp()和min()函数处理视口和容器单位,
确保在大屏幕上布局宽度不超过1920px,高度不超过1080px。
调整溢出属性以隐藏水平滚动条,并在需要时允许垂直滚动。
This commit is contained in:
Zzc 2025-11-19 09:13:06 +08:00
parent 07948f788c
commit d9e326de18

View File

@ -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 {