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:
@@ -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) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user