编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>本地生活</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #ff6633;
            --primary-dark: #e55a2b;
            --secondary: #ffcc00;
            --text: #333;
            --text-secondary: #666;
            --text-light: #999;
            --bg: #f5f5f5;
            --bg-light: #fafafa;
            --white: #fff;
            --border: #ebebeb;
            --border-light: #f0f0f0;
            --danger: #ff4d4f;
            --success: #07c160;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
        }
        html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
        
        /* App容器 */
        .app { max-width: 430px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow: hidden; }
        
        /* 页面容器 */
        .pages { flex: 1; overflow: hidden; position: relative; }
        .page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); overflow-y: auto; overflow-x: hidden; transform: translateX(100%); transition: transform 0.3s ease; -webkit-overflow-scrolling: touch; }
        .page.active { transform: translateX(0); }
        .page.has-tab { padding-bottom: calc(56px + var(--safe-bottom)); }
        
        /* TabBar */
        .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); display: flex; padding: 6px 0 calc(6px + var(--safe-bottom)); box-shadow: 0 -1px 0 var(--border); z-index: 1000; }
        .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
        .tab-item.active { opacity: 1; }
        .tab-icon { width: 24px; height: 24px; background: var(--text-light); border-radius: 50%; position: relative; }
        .tab-item.active .tab-icon { background: var(--primary); }
        .tab-text { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
        .tab-item.active .tab-text { color: var(--primary); }
        .tab-icon .badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; background: var(--danger); color: white; border-radius: 7px; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
        
        /* Header */
        .header { background: var(--white); padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
        .header-fixed { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; }
        .header-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text); }
        .header-title { flex: 1; font-size: 17px; font-weight: 600; text-align: center; }
        .header-action { font-size: 14px; color: var(--primary); }
        
        /* 搜索栏 */
        .search-wrap { padding: 10px 12px; background: var(--white); }
        .search-bar { display: flex; align-items: center; gap: 10px; background: #f5f5f5; border-radius: 18px; padding: 8px 14px; }
        .search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
        .search-icon { width: 16px; height: 16px; background: var(--text-light); border-radius: 50%; position: relative; }
        .search-icon::after { content: ''; position: absolute; width: 8px; height: 2px; background: var(--text-light); transform: rotate(45deg); bottom: -3px; right: -3px; border-radius: 1px; }
        
        /* 定位栏 */
        .location-bar { background: var(--white); padding: 10px 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-light); }
        .location-dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }
        .location-text { font-size: 14px; font-weight: 500; }
        .location-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-light); }
        
        /* 分类网格 */
        .category-section { background: var(--white); padding: 16px 8px; }
        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
        .category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .category-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .category-icon img { width: 100%; height: 100%; border-radius: 10px; }
        .category-name { font-size: 12px; color: var(--text-secondary); }
        
        /* Banner轮播 */
        .banner-section { padding: 12px; }
        .banner { border-radius: 8px; overflow: hidden; height: 120px; background: linear-gradient(135deg, #ff6633, #ff9966); position: relative; }
        .banner-content { width: 100%; height: 100%; display: flex; align-items: center; padding: 0 16px; }
        .banner-text { color: white; }
        .banner-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .banner-subtitle { font-size: 12px; opacity: 0.9; }
        .banner-img { flex: 1; display: flex; justify-content: flex-end; }
        .banner-img-placeholder { width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 8px; }
        
        /* 秒杀区块 */
        .seckill-section { background: var(--white); margin: 0 12px; border-radius: 8px; overflow: hidden; }
        .seckill-header { padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
        .seckill-title { display: flex; align-items: center; gap: 6px; }
        .seckill-title-text { font-size: 15px; font-weight: 600; color: var(--text); }
        .seckill-timer { display: flex; align-items: center; gap: 2px; }
        .timer-unit { background: var(--text); color: var(--white); padding: 1px 4px; border-radius: 2px; font-size: 11px; font-weight: 500; }
        .seckill-more { font-size: 12px; color: var(--text-light); }
        .seckill-scroll { display: flex; gap: 12px; padding: 12px; overflow-x: auto; }
        .seckill-scroll::-webkit-scrollbar { display: none; }
        .seckill-item { flex-shrink: 0; width: 90px; }
        .seckill-img { width: 90px; height: 90px; border-radius: 6px; background: #f9f9f9; margin-bottom: 6px; }
        .seckill-price { font-size: 15px; font-weight: 600; color: var(--primary); }
        .seckill-price small { font-size: 11px; }
        .seckill-orig { font-size: 11px; color: var(--text-light); text-decoration: line-through; }
        
        /* 卡片区块 */
        .section { background: var(--white); margin: 12px; border-radius: 8px; }
        .section-header { padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
        .section-title { font-size: 15px; font-weight: 600; }
        .section-more { font-size: 12px; color: var(--text-light); }
        
        /* 商家列表 */
        .merchant-list { padding: 0; }
        .merchant-item { display: flex; padding: 12px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.2s; }
        .merchant-item:last-child { border-bottom: none; }
        .merchant-item:active { background: var(--bg-light); }
        .merchant-logo { width: 70px; height: 70px; border-radius: 6px; background: #f0f0f0; flex-shrink: 0; }
        .merchant-info { flex: 1; margin-left: 12px; display: flex; flex-direction: column; justify-content: space-between; }
        .merchant-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .merchant-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
        .merchant-star { color: #ffb800; }
        .merchant-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
        .merchant-delivery { font-size: 12px; color: var(--text-light); }
        .merchant-price { font-size: 12px; color: var(--text-light); }
        .merchant-tags { display: flex; gap: 4px; flex-wrap: wrap; }
        .tag { padding: 1px 4px; border-radius: 2px; font-size: 10px; }
        .tag-red { background: #fff0eb; color: var(--primary); }
        .tag-yellow { background: #fffce8; color: #b38600; }
        
        /* 商品网格 */
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
        .product-item { background: var(--white); border-radius: 8px; overflow: hidden; cursor: pointer; }
        .product-img { height: 120px; background: #f5f5f5; }
        .product-info { padding: 10px; }
        .product-name { font-size: 14px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: var(--primary); font-weight: 600; }
        .product-price small { font-size: 11px; }
        .product-sales { font-size: 11px; color: var(--text-light); }
        
        /* 按钮 */
        .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; outline: none; transition: opacity 0.2s; }
        .btn:active { opacity: 0.8; }
        .btn-primary { background: var(--primary); color: white; }
        .btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
        .btn-ghost { background: transparent; color: var(--text); }
        .btn-block { width: 100%; }
        .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 3px; }
        
        /* 分割线 */
        .divider { height: 10px; background: var(--bg); }
        
        /* 底部操作栏 */
        .bottom-bar { position: fixed; bottom: calc(56px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 -1px 0 var(--border); z-index: 100; }
        .cart-icon-wrap { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
        .cart-icon { width: 36px; height: 36px; background: var(--text); border-radius: 50%; position: relative; }
        .cart-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; background: var(--danger); color: white; border-radius: 8px; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
        .cart-total { flex: 1; font-size: 14px; }
        .cart-total strong { color: var(--primary); font-size: 16px; }
        
        /* 购物车弹层 */
        .cart-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .cart-overlay.show { opacity: 1; pointer-events: auto; }
        .cart-sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 430px; background: var(--white); border-radius: 12px 12px 0 0; transition: transform 0.3s; z-index: 2001; max-height: 60vh; display: flex; flex-direction: column; }
        .cart-overlay.show .cart-sheet { transform: translateX(-50%) translateY(0); }
        .cart-header { padding: 14px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
        .cart-header h3 { font-size: 15px; font-weight: 600; }
        .cart-clear { font-size: 13px; color: var(--text-light); }
        .cart-items { flex: 1; overflow-y: auto; padding: 0 12px; }
        .cart-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
        .cart-item:last-child { border-bottom: none; }
        .cart-item-img { width: 44px; height: 44px; border-radius: 4px; background: #f5f5f5; flex-shrink: 0; }
        .cart-item-info { flex: 1; margin-left: 10px; }
        .cart-item-name { font-size: 14px; margin-bottom: 2px; }
        .cart-item-spec { font-size: 12px; color: var(--text-light); }
        .cart-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
        .cart-item-price { color: var(--primary); font-weight: 600; }
        .qty-ctrl { display: flex; align-items: center; gap: 10px; }
        .qty-btn { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
        .qty-minus { background: #f5f5f5; color: var(--text-secondary); }
        .qty-plus { background: var(--primary); color: white; }
        .qty-num { font-size: 14px; min-width: 20px; text-align: center; }
        .cart-footer { padding: 12px; border-top: 1px solid var(--border-light); display: flex; align-items: center; gap: 12px; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: rgba(0,0,0,0.75); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 3000; opacity: 0; pointer-events: none; transition: all 0.25s; }
        .toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        
        /* 弹窗 */
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; }
        .modal.show { display: flex; }
        .modal-content { background: var(--white); border-radius: 12px; width: 280px; overflow: hidden; }
        .modal-body { padding: 24px 20px; text-align: center; font-size: 15px; }
        .modal-footer { display: flex; }
        .modal-btn { flex: 1; padding: 14px; text-align: center; font-size: 15px; cursor: pointer; border-top: 1px solid var(--border-light); }
        .modal-btn.cancel { color: var(--text-secondary); }
        .modal-btn.confirm { color: var(--primary); font-weight: 600; }
        
        /* ========== 商家详情页 ========== */
        .shop-banner { height: 180px; background: linear-gradient(135deg, #666, #999); position: relative; }
        .shop-imgs { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; padding: 4px 8px; border-radius: 10px; font-size: 11px; }
        .shop-info { background: var(--white); padding: 14px 12px; }
        .shop-name { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
        .shop-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
        .shop-stats { display: flex; gap: 20px; padding-top: 10px; border-top: 1px solid var(--border-light); }
        .shop-stat { text-align: center; }
        .shop-stat-val { font-size: 16px; font-weight: 600; color: var(--primary); }
        .shop-stat-label { font-size: 11px; color: var(--text-light); }
        .shop-actions { display: flex; gap: 10px; margin-top: 14px; }
        .shop-action { flex: 1; padding: 10px; text-align: center; border-radius: 6px; font-size: 13px; cursor: pointer; }
        .shop-action-fav { background: #fff0eb; color: var(--primary); }
        .shop-action-share { background: #f5f5f5; color: var(--text-secondary); }
        
        /* ========== 商品详情页 ========== */
        .goods-banner { height: 280px; background: linear-gradient(135deg, #f5f5f5, #e5e5e5); display: flex; align-items: center; justify-content: center; }
        .goods-banner-placeholder { width: 120px; height: 120px; background: #ddd; border-radius: 8px; }
        .goods-info { background: var(--white); padding: 14px 12px; }
        .goods-price { color: var(--primary); font-size: 24px; font-weight: 600; margin-bottom: 8px; }
        .goods-price small { font-size: 14px; }
        .goods-name { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
        .goods-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
        .goods-specs { background: var(--white); margin-top: 10px; padding: 14px 12px; }
        .spec-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .spec-options { display: flex; flex-wrap: wrap; gap: 8px; }
        .spec-option { padding: 8px 14px; border-radius: 4px; border: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); cursor: pointer; }
        .spec-option.active { border-color: var(--primary); background: #fff0eb; color: var(--primary); }
        
        /* ========== 确认订单页 ========== */
        .address-card { background: var(--white); padding: 14px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .address-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; }
        .address-info { flex: 1; }
        .address-user { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .address-user span { font-weight: normal; color: var(--text-secondary); margin-left: 8px; }
        .address-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
        .address-arrow { color: var(--text-light); }
        
        .order-section { background: var(--white); margin-bottom: 10px; }
        .order-section-header { padding: 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--border-light); }
        .order-item { padding: 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .order-item:last-child { border-bottom: none; }
        .order-item-img { width: 50px; height: 50px; border-radius: 4px; background: #f5f5f5; flex-shrink: 0; }
        .order-item-info { flex: 1; }
        .order-item-name { font-size: 14px; margin-bottom: 2px; }
        .order-item-spec { font-size: 12px; color: var(--text-light); }
        .order-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
        .order-item-price { color: var(--primary); font-weight: 600; }
        .order-item-qty { color: var(--text-light); font-size: 12px; }
        .order-remark { padding: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .order-remark-input { flex: 1; font-size: 14px; color: var(--text-light); }
        
        /* 支付方式 */
        .pay-method { padding: 14px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .pay-method:last-child { border-bottom: none; }
        .pay-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .pay-icon-wechat { background: #07c160; }
        .pay-icon-alipay { background: #1677ff; }
        .pay-icon-balance { background: #ffb800; }
        .pay-info { flex: 1; }
        .pay-name { font-size: 14px; font-weight: 500; }
        .pay-desc { font-size: 12px; color: var(--text-light); }
        .pay-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; }
        .pay-check.active { border-color: var(--primary); background: var(--primary); }
        .pay-check.active::after { content: ''; width: 6px; height: 6px; background: white; border-radius: 50%; }
        
        /* 订单摘要 */
        .order-summary { background: var(--white); padding: 14px 12px; }
        .summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: var(--text-secondary); }
        .summary-row:last-child { margin-bottom: 0; }
        .summary-total { font-size: 15px; font-weight: 600; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; }
        .summary-total span:last-child { color: var(--primary); }
        
        /* ========== 支付成功页 ========== */
        .pay-success { background: var(--white); text-align: center; padding: 40px 20px; }
        .pay-success-icon { width: 70px; height: 70px; border-radius: 50%; background: #e8f8ef; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
        .pay-success-icon-inner { width: 40px; height: 40px; background: var(--success); border-radius: 50%; }
        .pay-success-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
        .pay-success-amount { font-size: 28px; font-weight: 600; color: var(--primary); margin-bottom: 20px; }
        .pay-success-info { font-size: 13px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 24px; }
        .pay-success-btns { display: flex; gap: 12px; }
        .pay-success-btn { flex: 1; padding: 12px; border-radius: 6px; font-size: 14px; cursor: pointer; text-align: center; }
        .pay-success-btn-detail { background: var(--primary); color: white; }
        .pay-success-btn-home { background: #fff0eb; color: var(--primary); }
        
        /* ========== 订单列表页 ========== */
        .order-tabs { background: var(--white); display: flex; border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 5; }
        .order-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: var(--text-secondary); cursor: pointer; position: relative; }
        .order-tab.active { color: var(--primary); font-weight: 600; }
        .order-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--primary); border-radius: 1px; }
        
        .order-card { background: var(--white); margin: 10px 12px; border-radius: 8px; overflow: hidden; }
        .order-card-header { padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
        .order-card-shop { font-size: 13px; font-weight: 600; }
        .order-card-arrow { color: var(--text-light); font-size: 10px; }
        .order-card-status { font-size: 13px; color: var(--primary); }
        .order-card-status.pending { color: var(--secondary); }
        .order-card-status.done { color: var(--success); }
        .order-card-status.gray { color: var(--text-light); }
        .order-card-body { padding: 12px; }
        .order-card-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .order-card-item:last-child { margin-bottom: 0; }
        .order-card-img { width: 44px; height: 44px; border-radius: 4px; background: #f5f5f5; }
        .order-card-info { flex: 1; }
        .order-card-name { font-size: 13px; margin-bottom: 2px; }
        .order-card-spec { font-size: 11px; color: var(--text-light); }
        .order-card-price { text-align: right; }
        .order-card-price-val { font-size: 13px; font-weight: 600; }
        .order-card-price-qty { font-size: 11px; color: var(--text-light); }
        .order-card-footer { padding: 10px 12px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
        .order-card-total { flex: 1; font-size: 12px; color: var(--text-secondary); }
        .order-card-total strong { color: var(--primary); }
        
        /* ========== 订单详情页 ========== */
        .order-status-bar { background: linear-gradient(135deg, var(--primary), #ff8866); padding: 24px 16px; color: white; }
        .order-status-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
        .order-status-desc { font-size: 13px; opacity: 0.9; }
        .rider-card { background: var(--white); padding: 14px 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
        .rider-avatar { width: 44px; height: 44px; background: #f0f0f0; border-radius: 50%; }
        .rider-info { flex: 1; }
        .rider-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .rider-desc { font-size: 12px; color: var(--text-light); }
        .rider-actions { display: flex; gap: 8px; }
        .rider-btn { width: 38px; height: 38px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        
        /* ========== 优惠券页 ========== */
        .coupon-tabs { background: var(--white); display: flex; border-bottom: 1px solid var(--border-light); }
        .coupon-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: var(--text-secondary); cursor: pointer; position: relative; }
        .coupon-tab.active { color: var(--primary); font-weight: 600; }
        .coupon-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--primary); border-radius: 1px; }
        
        .coupon-list { padding: 12px; }
        .coupon-item { background: var(--white); border-radius: 8px; overflow: hidden; display: flex; margin-bottom: 10px; }
        .coupon-left { background: linear-gradient(135deg, var(--primary), #ff8866); color: white; padding: 16px 14px; min-width: 100px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
        .coupon-price { font-size: 26px; font-weight: 600; }
        .coupon-price small { font-size: 13px; }
        .coupon-threshold { font-size: 11px; opacity: 0.85; margin-top: 4px; }
        .coupon-right { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
        .coupon-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .coupon-desc { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
        .coupon-time { font-size: 11px; color: var(--text-light); }
        .coupon-action { display: flex; justify-content: flex-end; align-items: center; margin-top: 6px; }
        .coupon-btn { padding: 5px 12px; border-radius: 12px; font-size: 12px; cursor: pointer; }
        .coupon-btn-use { background: var(--primary); color: white; }
        .coupon-btn-used { background: #f5f5f5; color: var(--text-light); }
        
        /* ========== 消息页 ========== */
        .msg-list { background: var(--white); }
        .msg-item { padding: 14px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .msg-item:last-child { border-bottom: none; }
        .msg-item:active { background: var(--bg-light); }
        .msg-avatar { width: 44px; height: 44px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .msg-info { flex: 1; }
        .msg-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .msg-content { font-size: 13px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .msg-right { text-align: right; flex-shrink: 0; }
        .msg-time { font-size: 11px; color: var(--text-light); }
        .msg-dot { width: 8px; height: 8px; background: var(--danger); border-radius: 50%; margin-top: 6px; margin-left: auto; }
        
        /* ========== 地址管理页 ========== */
        .addr-list { padding: 12px; }
        .addr-card { background: var(--white); border-radius: 8px; padding: 14px 12px; margin-bottom: 10px; }
        .addr-card-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
        .addr-user { font-size: 15px; font-weight: 600; }
        .addr-user span { font-weight: normal; color: var(--text-secondary); margin-left: 8px; }
        .addr-tag { padding: 2px 6px; background: var(--primary); color: white; font-size: 10px; border-radius: 2px; margin-left: 8px; }
        .addr-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
        .addr-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border-light); }
        .addr-default { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
        .addr-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; }
        .addr-check.active { border-color: var(--primary); background: var(--primary); }
        .addr-check.active::after { content: ''; width: 6px; height: 6px; background: white; border-radius: 50%; }
        .addr-actions { display: flex; gap: 16px; }
        .addr-action { font-size: 13px; color: var(--text-secondary); cursor: pointer; }
        
        /* ========== 个人中心 ========== */
        .profile-header { background: linear-gradient(135deg, var(--primary), #ff8866); padding: 28px 16px 20px; color: white; }
        .profile-user { display: flex; align-items: center; gap: 14px; }
        .profile-avatar { width: 64px; height: 64px; background: rgba(255,255,255,0.25); border-radius: 50%; }
        .profile-info { flex: 1; }
        .profile-name { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
        .profile-level { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 12px; font-size: 12px; }
        .profile-stats { display: flex; margin-top: 20px; background: rgba(255,255,255,0.15); border-radius: 8px; padding: 14px 0; }
        .profile-stat { flex: 1; text-align: center; }
        .profile-stat-val { font-size: 18px; font-weight: 600; }
        .profile-stat-label { font-size: 11px; opacity: 0.85; margin-top: 4px; }
        
        .profile-menu { background: var(--white); margin: 10px 12px; border-radius: 8px; }
        .profile-menu-item { padding: 14px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .profile-menu-item:last-child { border-bottom: none; }
        .profile-menu-item:active { background: var(--bg-light); }
        .profile-menu-icon { width: 32px; height: 32px; background: #f5f5f5; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .profile-menu-text { flex: 1; font-size: 14px; }
        .profile-menu-arrow { color: var(--text-light); font-size: 12px; }
        
        /* ========== 客服聊天页 ========== */
        .chat-page { display: flex; flex-direction: column; height: 100%; background: #f5f5f5; }
        .chat-msgs { flex: 1; overflow-y: auto; padding: 12px; }
        .chat-date { text-align: center; font-size: 11px; color: var(--text-light); margin: 12px 0; }
        .chat-msg { display: flex; margin-bottom: 14px; }
        .chat-msg.user { flex-direction: row-reverse; }
        .chat-avatar { width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; flex-shrink: 0; }
        .chat-msg.user .chat-avatar { background: var(--primary); }
        .chat-bubble { max-width: 70%; margin: 0 8px; }
        .chat-text { padding: 10px 12px; background: var(--white); border-radius: 8px; font-size: 14px; line-height: 1.5; }
        .chat-msg.user .chat-text { background: var(--primary); color: white; border-bottom-right-radius: 4px; }
        .chat-msg:not(.user) .chat-text { border-bottom-left-radius: 4px; }
        .chat-input-bar { background: var(--white); padding: 10px 12px; display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--border-light); }
        .chat-input { flex: 1; min-height: 36px; max-height: 80px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 18px; font-size: 14px; resize: none; outline: none; }
        .chat-input:focus { border-color: var(--primary); }
        .chat-send { width: 56px; height: 36px; background: var(--primary); color: white; border: none; border-radius: 18px; font-size: 13px; cursor: pointer; }
        .chat-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px; }
        .chat-quick-item { padding: 6px 12px; background: var(--white); border-radius: 14px; font-size: 12px; cursor: pointer; border: 1px solid var(--border-light); }
        
        /* ========== 登录页 ========== */
        .login-page { background: var(--white); }
        .login-header { padding: 50px 24px 40px; text-align: center; }
        .login-logo { width: 70px; height: 70px; background: var(--primary); border-radius: 16px; margin: 0 auto 16px; }
        .login-title { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
        .login-subtitle { font-size: 13px; color: var(--text-secondary); }
        .login-form { padding: 0 24px; }
        .login-input { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 14px; outline: none; transition: border-color 0.2s; }
        .login-input:focus { border-color: var(--primary); }
        .login-code-wrap { display: flex; gap: 10px; margin-bottom: 20px; }
        .login-code-wrap .login-input { margin-bottom: 0; }
        .login-code-btn { padding: 0 14px; background: #f5f5f5; border: none; border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
        .login-btn { width: 100%; padding: 14px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .login-agreement { font-size: 11px; color: var(--text-light); text-align: center; margin-top: 20px; }
        .login-agreement a { color: var(--primary); }
        .login-third { margin-top: 36px; }
        .login-third-title { text-align: center; font-size: 12px; color: var(--text-light); margin-bottom: 16px; position: relative; }
        .login-third-title::before, .login-third-title::after { content: ''; position: absolute; top: 50%; width: 50px; height: 1px; background: var(--border); }
        .login-third-title::before { left: 30px; }
        .login-third-title::after { right: 30px; }
        .login-third-btns { display: flex; justify-content: center; gap: 36px; }
        .login-third-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
        .login-third-icon { width: 44px; height: 44px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        
        /* ========== 搜索页 ========== */
.search-page { background: var(--white); }
        .search-header { padding: 10px 12px; display: flex; gap: 10px; align-items: center; background: var(--white); }
        .search-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 18px; padding: 8px 14px; }
        .search-input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
        .search-cancel { color: var(--text-secondary); font-size: 14px; cursor: pointer; }
        .search-history { padding: 16px 12px; }
        .search-history-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .search-history-title span { font-size: 14px; font-weight: 600; }
        .search-history-del { font-size: 12px; color: var(--text-light); }
        .search-history-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .search-history-tag { padding: 6px 12px; background: #f5f5f5; border-radius: 14px; font-size: 13px; cursor: pointer; }
        .search-results { }
        .search-result-item { padding: 12px; display: flex; gap: 10px; background: var(--white); border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .search-result-item:active { background: var(--bg-light); }
        .search-result-img { width: 66px; height: 66px; border-radius: 6px; background: #f0f0f0; flex-shrink: 0; }
        .search-result-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .search-result-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .search-result-tags { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
        .search-result-bottom { display: flex; justify-content: space-between; align-items: center; }
        .search-result-price { color: var(--primary); font-weight: 600; }
        .search-result-sales { font-size: 11px; color: var(--text-light); }
        
        /* 评分 */
        .rating-section { background: var(--white); margin-bottom: 10px; }
        .rating-header { padding: 12px; border-bottom: 1px solid var(--border-light); font-size: 14px; font-weight: 600; }
        .rating-content { padding: 16px 12px; text-align: center; }
        .rating-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
        .rating-star { width: 32px; height: 32px; background: #ddd; border-radius: 50%; cursor: pointer; transition: transform 0.2s; }
        .rating-star.active { background: #ffcc00; transform: scale(1.1); }
        .rating-label { font-size: 13px; color: var(--text-secondary); }
        .rating-upload { padding: 12px; border-top: 1px solid var(--border-light); }
        .rating-upload-title { font-size: 13px; margin-bottom: 10px; }
        .rating-upload-box { display: flex; flex-wrap: wrap; gap: 8px; }
        .rating-upload-item { width: 70px; height: 70px; background: #f5f5f5; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; }
        .rating-upload-add { border: 1px dashed var(--border); cursor: pointer; color: var(--text-light); font-size: 24px; }
        .rating-upload-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: rgba(0,0,0,0.5); color: white; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .rating-textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; resize: none; outline: none; margin-top: 10px; }
        
        /* 帮助页 */
        .help-list { background: var(--white); }
        .help-item { padding: 14px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); cursor: pointer; }
        .help-item:last-child { border-bottom: none; }
        .help-item:active { background: var(--bg-light); }
        .help-item-title { font-size: 14px; }
        .help-item-arrow { color: var(--text-light); font-size: 12px; }
        .service-float { position: fixed; right: 16px; bottom: calc(70px + var(--safe-bottom)); width: 44px; height: 44px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; box-shadow: 0 2px 10px rgba(255,102,51,0.4); cursor: pointer; z-index: 50; }
        
        /* 空状态 */
        .empty-state { padding: 60px 24px; text-align: center; }
        .empty-icon { width: 80px; height: 80px; background: #f5f5f5; border-radius: 50%; margin: 0 auto 16px; }
        .empty-text { font-size: 14px; color: var(--text-light); }
        
        /* 隐藏类 */
        .hidden { display: none !important; }
    </style>
</head>
<body>
    <div class="app" id="app">
        <div class="pages">
            <!-- ========== 首页 ========== -->
            <div class="page has-tab active" id="page-home">
                <div class="search-wrap">
                    <div class="search-bar" onclick="goPage('search')">
                        <div class="search-icon"></div>
                        <input type="text" placeholder="搜索商家、商品" readonly>
                    </div>
                </div>
                
                <div class="location-bar" onclick="goPage('search')">
                    <div class="location-dot"></div>
                    <span class="location-text">上海市</span>
                    <div class="location-arrow"></div>
                </div>
                
                <!-- 分类 -->
                <div class="category-section">
                    <div class="category-grid">
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #ff6633;"></div>
                            <span class="category-name">美食</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #33cc66;"></div>
                            <span class="category-name">超市</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #6699ff;"></div>
                            <span class="category-name">饮品</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #ff6699;"></div>
                            <span class="category-name">甜点</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #ffcc00;"></div>
                            <span class="category-name">水果</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #9966ff;"></div>
                            <span class="category-name">医药</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #ff9966;"></div>
                            <span class="category-name">火锅</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #66cccc;"></div>
                            <span class="category-name">鲜花</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #cc6699;"></div>
                            <span class="category-name">烘焙</span>
                        </div>
                        <div class="category-item" onclick="goPage('search')">
                            <div class="category-icon" style="background: #99cc66;"></div>
                            <span class="category-name">更多</span>
                        </div>
                    </div>
                </div>
                
                <div class="divider"></div>
                
                <!-- Banner -->
                <div class="banner-section">
                    <div class="banner">
                        <div class="banner-content">
                            <div class="banner-text">
                                <div class="banner-title">新人专享福利</div>
                                <div class="banner-subtitle">首单立减15元</div>
                            </div>
                            <div class="banner-img">
                                <div class="banner-img-placeholder"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 秒杀 -->
                <div class="seckill-section">
                    <div class="seckill-header">
                        <div class="seckill-title">
                            <span class="seckill-title-text">限时秒杀</span>
                        </div>
                        <div class="seckill-timer">
                            <span class="timer-unit">02</span>:<span class="timer-unit">35</span>:<span class="timer-unit">48</span>
                        </div>
                    </div>
                    <div class="seckill-scroll">
                        <div class="seckill-item" onclick="goPage('goods-detail')">
                            <div class="seckill-img"></div>
                            <div class="seckill-price"><small>¥</small>19.9</div>
                            <div class="seckill-orig">¥39.9</div>
                        </div>
                        <div class="seckill-item" onclick="goPage('goods-detail')">
                            <div class="seckill-img"></div>
                            <div class="seckill-price"><small>¥</small>29.9</div>
                            <div class="seckill-orig">¥59.9</div>
                        </div>
                        <div class="seckill-item" onclick="goPage('goods-detail')">
                            <div class="seckill-img"></div>
                            <div class="seckill-price"><small>¥</small>15.9</div>
                            <div class="seckill-orig">¥32.9</div>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐商家 -->
                <div class="section">
                    <div class="section-header">
                        <span class="section-title">附近商家</span>
                        <span class="section-more" onclick="goPage('search')">更多</span>
                    </div>
                    <div class="merchant-list">
                        <div class="merchant-item" onclick="goPage('shop-detail')">
                            <div class="merchant-logo"></div>
                            <div class="merchant-info">
                                <div class="merchant-name">麦当劳 McDonald's</div>
                                <div class="merchant-meta">
                                    <span class="merchant-star">★★★★★</span>
                                    <span>4.8分</span>
                                    <span>月售9852</span>
                                </div>
                                <div class="merchant-bottom">
                                    <span class="merchant-delivery">¥25/人</span>
                                    <div class="merchant-tags">
                                        <span class="tag tag-red">减</span>
                                        <span class="tag tag-yellow">首</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="merchant-item" onclick="goPage('shop-detail')">
                            <div class="merchant-logo"></div>
                            <div class="merchant-info">
                                <div class="merchant-name">汉堡王</div>
                                <div class="merchant-meta">
                                    <span class="merchant-star">★★★★</span>
                                    <span>4.7分</span>
                                    <span>月售7654</span>
                                </div>
                                <div class="merchant-bottom">
                                    <span class="merchant-delivery">¥30/人</span>
                                    <div class="merchant-tags">
                                        <span class="tag tag-red">减</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="merchant-item" onclick="goPage('shop-detail')">
                            <div class="merchant-logo"></div>
                            <div class="merchant-info">
                                <div class="merchant-name">海底捞火锅</div>
                                <div class="merchant-meta">
                                    <span class="merchant-star">★★★★★</span>
                                    <span>4.9分</span>
                                    <span>月售12345</span>
                                </div>
                                <div class="merchant-bottom">
                                    <span class="merchant-delivery">¥150/人</span>
                                    <div class="merchant-tags">
                                        <span class="tag tag-yellow">品牌</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 猜你喜欢 -->
                <div class="section">
                    <div class="section-header">
                        <span class="section-title">猜你喜欢</span>
                    </div>
                    <div class="product-grid">
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">香辣鸡腿堡 经典美味快餐</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>18.8</div>
                                    <div class="product-sales">已售2345</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">意式风情披萨 9寸</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>38.8</div>
                                    <div class="product-sales">已售1234</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">黑椒牛柳意面</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>28.8</div>
                                    <div class="product-sales">已售987</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">日式便当套餐</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>32.8</div>
                                    <div class="product-sales">已售654</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
            </div>
            
            <!-- ========== 搜索页 ========== -->
            <div class="page" id="page-search">
                <div class="search-page">
                    <div class="search-header">
                        <div class="search-input-wrap" style="flex: 1;">
                            <div class="search-icon" style="background: var(--text-light);"></div>
                            <input type="text" placeholder="搜索商家、商品" id="searchInput" onkeyup="handleSearch(event)">
                        </div>
                        <span class="search-cancel" onclick="goBack()">取消</span>
                    </div>
                    
                    <div id="searchHistory">
                        <div class="search-history">
                            <div class="search-history-title">
                                <span>搜索历史</span>
                                <span class="search-history-del" onclick="clearHistory()">清除</span>
                            </div>
                            <div class="search-history-tags">
                                <div class="search-history-tag" onclick="doSearch('汉堡')">汉堡</div>
                                <div class="search-history-tag" onclick="doSearch('奶茶')">奶茶</div>
                                <div class="search-history-tag" onclick="doSearch('火锅')">火锅</div>
                                <div class="search-history-tag" onclick="doSearch('披萨')">披萨</div>
                            </div>
                        </div>
                        
                        <div class="search-history">
                            <div class="search-history-title">
                                <span>热门搜索</span>
                            </div>
                            <div class="search-history-tags">
                                <div class="search-history-tag" onclick="doSearch('汉堡')">汉堡</div>
                                <div class="search-history-tag" onclick="doSearch('奶茶')">奶茶</div>
                                <div class="search-history-tag" onclick="doSearch('炸鸡')">炸鸡</div>
                                <div class="search-history-tag" onclick="doSearch('披萨')">披萨</div>
                                <div class="search-history-tag" onclick="doSearch('烤肉')">烤肉</div>
                                <div class="search-history-tag" onclick="doSearch('火锅')">火锅</div>
                                <div class="search-history-tag" onclick="doSearch('小龙虾')">小龙虾</div>
                                <div class="search-history-tag" onclick="doSearch('烧烤')">烧烤</div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="searchResults" class="hidden">
                        <div class="search-result-item" onclick="goPage('shop-detail')">
                            <div class="search-result-img"></div>
                            <div class="search-result-info">
                                <div class="search-result-name">汉堡王（徐家汇店）</div>
                                <div class="search-result-tags">★★★★ 4.7分 | ¥30/人 | 月售5623</div>
                                <div class="search-result-bottom">
                                    <div class="search-result-price">¥15起送</div>
                                    <div class="search-result-sales">约28分钟</div>
                                </div>
                            </div>
                        </div>
                        <div class="search-result-item" onclick="goPage('shop-detail')">
                            <div class="search-result-img"></div>
                            <div class="search-result-info">
                                <div class="search-result-name">麦当劳（南京路店）</div>
                                <div class="search-result-tags">★★★★★ 4.8分 | ¥25/人 | 月售8932</div>
                                <div class="search-result-bottom">
                                    <div class="search-result-price">¥20起送</div>
                                    <div class="search-result-sales">约35分钟</div>
                                </div>
                            </div>
                        </div>
                        <div class="search-result-item" onclick="goPage('goods-detail')">
                            <div class="search-result-img"></div>
                            <div class="search-result-info">
                                <div class="search-result-name">香辣鸡腿堡</div>
                                <div class="search-result-tags">汉堡王 | 已售2345</div>
                                <div class="search-result-bottom">
                                    <div class="search-result-price">¥18.8</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ========== 商家详情页 ========== -->
            <div class="page" id="page-shop-detail">
                <div class="header header-fixed">
                    <div class="header-back" onclick="goBack()">‹</div>
                    <div class="header-title">商家详情</div>
                    <div class="header-action"></div>
                </div>
                <div style="height: 44px;"></div>
                <div class="shop-banner">
                    <div class="shop-imgs">📷 12张</div>
                </div>
                <div class="shop-info">
                    <div class="shop-name">麦当劳 McDonald's</div>
                    <div class="shop-desc">世界知名快餐连锁品牌，提供汉堡、薯条、饮料等快餐食品，品质保证，服务至上。</div>
                    <div class="shop-stats">
                        <div class="shop-stat">
                            <div class="shop-stat-val">4.8</div>
                            <div class="shop-stat-label">评分</div>
                        </div>
                        <div class="shop-stat">
                            <div class="shop-stat-val">9852</div>
                            <div class="shop-stat-label">月销量</div>
                        </div>
                        <div class="shop-stat">
                            <div class="shop-stat-val">35分钟</div>
                            <div class="shop-stat-label">平均配送</div>
                        </div>
                    </div>
                    <div class="shop-actions">
                        <div class="shop-action shop-action-fav" onclick="toggleFav(this)">♡ 收藏</div>
                        <div class="shop-action shop-action-share" onclick="showToast('已分享')">↗ 分享</div>
                    </div>
                </div>
                
                <div class="section" style="margin: 10px 0;">
                    <div class="section-header">
                        <span class="section-title">优惠信息</span>
                    </div>
                    <div style="padding: 10px 12px;">
                        <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px;">
                            <span class="tag tag-red">减</span>
                            <span style="font-size: 13px;">满25减5，满50减12</span>
                        </div>
                        <div style="display: flex; align-items: center; gap: 6px;">
                            <span class="tag tag-yellow">首</span>
                            <span style="font-size: 13px;">新客立减3元</span>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <div class="section-header">
                        <span class="section-title">推荐商品</span>
                    </div>
                    <div class="product-grid">
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">香辣鸡腿堡</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>18.8</div>
                                    <div class="product-sales">已售2345</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">薯条（中）</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>12</div>
                                    <div class="product-sales">已售3456</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">可口可乐（中）</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>8</div>
                                    <div class="product-sales">已售4567</div>
                                </div>
                            </div>
                        </div>
                        <div class="product-item" onclick="goPage('goods-detail')">
                            <div class="product-img"></div>
                            <div class="product-info">
                                <div class="product-name">草莓圣代</div>
                                <div class="product-bottom">
                                    <div class="product-price"><small>¥</small>9</div>
                                    <div class="product-sales">已售1234</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 20px;"></div>
                
                <div class="bottom-bar">
                    <div class="cart-icon-wrap" onclick="toggleCart()">
                        <div class="cart-icon">
                            <div class="cart-badge" id="cartBadge" style="display: none;">0</div>
                        </div>
                    </div>
                    <div class="cart-total">合计: <strong id="cartTotal">¥0</strong></div>
                    <div class="btn btn-primary btn-sm" onclick="goPage('confirm-order')" id="goOrderBtn" style="display: none;">去结算</div>
                </div>
            </div>
            
            <!-- ========== 商品详情页 ========== -->
            <div class="page" id="page-goods-detail">
                <div class="header header-fixed">
                    <div class="header-back" onclick="goBack()">‹</div>
                    <div class="header-title">商品详情</div>
                    <div class="header-action"></div>
                </div>
                <div style="height: 44px;"></div>
                <div class="goods-banner">
                    <div class="goods-banner-placeholder"></div>
                </div>
                <div class="goods-info">
                    <div class="goods-price"><small>¥</small>18.80</div>
                    <div class="goods-name">香辣鸡腿堡</div>
                    <div class="goods-desc">选用优质鸡肉，裹以香脆面包屑，淋上秘制香辣酱，口感层次丰富，辣而不燥，回味无穷。</div>
                </div>
                <div class="goods-specs">
                    <div class="spec-title">规格选择</div>
                    <div class="spec-options">
                        <div class="spec-option active" onclick="selectSpec(this)">单份</div>
                        <div class="spec-option" onclick="selectSpec(this)">套餐+薯条</div>
                        <div class="spec-option" onclick="selectSpec(this)">套餐+饮料</div>
                    </div>
                </div>
                <div class="goods-specs">
                    <div class="spec-title">口味偏好</div>
                    <div class="spec-options">
                        <div class="spec-option active" onclick="selectSpec(this)">正常辣</div>
                        <div class="spec-option" onclick="selectSpec(this)">微辣</div>
                        <div class="spec-option" onclick="selectSpec(this)">中辣</div>
                        <div class="spec-option" onclick="selectSpec(this)">不要辣</div>
                    </div>
                </div>
                <div style="height: 70px;"></div>
                
                <div class="bottom-bar">
                    <div class="cart-icon-wrap" onclick="toggleCart()">
                        <div class="cart-icon">
                            <div class="cart-badge" id="cartBadge2" style="display: none;">0</div>
                        </div>
                    </div>
                    <div class="cart-total">合计: <strong id="cartTotal2">¥0</strong></div>
                    <div class="btn btn-primary btn-sm" onclick="addToCart()">加入购物车</div>
                </div>
            </div>
            
            <!-- ========== 确认订单页 ========== -->
            <div class="page" id="page-confirm-order">
                <div class="header header-fixed">
                    <div class="header-back" onclick="goBack()">‹</div>
                    <div class="header-title">确认订单</div>
                    <div class="header-action"></div>
                </div>
                <div style="height: 44px;"></div>
                
                <div class="address-card" onclick="showToast('选择地址')">
                    <div class="address-icon">📍</div>
                    <div class="address-info">
                        <div class="address-user">张三 <span>138****8888</span></div>
                        <div class="address-detail">上海市徐汇区漕溪北路88号圣爱大厦12楼1205室</div>
                    </div>
                    <div class="address-arrow">›</div>
                </div>
                
                <div class="order-section" style="margin-top: 10px;">
                    <div class="order-section-header">
                        <span>🏪</span>
                        <span style="flex: 1;">麦当劳 McDonald's</span>
                    </div>
                    <div class="order-item">
                        <div class="order-item-img"></div>
                        <div class="order-item-info">
                            <div class="order-item-name">香辣鸡腿堡</div>
                            <div class="order-item-spec">单份 | 正常辣</div>
                            <div class="order-item-bottom">
                                <div class="order-item-price">¥18.80</div>
                                <div class="order-item-qty">x1</div>
                            </div>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-item-img"></div>
                        <div class="order-item-info">
                            <div class="order-item-name">薯条（中）</div>
                            <div class="order-item-spec">中份</div>
                            <div class="order-item-bottom">
                                <div class="order-item-price">¥12.00</div>
                                <div class="order-item-qty">x1</div>
                            </div>
                        </div>
                    </div>
                    <div class="order-remark" onclick="showToast('添加备注')">
                        <span style="color: var(--text-light);">📝</span>
                        <span class="order-remark-input">口味、偏好等要求</span>
                        <span style="color: var(--text-light);">›</span>
                    </div>
                </div>
                
                <div class="order-section" style="margin-top: 10px;">
                    <div class="order-section-header">
                        <span>🎫</span>
                        <span style="flex: 1;">优惠券</span>
                        <span style="color: var(--text-light); font-size: 12px; font-weight: normal;">暂无可用 ›</span>
                    </div>
                </div>
                
                <div class="order-section" style="margin-top: 10px;">
                    <div class="order-section-header">
                        <span>💳</span>
                        <span style="flex: 1;">支付方式</span>
                    </div>
                    <div class="pay-method" onclick="selectPay(this)">
                        <div class="pay-icon pay-icon-wechat"></div>
                        <div class="pay-info">
                            <div class="pay-name">微信支付</div>
                        </div>
                        <div class="pay-check active"></div>
                    </div>
                    <div class="pay-method" onclick="selectPay(this)">
                        <div class="pay-icon pay-icon-alipay"></div>
                        <div class="pay-info">
                            <div class="pay-name">支付宝</div>
                        </div>
                        <div class="pay-check"></div>
                    </div>
                    <div class="pay-method" onclick="selectPay(this)">
                        <div class="pay-icon pay-icon-balance"></div>
                        <div class="pay-info">
                            <div class="pay-name">账户余额</div>
                            <div class="pay-desc">可用 ¥128.50</div>
                        </div>
                        <div class="pay-check"></div>
                    </div>
                </div>
                
                <div class="order-section" style="margin-top: 10px;">
                    <div class="order-section-header">
                        <span>📝</span>
                        <span style="flex: 1;">订单备注</span>
                    </div>
                    <div style="padding: 12px;">
                        <textarea class="rating-textarea" placeholder="口味、特殊要求等（选填）" style="height: 60px; resize: none; background: var(--bg);">