feat: display current weather and max temperature time in hero section
This commit is contained in:
+29
-2
@@ -255,14 +255,38 @@ function renderHero(data) {
|
|||||||
const sym = data.temp_symbol || "°C";
|
const sym = data.temp_symbol || "°C";
|
||||||
|
|
||||||
const displayTemp =
|
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.max_so_far
|
||||||
: cur.temp;
|
: 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 =
|
document.getElementById("heroTemp").textContent =
|
||||||
displayTemp != null ? displayTemp.toFixed(1) : "—";
|
displayTemp != null ? displayTemp.toFixed(1) : "—";
|
||||||
document.getElementById("heroUnit").textContent = sym;
|
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 =
|
document.getElementById("heroCurrent").textContent =
|
||||||
cur.temp != null ? `${cur.temp}${sym} @${cur.obs_time || "—"}` : "—";
|
cur.temp != null ? `${cur.temp}${sym} @${cur.obs_time || "—"}` : "—";
|
||||||
document.getElementById("heroWU").textContent =
|
document.getElementById("heroWU").textContent =
|
||||||
@@ -279,7 +303,10 @@ function renderHero(data) {
|
|||||||
}
|
}
|
||||||
parts.push(`<span>✈️ METAR ${cur.obs_time}${ageStr}</span>`);
|
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) {
|
if (cur.wind_speed_kt != null) {
|
||||||
parts.push(`<span>💨 ${cur.wind_speed_kt}kt</span>`);
|
parts.push(`<span>💨 ${cur.wind_speed_kt}kt</span>`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,10 +65,12 @@
|
|||||||
<div id="panelContent" class="panel-body">
|
<div id="panelContent" class="panel-body">
|
||||||
<!-- ── Temperature Hero ── -->
|
<!-- ── Temperature Hero ── -->
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
|
<div class="hero-weather" id="heroWeather"></div>
|
||||||
<div class="hero-temp">
|
<div class="hero-temp">
|
||||||
<span class="hero-value" id="heroTemp">—</span>
|
<span class="hero-value" id="heroTemp">—</span>
|
||||||
<span class="hero-unit" id="heroUnit">°C</span>
|
<span class="hero-unit" id="heroUnit">°C</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hero-max-time" id="heroMaxTime"></div>
|
||||||
<div class="hero-details">
|
<div class="hero-details">
|
||||||
<div class="hero-item">
|
<div class="hero-item">
|
||||||
<span class="label">📍 当前实测</span>
|
<span class="label">📍 当前实测</span>
|
||||||
|
|||||||
@@ -467,12 +467,31 @@ body {
|
|||||||
padding-top: 12px !important;
|
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 {
|
.hero-temp {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-max-time {
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-muted);
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
min-height: 12px;
|
||||||
}
|
}
|
||||||
.hero-value {
|
.hero-value {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
|
|||||||
Reference in New Issue
Block a user