Explorar o código

style(cockpit): frosted translucent background for point/device detail float

维护者要求点位摘要/设备详情浮层与两侧面板同款:半透明 token 背景 + 16px 磨砂。
- .point-detail(两级详情共用根容器)加 backdrop-filter(与 CockpitPanel 同值)
- 锚定态外层 .cockpit-shell__detail.is-anchored 去掉重复渐变背景:
  双层相加会让有效不透明度 ≈0.96、比两侧面板实得多;归内层单层持有后
  锚定/固定两态与两侧面板完全同款(t41 的 z-index 断言不受影响)
ChenJZ hai 3 días
pai
achega
f40d251272

+ 3 - 1
src/modules/cockpit/CockpitShell.vue

@@ -2761,7 +2761,9 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
     /* 允许被画布边缘裁切:不因此整体消失(规格 R-2)。 */
     overflow: hidden;
     border: 1px solid var(--panel-line-hi, #01abea);
-    background: linear-gradient(180deg, var(--panel-top, rgba(2, 9, 27, 0.28)) 0%, var(--panel-bot, rgba(0, 15, 52, 0.38)) 100%);
+    /* 2026-10-23:背景与磨砂归**内层卡片**(.point-detail)单层持有 ——
+       外层再叠一份渐变会双层相加(有效不透明度 ≈0.96),比两侧面板实得多;
+       去掉后锚定/固定两态与两侧面板完全同款(半透明 token 背景 + 16px 磨砂)。 */
     box-shadow: var(--shadow, 0 18px 44px rgba(0, 0, 0, 0.55));
 }
 

+ 4 - 0
src/modules/cockpit/components/PointDetailCard.vue

@@ -570,6 +570,10 @@ const aggregateDown = computed(() => aggregateUnavailable(sections.value.equipme
     overflow: hidden;
     border: 1px solid var(--panel-line, rgba(1, 171, 234, 0.35));
     background: linear-gradient(180deg, var(--panel-top, rgba(2, 9, 27, 0.28)) 0%, var(--panel-bot, rgba(0, 15, 52, 0.38)) 100%);
+    /* 2026-10-23 维护者要求:点位摘要/设备详情与两侧面板同款磨砂(点位摘要 + 设备详情
+       两级共用这个根容器,一处生效)。16px 与 CockpitPanel 同值,磨砂参数不另设一档。 */
+    backdrop-filter: blur(16px) saturate(115%);
+    -webkit-backdrop-filter: blur(16px) saturate(115%);
     box-shadow: inset 0 1px 0 rgba(1, 171, 234, 0.14), var(--shadow, 0 18px 44px rgba(0, 0, 0, 0.55));
     color: var(--text-2, #88b7e8);
     font-size: var(--fs-caption, 10.5px);