feat: 修改一些文字标题
This commit is contained in:
parent
dab7b06638
commit
59472de103
@ -9,7 +9,6 @@
|
|||||||
<script src="/static/js/ol.js"></script>
|
<script src="/static/js/ol.js"></script>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
/* 色彩系统 */
|
|
||||||
--color-bg: #0b1e39;
|
--color-bg: #0b1e39;
|
||||||
--color-fg: #e6eefc;
|
--color-fg: #e6eefc;
|
||||||
--color-fg-muted: #dbe7ff;
|
--color-fg-muted: #dbe7ff;
|
||||||
@ -18,7 +17,6 @@
|
|||||||
--table-head-bg: rgba(20,45,80,0.98);
|
--table-head-bg: rgba(20,45,80,0.98);
|
||||||
--table-head-fg: #e6f0ff;
|
--table-head-fg: #e6f0ff;
|
||||||
--table-row-alt: rgba(255,255,255,0.03);
|
--table-row-alt: rgba(255,255,255,0.03);
|
||||||
/* 橙色主题 */
|
|
||||||
--orange-bg-1: rgba(255, 171, 64, 0.18);
|
--orange-bg-1: rgba(255, 171, 64, 0.18);
|
||||||
--orange-bg-2: rgba(255, 171, 64, 0.10);
|
--orange-bg-2: rgba(255, 171, 64, 0.10);
|
||||||
--orange-border: rgba(230, 120, 20, 0.6);
|
--orange-border: rgba(230, 120, 20, 0.6);
|
||||||
@ -36,7 +34,6 @@
|
|||||||
--radius-2: 0.375rem; /* 6px */
|
--radius-2: 0.375rem; /* 6px */
|
||||||
}
|
}
|
||||||
html, body { height: 100%; }
|
html, body { height: 100%; }
|
||||||
/* 流式字号:在 14px 与 18px 之间随视口变化 */
|
|
||||||
html { font-size: clamp(14px, 0.95vw, 18px); }
|
html { font-size: clamp(14px, 0.95vw, 18px); }
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -46,14 +43,12 @@
|
|||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
/* 预警:四周橙色熏染(柔和、呼吸闪烁),不改变主体深蓝底 */
|
|
||||||
body.alert-mode { position: relative; }
|
body.alert-mode { position: relative; }
|
||||||
body.alert-mode::before {
|
body.alert-mode::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
/* 以中心透明、边缘柔和橙色的辐射渐变覆盖 */
|
|
||||||
background: radial-gradient(circle at 50% 50%,
|
background: radial-gradient(circle at 50% 50%,
|
||||||
rgba(255, 159, 64, 0.00) 45%,
|
rgba(255, 159, 64, 0.00) 45%,
|
||||||
rgba(255, 159, 64, 0.12) 70%,
|
rgba(255, 159, 64, 0.12) 70%,
|
||||||
@ -68,7 +63,6 @@
|
|||||||
100% { opacity: 0.12; }
|
100% { opacity: 0.12; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 大屏布局:左右两栏 */
|
|
||||||
.screen {
|
.screen {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@ -180,7 +174,6 @@
|
|||||||
.summary-title { font-size: 0.875rem; color: #e6f0ff; font-weight: 600; }
|
.summary-title { font-size: 0.875rem; color: #e6f0ff; font-weight: 600; }
|
||||||
.summary-sub { font-size: 0.8125rem; color: #bcd0ff; }
|
.summary-sub { font-size: 0.8125rem; color: #bcd0ff; }
|
||||||
|
|
||||||
/* 当触发预警时,将 Summary 面板改为柔和橙色并带晕影 */
|
|
||||||
.summary-panel.alert-on {
|
.summary-panel.alert-on {
|
||||||
background: linear-gradient(180deg, var(--orange-bg-1), var(--orange-bg-2));
|
background: linear-gradient(180deg, var(--orange-bg-1), var(--orange-bg-2));
|
||||||
border: 1px solid var(--orange-border);
|
border: 1px solid var(--orange-border);
|
||||||
@ -194,13 +187,11 @@
|
|||||||
padding: 0.1rem 0.35rem;
|
padding: 0.1rem 0.35rem;
|
||||||
border-radius: var(--radius-1);
|
border-radius: var(--radius-1);
|
||||||
}
|
}
|
||||||
/* 预警时:pastAccuracySummary 字体稍微变大,颜色保持 #bcd0ff */
|
|
||||||
.summary-panel.alert-on .summary-sub {
|
.summary-panel.alert-on .summary-sub {
|
||||||
color: #bcd0ff;
|
color: #bcd0ff;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 红色预警样式(>0.4mm) */
|
|
||||||
.summary-panel.alert-red {
|
.summary-panel.alert-red {
|
||||||
background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.12));
|
background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.12));
|
||||||
border: 1px solid rgba(200, 40, 40, 0.6);
|
border: 1px solid rgba(200, 40, 40, 0.6);
|
||||||
@ -219,7 +210,6 @@
|
|||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 屏幕容器在预警时的四周橘色阴影(内发光) */
|
|
||||||
.screen.alert-on {
|
.screen.alert-on {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
inset 0 0 20rem var(--orange-shadow-3),
|
inset 0 0 20rem var(--orange-shadow-3),
|
||||||
@ -247,12 +237,10 @@
|
|||||||
50% { box-shadow: none; }
|
50% { box-shadow: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 减少动画偏好时关闭动画(目前无动画,但作为扩展) */
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
* { animation: none !important; }
|
* { animation: none !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Panel 与文字整体闪烁:橙色 */
|
|
||||||
.summary-panel.alert-on { animation: panelGlowOrange 1.8s ease-in-out infinite; }
|
.summary-panel.alert-on { animation: panelGlowOrange 1.8s ease-in-out infinite; }
|
||||||
.summary-panel.alert-on .summary-title,
|
.summary-panel.alert-on .summary-title,
|
||||||
.summary-panel.alert-on .summary-sub { animation: textPulseOrange 1.8s ease-in-out infinite; }
|
.summary-panel.alert-on .summary-sub { animation: textPulseOrange 1.8s ease-in-out infinite; }
|
||||||
@ -272,7 +260,6 @@
|
|||||||
0%, 100% { /* 使用各自定义色 */ }
|
0%, 100% { /* 使用各自定义色 */ }
|
||||||
50% { color: var(--color-fg); }
|
50% { color: var(--color-fg); }
|
||||||
}
|
}
|
||||||
/* Panel 与文字整体闪烁:红色 */
|
|
||||||
.summary-panel.alert-red { animation: panelGlowRed 1.8s ease-in-out infinite; }
|
.summary-panel.alert-red { animation: panelGlowRed 1.8s ease-in-out infinite; }
|
||||||
.summary-panel.alert-red .summary-title,
|
.summary-panel.alert-red .summary-title,
|
||||||
.summary-panel.alert-red .summary-sub { animation: textPulseRed 1.8s ease-in-out infinite; }
|
.summary-panel.alert-red .summary-sub { animation: textPulseRed 1.8s ease-in-out infinite; }
|
||||||
@ -338,7 +325,6 @@
|
|||||||
<input type="datetime-local" id="endDate">
|
<input type="datetime-local" id="endDate">
|
||||||
<button onclick="queryHistoryData()">查询</button>
|
<button onclick="queryHistoryData()">查询</button>
|
||||||
|
|
||||||
<!-- 叠加显示(雷达/雨量)与时间选择 -->
|
|
||||||
<label for="tileProduct">叠加:</label>
|
<label for="tileProduct">叠加:</label>
|
||||||
<select id="tileProduct">
|
<select id="tileProduct">
|
||||||
<option value="none">不显示</option>
|
<option value="none">不显示</option>
|
||||||
@ -353,7 +339,6 @@
|
|||||||
<option value="">请选择时间</option>
|
<option value="">请选择时间</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<!-- 预报摘要与准确率(位于控件与表格之间) -->
|
|
||||||
<div id="summaryPanel" class="summary-panel">
|
<div id="summaryPanel" class="summary-panel">
|
||||||
<div id="futureRainSummary" class="summary-title">未来1~3小时降雨 -- mm</div>
|
<div id="futureRainSummary" class="summary-title">未来1~3小时降雨 -- mm</div>
|
||||||
<div id="pastAccuracySummary" class="summary-sub">过去预报准确率 +1h: -- +2h: -- +3h: --</div>
|
<div id="pastAccuracySummary" class="summary-sub">过去预报准确率 +1h: -- +2h: -- +3h: --</div>
|
||||||
@ -382,7 +367,6 @@
|
|||||||
<script>
|
<script>
|
||||||
window.TIANDITU_KEY = '{{.TiandituKey}}';
|
window.TIANDITU_KEY = '{{.TiandituKey}}';
|
||||||
</script>
|
</script>
|
||||||
<!-- Chart.js 深色主题默认颜色(更适配深蓝底) -->
|
|
||||||
<script>
|
<script>
|
||||||
if (window.Chart && Chart.defaults) {
|
if (window.Chart && Chart.defaults) {
|
||||||
Chart.defaults.color = '#d5e3ff';
|
Chart.defaults.color = '#d5e3ff';
|
||||||
@ -412,7 +396,6 @@
|
|||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
titleEl.textContent = '第七台气象站(宾阳县细塘村东南约112米)';
|
titleEl.textContent = '第七台气象站(宾阳县细塘村东南约112米)';
|
||||||
}
|
}
|
||||||
// 等待站点列表加载后,用 10691 的 location 设置标题
|
|
||||||
const maxTries = 50; // ~10s 内重试
|
const maxTries = 50; // ~10s 内重试
|
||||||
let tries = 0;
|
let tries = 0;
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
@ -425,7 +408,6 @@
|
|||||||
}
|
}
|
||||||
if (tries >= maxTries) clearInterval(timer);
|
if (tries >= maxTries) clearInterval(timer);
|
||||||
}, 200);
|
}, 200);
|
||||||
// 稍等初始化完成后触发查询
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.dispatchEvent(new CustomEvent('query-history-data'));
|
window.dispatchEvent(new CustomEvent('query-history-data'));
|
||||||
}, 600);
|
}, 600);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user