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; }
        .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
        .page-nav { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

        /* 比价对比表格 */
        .compare-wrapper { overflow-x: auto; }
        .compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
        .compare-table th, .compare-table td { padding: 12px 16px; border: 1px solid #ebeef5; text-align: center; font-size: 13px; }
        .compare-table th { background: #f5f7fa; font-weight: 600; color: #606266; }
        .compare-table th.supplier-col { background: #ecf5ff; color: #1989fa; min-width: 120px; }
        .compare-table td { color: #303133; }
        .compare-table .item-name { text-align: left; font-weight: 500; }
        .compare-table .price-cell { color: #07c160; font-weight: 600; }
        .compare-table .best-price { background: #f0f9eb; color: #07c160; font-weight: 700; position: relative; }
        .compare-table .best-price::after { content: '最低'; position: absolute; top: 2px; right: 2px; font-size: 10px; background: #07c160; color: #fff; padding: 1px 4px; border-radius: 2px; }
        .compare-table .total-row { background: #f5f7fa; font-weight: 700; }
        .compare-table .total-row td { font-size: 15px; }

        /* 供应商卡片 */
        .supplier-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #f5f7fa; border-radius: 8px 8px 0 0; }
        .supplier-info { display: flex; align-items: center; gap: 12px; }
        .supplier-name { font-size: 15px; font-weight: 600; color: #303133; }
        .supplier-badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; }
        .supplier-badge.recommended { background: linear-gradient(135deg, #07c160, #1989fa); color: #fff; }
        .supplier-badge.selected { background: #07c160; color: #fff; }
        .supplier-total { font-size: 20px; font-weight: 700; color: #303133; }
        .supplier-total span { font-size: 14px; color: #909399; font-weight: 400; margin-right: 4px; }

        /* 选择操作区 */
        .action-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .selected-info { display: flex; align-items: center; gap: 16px; }
        .selected-supplier { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #f0f9eb; border-radius: 8px; }
        .selected-supplier-name { font-weight: 600; color: #07c160; }
        .selected-amount { font-size: 18px; font-weight: 700; color: #07c160; }
        .no-selection { color: #909399; font-size: 14px; }

        /* 底部统计 */
        .summary-section { background: #fff; border-radius: 12px; padding: 20px; margin-top: 20px; }
        .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .summary-item { text-align: center; padding: 16px; background: #f5f7fa; border-radius: 8px; }
        .summary-item .label { font-size: 12px; color: #909399; margin-bottom: 8px; }
        .summary-item .value { font-size: 18px; font-weight: 600; color: #303133; }
        .summary-item .value.best { color: #07c160; }

        /* 左侧供应商选择列表 */
        .supplier-list-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
        .supplier-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 2px solid #ebeef5; border-radius: 8px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s; }
        .supplier-item:hover { border-color: #1989fa; }
        .supplier-item.selected { border-color: #07c160; background: #f0f9eb; }
        .supplier-item-left { display: flex; align-items: center; gap: 12px; }
        .supplier-item-name { font-weight: 600; font-size: 14px; }
        .supplier-item-sub { font-size: 12px; color: #909399; margin-top: 4px; }
        .supplier-item-right { text-align: right; }
        .supplier-item-amount { font-size: 16px; font-weight: 700; color: #07c160; }
        .supplier-item-count { font-size: 12px; color: #909399; }
    </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="action-bar">
                <div class="selected-info">
                    <span style="font-size:14px;color:#606266;">当前比价：</span>
                    <span style="font-weight:600;">2026年3月第3周询价单 - 城东区域</span>
                    <span class="status-tag info">待比价</span>
                </div>
                <div class="form-row">
                    <el-button @click="$router.back()">返回报价列表</el-button>
                    <el-button type="warning" plain>导出对比表</el-button>
                    <el-button type="primary" :disabled="!selectedSupplier">确认选择并发布价格</el-button>
                </div>
            </div>

            <!-- 供应商列表快速选择 -->
            <div class="supplier-list-card">
                <div class="form-section-title">供应商报价列表</div>
                <div class="supplier-item selected" @click="selectSupplier('supplier1')">
                    <div class="supplier-item-left">
                        <el-radio v-model="currentSelection" label="supplier1"></el-radio>
                        <div>
                            <div class="supplier-item-name">XX供应商</div>
                            <div class="supplier-item-sub">提交时间：2026-03-18 14:30 | 包含5种商品</div>
                        </div>
                    </div>
                    <div class="supplier-item-right">
                        <div class="supplier-item-amount">¥1,280.00</div>
                        <div class="supplier-item-count">总价最优</div>
                    </div>
                </div>
                <div class="supplier-item" @click="selectSupplier('supplier2')">
                    <div class="supplier-item-left">
                        <el-radio v-model="currentSelection" label="supplier2"></el-radio>
                        <div>
                            <div class="supplier-item-name">YY供应商</div>
                            <div class="supplier-item-sub">提交时间：2026-03-18 15:20 | 包含5种商品</div>
                        </div>
                    </div>
                    <div class="supplier-item-right">
                        <div class="supplier-item-amount">¥1,350.00</div>
                        <div class="supplier-item-count">3项最优价</div>
                    </div>
                </div>
                <div class="supplier-item" @click="selectSupplier('supplier3')">
                    <div class="supplier-item-left">
                        <el-radio v-model="currentSelection" label="supplier3"></el-radio>
                        <div>
                            <div class="supplier-item-name">ZZ供应商</div>
                            <div class="supplier-item-sub">提交时间：2026-03-18 16:45 | 包含5种商品</div>
                        </div>
                    </div>
                    <div class="supplier-item-right">
                        <div class="supplier-item-amount">¥1,420.00</div>
                        <div class="supplier-item-count">价格偏高</div>
                    </div>
                </div>
            </div>

            <!-- 比价对比表格 -->
            <div class="card">
                <div class="card-header">
                    <span class="card-title">报价明细对比</span>
                    <span style="font-size:13px;color:#909399;">* 绿色标注为各商品最低报价</span>
                </div>
                <div class="compare-wrapper">
                    <table class="compare-table">
                        <thead>
                            <tr>
                                <th class="item-name">商品信息</th>
                                <th>单位</th>
                                <th class="supplier-col">XX供应商</th>
                                <th class="supplier-col">YY供应商</th>
                                <th class="supplier-col">ZZ供应商</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="item-name">
                                    <div>新鲜猪肉</div>
                                    <div style="font-size:11px;color:#909399;">品类：肉类</div>
                                </td>
                                <td>斤</td>
                                <td class="best-price">25.00</td>
                                <td>26.00</td>
                                <td>27.00</td>
                            </tr>
                            <tr>
                                <td class="item-name">
                                    <div>新鲜蔬菜</div>
                                    <div style="font-size:11px;color:#909399;">品类：蔬菜</div>
                                </td>
                                <td>斤</td>
                                <td class="best-price">8.00</td>
                                <td class="best-price">8.00</td>
                                <td>9.00</td>
                            </tr>
                            <tr>
                                <td class="item-name">
                                    <div>新鲜水果</div>
                                    <div style="font-size:11px;color:#909399;">品类：水果</div>
                                </td>
                                <td>斤</td>
                                <td>12.00</td>
                                <td class="best-price">11.00</td>
                                <td>13.00</td>
                            </tr>
                            <tr>
                                <td class="item-name">
                                    <div>鸡蛋</div>
                                    <div style="font-size:11px;color:#909399;">品类：禽蛋</div>
                                </td>
                                <td>个</td>
                                <td class="best-price">6.00</td>
                                <td>6.50</td>
                                <td>6.00</td>
                            </tr>
                            <tr>
                                <td class="item-name">
                                    <div>大米</div>
                                    <div style="font-size:11px;color:#909399;">品类：粮食</div>
                                </td>
                                <td>斤</td>
                                <td>10.00</td>
                                <td>9.50</td>
                                <td class="best-price">9.00</td>
                            </tr>
                            <tr class="total-row">
                                <td colspan="2">报价总计</td>
                                <td class="price-cell" style="background:#f0f9eb;">¥1,280.00</td>
                                <td class="price-cell">¥1,350.00</td>
                                <td class="price-cell">¥1,420.00</td>
                            </tr>
                            <tr>
                                <td colspan="2">最优报价项数</td>
                                <td class="price-cell" style="background:#f0f9eb;">3项</td>
                                <td class="price-cell">2项</td>
                                <td class="price-cell">1项</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 底部统计 -->
            <div class="summary-section">
                <div class="form-section-title">比价统计</div>
                <div class="summary-grid">
                    <div class="summary-item">
                        <div class="label">供应商数量</div>
                        <div class="value">3家</div>
                    </div>
                    <div class="summary-item">
                        <div class="label">商品种类</div>
                        <div class="value">5种</div>
                    </div>
                    <div class="summary-item">
                        <div class="label">最低总报价</div>
                        <div class="value best">¥1,280.00</div>
                    </div>
                    <div class="summary-item">
                        <div class="label">价格差额</div>
                        <div class="value">¥140.00</div>
                    </div>
                </div>
                <div style="margin-top:24px;display:flex;gap:12px;justify-content:center;">
                    <el-button type="primary" size="large" style="width:220px;">确认选择 XX供应商</el-button>
                    <el-button type="success" size="large" style="width:220px;">生成价格清单</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, ref } = Vue;
        const app = createApp({
            setup() {
                const currentSelection = ref('supplier1');
                const selectedSupplier = ref('XX供应商');
                const selectSupplier = (id) => {
                    currentSelection.value = id;
                    if (id === 'supplier1') selectedSupplier.value = 'XX供应商';
                    else if (id === 'supplier2') selectedSupplier.value = 'YY供应商';
                    else selectedSupplier.value = 'ZZ供应商';
                };
                return { currentSelection, selectedSupplier, selectSupplier };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>