重构城市决策卡 hero 布局:去除 sticky 固定效果,右侧改为三指标并列对比
将 scan-ai-city-hero 从"左重右轻"改为左右均衡布局,右侧从单一预计高温数字 替换为当前温度/预计最高温/峰值时间三列并排指标卡,中间列高亮为主指标。 移除冗余的 pills 行和隐藏的 mobile-priority div,新鲜度条改为水平单行。 同步更新亮色主题 CSS 新增 metrics 样式。修复 fallback 模块未使用变量。 Constraint: dark/light 双主题完整覆盖 Scope-risk: hero 高度缩减约 30%,需确认移动端 MobileDecisionCard 不受影响
This commit is contained in:
@@ -59,32 +59,12 @@ export function CityCardHeader({
|
||||
}) {
|
||||
return (
|
||||
<header className="scan-ai-city-hero">
|
||||
<div>
|
||||
<div className="scan-ai-city-hero-left">
|
||||
<span className="scan-ai-city-kicker">
|
||||
{isEn ? "Deep analysis" : "城市深度分析"}
|
||||
</span>
|
||||
<h3>{displayName}</h3>
|
||||
<div className="scan-ai-city-mobile-priority" aria-label={isEn ? "Key city decision metrics" : "城市决策重点"}>
|
||||
<span>
|
||||
<small>{isEn ? "Observed" : "当前温度"}</small>
|
||||
<b>{currentTempText}</b>
|
||||
</span>
|
||||
<span>
|
||||
<small>{isEn ? "Expected high" : "预测高点"}</small>
|
||||
<b>{expectedHighText}</b>
|
||||
</span>
|
||||
<span>
|
||||
<small>{isEn ? "Peak" : "峰值时间"}</small>
|
||||
<b>{peakWindow}</b>
|
||||
</span>
|
||||
</div>
|
||||
<CityStatusTags tags={statusTags} />
|
||||
<div className="scan-ai-city-pills">
|
||||
<span>{detailLocalTime || rowLocalTime || "--"}</span>
|
||||
<span>DEB {debText}</span>
|
||||
<span>{isEn ? "Model" : "模型"} {modelRange}</span>
|
||||
<span>{isEn ? "Peak" : "峰值"} {peakWindow}</span>
|
||||
</div>
|
||||
<DataFreshnessBar
|
||||
aiStatusLabel={aiStatusLabel}
|
||||
aiStatusTone={aiStatusTone}
|
||||
@@ -94,8 +74,20 @@ export function CityCardHeader({
|
||||
/>
|
||||
</div>
|
||||
<div className="scan-ai-city-hero-side">
|
||||
<span>{isEn ? "Expected high" : "预计最高温"}</span>
|
||||
<strong>{expectedHighText}</strong>
|
||||
<div className="scan-ai-city-metrics">
|
||||
<span>
|
||||
<small>{isEn ? "Observed" : "当前温度"}</small>
|
||||
<b>{currentTempText}</b>
|
||||
</span>
|
||||
<span className="primary">
|
||||
<small>{isEn ? "Expected high" : "预计最高温"}</small>
|
||||
<b>{expectedHighText}</b>
|
||||
</span>
|
||||
<span>
|
||||
<small>{isEn ? "Peak" : "峰值时间"}</small>
|
||||
<b>{peakWindow}</b>
|
||||
</span>
|
||||
</div>
|
||||
<div className="scan-ai-city-actions">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user