sqxp/docs/原型图/web/index.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">
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 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;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .topbar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .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;
        }

        .topbar-user .el-button {
            color: white;
        }

        /* 左侧菜单 */
        .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;
            transition: all 0.3s;
        }

        .menu-item:hover {
            background: #f5f7fa;
            color: #1989fa;
        }

        .menu-item.active {
            background: #ecf5ff;
            color: #1989fa;
            border-right: 3px solid #1989fa;
        }

        .menu-item .el-icon {
            font-size: 18px;
        }

        .submenu {
            padding-left: 48px;
            font-size: 13px;
        }

        /* 内容区 */
        .content {
            flex: 1;
            padding: 24px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .page-title {
            font-size: 20px;
            font-weight: 600;
            color: #303133;
        }

        .breadcrumb {
            font-size: 13px;
            color: #909399;
            margin-bottom: 8px;
        }

        /* 卡片 */
        .card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            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;
            color: #303133;
        }

        /* 数据统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }

        .stats-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }

        .stats-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }

        .stats-icon.blue { background: #ecf5ff; color: #1989fa; }
        .stats-icon.green { background: #f0f9eb; color: #07c160; }
        .stats-icon.orange { background: #fdf6ec; color: #ff976a; }
        .stats-icon.red { background: #fef0f0; color: #ee0a24; }

        .stats-info h3 {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 4px;
        }

        .stats-info p {
            font-size: 14px;
            color: #909399;
        }

        /* 表格 */
        .table-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .search-box {
            display: flex;
            gap: 12px;
        }

        .el-table {
            border-radius: 8px;
            overflow: hidden;
        }

        .el-table th {
            background: #f5f7fa !important;
            color: #606266;
            font-weight: 600;
        }

        /* 状态标签 */
        .status-tag {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-tag.primary { background: #ecf5ff; color: #1989fa; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.warning { background: #fdf6ec; color: #ff976a; }
        .status-tag.danger { background: #fef0f0; color: #ee0a24; }
        .status-tag.info { background: #f4f4f5; color: #909399; }

        /* 表单 */
        .form-section {
            margin-bottom: 24px;
        }

        .form-section-title {
            font-size: 15px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 16px;
            padding-left: 12px;
            border-left: 4px solid #1989fa;
        }

        /* 操作按钮 */
        .action-btns {
            display: flex;
            gap: 8px;
        }

        /* 响应式 */
        @media (max-width: 1400px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 弹窗样式 */
        .dialog-section {
            padding: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        /* 页面导航 */
        .page-nav {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 24px;
        }

        /* 原型导航 */
        .prototype-nav {
            position: fixed;
            top: 80px;
            right: 24px;
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            z-index: 100;
        }

        .prototype-nav h4 {
            font-size: 13px;
            color: #909399;
            margin-bottom: 12px;
        }

        .prototype-nav a {
            display: block;
            padding: 8px 16px;
            color: #606266;
            text-decoration: none;
            font-size: 13px;
            border-radius: 6px;
            margin-bottom: 4px;
        }

        .prototype-nav a:hover,
        .prototype-nav a.active {
            background: #ecf5ff;
            color: #1989fa;
        }

        /* 流程图 */
        .flow-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 40px 20px;
            flex-wrap: wrap;
        }

        .flow-step {
            background: #fff;
            border: 2px solid #1989fa;
            border-radius: 12px;
            padding: 20px 32px;
            text-align: center;
            min-width: 140px;
        }

        .flow-step .step-num {
            width: 32px;
            height: 32px;
            background: #1989fa;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-weight: 600;
        }

        .flow-step .step-title {
            font-size: 15px;
            font-weight: 600;
            color: #303133;
        }

        .flow-arrow {
            font-size: 24px;
            color: #1989fa;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="topbar">
        <div class="topbar-logo">
            <h1>叁强鲜配</h1>
            <span>运营管理后台</span>
        </div>
        <div class="topbar-user">
            <el-badge :value="3" :max="99">
                <el-button :icon="Message" circle style="color:white;background:rgba(255,255,255,0.2);border:none;" />
            </el-badge>
            <el-dropdown>
                <span style="color:white;cursor:pointer;display:flex;align-items:center;gap:8px;">
                    <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-icon></el-avatar>
                    <span>管理员</span>
                    <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </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="submenu">
                <div class="menu-item">商品分类</div>
                <div class="menu-item">商品单位</div>
                <div class="menu-item">商品列表</div>
            </div>
            <div class="menu-item">
                <el-icon><Search /></el-icon>
                <span>询价管理</span>
            </div>
            <div class="menu-item">
                <el-icon><Ticket /></el-icon>
                <span>报价管理</span>
            </div>
            <div class="menu-item">
                <el-icon><PriceTag /></el-icon>
                <span>价格管理</span>
            </div>
            <div class="menu-item">
                <el-icon><ShoppingCart /></el-icon>
                <span>订单管理</span>
            </div>
            <div class="menu-item">
                <el-icon><Van /></el-icon>
                <span>配送管理</span>
            </div>
            <div class="menu-item">
                <el-icon><Wallet /></el-icon>
                <span>结算管理</span>
            </div>
            <div class="menu-item">
                <el-icon><Document /></el-icon>
                <span>附件管理</span>
            </div>
            <div class="menu-item">
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
            </div>
        </div>

        <!-- 内容区 -->
        <div class="content">
            <!-- 页面导航 -->
            <div class="breadcrumb">首页 / 数据概览</div>

            <!-- 数据统计 -->
            <div class="stats-grid">
                <div class="stats-card">
                    <div class="stats-icon blue">
                        <el-icon><UserFilled /></el-icon>
                    </div>
                    <div class="stats-info">
                        <h3>1,286</h3>
                        <p>客户总数</p>
                    </div>
                </div>
                <div class="stats-card">
                    <div class="stats-icon green">
                        <el-icon><Shop /></el-icon>
                    </div>
                    <div class="stats-info">
                        <h3>86</h3>
                        <p>供应商数量</p>
                    </div>
                </div>
                <div class="stats-card">
                    <div class="stats-icon orange">
                        <el-icon><ShoppingCart /></el-icon>
                    </div>
                    <div class="stats-info">
                        <h3>328</h3>
                        <p>今日订单</p>
                    </div>
                </div>
                <div class="stats-card">
                    <div class="stats-icon red">
                        <el-icon><Van /></el-icon>
                    </div>
                    <div class="stats-info">
                        <h3>45</h3>
                        <p>待配送</p>
                    </div>
                </div>
            </div>

            <!-- 待处理事项 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">待处理事项</span>
                    <el-button type="primary" size="small">查看全部</el-button>
                </div>
                <el-table :data="[]" style="width:100%">
                    <el-table-column prop="type" label="事项类型" width="180">
                        <template #default>
                            <span class="status-tag warning">待审核报价</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="内容" />
                    <el-table-column prop="region" label="区域" width="120" />
                    <el-table-column prop="time" label="发布时间" width="180" />
                    <el-table-column label="操作" width="150">
                        <template #default>
                            <el-button type="primary" link>处理</el-button>
                            <el-button type="primary" link>查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 订单列表 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">最新订单</span>
                    <div class="search-box">
                        <el-input placeholder="搜索订单号" style="width:200px;" />
                        <el-select placeholder="订单状态" style="width:140px;">
                            <el-option label="待支付" value="pending_payment" />
                            <el-option label="待分配配送" value="pending_delivery" />
                            <el-option label="配送中" value="delivering" />
                            <el-option label="已完成" value="completed" />
                        </el-select>
                        <el-button type="primary">搜索</el-button>
                    </div>
                </div>
                <el-table :data="orderList" style="width:100%">
                    <el-table-column prop="orderNo" label="订单编号" width="180" />
                    <el-table-column prop="clientName" label="客户名称" width="150" />
                    <el-table-column prop="region" label="区域" width="100" />
                    <el-table-column prop="totalAmount" label="订单金额" width="120">
                        <template #default="{row}">
                            <span style="color:#ee0a24;font-weight:600;">¥{{row.totalAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="订单状态" width="130">
                        <template #default="{row}">
                            <span :class="'status-tag '+row.statusClass">{{row.statusText}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="下单时间" width="180" />
                    <el-table-column label="操作" width="180">
                        <template #default>
                            <el-button type="primary" link>查看</el-button>
                            <el-button type="primary" link>分配配送</el-button>
                            <el-button type="primary" link>调整</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-nav">
                    <el-pagination background layout="prev, pager, next" :total="100" />
                </div>
            </div>
        </div>
    </div>

    <!-- 原型导航 -->
    <div class="prototype-nav">
        <h4>页面导航</h4>
        <a href="#" class="active">首页/数据概览</a>
        <a href="#">用户管理</a>
        <a href="#">区域管理</a>
        <a href="#">商品管理</a>
        <a href="#">询价管理</a>
        <a href="#">报价管理</a>
        <a href="#">价格管理</a>
        <a href="#">订单管理</a>
        <a href="#">配送管理</a>
        <a href="#">结算管理</a>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {
                const orderList = ref([
                    { orderNo: 'ORD202603190001', clientName: 'XX餐厅', region: '城东', totalAmount: '1,286.00', statusClass: 'warning', statusText: '待支付', createTime: '2026-03-19 10:23:45' },
                    { orderNo: 'ORD202603190002', clientName: 'YY超市', region: '城西', totalAmount: '2,560.00', statusClass: 'primary', statusText: '待分配配送', createTime: '2026-03-19 09:15:22' },
                    { orderNo: 'ORD202603180056', clientName: 'ZZ食堂', region: '城南', totalAmount: '856.00', statusClass: 'info', statusText: '配送中', createTime: '2026-03-18 16:45:30' },
                    { orderNo: 'ORD202603180055', clientName: 'AA饭店', region: '城东', totalAmount: '3,200.00', statusClass: 'success', statusText: '已完成', createTime: '2026-03-18 14:20:18' },
                ]);

                return { orderList };
            }
        });

        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>