sqxp/docs/原型图/web/数据统计.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 数据统计</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
        .stat-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
        .stat-icon.blue { background: #ecf5ff; color: #1989fa; }
        .stat-icon.green { background: #f0f9eb; color: #07c160; }
        .stat-icon.orange { background: #fdf6ec; color: #ff976a; }
        .stat-icon.red { background: #fef0f0; color: #ee0a24; }
        .stat-num { font-size: 32px; font-weight: 700; color: #303133; margin-bottom: 4px; }
        .stat-label { font-size: 14px; color: #909399; }
        .stat-trend { font-size: 12px; margin-top: 8px; }
        .stat-trend.up { color: #07c160; }
        .stat-trend.down { color: #ee0a24; }
        .chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .chart-placeholder { height: 300px; background: linear-gradient(135deg, #f5f7fa 0%, #ebeef5 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #c0c4cc; font-size: 14px; }
        .rank-list { }
        .rank-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f7fa; }
        .rank-item:last-child { border-bottom: none; }
        .rank-num { width: 24px; height: 24px; border-radius: 50%; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-right: 12px; }
        .rank-num.top { background: #ff976a; color: #fff; }
        .rank-info { flex: 1; }
        .rank-name { font-size: 14px; font-weight: 500; }
        .rank-region { font-size: 12px; color: #909399; }
        .rank-value { font-size: 16px; font-weight: 600; color: #1989fa; }
        .table-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    </style>
</head>
<body>
    <div id="app">
        <div class="topbar">
            <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
            <div class="topbar-user"><el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar><span>管理员</span></div>
        </div>
        <div class="main-container">
            <div class="sidebar">
                <div class="menu-item active"><el-icon><DataAnalysis /></el-icon><span>数据统计</span></div>
                <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
                <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
                <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
                <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 数据统计</div>
                <div class="stats-row">
                    <div class="stat-card">
                        <div class="stat-icon blue">&#128722;</div>
                        <div class="stat-num">1,286</div>
                        <div class="stat-label">今日订单数</div>
                        <div class="stat-trend up">&#9650; 12.5% 较昨日</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon green">&#128176;</div>
                        <div class="stat-num">&#165;58,620</div>
                        <div class="stat-label">今日交易额</div>
                        <div class="stat-trend up">&#9650; 8.3% 较昨日</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon orange">&#127974;</div>
                        <div class="stat-num">156</div>
                        <div class="stat-label">待处理配送</div>
                        <div class="stat-trend down">&#9660; 5.2% 较昨日</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon red">&#128164;</div>
                        <div class="stat-num">12</div>
                        <div class="stat-label">异常订单</div>
                        <div class="stat-trend down">&#9660; 20% 较昨日</div>
                    </div>
                </div>
                <div class="chart-row">
                    <div class="card">
                        <div class="card-header"><span class="card-title">订单趋势（近7天）</span><el-date-picker type="daterange" placeholder="选择日期范围" style="width:240px" /></div>
                        <div class="chart-placeholder">&#128202; 订单趋势图表区域</div>
                    </div>
                    <div class="card">
                        <div class="card-header"><span class="card-title">区域订单排名</span></div>
                        <div class="rank-list">
                            <div class="rank-item">
                                <div class="rank-num top">1</div>
                                <div class="rank-info"><div class="rank-name">城东区</div><div class="rank-region">386单</div></div>
                                <div class="rank-value">&#165;18,560</div>
                            </div>
                            <div class="rank-item">
                                <div class="rank-num top">2</div>
                                <div class="rank-info"><div class="rank-name">城西区</div><div class="rank-region">312单</div></div>
                                <div class="rank-value">&#165;15,280</div>
                            </div>
                            <div class="rank-item">
                                <div class="rank-num">3</div>
                                <div class="rank-info"><div class="rank-name">城南区</div><div class="rank-region">285单</div></div>
                                <div class="rank-value">&#165;12,450</div>
                            </div>
                            <div class="rank-item">
                                <div class="rank-num">4</div>
                                <div class="rank-info"><div class="rank-name">城北区</div><div class="rank-region">258单</div></div>
                                <div class="rank-value">&#165;10,890</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-row">
                    <div class="card">
                        <div class="card-header"><span class="card-title">热销商品 TOP 10</span></div>
                        <el-table :data="hotProducts" style="width:100%">
                            <el-table-column prop="rank" label="排名" width="60" />
                            <el-table-column prop="name" label="商品名称" />
                            <el-table-column prop="sales" label="销量" width="100" />
                            <el-table-column prop="amount" label="销售额" width="120" />
                        </el-table>
                    </div>
                    <div class="card">
                        <div class="card-header"><span class="card-title">客户下单排名</span></div>
                        <div class="rank-list">
                            <div class="rank-item">
                                <div class="rank-num top">1</div>
                                <div class="rank-info"><div class="rank-name">AA餐厅</div><div class="rank-region">城东区</div></div>
                                <div class="rank-value">68单</div>
                            </div>
                            <div class="rank-item">
                                <div class="rank-num top">2</div>
                                <div class="rank-info"><div class="rank-name">BB超市</div><div class="rank-region">城西区</div></div>
                                <div class="rank-value">52单</div>
                            </div>
                            <div class="rank-item">
                                <div class="rank-num">3</div>
                                <div class="rank-info"><div class="rank-name">CC商行</div><div class="rank-region">城南区</div></div>
                                <div class="rank-value">45单</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            setup() {
                const hotProducts = [
                    { rank: 1, name: '新鲜猪肉', sales: '1,286斤', amount: '¥23,148' },
                    { rank: 2, name: '新鲜蔬菜', sales: '986斤', amount: '¥7,888' },
                    { rank: 3, name: '新鲜鸡肉', sales: '756斤', amount: '¥11,340' },
                    { rank: 4, name: '新鲜水果', sales: '658斤', amount: '¥7,896' },
                    { rank: 5, name: '大米', sales: '420袋', amount: '¥28,560' }
                ];
                return { hotProducts };
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>