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: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; }
        .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
        .info-item { }
        .info-label { font-size: 13px; color: #909399; margin-bottom: 4px; }
        .info-value { font-size: 14px; color: #303133; font-weight: 500; }
        .status-tag { padding: 4px 12px; border-radius: 4px; font-size: 12px; }
        .status-tag.warning { background: #fdf6ec; color: #ff976a; }
        .status-tag.success { background: #f0f9eb; color: #07c160; }
        .status-tag.info { background: #f4f4f5; color: #909399; }
        .btn { padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; }
        .btn-primary { background: #1989fa; color: #fff; }
        .btn-default { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
        .quote-summary { display: flex; gap: 16px; margin-top: 16px; }
        .quote-stat { flex: 1; padding: 16px; background: #f5f7fa; border-radius: 8px; text-align: center; }
        .quote-stat-num { font-size: 28px; font-weight: 700; color: #1989fa; }
        .quote-stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
    </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"><el-icon><Search /></el-icon><span>询价管理</span></div>
                <div class="menu-item active"><el-icon><View /></el-icon><span>询价详情</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 询价管理 / 询价详情</div>
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">询价单基本信息</span>
                        <div style="display:flex;gap:8px;">
                            <el-button @click="history.back()">返回</el-button>
                            <el-button type="primary" size="small" v-if="form.status==='draft'">发布询价</el-button>
                        </div>
                    </div>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">询价单号</div>
                            <div class="info-value">INQ202603170001</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">询价标题</div>
                            <div class="info-value">2026年3月第3周询价单</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">询价区域</div>
                            <div class="info-value">城东区域</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">状态</div>
                            <div class="info-value"><span class="status-tag warning">进行中</span></div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">发布时间</div>
                            <div class="info-value">2026-03-17 09:00</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">截止时间</div>
                            <div class="info-value">2026-03-20 18:00</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">创建人</div>
                            <div class="info-value">张三</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">创建时间</div>
                            <div class="info-value">2026-03-17 08:30</div>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">备注</div>
                        <div class="info-value" style="background:#f5f7fa;padding:12px;border-radius:8px;">本周为春季促销备货询价，请各供应商于截止时间前完成报价。</div>
                    </div>
                    <div class="quote-summary">
                        <div class="quote-stat">
                            <div class="quote-stat-num">5</div>
                            <div class="quote-stat-label">商品数量</div>
                        </div>
                        <div class="quote-stat">
                            <div class="quote-stat-num">3</div>
                            <div class="quote-stat-label">已报价供应商</div>
                        </div>
                        <div class="quote-stat">
                            <div class="quote-stat-num">2</div>
                            <div class="quote-stat-label">待报价供应商</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><span class="card-title">询价商品明细</span></div>
                    <el-table :data="productList" style="width:100%">
                        <el-table-column prop="code" label="商品编码" width="120" />
                        <el-table-column prop="name" label="商品名称" />
                        <el-table-column prop="category" label="分类" width="100" />
                        <el-table-column prop="unit" label="单位" width="80" />
                        <el-table-column prop="minPrice" label="最低报价" width="120">
                            <template #default="{ row }">
                                <span style="color:#07c160;font-weight:600;">¥{{ row.minPrice.toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="maxPrice" label="最高报价" width="120">
                            <template #default="{ row }">
                                <span style="color:#ee0a24;">¥{{ row.maxPrice.toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="avgPrice" label="平均报价" width="120">
                            <template #default="{ row }">
                                <span>¥{{ row.avgPrice.toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template #default>
                                <el-button type="primary" link size="small">查看报价</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </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 form = reactive({
                    status: 'published'
                });
                const productList = [
                    { code: 'P001', name: '新鲜猪肉', category: '肉类', unit: '斤', minPrice: 16.50, maxPrice: 19.00, avgPrice: 17.80 },
                    { code: 'P002', name: '新鲜鸡肉', category: '肉类', unit: '斤', minPrice: 13.00, maxPrice: 15.50, avgPrice: 14.20 },
                    { code: 'P003', name: '新鲜蔬菜', category: '蔬菜', unit: '斤', minPrice: 6.50, maxPrice: 9.00, avgPrice: 7.80 },
                    { code: 'P004', name: '新鲜水果', category: '水果', unit: '斤', minPrice: 10.00, maxPrice: 14.00, avgPrice: 12.00 },
                    { code: 'P005', name: '大米', category: '粮油', unit: '袋', minPrice: 65.00, maxPrice: 72.00, avgPrice: 68.50 }
                ];
                return { form, productList };
            }
        });
        const { reactive } = Vue;
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>