From c9893b337102e3f1606178a6eb70dd40e9ab304f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?= =?UTF-8?q?=E5=B9=B3?= Date: Fri, 18 Jul 2025 21:36:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?= =?UTF-8?q?=E8=BF=99=E4=B8=AA=E6=A0=B7=E5=BC=8F=E5=BE=88=E6=BC=82=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nkebao/src/pages/home/index.module.scss | 304 +++++++++++++++++++----- nkebao/src/pages/home/index.tsx | 170 +++++++++---- 2 files changed, 365 insertions(+), 109 deletions(-) diff --git a/nkebao/src/pages/home/index.module.scss b/nkebao/src/pages/home/index.module.scss index e2c392aa..1a7b7b1b 100644 --- a/nkebao/src/pages/home/index.module.scss +++ b/nkebao/src/pages/home/index.module.scss @@ -1,70 +1,260 @@ .home-page { padding: 12px; - background: #f5f5f5; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + min-height: 100vh; } -.home-cards { +// 导航栏样式 +.nav-title { display: flex; - gap: 12px; - margin-bottom: 12px; - > :global(.adm-card) { - flex: 1; + align-items: center; + justify-content: center; +} + +.nav-text { + color: var(--primary-color); + font-weight: 700; + font-size: 18px; + text-shadow: 0 2px 4px rgba(24, 142, 238, 0.2); +} + +// 统计卡片网格 +.stats-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + margin-bottom: 16px; +} + +.stat-card { + background: white; + border-radius: 12px; + padding: 12px 8px; + display: flex; + align-items: center; + gap: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } } -.home-section { - margin-bottom: 12px; - background: #fff; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0,0,0,0.03); -} - -.home-section-title { - font-size: 16px; - font-weight: 600; - margin-bottom: 15px; -} - -.home-scene-stats { - display: flex; - justify-content: space-between; - margin: 0 8px 8px 8px; -} -.home-scene-item { - flex: 1; - text-align: center; -} -.home-scene-icon { - margin: 0 auto 4px auto; -} -.home-scene-value { - font-size: 18px; - font-weight: bold; - color: #1677ff; -} -.home-scene-label { - font-size: 12px; - color: #888; -} - -.home-today-item { - text-align: center; - padding: 8px 0; - background: #f7f8fa; +.stat-icon { + width: 32px; + height: 32px; border-radius: 8px; -} -.home-today-value { - font-size: 18px; - font-weight: bold; - color: #1677ff; -} -.home-today-label { - font-size: 12px; - color: #888; + background: rgba(24, 142, 238, 0.1); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; } -.home-chart { - margin-top: 8px; +.stat-content { + flex: 1; + min-width: 0; +} + +.stat-value { + font-size: 18px; + font-weight: 700; + color: var(--primary-color); + line-height: 1.2; +} + +.stat-label { + font-size: 11px; + color: #666; + margin-top: 2px; + line-height: 1.2; +} + +// 通用区域样式 +.section { + background: white; + border-radius: 12px; + padding: 16px; + margin-bottom: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } +} + +.section-header { + margin-bottom: 12px; +} + +.section-title { + font-size: 14px; + font-weight: 600; + color: #333; + position: relative; + padding-left: 8px; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 14px; + background: var(--primary-gradient); + border-radius: 2px; + } +} + +// 场景统计网格 +.scene-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +.scene-item { + text-align: center; + padding: 8px 4px; +} + +.scene-icon { + width: 36px; + height: 36px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 6px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} + +.scene-value { + font-size: 16px; + font-weight: 700; + color: #333; + margin-bottom: 2px; + line-height: 1.2; +} + +.scene-label { + font-size: 10px; + color: #666; + line-height: 1.2; +} + +// 今日数据网格 +.today-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +.today-item { + text-align: center; + padding: 8px 4px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 8px; + transition: all 0.3s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } +} + +.today-icon { + margin-bottom: 4px; + opacity: 0.8; +} + +.today-value { + font-size: 14px; + font-weight: 700; + margin-bottom: 2px; + line-height: 1.2; +} + +.today-label { + font-size: 10px; + color: #666; + line-height: 1.2; +} + +// 图表容器 +.chart-container { width: 100%; - min-height: 100px; + min-height: 160px; + border-radius: 8px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + padding: 12px; +} + +// 响应式设计 +@media (max-width: 375px) { + .home-page { + padding: 8px; + } + + .stats-grid { + gap: 6px; + margin-bottom: 12px; + } + + .stat-card { + padding: 10px 6px; + } + + .stat-icon { + width: 28px; + height: 28px; + } + + .stat-value { + font-size: 16px; + } + + .stat-label { + font-size: 10px; + } + + .section { + padding: 12px; + margin-bottom: 8px; + } + + .scene-grid, + .today-grid { + gap: 6px; + } + + .scene-icon { + width: 32px; + height: 32px; + } + + .scene-value { + font-size: 14px; + } + + .scene-label { + font-size: 9px; + } + + .today-value { + font-size: 12px; + } + + .today-label { + font-size: 9px; + } + + .chart-container { + min-height: 140px; + padding: 8px; + } } \ No newline at end of file diff --git a/nkebao/src/pages/home/index.tsx b/nkebao/src/pages/home/index.tsx index f63752b6..b088548a 100644 --- a/nkebao/src/pages/home/index.tsx +++ b/nkebao/src/pages/home/index.tsx @@ -3,8 +3,12 @@ import { Card, NavBar, TabBar, Grid } from "antd-mobile"; import { AppOutline, UserOutline, - PieOutline, // 替换 BarChartOutline + PieOutline, ShopbagOutline, + FileOutline, + StarOutline, + StopOutline, + TeamOutline, } from "antd-mobile-icons"; import MeauMobile from "@/components/MeauMobile/MeauMoible"; import Layout from "@/components/Layout/Layout"; @@ -14,32 +18,56 @@ import { getPlanStats } from "./api"; const sceneStats = [ { - label: "公众号获客", + label: "公众号", value: 234, - icon: , + icon: , + gradient: "linear-gradient(135deg, #4caf50 0%, #45a049 100%)", }, { - label: "海报获客", + label: "海报", value: 167, - icon: , + icon: , + gradient: "linear-gradient(135deg, #ff9800 0%, #f57c00 100%)", }, { - label: "抖音获客", + label: "抖音", value: 156, - icon: , + icon: , + gradient: "linear-gradient(135deg, #2196f3 0%, #1976d2 100%)", }, { - label: "小红书获客", + label: "小红书", value: 89, - icon: , + icon: , + gradient: "linear-gradient(135deg, #e91e63 0%, #c2185b 100%)", }, ]; const todayStats = [ - { label: "朋友圈同步", value: 12 }, - { label: "群发任务", value: 8 }, - { label: "获客转化", value: "85%" }, - { label: "系统活跃度", value: "98%" }, + { + label: "朋友圈", + value: 12, + icon: , + color: "#ff6b35", + }, + { + label: "群发", + value: 8, + icon: , + color: "#ffd700", + }, + { + label: "转化率", + value: "85%", + icon: , + color: "#4caf50", + }, + { + label: "活跃度", + value: "98%", + icon: , + color: "#2196f3", + }, ]; const Home: React.FC = () => { @@ -52,68 +80,106 @@ const Home: React.FC = () => { return ( - 存客宝 + +
+ 存客宝 +
} footer={} >
- {/* 统计卡片 */} -
- -
设备数量
-
0
- - -
微信号数量
-
0
- - -
在线微信号
-
0
- + {/* 顶部统计卡片 */} +
+
+
+ +
+
+
0
+
设备数量
+
+
+
+
+ +
+
+
0
+
微信号
+
+
+
+
+ +
+
+
0
+
在线
+
+
{/* 场景获客统计 */} - -
场景获客统计
-
+
+
+ 获客统计 +
+
{sceneStats.map((item) => ( -
-
{item.icon}
-
{item.value}
-
{item.label}
+
+
+ {item.icon} +
+
{item.value}
+
{item.label}
))}
- +
{/* 今日数据 */} - -
今日数据
- +
+
+ 今日数据 +
+
{todayStats.map((item) => ( - -
-
{item.value}
-
{item.label}
+
+
{item.icon}
+
+ {item.value}
- +
{item.label}
+
))} - - +
+
- {/* 每日获客趋势（静态图表占位） */} - -
每日获客趋势
-
+ {/* 趋势图表 */} +
+
+ 获客趋势 +
+
- +
);