编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
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; }
        :root {
            --primary: #e63946;
            --secondary: #1d3557;
            --accent: #f4a261;
            --bg: #f8f9fa;
            --text: #333;
            --text-light: #666;
            --border: #e0e0e0;
        }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; }
        .phone-frame { width: 100%; min-height: 100vh; background: #fff; position: relative; overflow: hidden; }
        
        /* 页面通用样式 */
        .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); display: none; flex-direction: column; overflow-y: auto; }
        .page.active { display: flex; }
        .page-header { background: var(--primary); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
        .page-header h2 { font-size: 16px; font-weight: 500; }
        .back-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 4px 8px; }
        .page-content { flex: 1; padding: 12px; overflow-y: auto; padding-bottom: 70px; }
        .page-content::-webkit-scrollbar { width: 0; }
        
        /* 首页样式 */
        .shop-banner { background: linear-gradient(135deg, var(--primary), #ff6b6b); color: #fff; padding: 20px; border-radius: 12px; margin-bottom: 12px; }
        .shop-name { font-size: 20px; font-weight: bold; margin-bottom: 4px; }
        .shop-desc { font-size: 12px; opacity: 0.9; }
        .promo-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; margin-bottom: 12px; }
        .promo-scroll::-webkit-scrollbar { display: none; }
        .promo-item { min-width: 140px; height: 80px; background: linear-gradient(135deg, var(--accent), #ff8c42); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; padding: 10px; color: #fff; cursor: pointer; transition: transform 0.2s; }
        .promo-item:hover { transform: scale(1.02); }
        .promo-item.green { background: linear-gradient(135deg, #2a9d8f, #40c9a2); }
        .promo-item.blue { background: linear-gradient(135deg, var(--secondary), #457b9d); }
        .promo-item h4 { font-size: 14px; margin-bottom: 4px; }
        .promo-item p { font-size: 11px; opacity: 0.9; }
        
        .service-promise { display: flex; gap: 16px; padding: 12px; background: #fff; border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
        .promise-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-light); }
        .promise-icon { width: 20px; height: 20px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
        
        .category-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px; background: #fff; border-radius: 8px; margin-bottom: 12px; }
        .category-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 8px 4px; border-radius: 8px; transition: background 0.2s; }
        .category-item:hover { background: #f0f0f0; }
        .cat-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
        .cat-icon.beer { background: linear-gradient(135deg, #f4a261, #e9c46a); }
        .cat-icon.wine { background: linear-gradient(135deg, #9b2335, #bc4c51); }
        .cat-icon.whisky { background: linear-gradient(135deg, #8b5a2b, #d4a574); }
        .cat-icon.baijiu { background: linear-gradient(135deg, #c41e3a, #ff6b6b); }
        .cat-icon.soft { background: linear-gradient(135deg, #2a9d8f, #40c9a2); }
        .cat-icon.snack { background: linear-gradient(135deg, #e63946, #ff8c42); }
        .cat-name { font-size: 11px; color: var(--text); }
        
        .section-title { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 12px; }
        .section-title h3 { font-size: 15px; font-weight: 600; }
        .section-title a { font-size: 12px; color: var(--text-light); text-decoration: none; }
        
        .flash-deal { background: linear-gradient(135deg, #ff416c, #ff4b2b); border-radius: 12px; padding: 16px; color: #fff; margin-bottom: 12px; }
        .flash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .flash-title { font-size: 16px; font-weight: bold; }
        .countdown { display: flex; gap: 4px; }
        .countdown span { background: rgba(255,255,255,0.3); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
        .flash-products { display: flex; gap: 10px; overflow-x: auto; }
        .flash-product { min-width: 100px; background: #fff; border-radius: 8px; padding: 8px; cursor: pointer; transition: transform 0.2s; }
        .flash-product:hover { transform: translateY(-2px); }
        .flash-product img { width: 100%; height: 80px; background: #eee; border-radius: 4px; margin-bottom: 6px; object-fit: cover; }
        .flash-price { color: var(--primary); font-weight: bold; font-size: 14px; }
        .flash-original { text-decoration: line-through; color: var(--text-light); font-size: 11px; }
        
        .combo-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
        .combo-card { background: #fff; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .combo-card:hover { transform: scale(1.02); }
        .combo-card img { width: 100%; height: 100px; background: linear-gradient(135deg, #ddd, #eee); object-fit: cover; }
        .combo-info { padding: 10px; }
        .combo-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .combo-price { color: var(--primary); font-weight: bold; }
        
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .product-card { background: #fff; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .product-card img { width: 100%; height: 120px; background: linear-gradient(135deg, #ddd, #eee); object-fit: cover; }
        .product-info { padding: 10px; }
        .product-name { font-size: 13px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-tags { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
        .tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .tag.hot { background: #ffebee; color: var(--primary); }
        .tag.new { background: #e3f2fd; color: #1976d2; }
        .tag.sale { background: #fff3e0; color: #f57c00; }
        .product-price { display: flex; align-items: baseline; gap: 6px; }
        .price-current { color: var(--primary); font-weight: bold; font-size: 16px; }
        .price-original { text-decoration: line-through; color: var(--text-light); font-size: 11px; }
        
        /* 分类页样式 */
        .category-page { display: flex; height: 100%; }
        .category-sidebar { width: 80px; background: #f5f5f5; overflow-y: auto; }
        .sidebar-item { padding: 14px 8px; text-align: center; font-size: 12px; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s; }
        .sidebar-item.active { background: #fff; border-left-color: var(--primary); color: var(--primary); }
        
        /* 商品详情页样式 */
        .detail-image { width: 100%; height: 300px; background: linear-gradient(135deg, #ddd, #eee); position: relative; }
        .detail-image img { width: 100%; height: 100%; object-fit: cover; }
        .image-nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .image-dot { width: 8px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50%; }
        .image-dot.active { background: #fff; }
        .detail-content { padding: 16px; }
        .detail-price-wrap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
        .detail-price { color: var(--primary); font-size: 24px; font-weight: bold; }
        .detail-original { text-decoration: line-through; color: var(--text-light); font-size: 14px; }
        .detail-title { font-size: 16px; font-weight: 500; margin-bottom: 12px; line-height: 1.5; }
        .detail-tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
        .detail-params { background: #f8f8f8; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
        .param-row { display: flex; padding: 6px 0; font-size: 13px; }
        .param-label { color: var(--text-light); width: 70px; }
        .param-value { flex: 1; }
        .detail-intro { margin-bottom: 80px; }
        .detail-intro h4 { font-size: 14px; margin-bottom: 8px; }
        .detail-intro p { font-size: 13px; color: var(--text-light); line-height: 1.6; }
        
        .spec-selector { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .spec-options { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
        .spec-option { padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; cursor: pointer; }
        .spec-option.active { border-color: var(--primary); color: var(--primary); background: #ffebee; }
        
        .bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; border-top: 1px solid var(--border); padding: 10px 16px; display: flex; gap: 10px; z-index: 100; }
        .action-icon { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--text-light); cursor: pointer; }
        .action-icon svg { width: 22px; height: 22px; }
        .btn-add-cart { flex: 1; background: var(--accent); color: #fff; border: none; padding: 12px; border-radius: 24px; font-size: 14px; cursor: pointer; }
        .btn-buy-now { flex: 1; background: var(--primary); color: #fff; border: none; padding: 12px; border-radius: 24px; font-size: 14px; cursor: pointer; }
        
        /* 购物车样式 */
        .cart-item { display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 8px; margin-bottom: 10px; }
        .cart-check { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .cart-check.checked { background: var(--primary); border-color: var(--primary); }
        .cart-check.checked::after { content: '✓'; color: #fff; font-size: 12px; }
        .cart-img { width: 70px; height: 70px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 6px; }
        .cart-info { flex: 1; }
        .cart-name { font-size: 13px; margin-bottom: 6px; }
        .cart-spec { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
        .cart-bottom { display: flex; justify-content: space-between; align-items: center; }
        .cart-price { color: var(--primary); font-weight: bold; }
        .qty-control { display: flex; align-items: center; gap: 10px; }
        .qty-btn { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .qty-num { font-size: 14px; min-width: 20px; text-align: center; }
        
        .cart-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; z-index: 99; }
        .cart-total { font-size: 14px; }
        .cart-total span { color: var(--primary); font-weight: bold; font-size: 18px; }
        .btn-settle { background: var(--primary); color: #fff; border: none; padding: 12px 24px; border-radius: 24px; font-size: 14px; cursor: pointer; }
        
        /* 订单页样式 */
        .address-card { background: linear-gradient(135deg, var(--primary), #ff6b6b); color: #fff; padding: 16px; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
        .address-user { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
        .address-phone { font-size: 14px; opacity: 0.9; margin-bottom: 4px; }
        .address-detail { font-size: 13px; opacity: 0.8; }
        
        .order-section { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
        .order-section-title { font-size: 14px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .order-product { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .order-product:last-child { border-bottom: none; }
        .order-img { width: 60px; height: 60px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 6px; }
        .order-info { flex: 1; }
        .order-name { font-size: 13px; margin-bottom: 4px; }
        .order-spec { font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
        .order-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }
        .order-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; font-weight: 500; }
        .order-row.total span:last-child { color: var(--primary); font-size: 16px; }
        
        .coupon-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; }
        .coupon-value { color: var(--primary); }
        
        .remark-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 13px; resize: none; margin-top: 8px; }
        
        .pay-methods { display: flex; flex-direction: column; gap: 12px; }
        .pay-method { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 8px; cursor: pointer; }
        .pay-method.selected { border: 2px solid var(--primary); }
        .pay-icon { width: 36px; height: 36px; background: #07c160; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
        .pay-name { flex: 1; font-size: 14px; }
        .pay-check { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; }
        .pay-check.selected { background: var(--primary); border-color: var(--primary); }
        
        .btn-submit-order { width: 100%; background: var(--primary); color: #fff; border: none; padding: 14px; border-radius: 24px; font-size: 16px; cursor: pointer; margin-top: 16px; }
        
        /* 订单列表样式 */
        .order-tabs { display: flex; background: #fff; margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
        .order-tab { flex: 1; padding: 12px; text-align: center; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; }
        .order-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .order-card { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
        .order-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
        .order-status { color: var(--primary); }
        .order-items { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; }
        .order-item-thumb { width: 60px; height: 60px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 4px; flex-shrink: 0; }
        .order-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); }
        .order-total { font-size: 13px; }
        .order-actions { display: flex; gap: 8px; }
        .btn-action { padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: #fff; }
        .btn-action.primary { background: var(--primary); color: #fff; border: none; }
        
        /* 订单详情样式 */
        .express-card { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
        .express-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .rider-avatar { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
        .express-info { flex: 1; }
        .rider-name { font-size: 14px; font-weight: 500; }
        .rider-phone { font-size: 12px; color: var(--text-light); }
        .call-rider { background: #07c160; color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
        .express-timeline { border-left: 2px solid var(--border); margin-left: 20px; padding-left: 20px; }
        .timeline-item { position: relative; padding-bottom: 16px; }
        .timeline-item::before { content: ''; position: absolute; left: -24px; top: 0; width: 10px; height: 10px; background: var(--border); border-radius: 50%; }
        .timeline-item.active::before { background: var(--primary); }
        .timeline-time { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
        .timeline-content { font-size: 13px; }
        
        /* 会员中心样式 */
        .member-header { background: linear-gradient(135deg, var(--secondary), #457b9d); color: #fff; padding: 24px 16px; position: relative; }
        .member-info { display: flex; align-items: center; gap: 14px; }
        .member-avatar { width: 64px; height: 64px; background: rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .member-detail { flex: 1; }
        .member-name { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
        .member-level { display: inline-block; background: var(--accent); padding: 2px 10px; border-radius: 10px; font-size: 11px; }
        .member-assets { display: flex; justify-content: space-around; padding: 16px; background: #fff; margin: 16px; border-radius: 12px; margin-top: -20px; position: relative; z-index: 1; }
        .asset-item { text-align: center; cursor: pointer; }
        .asset-num { font-size: 18px; font-weight: bold; color: var(--primary); }
        .asset-label { font-size: 11px; color: var(--text-light); margin-top: 4px; }
        
        .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); margin-top: 16px; }
        .menu-item { background: #fff; padding: 16px 8px; text-align: center; cursor: pointer; transition: background 0.2s; }
        .menu-item:hover { background: #f5f5f5; }
        .menu-icon { width: 28px; height: 28px; margin: 0 auto 6px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
        .menu-label { font-size: 11px; }
        
        /* 限时抢购样式 */
        .seckill-header { background: linear-gradient(135deg, #ff416c, #ff4b2b); color: #fff; padding: 20px; border-radius: 12px; margin-bottom: 12px; }
        .seckill-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
        .seckill-subtitle { font-size: 12px; opacity: 0.9; margin-bottom: 12px; }
        .seckill-times { display: flex; gap: 8px; }
        .seckill-time { text-align: center; }
        .seckill-time-num { background: rgba(255,255,255,0.3); padding: 4px 8px; border-radius: 4px; font-size: 16px; font-weight: bold; }
        .seckill-time-num.active { background: #fff; color: #ff416c; }
        .seckill-time-label { font-size: 10px; margin-top: 4px; }
        .seckill-list { display: flex; flex-direction: column; gap: 10px; }
        .seckill-item { display: flex; background: #fff; border-radius: 8px; padding: 12px; cursor: pointer; transition: transform 0.2s; }
        .seckill-item:hover { transform: translateX(4px); }
        .seckill-img { width: 100px; height: 100px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 8px; margin-right: 12px; position: relative; }
        .seckill-stock { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,65,108,0.9); color: #fff; font-size: 10px; text-align: center; padding: 2px; }
        .seckill-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .seckill-name { font-size: 14px; margin-bottom: 6px; }
        .seckill-prices { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
        .seckill-price { color: #ff416c; font-size: 18px; font-weight: bold; }
        .seckill-original { text-decoration: line-through; color: var(--text-light); font-size: 12px; }
        .seckill-progress { height: 6px; background: #ffe0e6; border-radius: 3px; margin-bottom: 6px; }
        .seckill-progress-bar { height: 100%; background: linear-gradient(90deg, #ff416c, #ff6b8a); border-radius: 3px; width: 65%; }
        .seckill-btn { background: #ff416c; color: #fff; border: none; padding: 6px 16px; border-radius: 16px; font-size: 12px; cursor: pointer; align-self: flex-end; }
        
        /* 套餐详情样式 */
        .combo-detail-header { background: linear-gradient(135deg, var(--accent), #ff8c42); color: #fff; padding: 20px; border-radius: 12px; margin-bottom: 12px; }
        .combo-detail-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
        .combo-detail-price { font-size: 24px; font-weight: bold; }
        .combo-detail-original { font-size: 14px; text-decoration: line-through; opacity: 0.8; margin-left: 8px; }
        .combo-products { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
        .combo-product-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .combo-product-item:last-child { border-bottom: none; }
        .combo-product-img { width: 60px; height: 60px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 6px; }
        .combo-product-info { flex: 1; }
        .combo-product-name { font-size: 13px; margin-bottom: 4px; }
        .combo-product-qty { font-size: 11px; color: var(--text-light); }
        
        /* 优惠券样式 */
        .coupon-card { background: linear-gradient(135deg, var(--primary), #ff6b6b); color: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; cursor: pointer; transition: transform 0.2s; }
        .coupon-card:hover { transform: scale(1.02); }
        .coupon-left { text-align: center; border-right: 1px dashed rgba(255,255,255,0.5); padding-right: 16px; margin-right: 16px; }
        .coupon-value { font-size: 28px; font-weight: bold; }
        .coupon-condition { font-size: 11px; opacity: 0.9; }
        .coupon-right { flex: 1; }
        .coupon-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
        .coupon-desc { font-size: 11px; opacity: 0.9; margin-bottom: 6px; }
        .coupon-time { font-size: 10px; opacity: 0.8; }
        
        /* 地址管理样式 */
        .address-item { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
        .address-item.selected { border: 2px solid var(--primary); }
        .address-item-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
        .address-item-user { font-size: 15px; font-weight: 500; }
        .address-item-phone { font-size: 14px; }
        .address-item-tag { background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 10px; }
        .address-item-detail { font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
        .address-item-actions { display: flex; gap: 16px; font-size: 12px; color: var(--text-light); }
        .address-item-action { cursor: pointer; display: flex; align-items: center; gap: 4px; }
        
        /* 评价样式 */
        .rating-stars { display: flex; gap: 4px; margin-bottom: 12px; }
        .star { width: 28px; height: 28px; background: #ddd; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
        .star.active { background: var(--accent); }
        .rating-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
        .rating-tag { padding: 6px 12px; background: #f0f0f0; border-radius: 16px; font-size: 12px; cursor: pointer; }
        .rating-tag.selected { background: #ffebee; color: var(--primary); }
        .rating-textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 13px; resize: none; height: 120px; }
        
        /* 底部导航 */
        .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; border-top: 1px solid var(--border); display: flex; z-index: 100; }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0; cursor: pointer; color: var(--text-light); transition: color 0.2s; }
        .nav-item.active { color: var(--primary); }
        .nav-item svg { width: 22px; height: 22px; margin-bottom: 2px; }
        .nav-item span { font-size: 10px; }
        
        /* Toast提示 */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
        .toast.show { opacity: 1; }
        
        /* 营销活动卡片 */
        .activity-card { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; transition: transform 0.2s; }
        .activity-card:hover { transform: scale(1.02); }
        .activity-card.gift { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .activity-card.discount { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .activity-title { font-size: 16px; font-weight: bold; margin-bottom: 6px; }
        .activity-desc { font-size: 12px; opacity: 0.9; }
        
        /* 确认弹窗 */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; }
        .modal-overlay.show { display: flex; }
        .modal-content { background: #fff; border-radius: 12px; padding: 24px; width: 280px; text-align: center; }
        .modal-title { font-size: 16px; font-weight: 500; margin-bottom: 12px; }
        .modal-desc { font-size: 13px; color: var(--text-light); margin-bottom: 20px; }
        .modal-btns { display: flex; gap: 12px; }
        .modal-btn { flex: 1; padding: 10px; border-radius: 20px; font-size: 14px; cursor: pointer; border: none; }
        .modal-btn.cancel { background: #f0f0f0; color: var(--text); }
        .modal-btn.confirm { background: var(--primary); color: #fff; }
        
        /* 我的收藏 */
        .collect-item { display: flex; gap: 12px; background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: transform 0.2s; }
        .collect-item:hover { transform: translateX(4px); }
        .collect-img { width: 80px; height: 80px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 6px; }
        .collect-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .collect-name { font-size: 14px; margin-bottom: 6px; }
        .collect-price { color: var(--primary); font-weight: bold; font-size: 16px; }
        
        /* 退款申请 */
        .refund-reason { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 13px; resize: none; margin-top: 8px; }
        
        /*关于我们*/
        .about-content { background: #fff; border-radius: 12px; padding: 20px; }
        .about-logo { width: 80px; height: 80px; background: var(--primary); border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; }
        .about-title { text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 16px; }
        .about-text { font-size: 13px; color: var(--text-light); line-height: 1.8; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="page-header">
                <h2>酒铺优选</h2>
                <span style="font-size:12px;opacity:0.9;">定位服务</span>
            </div>
            <div class="page-content">
                <!-- 店铺信息 -->
                <div class="shop-banner" onclick="showToast('店铺信息')">
                    <div class="shop-name">酒铺优选·旗舰店</div>
                    <div class="shop-desc">30分钟必达 | 假一赔十 | 品质保障</div>
                </div>
                
                <!-- 活动Banner -->
                <div class="promo-scroll">
                    <div class="promo-item" onclick="navigateTo('flash-sale')">
                        <h4>限时抢购</h4>
                        <p>爆款直降50%</p>
                    </div>
                    <div class="promo-item green" onclick="navigateTo('new-user')">
                        <h4>新人专享</h4>
                        <p>首单立减20元</p>
                    </div>
                    <div class="promo-item blue" onclick="navigateTo('vip-day')">
                        <h4>周三会员日</h4>
                        <p>全场8.8折</p>
                    </div>
                </div>
                
                <!-- 服务承诺 -->
                <div class="service-promise">
                    <div class="promise-item"><span class="promise-icon">✓</span>30分钟必达</div>
                    <div class="promise-item"><span class="promise-icon">✓</span>假一赔十</div>
                    <div class="promise-item"><span class="promise-icon">✓</span>正品保障</div>
                    <div class="promise-item"><span class="promise-icon">✓</span>售后无忧</div>
                </div>
                
                <!-- 热门分类 -->
                <div class="category-nav">
                    <div class="category-item" onclick="navigateTo('category-beer')">
                        <div class="cat-icon beer">🍺</div>
                        <span class="cat-name">啤酒</span>
                    </div>
                    <div class="category-item" onclick="navigateTo('category-wine')">
                        <div class="cat-icon wine">🍷</div>
                        <span class="cat-name">葡萄酒</span>
                    </div>
                    <div class="category-item" onclick="navigateTo('category-whisky')">
                        <div class="cat-icon whisky">🥃</div>
                        <span class="cat-name">洋酒</span>
                    </div>
                    <div class="category-item" onclick="navigateTo('category-baijiu')">
                        <div class="cat-icon baijiu">🥂</div>
                        <span class="cat-name">白酒</span>
                    </div>
                    <div class="category-item" onclick="navigateTo('category-soft')">
                        <div class="cat-icon soft">🥤</div>
                        <span class="cat-name">软饮</span>
                    </div>
                    <div class="category-item" onclick="navigateTo('category-snack')">
                        <div class="cat-icon snack">🍿</div>
                        <span class="cat-name">零食</span>
                    </div>
                </div>
                
                <!-- 限时抢购 -->
                <div class="flash-deal">
                    <div class="flash-header">
                        <span class="flash-title">🔥 限时抢购</span>
                        <div class="countdown">
                            <span>02</span>:<span>45</span>:<span>30</span>
                        </div>
                    </div>
                    <div class="flash-products">
                        <div class="flash-product" onclick="navigateTo('product-detail')">
                            <img src="imgs/beer1.png" alt="" style="width:100%;height:80px;object-fit:cover;">
                            <div class="flash-price">¥99</div>
                            <div class="flash-original">¥198</div>
                        </div>
                        <div class="flash-product" onclick="navigateTo('product-detail')">
                            <img src="imgs/wine1.png" alt="" style="width:100%;height:80px;object-fit:cover;">
                            <div class="flash-price">¥168</div>
                            <div class="flash-original">¥328</div>
                        </div>
                        <div class="flash-product" onclick="navigateTo('product-detail')">
                            <img src="imgs/whisky1.png" alt="" style="width:100%;height:80px;object-fit:cover;">
                            <div class="flash-price">¥58</div>
                            <div class="flash-original">¥116</div>
                        </div>
                    </div>
                </div>
                
                <!-- 套餐组合 -->
                <div class="section-title">
                    <h3>精选套餐</h3>
                    <a href="#" onclick="navigateTo('combo-list');return false;">更多 ></a>
                </div>
                <div class="combo-section">
                    <div class="combo-card" onclick="navigateTo('combo-detail')">
                        <img src="imgs/combo_party.png" alt="轰趴套餐" style="width:100%;height:100px;object-fit:cover;">
                        <div class="combo-info">
                            <div class="combo-name">轰趴畅饮套餐</div>
                            <div class="combo-price">¥399 <span style="text-decoration:line-through;color:#999;font-size:11px;">¥520</span></div>
                        </div>
                    </div>
                    <div class="combo-card" onclick="navigateTo('combo-detail')">
                        <img src="imgs/combo_wine.png" alt="微醺套餐" style="width:100%;height:100px;object-fit:cover;">
                        <div class="combo-info">
                            <div class="combo-name">微醺小酌套餐</div>
                            <div class="combo-price">¥168 <span style="text-decoration:line-through;color:#999;font-size:11px;">¥236</span></div>
                        </div>
                    </div>
                </div>
                
                <!-- 猜你喜欢 -->
                <div class="section-title">
                    <h3>猜你喜欢</h3>
                </div>
                <div class="product-grid">
                    <div class="product-card" onclick="navigateTo('product-detail')">
                        <img src="imgs/beer1.png" alt="青岛啤酒" style="width:100%;height:120px;object-fit:cover;">
                        <div class="product-info">
                            <div class="product-name">青岛啤酒经典1903 330ml*24瓶整箱装</div>
                            <div class="product-tags">
                                <span class="tag hot">爆款</span>
                                <span class="tag sale">特惠</span>
                            </div>
                            <div class="product-price">
                                <span class="price-current">¥89</span>
                                <span class="price-original">¥128</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="navigateTo('product-detail')">
                        <img src="imgs/wine1.png" alt="葡萄酒" style="width:100%;height:120px;object-fit:cover;">
                        <div class="product-info">
                            <div class="product-name">拉菲传奇波尔多干红葡萄酒 750ml</div>
                            <div class="product-tags">
                                <span class="tag new">新品</span>
                            </div>
                            <div class="product-price">
                                <span class="price-current">¥168</span>
                                <span class="price-original">¥298</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="navigateTo('product-detail')">
                        <img src="imgs/whisky1.png" alt="威士忌" style="width:100%;height:120px;object-fit:cover;">
                        <div class="product-info">
                            <div class="product-name">尊尼获加黑牌苏格兰威士忌 700ml</div>
                            <div class="product-tags">
                                <span class="tag hot">热卖</span>
                            </div>
                            <div class="product-price">
                                <span class="price-current">¥238</span>
                                <span class="price-original">¥328</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="navigateTo('product-detail')">
                        <img src="imgs/baijiu1.png" alt="白酒" style="width:100%;height:120px;object-fit:cover;">
                        <div class="product-info">
                            <div class="product-name">茅台王子酒 53度 500ml 酱香型白酒</div>
                            <div class="product-tags">
                                <span class="tag hot">爆款</span>
                                <span class="tag new">新品</span>
                            </div>
                            <div class="product-price">
                                <span class="price-current">¥458</span>
                                <span class="price-original">¥618</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="bottom-nav">
                <div class="nav-item active" onclick="navigateTo('home')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                    <span>首页</span>
                </div>
                <div class="nav-item" onclick="navigateTo('category')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                    <span>分类</span>
                </div>
                <div class="nav-item" onclick="navigateTo('flash-sale')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></svg>
                    <span>抢购</span>
                </div>
                <div class="nav-item" onclick="navigateTo('cart')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    <span>购物车</span>
                </div>
                <div class="nav-item" onclick="navigateTo('member')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 商品分类页 -->
        <div class="page" id="page-category">
            <div class="page-header">
                <button class="back-btn" onclick="goBack()">←</button>
                <h2>商品分类</h2>
                <button class="back-btn" onclick="navigateTo('search')">🔍</button>
            </div>
            <div class="category-page" style="flex:1;">
                <div class="category-sidebar">
                    <div class="sidebar-item active" onclick="navigateTo('category-beer')">全部</div>
                    <div class="sidebar-item" onclick="navigateTo('category-beer')">啤酒</div>
                    <div class="sidebar-item" onclick="navigateTo('category-wine')">葡萄酒</div>
                    <div class="sidebar-item" onclick="navigateTo('category-whisky')">洋酒</div>
                    <div class="sidebar-item" onclick="navigateTo('category-baijiu')">白酒</div>
                    <div class="sidebar-item" onclick="navigateTo('category-soft')">软饮</div>
                    <div class="sidebar-item" onclick="navigateTo('category-snack')">零食</div>
                </div>
                <div class="page-content" style="padding-bottom:12px;">
                    <div class="section-title">
                        <h3>全部商品</h3>
                        <a href="#" onclick="navigateTo('search');return false;">搜索</a>
                    </div>
                    <div style="display:flex;gap:8px;margin-bottom:12px;">
                        <div style="flex:1;padding:8px;background:#fff;border-radius:6px;font-size:12px;cursor:pointer;" onclick="showToast('筛选')">筛选 ↑↓</div>
                        <div style="flex:1;padding:8px;background:#fff;border-radius:6px;font-size:12px;cursor:pointer;" onclick="showToast('排序')">排序</div>
                    </div>
                    <div class="product-grid">
                        <div class="product-card" onclick="navigateTo('product-detail')">
                            <img src="imgs/beer1.png" alt="" style="width:100%;height:120px;object-fit:cover;">
                            <div class="product-info">
                                <div class="product-name">青岛啤酒经典1903 330ml*24瓶</div>
                                <div class="product-tags"><span class="tag hot">爆款</span></div>
                                <div class="product-price"><span class="price-current">¥89</span><span class="price-original">¥128</span></div>
                            </div>
                        </div>
                        <div class="product-card" onclick="navigateTo('product-detail')">
                            <img src="imgs/wine1.png" alt="" style="width:100%;height:120px;object-fit:cover;">
                            <div class="product-info">
                                <div class="product-name">拉菲传奇波尔多干红 750ml</div>
                                <div class="product-tags"><span class="tag new">新品</span></div>
                                <div class="product-price"><span class="price-current">¥168</span><span class="price-original">¥298</span></div>
                            </div>
                        </div>
                        <div class="product-card" onclick="navigateTo('product-detail')">
                            <img src="imgs/whisky1.png" alt="" style="width:100%;height:120px;object-fit:cover;">
                            <div class="product-info">
                                <div class="product-name">尊尼获加黑牌威士忌 700ml</div>
                                <div class="product-tags"><span class="tag hot">热卖</span></div>
                                <div class="product-price"><span class="price-current">¥238</span><span class="price-original">¥328</span></div>
                            </div>
                        </div>
                        <div class="product-card" onclick="navigateTo('product-detail')">
                            <img src="imgs/baijiu1.png" alt="" style="width:100%;height:120px;object-fit:cover;">
                            <div class="product-info">
                                <div class="product-name">茅台王子酒 53度 500ml</div>
                                <div class="product-tags"><span class="tag hot">爆款</span></div>
                                <div class="product-price"><span class="price-current">¥458</span><span class="price-original">¥618</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商品详情页 -->
        <div class="page" id="page-product-detail">
            <div class="page-header" style="background:transparent;position:absolute;z-index:10;width:100%;">
                <button class="back-btn" onclick="goBack()" style="background:rgba(0,0,0,0.3);border-radius:50%;">←</button>
                <div style="display:flex;gap:8px;">
                    <button class="back-btn" style="background:rgba(0,0,0,0.3);border-radius:50%;">⭐</button>
                    <button class="back-btn" style="background:rgba(0,0,0,0.3);border-radius:50%;">↗</button>
                </div>
            </div>
            <div class="detail-image">
                <img src="imgs/beer1.png" alt="商品图片" style="width:100%;height:300px;object-fit:cover;">
                <div class="image-nav">
                    <div class="image-dot active"></div>
                    <div class="image-dot"></div>
                    <div class="image-dot"></div>
                </div>
            </div>
            <div class="page-content" style="padding-bottom:0;">
                <div class="detail-price-wrap">
                    <span class="detail-price">¥89</span>
                    <span class="detail-original">¥128</span>
                </div>
                <div class="detail-title">青岛啤酒经典1903 330ml*24瓶整箱装 优质啤酒</div>
                <div class="detail-tags">
                    <span class="tag hot">爆款</span>
                    <span class="tag sale">特惠</span>
                    <span class="tag new">新品</span>
                </div>
                
                <div class="spec-selector" onclick="showToast('选择规格')">
                    <span>选择</span>
                    <span>330ml*6瓶 / 330ml*12瓶 / 330ml*24瓶 ></span>
                </div>
                <div style="padding:8px 0;">
                    <span style="font-size:12px;color:#666;">已选: 330ml*24瓶</span>
                </div>
                
                <div class="detail-params">
                    <div class="param-row"><span class="param-label">品牌</span><span class="param-value">青岛啤酒</span></div>
                    <div class="param-row"><span class="param-label">规格</span><span class="param-value">330ml*24瓶</span></div>
                    <div class="param-row"><span class="param-label">产地</span><span class="param-value">中国山东青岛</span></div>
                    <div class="param-row"><span class="param-label">酒精度</span><span class="param-value">4.0%vol</span></div>
                    <div class="param-row"><span class="param-label">保质期</span><span class="param-value">365天</span></div>
                </div>
                
                <div class="detail-intro">
                    <h4>商品介绍</h4>
                    <p>青岛啤酒经典1903，传承百年酿造工艺，选用优质大麦和啤酒花，口感醇厚回甘，是朋友聚会、家庭聚餐的理想选择。采用深色玻璃瓶避光保存，确保每一瓶都新鲜如初。</p>
                </div>
            </div>
            
            <div class="bottom-bar">
                <div class="action-icon" onclick="showToast('已收藏')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                    <span>收藏</span>
                </div>
                <div class="action-icon" onclick="navigateTo('cart')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    <span>购物车</span>
                </div>
                <button class="btn-add-cart" onclick="addToCart()">加入购物车</button>
                <button class="btn-buy-now" onclick="navigateTo('confirm-order')">立即购买</button>
            </div>
        </div>
        
        <!-- 购物车页 -->
        <div class="page" id="page-cart">
            <div class="page-header">
                <button class="back-btn" onclick="goBack()">←</button>
                <h2>购物车</h2>
                <span style="font-size:12px;cursor:pointer;" onclick="showToast('管理')">管理</span>
            </div>
            <div class="page-content">
                <div class="cart-item">
                    <div class="cart-check checked" onclick="toggleCheck(this)"></div>
                    <div class="cart-img" style="background-image:url('imgs/beer1.png');background-size:cover;background-position:center;"></div>
                    <div class="cart-info">
                        <div class="cart-name">青岛啤酒经典1903 330ml*24瓶</div>
                        <div class="cart-spec">规格：330ml*24瓶</div>
                        <div class="cart-bottom">
                            <span class="cart-price">¥89</span>
                            <div class="qty-control">
                                <div class="qty-btn" onclick="changeQty(this, -1)">-</div>
                                <span class="qty-num">1</span>
                                <div class="qty-btn" onclick="changeQty(this, 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="cart-item">
                    <div class="cart-check" onclick="toggleCheck(this)"></div>
                    <div class="cart-img" style="background-image:url('imgs/wine1.png');background-size:cover;background-position:center;"></div>
                    <div class="cart-info">
                        <div class="cart-name">拉菲传奇波尔多干红 750ml</div>
                        <div class="cart-spec">规格：750ml</div>
                        <div class="cart-bottom">
                            <span class="cart-price">¥168</span>
                            <div class="qty-control">
                                <div class="qty-btn" onclick="changeQty(this, -1)">-</div>
                                <span class="qty-num">2</span>
                                <div class="qty-btn" onclick="changeQty(this, 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="cart-item">
                    <div class="cart-check checked" onclick="toggleCheck(this)"></div>
                    <div class="cart-img" style="background-image:url('imgs/whisky1.png');background-size:cover;background-position:center;"></div>
                    <div class="cart-info">
                        <div class="cart-name">尊尼获加黑牌威士忌 700ml</div>
                        <div class="cart-spec">规格：700ml</div>
                        <div class="cart-bottom">
                            <span class="cart-price">¥238</span>
                            <div class="qty-control">
                                <div class="qty-btn" onclick="changeQty(this, -1)">-</div>
                                <span class="qty-num">1</span>
                                <div class="qty-btn" onclick="changeQty(this, 1)">+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="cart-footer">
                <div class="cart-total">合计：<span>¥327</span></div>
                <button class="btn-settle" onclick="navigateTo('confirm-order')">去结算(3件)</button>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item" onclick="navigateTo('home')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                    <span>首页</span>
                </div>
                <div class="nav-item" onclick="navigateTo('category')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                    <span>分类</span>
                </div>
                <div class="nav-item" onclick="navigateTo('flash-sale')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></svg>
                    <span>抢购</span>
                </div>
                <div class="nav-item active" onclick="navigateTo('cart')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    <span>购物车</span>
                </div>
                <div class="nav-item" onclick="navigateTo('member')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 确认订单页 -->
        <div class="page" id="page-confirm-order">
            <div class="page-header">
                <button class="back-btn" onclick="goBack()">←</button>
                <h2>确认订单</h2>
                <span></span>
            </div>
            <div class="page-content">
                <div class="address-card" onclick="navigateTo('address-list')">
                    <div class="address-user">张三  先生</div>
                    <div class="address-phone">138****8888</div>
                    <div class="address-detail">📍 广东省深圳市南山区科技园南路XX号XX栋XX室</div>
                </div>
                
                <div class="order-section">
                    <div class="order-section-title">🏪 配送时间</div>
                    <div style="padding:8px 0;font-size:13px;cursor:pointer;" onclick="showToast('选择配送时间')">
                        <span style="background:#ffebee;color:#e63946;padding:4px 8px;border-radius:4px;font-size:11px;">尽快配送</span>
                        <span style="margin-left:8px;">预计 14:30-15:00 送达</span>
                    </div>
                </div>
                
                <div class="order-section">
                    <div class="order-section-title">🛒 商品清单</div>
                    <div class="order-product">
                        <div class="order-img" style="background-image:url('imgs/beer1.png');background-size:cover;background-position:center;"></div>
                        <div class="order-info">
                            <div class="order-name">青岛啤酒经典1903</div>
                            <div class="order-spec">x1</div>
                        </div>
                        <div style="color:var(--primary);">¥89</div>
                    </div>
                    <div class="order-product">
                        <div class="order-img" style="background-image:url('imgs/whisky1.png');background-size:cover;background-position:center;"></div>
                        <div class="order-info">
                            <div class="order-name">尊尼获加黑牌威士忌</div>
                            <div class="order-spec">x1</div>
                        </div>
                        <div style="color:var(--primary);">¥238</div>
                    </div>
                </div>
                
                <div class="order-section">
                    <div class="coupon-row" onclick="navigateTo('coupon-list')">
                        <span>🎫 优惠券</span>
                        <div style="display:flex;align-items:center;gap:6px;">
                            <span class="coupon-value">-¥20</span>
                            <span style="color:#999;"> ></span>
                        </div>
                    </div>
                    <div class="order-row"><span>商品金额</span><span>¥327</span></div>
                    <div class="order-row"><span>配送费</span><span>¥0</span></div>
                    <div class="order-row"><span>新人立减</span><span style="color:#2a9d8f;">-¥10</span></div>
                    <div class="order-row total"><span>合计</span><span>¥297</span></div>
                </div>
                
                <div class="order-section">
                    <div class="order-section-title">💬 订单备注</div>
                    <textarea class="remark-input" placeholder="请输入备注信息（选填）">
💳 支付方式
微信支付
🍺
酒铺优选
酒铺优选是一家专注于高品质酒类销售的专业电商平台，致力于为消费者提供优质、正宗的各类酒品。
我们的承诺：
• 30分钟极速送达
• 假一赔十，品质保障
• 专业采购，正品保证
• 售后服务，无忧退款
联系我们：
客服热线：400-888-8888
工作时间：9:00-22:00
编辑页面

我的订单

订单详情

限时抢购

抢购中

会员中心

精选套餐

我的优惠券

收货地址

评价订单

新人专享

新人特惠商品

周三会员日

会员权益

我的收藏

关于我们

热门搜索

申请退款

啤酒专区

热门啤酒

葡萄酒专区

精选葡萄酒

洋酒专区

热门洋酒

白酒专区

热门白酒

软饮专区

热门软饮

零食专区

热门零食
