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">
    <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, 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:hover { background: #f5f7fa; color: #1989fa; }
        .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; }
        .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; }
        .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-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid #1989fa; }
        .info-bar { display: flex; gap: 16px; background: #f9f9f9; padding: 16px; border-radius: 8px; margin-bottom: 20px; }
        .info-item { text-align: center; }
        .info-item label { font-size: 12px; color: #909399; display: block; margin-bottom: 4px; }
        .info-item span { font-size: 16px; font-weight: 600; }
        .compare-grid { display: grid; gap: 20px; }
        .supplier-card { border: 2px solid #eee; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s; }
        .supplier-card:hover { border-color: #1989fa; }
        .supplier-card.selected { border-color: #07c160; background: #f6ffed; }
        .supplier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .supplier-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
        .supplier-total { font-size: 24px; font-weight: 600; color: #07c160; }
        .supplier-total.original { color: #606266; text-decoration: line-through; font-size: 18px; margin-right: 8px; }
        .compare-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
        .compare-table th, .compare-table td { padding: 10px 12px; border: 1px solid #eee; text-align: center; font-size: 13px; }
        .compare-table th { background: #f9f9f9; font-weight: 600; color: #606266; }
        .compare-table .price { font-weight: 600; color: #07c160; }
        .compare-table .best-price { background: #f0f9eb; color: #07c160; font-weight: 700; }
        .compare-table .total-row { background: #f5f7fa; font-weight: 600; }
        .action-bar { display: flex; gap: 12px; justify-content: center; padding-top: 20px; border-top: 1px solid #eee; }
    </style>
</head>
<body>
    <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"><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><Search /></el-icon><span>询价管理</span></div>
            <div class="menu-item active"><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>

        <div class="content">
            <div class="breadcrumb">报价管理 / 报价详情 / 比价分析</div>

            <div class="card">
                <div class="card-header">
                    <span class="card-title">比价分析 - 2026年3月第3周询价单（城东区域）</span>
                    <span class="status-tag warning">待审核</span>
                </div>

                <div class="info-bar">
                    <div class="info-item">
                        <label>询价单</label>
                        <span>2026年3月第3周询价单</span>
                    </div>
                    <div class="info-item">
                        <label>区域</label>
                        <span>城东区域</span>
                    </div>
                    <div class="info-item">
                        <label>商品数量</label>
                        <span>8种</span>
                    </div>
                    <div class="info-item">
                        <label>报价供应商</label>
                        <span>3家</span>
                    </div>
                </div>
            </div>

            <div class="compare-grid">
                <!-- 供应商1 - 最低价 -->
                <div class="supplier-card selected">
                    <div class="supplier-header">
                        <div class="supplier-name">
                            <el-radio label="" checked />
                            <span>XX供应商</span>
                            <span class="status-tag success">已选择</span>
                        </div>
                        <div>
                            <span class="supplier-total"><span class="supplier-total original">¥1,350.00</span>¥1,280.00</span>
                        </div>
                    </div>
                    <table class="compare-table">
                        <thead>
                            <tr>
                                <th>商品</th>
                                <th>单位</th>
                                <th>单价（元）</th>
                                <th>是否最低</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>新鲜猪肉</td>
                                <td>斤</td>
                                <td class="best-price">25.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td>新鲜蔬菜</td>
                                <td>斤</td>
                                <td class="best-price">8.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td>新鲜水果</td>
                                <td>斤</td>
                                <td class="price">12.00</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>鸡蛋</td>
                                <td>个</td>
                                <td class="best-price">6.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="total-row">合计</td>
                                <td colspan="2" class="total-row price">¥1,280.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 供应商2 -->
                <div class="supplier-card">
                    <div class="supplier-header">
                        <div class="supplier-name">
                            <el-radio label="" />
                            <span>YY供应商</span>
                        </div>
                        <div>
                            <span class="supplier-total">¥1,350.00</span>
                        </div>
                    </div>
                    <table class="compare-table">
                        <thead>
                            <tr>
                                <th>商品</th>
                                <th>单位</th>
                                <th>单价（元）</th>
                                <th>是否最低</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>新鲜猪肉</td>
                                <td>斤</td>
                                <td class="price">26.00</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>新鲜蔬菜</td>
                                <td>斤</td>
                                <td class="best-price">8.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td>新鲜水果</td>
                                <td>斤</td>
                                <td class="best-price">11.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td>鸡蛋</td>
                                <td>个</td>
                                <td class="price">6.50</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="total-row">合计</td>
                                <td colspan="2" class="total-row price">¥1,350.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 供应商3 -->
                <div class="supplier-card">
                    <div class="supplier-header">
                        <div class="supplier-name">
                            <el-radio label="" />
                            <span>ZZ供应商</span>
                        </div>
                        <div>
                            <span class="supplier-total">¥1,420.00</span>
                        </div>
                    </div>
                    <table class="compare-table">
                        <thead>
                            <tr>
                                <th>商品</th>
                                <th>单位</th>
                                <th>单价（元）</th>
                                <th>是否最低</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>新鲜猪肉</td>
                                <td>斤</td>
                                <td class="price">27.00</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>新鲜蔬菜</td>
                                <td>斤</td>
                                <td class="price">9.00</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>新鲜水果</td>
                                <td>斤</td>
                                <td class="price">13.00</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>鸡蛋</td>
                                <td>个</td>
                                <td class="best-price">6.00</td>
                                <td><span class="status-tag success">最低</span></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="total-row">合计</td>
                                <td colspan="2" class="total-row price">¥1,420.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card">
                <div style="background:#ecf5ff;border:1px solid #b3d8fd;border-radius:8px;padding:16px;margin-bottom:16px;">
                    <div style="font-size:14px;color:#1989fa;margin-bottom:8px;">
                        <strong>比价分析结论：</strong>
                    </div>
                    <ul style="font-size:13px;color:#606266;margin:0;padding-left:20px;">
                        <li>XX供应商报价最低，总价 <strong style="color:#07c160;">¥1,280.00</strong>，比其他两家分别低 <strong>¥70.00</strong> 和 <strong>¥140.00</strong></li>
                        <li>XX供应商在 <strong>4种商品</strong> 中有 <strong>3种</strong> 为最低价</li>
                        <li>建议选用 XX供应商 的报价作为区域定价依据</li>
                    </ul>
                </div>

                <div class="action-bar">
                    <el-button @click="goBack">返回列表</el-button>
                    <el-button type="warning" @click="reject">拒绝全部</el-button>
                    <el-button type="primary" @click="approveSelect">确认选用并生成价格清单</el-button>
                </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 src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            setup() {
                const goBack = () => window.history.back();
                const reject = () => alert('拒绝全部报价');
                const approveSelect = () => alert('确认选用并生成价格清单');
                return { goBack, reject, approveSelect };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>