fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：固定好了

Browse Source
This commit is contained in:
许永平
2025-07-04 16:35:29 +08:00
parent aba02e0835
commit d52f0224b6
1 changed files with 75 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
nkebao/src/pages/Home.tsx
View File

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