shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/modules/mileage/MonitoringView.tsx
View File

@@ -708,23 +708,19 @@ 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 className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'today' ? '今日' : '累计'}总里程</div>
<div> <div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1">
<div className="text-[7px] font-bold text-slate-500 uppercase tracking-wider">{sortBy === 'today' ? '今日' : '累计'}总里程</div> {Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()}
<div className="text-lg font-black tracking-tighter leading-tight flex items-baseline gap-1"> <span className="text-[8px] text-slate-400">km</span>
{Math.round(sortBy === 'today' ? stats.totalToday : stats.totalAll).toLocaleString()} {sortBy === 'today' && stats.yesterdayTotal > 0 && (() => {
<span className="text-[8px] text-slate-400">km</span> const change = ((stats.totalToday - stats.yesterdayTotal) / stats.yesterdayTotal) * 100;
{sortBy === 'today' && stats.yesterdayTotal > 0 && (() => { const isUp = change >= 0;
const change = ((stats.totalToday - stats.yesterdayTotal) / stats.yesterdayTotal) * 100; return <span className={`text-[9px] font-bold ${isUp ? 'text-blue-400' : 'text-rose-400'}`}>{isUp ? '\u2191' : '\u2193'}{Math.abs(change).toFixed(1)}%</span>;
const isUp = change >= 0; })()}
return <span className={`text-[9px] font-bold ${isUp ? 'text-blue-400' : 'text-rose-400'}`}>{isUp ? '\u2191' : '\u2193'}{Math.abs(change).toFixed(1)}%</span>;
})()}
</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">
@@ -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) => (