feat:固定好了

This commit is contained in:
许永平
2025-07-04 16:35:29 +08:00
parent aba02e0835
commit d52f0224b6

View File

@@ -140,8 +140,9 @@ export default function Home() {
}, []);
return (
<div className="flex-1 overflow-y-auto pb-24 bg-gray-50">
<header className="sticky top-0 z-10 bg-white border-b">
<div className="flex-1 flex flex-col bg-gray-50">
{/* 固定header */}
<header className="fixed top-0 left-0 right-0 z-20 bg-white border-b">
<div className="flex justify-between items-center p-4">
<h1 className="text-xl font-semibold text-blue-600"></h1>
<button className="p-2 hover:bg-gray-100 rounded-full">
@@ -150,83 +151,86 @@ export default function Home() {
</div>
</header>
<div className="p-4 space-y-6">
{/* 统计卡片 */}
<div className="grid grid-cols-3 gap-4">
<div
className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow"
onClick={handleDevicesClick}
>
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2"></span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-blue-600">{stats.totalDevices}</span>
<Smartphone className="w-6 h-6 text-blue-600" />
{/* 可滚动的内容区域 */}
<div className="flex-1 overflow-y-auto pt-16 pb-24">
<div className="p-4 space-y-6">
{/* 统计卡片 */}
<div className="grid grid-cols-3 gap-4">
<div
className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow"
onClick={handleDevicesClick}
>
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2"></span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-blue-600">{stats.totalDevices}</span>
<Smartphone className="w-6 h-6 text-blue-600" />
</div>
</div>
</div>
<div
className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow"
onClick={handleWechatClick}
>
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2"></span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-blue-600">{stats.totalWechatAccounts}</span>
<Users className="w-6 h-6 text-blue-600" />
</div>
</div>
</div>
<div className="p-4 bg-white rounded shadow">
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2">线</span>
<div className="flex items-center justify-between mb-2">
<span className="text-2xl font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
<Activity className="w-6 h-6 text-blue-600" />
</div>
<div className="w-full bg-gray-200 rounded-full h-1">
<div
className="bg-blue-600 h-1 rounded-full"
style={{ width: `${(stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100}%` }}
></div>
</div>
</div>
</div>
</div>
<div
className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer rounded shadow"
onClick={handleWechatClick}
>
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2"></span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold text-blue-600">{stats.totalWechatAccounts}</span>
<Users className="w-6 h-6 text-blue-600" />
</div>
</div>
</div>
<div className="p-4 bg-white rounded shadow">
<div className="flex flex-col">
<span className="text-sm text-gray-500 mb-2">线</span>
<div className="flex items-center justify-between mb-2">
<span className="text-2xl font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
<Activity className="w-6 h-6 text-blue-600" />
</div>
<div className="w-full bg-gray-200 rounded-full h-1">
<div
className="bg-blue-600 h-1 rounded-full"
style={{ width: `${(stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100}%` }}
></div>
</div>
</div>
</div>
</div>
{/* 场景获客统计 */}
<div className="p-4 bg-white rounded shadow">
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-semibold"></h2>
</div>
<div className="flex justify-between">
{scenarioFeatures
.sort((a, b) => b.value - a.value)
.map((scenario) => (
<div
key={scenario.id}
className="block flex-1 cursor-pointer"
onClick={() => navigate(`/scenarios/${scenario.id}`)}
>
<div className="flex flex-col items-center text-center space-y-2">
<div className={`w-12 h-12 rounded-full ${scenario.color} flex items-center justify-center`}>
<img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-6 h-6" />
</div>
<div className="text-sm font-medium">{scenario.value}</div>
<div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
{scenario.name}
{/* 场景获客统计 */}
<div className="p-4 bg-white rounded shadow">
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-semibold"></h2>
</div>
<div className="flex justify-between">
{scenarioFeatures
.sort((a, b) => b.value - a.value)
.map((scenario) => (
<div
key={scenario.id}
className="block flex-1 cursor-pointer"
onClick={() => navigate(`/scenarios/${scenario.id}`)}
>
<div className="flex flex-col items-center text-center space-y-2">
<div className={`w-12 h-12 rounded-full ${scenario.color} flex items-center justify-center`}>
<img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-6 h-6" />
</div>
<div className="text-sm font-medium">{scenario.value}</div>
<div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
{scenario.name}
</div>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
{/* 每日获客趋势 */}
<div className="p-4 bg-white rounded shadow">
<h2 className="text-lg font-semibold mb-4"></h2>
<div className="w-full h-64 relative">
<canvas ref={chartRef} />
{/* 每日获客趋势 */}
<div className="p-4 bg-white rounded shadow">
<h2 className="text-lg font-semibold mb-4"></h2>
<div className="w-full h-64 relative">
<canvas ref={chartRef} />
</div>
</div>
</div>
</div>