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, #07c160 0%, #1989fa 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; }
        .search-bar { display: flex; background: #fff; padding: 12px; border-radius: 24px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .search-input { flex: 1; border: none; outline: none; font-size: 14px; }
        .category-tabs { display: flex; overflow-x: auto; gap: 8px; padding: 0 4px 12px; margin-bottom: 12px; }
        .category-tabs::-webkit-scrollbar { display: none; }
        .category-tab { padding: 8px 16px; background: #fff; border-radius: 16px; font-size: 14px; white-space: nowrap; color: #666; flex-shrink: 0; }
        .category-tab.active { background: #07c160; color: #fff; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .product-img { width: 100%; height: 120px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; font-size: 48px; }
        .product-info { padding: 12px; }
        .product-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .product-unit { font-size: 12px; color: #999; margin-bottom: 8px; }
        .product-footer { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: #ee0a24; font-weight: 600; font-size: 16px; }
        .product-price span { font-size: 12px; }
        .add-btn { width: 28px; height: 28px; border-radius: 50%; background: #07c160; color: #fff; border: none; font-size: 20px; line-height: 28px; }
    </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">
            <div class="search-bar">
                <span style="margin-right:8px;">&#128269;</span>
                <input type="text" class="search-input" placeholder="搜索商品">
            </div>
            <div class="category-tabs">
                <div class="category-tab active">全部</div>
                <div class="category-tab">肉类</div>
                <div class="category-tab">蔬菜</div>
                <div class="category-tab">水果</div>
                <div class="category-tab">粮油</div>
                <div class="category-tab">调料</div>
            </div>
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-img">&#127828;</div>
                    <div class="product-info">
                        <div class="product-name">新鲜猪肉</div>
                        <div class="product-unit">计量单位：斤</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>18.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">&#129388;</div>
                    <div class="product-info">
                        <div class="product-name">新鲜鸡肉</div>
                        <div class="product-unit">计量单位：斤</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>15.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">&#127793;</div>
                    <div class="product-info">
                        <div class="product-name">新鲜蔬菜</div>
                        <div class="product-unit">计量单位：斤</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>8.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">&#127822;</div>
                    <div class="product-info">
                        <div class="product-name">新鲜水果</div>
                        <div class="product-unit">计量单位：斤</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>12.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">&#11088;</div>
                    <div class="product-info">
                        <div class="product-name">大米</div>
                        <div class="product-unit">计量单位：袋</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>68.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">&#127839;</div>
                    <div class="product-info">
                        <div class="product-name">食用油</div>
                        <div class="product-unit">计量单位：桶</div>
                        <div class="product-footer">
                            <div class="product-price"><span>&#165;</span>45.00</div>
                            <button class="add-btn">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>