fix(energy): 顶部双 sticky 间隙泄露 + 加氢站名单价完整显示
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
问题 1:原本「氢能/电能/ETC」与「每日/总览」是两个独立的 sticky 元素,分别 top:0 / top:[58px],中间 gap-3 +位置不精确导致滚动时 图表内容从 14px 缝隙里穿过。 修复: - 把 HydrogenView 内部的 sub-tab 状态提到 EnergyModule - top tab + 子 tab 合并到「同一张白色 rounded-2xl 卡片」里,无内部间隙 - 外层 sticky 容器 frosted glass:bg-[#F8F9FB]/85 + backdrop-blur-md -mx -mt 扩到页面边,消除左右上的微缝 - HydrogenView 改为受控组件(接收 sub prop) 问题 2:站点行 mobile 上 name + ' · 价格' 共用一格还 truncate, 导致长名称(广州新锋交通联新…/上海浦江加氢站…)截断、单价不可见。 修复: - 行改为「站名换行 + 下方单价 chip」纵向排列 - 单价用 amber 小徽章「单价 X 元/Kg」,不再 inline 跟着名字 - name 用 break-words 允许折行,items-start 顶部对齐 - 单价为 0(免费/赠送)时不显示徽章,desktop 列里显示「—」 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -191,13 +191,19 @@ export default function HydrogenDaily() {
|
||||
{r.stations.map(s => (
|
||||
<div
|
||||
key={s.name}
|
||||
className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2 pl-9 border-t border-slate-100 first:border-t-0"
|
||||
className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2.5 pl-9 border-t border-slate-100 first:border-t-0 items-start"
|
||||
>
|
||||
<span className="text-[12px] text-slate-600 truncate">
|
||||
{s.name}
|
||||
<span className="md:hidden text-slate-400 text-[10px]"> · {s.pricePerKg}</span>
|
||||
</span>
|
||||
<span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg}</span>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] text-slate-700 font-medium leading-snug break-words">
|
||||
{s.name}
|
||||
</div>
|
||||
{s.pricePerKg > 0 && (
|
||||
<div className="md:hidden mt-1 inline-flex items-center gap-1 text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold">
|
||||
单价 {s.pricePerKg} 元/Kg
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg > 0 ? s.pricePerKg : '—'}</span>
|
||||
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
||||
{s.kg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user