sqxp/docs/原型图/小程序/供应商报价新增.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://cdn.jsdelivr.net/npm/vant@3/lib/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #f5f5f5; color: #333; }
        .phone-container { max-width: 414px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-height: 850px; }
        .page-header { padding: 24px 20px; color: #fff; background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%); }
        .page-header h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
        .back-btn { color: #fff; background: none; border: none; font-size: 24px; margin-bottom: 12px; }
        .content { padding: 16px; }
        .info-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        .info-label { color: #666; }
        .info-value { color: #333; font-weight: 500; }
        .divider { height: 1px; background: #f5f5f5; margin: 12px 0; }
        .section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; padding-left: 8px; border-left: 3px solid #ff976a; }
        .product-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .product-item:last-child { border-bottom: none; }
        .product-name { font-size: 14px; color: #333; flex: 1; }
        .product-unit { font-size: 12px; color: #999; margin-top: 2px; }
        .price-input { display: flex; align-items: center; gap: 4px; }
        .price-input input { width: 80px; height: 32px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; font-size: 14px; text-align: right; }
        .remark-area { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; resize: none; min-height: 100px; }
        .submit-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; padding: 16px; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,0.1); }
        .submit-btn { width: 100%; height: 44px; border-radius: 22px; background: linear-gradient(135deg, #ff976a 0%, #ff4444 100%); color: #fff; border: none; font-size: 15px; font-weight: 600; }
    </style>
</head>
<body>
    <div class="phone-container">
        <div class="page-header">
            <button class="back-btn" onclick="history.back()">&#8249;</button>
            <h2>提交报价</h2>
        </div>
        <div class="content" style="padding-bottom:80px;">
            <div class="info-card">
                <div class="info-row"><span class="info-label">询价单号</span><span class="info-value">INQ202603170001</span></div>
                <div class="info-row"><span class="info-label">询价标题</span><span class="info-value">2026年3月第3周询价单</span></div>
                <div class="info-row"><span class="info-label">询价区域</span><span class="info-value">城东区域</span></div>
                <div class="info-row"><span class="info-label">截止时间</span><span class="info-value">2026-03-20 18:00</span></div>
            </div>
            <div class="info-card">
                <div class="section-title">商品报价</div>
                <div class="product-item">
                    <div>
                        <div class="product-name">新鲜猪肉</div>
                        <div class="product-unit">参考价：&#165;18.00/斤</div>
                    </div>
                    <div class="price-input"><span>&#165;</span><input type="number" placeholder="0.00" /></div>
                </div>
                <div class="product-item">
                    <div>
                        <div class="product-name">新鲜鸡肉</div>
                        <div class="product-unit">参考价：&#165;15.00/斤</div>
                    </div>
                    <div class="price-input"><span>&#165;</span><input type="number" placeholder="0.00" /></div>
                </div>
                <div class="product-item">
                    <div>
                        <div class="product-name">新鲜蔬菜</div>
                        <div class="product-unit">参考价：&#165;8.00/斤</div>
                    </div>
                    <div class="price-input"><span>&#165;</span><input type="number" placeholder="0.00" /></div>
                </div>
                <div class="product-item">
                    <div>
                        <div class="product-name">新鲜水果</div>
                        <div class="product-unit">参考价：&#165;12.00/斤</div>
                    </div>
                    <div class="price-input"><span>&#165;</span><input type="number" placeholder="0.00" /></div>
                </div>
                <div class="product-item">
                    <div>
                        <div class="product-name">大米</div>
                        <div class="product-unit">参考价：&#165;68.00/袋</div>
                    </div>
                    <div class="price-input"><span>&#165;</span><input type="number" placeholder="0.00" /></div>
                </div>
            </div>
            <div class="info-card">
                <div class="section-title">报价备注</div>
                <textarea class="remark-area" placeholder="请输入报价备注（选填）"></textarea>
            </div>
        </div>
        <div class="submit-bar">
            <button class="submit-btn">提交报价</button>
        </div>
    </div>
</body>
</html>