diff --git a/templates/bigscreen.html b/templates/bigscreen.html
index 16e5ec3..e1e0a07 100644
--- a/templates/bigscreen.html
+++ b/templates/bigscreen.html
@@ -191,6 +191,8 @@
color: #bd6718;
font-size: 1.7rem;
font-weight: 600;
+ padding: 0.1rem 0.35rem;
+ border-radius: var(--radius-1);
}
/* 预警时:pastAccuracySummary 字体稍微变大,颜色保持 #bcd0ff */
.summary-panel.alert-on .summary-sub {
@@ -209,6 +211,8 @@
color: #b81f1f;
font-size: 1.7rem;
font-weight: 600;
+ padding: 0.1rem 0.35rem;
+ border-radius: var(--radius-1);
}
.summary-panel.alert-red .summary-sub {
color: #bcd0ff;
@@ -220,17 +224,74 @@
box-shadow:
inset 0 0 20rem var(--orange-shadow-3),
inset 0 0 20rem var(--orange-shadow-1);
+ animation: screenGlowOrange 1.8s ease-in-out infinite;
+ }
+ @keyframes screenGlowOrange {
+ 0%, 100% { box-shadow:
+ inset 0 0 20rem var(--orange-shadow-3),
+ inset 0 0 20rem var(--orange-shadow-1);
+ }
+ 50% { box-shadow: none; }
}
.screen.alert-red {
box-shadow:
inset 0 0 20rem rgba(255, 107, 107, 0.25),
inset 0 0 20rem rgba(255, 107, 107, 0.35);
+ animation: screenGlowRed 1.8s ease-in-out infinite;
+ }
+ @keyframes screenGlowRed {
+ 0%, 100% { box-shadow:
+ inset 0 0 20rem rgba(255, 107, 107, 0.25),
+ inset 0 0 20rem rgba(255, 107, 107, 0.35);
+ }
+ 50% { box-shadow: none; }
}
/* 减少动画偏好时关闭动画(目前无动画,但作为扩展) */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
}
+
+ /* Panel 与文字整体闪烁:橙色 */
+ .summary-panel.alert-on { animation: panelGlowOrange 1.8s ease-in-out infinite; }
+ .summary-panel.alert-on .summary-title,
+ .summary-panel.alert-on .summary-sub { animation: textPulseOrange 1.8s ease-in-out infinite; }
+ @keyframes panelGlowOrange {
+ 0%, 100% {
+ background: linear-gradient(180deg, var(--orange-bg-1), var(--orange-bg-2));
+ border-color: var(--orange-border);
+ box-shadow: 0 0.375rem 1.125rem var(--orange-shadow-1), 0 0 0 1px var(--orange-shadow-2) inset, 0 0 1.5rem var(--orange-shadow-3) inset;
+ }
+ 50% {
+ background: var(--color-bg);
+ border-color: var(--panel-border);
+ box-shadow: none;
+ }
+ }
+ @keyframes textPulseOrange {
+ 0%, 100% { /* 使用各自定义色 */ }
+ 50% { color: var(--color-fg); }
+ }
+ /* Panel 与文字整体闪烁:红色 */
+ .summary-panel.alert-red { animation: panelGlowRed 1.8s ease-in-out infinite; }
+ .summary-panel.alert-red .summary-title,
+ .summary-panel.alert-red .summary-sub { animation: textPulseRed 1.8s ease-in-out infinite; }
+ @keyframes panelGlowRed {
+ 0%, 100% {
+ background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.12));
+ border-color: rgba(200, 40, 40, 0.6);
+ box-shadow: 0 0.375rem 1.125rem rgba(255, 107, 107, 0.35), 0 0 0 1px rgba(255,107,107,0.10) inset, 0 0 1.5rem rgba(255, 107, 107, 0.25) inset;
+ }
+ 50% {
+ background: var(--color-bg);
+ border-color: var(--panel-border);
+ box-shadow: none;
+ }
+ }
+ @keyframes textPulseRed {
+ 0%, 100% { /* 使用各自定义色 */ }
+ 50% { color: var(--color-fg); }
+ }