feat: display current weather and max temperature time in hero section

This commit is contained in:
2569718930@qq.com
2026-03-03 22:49:10 +08:00
parent 3cb53e6f9b
commit 7d3f497417
3 changed files with 50 additions and 2 deletions
+29 -2
View File
@@ -255,14 +255,38 @@ function renderHero(data) {
const sym = data.temp_symbol || "°C";
const displayTemp =
cur.max_so_far != null && cur.max_so_far >= cur.temp
cur.max_so_far != null && cur.max_so_far >= (cur.temp || -999)
? cur.max_so_far
: cur.temp;
// Use cloud_desc for the main weather indicator
const weatherText = cur.cloud_desc || cur.wx_desc || "未知";
const weatherIcon =
{
多云: "⛅",
阴天: "☁️",
少云: "🌤️",
散云: "⛅",
: "☀️",
}[cur.cloud_desc] || "🌡️";
document.getElementById("heroWeather").innerHTML = `
<span>${weatherIcon} ${weatherText}</span>
`;
document.getElementById("heroTemp").textContent =
displayTemp != null ? displayTemp.toFixed(1) : "—";
document.getElementById("heroUnit").textContent = sym;
// Show if it's the peak recorded temperature
const isMax = cur.max_so_far != null && cur.max_so_far >= (cur.temp || -999);
const maxTimeEl = document.getElementById("heroMaxTime");
if (isMax && cur.max_temp_time) {
maxTimeEl.textContent = `该城市今日最高温出现于当地时间 ${cur.max_temp_time}`;
} else {
maxTimeEl.textContent = "";
}
document.getElementById("heroCurrent").textContent =
cur.temp != null ? `${cur.temp}${sym} @${cur.obs_time || "—"}` : "—";
document.getElementById("heroWU").textContent =
@@ -279,7 +303,10 @@ function renderHero(data) {
}
parts.push(`<span>✈️ METAR ${cur.obs_time}${ageStr}</span>`);
}
if (cur.cloud_desc) parts.push(`<span>☁️ ${cur.cloud_desc}</span>`);
// Remove redundant cloud_desc here as it's now in main hero
if (cur.wx_desc && cur.wx_desc !== cur.cloud_desc) {
parts.push(`<span>🌦️ ${cur.wx_desc}</span>`);
}
if (cur.wind_speed_kt != null) {
parts.push(`<span>💨 ${cur.wind_speed_kt}kt</span>`);
}
+2
View File
@@ -65,10 +65,12 @@
<div id="panelContent" class="panel-body">
<!-- ── Temperature Hero ── -->
<section class="hero-section">
<div class="hero-weather" id="heroWeather"></div>
<div class="hero-temp">
<span class="hero-value" id="heroTemp"></span>
<span class="hero-unit" id="heroUnit">°C</span>
</div>
<div class="hero-max-time" id="heroMaxTime"></div>
<div class="hero-details">
<div class="hero-item">
<span class="label">📍 当前实测</span>
+19
View File
@@ -467,12 +467,31 @@ body {
padding-top: 12px !important;
}
.hero-weather {
font-size: 13px;
font-weight: 600;
color: var(--accent-cyan);
margin-bottom: -4px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.hero-temp {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 2px;
margin-bottom: 2px;
}
.hero-max-time {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
margin-bottom: 16px;
min-height: 12px;
}
.hero-value {
font-size: 56px;