bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
更新CSS自定义属性，使用clamp()和min()函数处理视口和容器单位，
确保在大屏幕上布局宽度不超过1920px，高度不超过1080px。
调整溢出属性以隐藏水平滚动条，并在需要时允许垂直滚动。
This commit is contained in:
Zzc 2025-11-19 09:13:06 +08:00
parent 07948f788c
commit d9e326de18
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
View File

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