fix: 车辆详情清单标题也吸顶,与KPI合为一个sticky块

Tab栏 + KPI统计 + 清单标题 三层吸顶:
- Tab栏 sticky top-0
- KPI + 清单标题 sticky top-[44px]
移动端和Web端都生效。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-02 00:19:49 +08:00
parent 787fa27949
commit 94277efc24

View File

@@ -708,12 +708,10 @@ export default function MonitoringView() {
); );
})()} })()}
{/* High Density KPI Grid — sticky below tab bar */} {/* Sticky header: KPI + 清单标题 */}
<div className="sticky top-[44px] z-20 bg-[#F8F9FB] py-1"> <div className="sticky top-[44px] z-20 bg-[#F8F9FB] pt-1 pb-1 space-y-2">
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
<div className="col-span-2 bg-slate-900 p-2.5 rounded-xl text-white relative overflow-hidden"> <div className="col-span-2 bg-slate-900 p-2.5 rounded-xl text-white relative overflow-hidden">
<div className="flex items-baseline justify-between">
<div>
<div className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'today' ? '今日' : '累计'}</div> <div className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'today' ? '今日' : '累计'}</div>
<div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1"> <div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1">
{Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()} {Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()}
@@ -725,8 +723,6 @@ export default function MonitoringView() {
})()} })()}
</div> </div>
</div> </div>
</div>
</div>
<div className="bg-white p-2.5 rounded-xl border border-gray-100 shadow-sm"> <div className="bg-white p-2.5 rounded-xl border border-gray-100 shadow-sm">
<div className="text-[7px] font-bold text-slate-400 uppercase"></div> <div className="text-[7px] font-bold text-slate-400 uppercase"></div>
<div className="text-sm font-black text-slate-800 leading-tight">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}</div> <div className="text-sm font-black text-slate-800 leading-tight">{(stats.vehicleCount > 0 ? (sortBy === 'today' ? stats.totalToday : stats.totalAll) / stats.vehicleCount : 0).toFixed(0)}</div>
@@ -738,14 +734,14 @@ export default function MonitoringView() {
<div className="text-[7px] text-slate-400"></div> <div className="text-[7px] text-slate-400"></div>
</div> </div>
</div> </div>
</div> <div className="flex items-center justify-between px-2">
{/* High-Density Vehicle List - Two Columns on Tablet, One on Mobile */}
<div className="space-y-1.5">
<div className="flex items-center justify-between px-2 mb-1">
<span className="text-[9px] font-black text-slate-400 uppercase tracking-widest"></span> <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest"></span>
<span className="text-[9px] font-bold text-slate-300">{total} </span> <span className="text-[9px] font-bold text-slate-300">{total} </span>
</div> </div>
</div>
{/* Vehicle List */}
<div className="space-y-1.5">
<div className="grid grid-cols-1 gap-1.5"> <div className="grid grid-cols-1 gap-1.5">
{filteredVehicles.map((v) => ( {filteredVehicles.map((v) => (