编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>生鲜商城</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #E62E2E;
            --primary-light: #FF6B35;
            --bg: #F5F5F5;
            --text: #333;
            --text-light: #999;
            --border: #EEE;
            --white: #FFF;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
            padding-bottom: 60px;
        }
        .header {
            background: var(--primary);
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .location { color: var(--white); font-size: 13px; display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
        .search-box { flex: 1; background: var(--white); border-radius: 18px; padding: 8px 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .search-icon { color: var(--text-light); }
        .search-input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; }
        
        .banner {
            position: relative;
            height: 140px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            overflow: hidden;
        }
        .banner-content {
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--white);
            text-align: center;
        }
        .banner-emoji { font-size: 50px; margin-bottom: 10px; }
        .banner-text { font-size: 16px; font-weight: 600; }
        .banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
        .banner-dot.active { background: var(--white); width: 18px; border-radius: 3px; }
        
        .nav-grid { background: var(--white); display: grid; grid-template-columns: repeat(5, 1fr); padding: 15px 10px; gap: 10px; }
        .nav-item-grid { display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--text); }
        .nav-icon-grid { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 6px; }
        .nav-label-grid { font-size: 11px; }
        
        .section { margin: 10px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .section-more { font-size: 12px; color: var(--text-light); cursor: pointer; }
        
        .flash-sale { background: var(--white); border-radius: 12px; padding: 12px; }
        .flash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .flash-title { display: flex; align-items: center; gap: 8px; }
        .flash-title-text { font-size: 15px; font-weight: 600; color: var(--primary); }
        .flash-countdown { display: flex; gap: 4px; }
        .countdown-num { background: var(--primary); color: var(--white); padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 600; }
        
        .flash-products { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
        .flash-product { min-width: 100px; cursor: pointer; text-decoration: none; color: var(--text); }
        .flash-product-image { width: 100px; height: 100px; background: linear-gradient(135deg, #FFE4DC 0%, #FFCEC4 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 8px; }
        .flash-price { color: var(--primary); font-size: 14px; font-weight: 600; }
        .flash-original { color: var(--text-light); font-size: 11px; text-decoration: line-through; }
        
        .activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .activity-card { background: var(--white); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); }
        .activity-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
        .activity-info { flex: 1; }
        .activity-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .activity-desc { font-size: 11px; color: var(--text-light); }
        
        .product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 70px; }
        .product-card { background: var(--white); border-radius: 12px; overflow: hidden; cursor: pointer; color: var(--text); }
        .product-image { width: 100%; height: 150px; background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); display: flex; align-items: center; justify-content: center; font-size: 60px; }
        .product-info { padding: 10px; }
        .product-name { font-size: 13px; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: var(--primary); font-size: 16px; font-weight: 600; }
        .product-price small { font-size: 11px; }
        .product-add { width: 26px; height: 26px; background: var(--primary); border-radius: 50%; color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; }
        
        .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: var(--white); display: flex; border-top: 1px solid var(--border); padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); z-index: 100; }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--text-light); font-size: 11px; text-decoration: none; transition: color 0.2s; }
        .nav-item.active { color: var(--primary); }
        .nav-icon { font-size: 22px; margin-bottom: 4px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="location"><span>📍</span><span>南山区</span></div>
        <div class="search-box"><span class="search-icon">🔍</span><input type="text" class="search-input" placeholder="搜索新鲜好物" readonly></div>
    </div>
    
    <div class="banner">
        <div class="banner-content">
            <div class="banner-emoji">🥬</div>
            <div class="banner-text">新鲜有机蔬菜 限时特惠</div>
        </div>
        <div class="banner-dots">
            <div class="banner-dot active"></div>
            <div class="banner-dot"></div>
            <div class="banner-dot"></div>
        </div>
    </div>
    
    <div class="nav-grid">
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #FFF3E6;">🥬</div>
            <span class="nav-label-grid">蔬菜</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #FFEBE6;">🍎</div>
            <span class="nav-label-grid">水果</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #FFE6E6;">🥩</div>
            <span class="nav-label-grid">肉类</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #E6F2FF;">🦐</div>
            <span class="nav-label-grid">海鲜</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #FFF9E6;">🥚</div>
            <span class="nav-label-grid">禽蛋</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #F5E6FF;">🥛</div>
            <span class="nav-label-grid">乳品</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #E6FFE6;">🌾</div>
            <span class="nav-label-grid">粮油</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #FFE6F2;">🧂</div>
            <span class="nav-label-grid">调味</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #E6FFFF;">🧃</div>
            <span class="nav-label-grid">饮品</span>
        </div>
        <div class="nav-item-grid" onclick="location.href='category.html'">
            <div class="nav-icon-grid" style="background: #F2F2F2;">🍪</div>
            <span class="nav-label-grid">零食</span>
        </div>
    </div>
    
    <div class="section">
        <div class="flash-sale">
            <div class="flash-header">
                <div class="flash-title"><span>⏰</span><span class="flash-title-text">限时抢购</span></div>
                <div class="flash-countdown">
                    <span class="countdown-num">02</span><span style="color: var(--primary);">:</span>
                    <span class="countdown-num">35</span><span style="color: var(--primary);">:</span>
                    <span class="countdown-num">48</span>
                </div>
            </div>
            <div class="flash-products">
                <div class="flash-product" onclick="location.href='product.html'">
                    <div class="flash-product-image">🥬</div>
                    <div class="flash-price">¥2.99</div>
                    <div class="flash-original">¥4.99</div>
                </div>
                <div class="flash-product" onclick="location.href='product.html'">
                    <div class="flash-product-image">🍅</div>
                    <div class="flash-price">¥3.99</div>
                    <div class="flash-original">¥5.99</div>
                </div>
                <div class="flash-product" onclick="location.href='product.html'">
                    <div class="flash-product-image">🥕</div>
                    <div class="flash-price">¥1.99</div>
                    <div class="flash-original">¥3.49</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="section">
        <div class="activity-grid">
            <div class="activity-card">
                <div class="activity-icon" style="background: linear-gradient(135deg, #FF6B6B, #EE5A5A);">🎉</div>
                <div class="activity-info"><div class="activity-name">新人专享</div><div class="activity-desc">首单满20减5</div></div>
            </div>
            <div class="activity-card">
                <div class="activity-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A39D);">🏆</div>
                <div class="activity-info"><div class="activity-name">品质精选</div><div class="activity-desc">优选好物</div></div>
            </div>
            <div class="activity-card">
                <div class="activity-icon" style="background: linear-gradient(135deg, #FFB347, #FFA726);">🎊</div>
                <div class="activity-info"><div class="activity-name">节日特惠</div><div class="activity-desc">节日狂欢</div></div>
            </div>
            <div class="activity-card">
                <div class="activity-icon" style="background: linear-gradient(135deg, #A8E6CF, #88D4AB);">🌿</div>
                <div class="activity-info"><div class="activity-name">有机健康</div><div class="activity-desc">有机蔬菜</div></div>
            </div>
        </div>
    </div>
    
    <div class="section">
        <div class="section-header">
            <div class="section-title"><span>🔥</span><span>为你推荐</span></div>
            <div class="section-more">查看更多 ></div>
        </div>
        <div class="product-list">
            <div class="product-card" onclick="location.href='product.html'">
                <div class="product-image">🥬</div>
                <div class="product-info">
                    <div class="product-name">新鲜有机大白菜 约500g 产地直发</div>
                    <div class="product-bottom">
                        <div class="product-price"><small>¥</small>2.99</div>
                        <div class="product-add">+</div>
                    </div>
                </div>
            </div>
            <div class="product-card" onclick="location.href='product.html'">
                <div class="product-image">🍅</div>
                <div class="product-info">
                    <div class="product-name">新鲜番茄 约400g 沙瓤多汁</div>
                    <div class="product-bottom">
                        <div class="product-price"><small>¥</small>3.99</div>
                        <div class="product-add">+</div>
                    </div>
                </div>
            </div>
            <div class="product-card" onclick="location.href='product.html'">
                <div class="product-image">🥕</div>
                <div class="product-info">
                    <div class="product-name">新鲜胡萝卜 约300g</div>
                    <div class="product-bottom">
                        <div class="product-price"><small>¥</small>1.99</div>
                        <div class="product-add">+</div>
                    </div>
                </div>
            </div>
            <div class="product-card" onclick="location.href='product.html'">
                <div class="product-image">🍎</div>
                <div class="product-info">
                    <div class="product-name">红富士苹果 约500g 脆甜多汁</div>
                    <div class="product-bottom">
                        <div class="product-price"><small>¥</small>5.99</div>
                        <div class="product-add">+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <nav class="bottom-nav">
        <div class="nav-item active">
            <div class="nav-icon">🏠</div>
            <span>首页</span>
        </div>
        <div class="nav-item" onclick="location.href='category.html'">
            <div class="nav-icon">📦</div>
            <span>分类</span>
        </div>
        <div class="nav-item" onclick="location.href='cart.html'">
            <div class="nav-icon">🛒</div>
            <span>购物车</span>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <span>我的</span>
        </div>
    </nav>
</body>
</html>