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 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>`);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user