编辑页面

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}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f5f5f5;color:#333}
        .app{max-width:430px;margin:0 auto;min-height:100vh;background:#fff;position:relative}
        .page{display:none;padding-bottom:70px}
        .page.active{display:block}
        .header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:15px;position:sticky;top:0;z-index:100}
        .header h1{font-size:18px;font-weight:600}
        .search-bar{background:rgba(255,255,255,0.2);border-radius:20px;padding:8px 15px;margin-top:10px;display:flex;align-items:center;gap:8px}
        .search-bar input{background:transparent;border:none;color:#fff;flex:1;font-size:14px;outline:none}
        .search-bar input::placeholder{color:rgba(255,255,255,0.8)}
        .banner{padding:15px}
        .banner-slider{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border-radius:12px;height:140px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;overflow:hidden;position:relative}
        .banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
        .banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5)}
        .banner-dot.active{background:#fff}
        .category-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}
        .category-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
        .category-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}
        .category-item span{font-size:12px;color:#666}
        .activity-section{padding:0 15px 15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .activity-card{background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);border-radius:12px;padding:12px;color:#fff;cursor:pointer}
        .activity-card h3{font-size:14px;margin-bottom:4px}
        .activity-card p{font-size:11px;opacity:0.9}
        .product-section{padding:15px}
        .section-title{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
        .section-title a{font-size:12px;color:#999;text-decoration:none}
        .product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
        .product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer;transition:transform 0.2s}
        .product-card:hover{transform:translateY(-2px)}
        .product-img{width:100%;height:120px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);display:flex;align-items:center;justify-content:center;font-size:40px}
        .product-info{padding:10px}
        .product-name{font-size:14px;font-weight:500;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:#ff6b6b;font-size:16px;font-weight:600}
        .product-price small{font-size:12px}
        .add-cart-btn{width:24px;height:24px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
        .bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;display:flex;justify-content:space-around;padding:8px 0 20px;box-shadow:0 -2px 10px rgba(0,0,0,0.05);z-index:1000}
        .nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:#999;font-size:11px}
        .nav-item.active{color:#667eea}
        .nav-item svg{width:24px;height:24px}
        .detail-header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:430px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:15px;display:flex;justify-content:space-between;align-items:center;z-index:100}
        .back-btn{width:32px;height:32px;background:rgba(0,0,0,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .detail-img{width:100%;height:300px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);display:flex;align-items:center;justify-content:center;font-size:80px}
        .detail-content{padding:20px}
        .detail-price{color:#ff6b6b;font-size:28px;font-weight:700}
        .detail-price small{font-size:14px}
        .detail-title{font-size:18px;font-weight:600;margin:12px 0}
        .detail-desc{font-size:14px;color:#666;line-height:1.6}
        .spec-section{margin-top:20px}
        .spec-title{font-size:14px;font-weight:600;margin-bottom:10px}
        .spec-options{display:flex;gap:10px;flex-wrap:wrap}
        .spec-option{padding:8px 16px;background:#f5f5f5;border-radius:20px;font-size:13px;cursor:pointer;border:2px solid transparent}
        .spec-option.active{background:#667eea;color:#fff}
        .detail-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;padding:15px 20px 30px;display:flex;gap:12px;box-shadow:0 -2px 10px rgba(0,0,0,0.1)}
        .add-cart-btn-large{flex:1;background:#ffeaa7;color:#333;border:none;padding:14px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .buy-now-btn{flex:1;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .cart-header{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;padding:20px 15px}
        .cart-title{font-size:18px;font-weight:600}
        .cart-edit{font-size:13px;cursor:pointer}
        .cart-store{padding:15px}
        .cart-store-name{font-size:14px;font-weight:600;margin-bottom:12px}
        .cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0}
        .cart-item-img{width:70px;height:70px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:30px}
        .cart-item-info{flex:1}
        .cart-item-name{font-size:14px;font-weight:500;margin-bottom:6px}
        .cart-item-spec{font-size:12px;color:#999;margin-bottom:6px}
        .cart-item-bottom{display:flex;justify-content:space-between;align-items:center}
        .cart-item-price{color:#ff6b6b;font-weight:600}
        .quantity-control{display:flex;align-items:center;gap:12px}
        .qty-btn{width:24px;height:24px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .qty-num{font-size:15px;font-weight:600;min-width:20px;text-align:center}
        .cart-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;padding:15px 20px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,0.1)}
        .cart-total{font-size:14px}
        .cart-total span{color:#ff6b6b;font-size:20px;font-weight:700}
        .checkout-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .order-tabs{display:flex;background:#fff;padding:0 15px;border-bottom:1px solid #f0f0f0}
        .order-tab{flex:1;text-align:center;padding:15px 0;font-size:14px;color:#666;cursor:pointer;position:relative}
        .order-tab.active{color:#667eea;font-weight:600}
        .order-tab.active::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:40px;height:3px;background:#667eea;border-radius:2px}
        .order-list{padding:15px}
        .order-card{background:#fff;border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer}
        .order-card-header{display:flex;justify-content:space-between;margin-bottom:12px}
        .order-id{font-size:13px;color:#999}
        .order-status{font-size:13px;color:#667eea;font-weight:600}
        .order-items{display:flex;gap:10px;margin-bottom:12px}
        .order-item-img{width:50px;height:50px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:20px}
        .order-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f0f0f0}
        .order-total{font-size:14px}
        .order-total span{color:#ff6b6b;font-weight:600}
        .order-action{padding:6px 16px;border:1px solid #667eea;color:#667eea;border-radius:15px;font-size:12px;cursor:pointer}
        .profile-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:30px 15px;color:#fff;display:flex;align-items:center;gap:15px}
        .profile-avatar{width:70px;height:70px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:35px}
        .profile-info h2{font-size:20px;margin-bottom:6px}
        .profile-info p{font-size:13px;opacity:0.9}
        .member-card{margin:15px;background:linear-gradient(135deg,#ffeaa7 0%,#fdcb6e 100%);border-radius:12px;padding:15px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
        .member-left h3{font-size:15px;margin-bottom:4px}
        .member-left p{font-size:12px;color:#666}
        .menu-section{margin:15px 0;background:#fff;border-radius:12px;margin-left:15px;margin-right:15px}
        .menu-item{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #f5f5f5;cursor:pointer}
        .menu-item:last-child{border-bottom:none}
        .menu-item-left{display:flex;align-items:center;gap:12px}
        .menu-icon{width:32px;height:32px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
        .menu-item span{font-size:14px}
        .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:2000;display:none}
        .modal-overlay.show{display:block}
        .spec-modal{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;border-radius:20px 20px 0 0;z-index:2001;max-height:80vh;overflow-y:auto;display:none}
        .spec-modal.show{display:block}
        .spec-modal-header{padding:20px;display:flex;gap:15px;border-bottom:1px solid #f0f0f0}
        .spec-modal-img{width:80px;height:80px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:35px}
        .spec-modal-info{flex:1}
        .spec-modal-price{color:#ff6b6b;font-size:22px;font-weight:700}
        .spec-modal-stock{font-size:12px;color:#999;margin-top:6px}
        .spec-modal-content{padding:20px}
        .spec-group{margin-bottom:20px}
        .spec-group-title{font-size:14px;font-weight:600;margin-bottom:10px}
        .spec-group-options{display:flex;gap:10px;flex-wrap:wrap}
        .spec-group-option{padding:10px 20px;background:#f5f5f5;border-radius:20px;font-size:13px;cursor:pointer;border:2px solid transparent}
        .spec-group-option.active{background:#667eea;color:#fff}
        .spec-quantity{display:flex;justify-content:space-between;align-items:center}
        .spec-quantity-title{font-size:14px;font-weight:600}
        .spec-quantity-control{display:flex;align-items:center;gap:15px}
        .spec-qty-btn{width:28px;height:28px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px}
        .spec-qty-num{font-size:16px;font-weight:600;min-width:30px;text-align:center}
        .spec-modal-footer{padding:20px;display:flex;gap:12px}
        .spec-add-cart{flex:1;background:#ffeaa7;color:#333;border:none;padding:14px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .spec-buy-now{flex:1;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .category-layout{display:flex;min-height:calc(100vh - 60px)}
        .category-sidebar{width:90px;background:#f8f8f8}
        .category-sidebar-item{padding:18px 10px;text-align:center;font-size:13px;color:#666;cursor:pointer;border-left:3px solid transparent}
        .category-sidebar-item.active{background:#fff;color:#667eea;font-weight:600;border-left-color:#667eea}
        .category-content{flex:1;padding:15px}
        .category-banner{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border-radius:12px;padding:20px;color:#fff;margin-bottom:15px}
        .category-banner h2{font-size:18px;margin-bottom:6px}
        .category-banner p{font-size:12px;opacity:0.9}
        .address-card{background:#fff;border-radius:12px;padding:15px;margin:15px;display:flex;gap:12px;cursor:pointer}
        .address-icon{width:40px;height:40px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
        .address-info{flex:1}
        .address-name{font-size:15px;font-weight:600;margin-bottom:6px}
        .address-name span{font-size:12px;color:#999;margin-left:10px}
        .address-detail{font-size:13px;color:#666}
        .address-default{margin-top:8px;display:inline-block;background:#ff6b6b;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px}
        .pay-methods{padding:15px}
        .pay-method{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid #f0f0f0;cursor:pointer}
        .pay-icon{width:36px;height:36px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
        .pay-info{flex:1}
        .pay-name{font-size:15px;margin-bottom:4px}
        .pay-desc{font-size:12px;color:#999}
        .pay-radio{width:20px;height:20px;border:2px solid #ddd;border-radius:50%}
        .pay-radio.selected{border-color:#667eea;background:#667eea}
        .pay-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;padding:15px 20px 30px;display:flex;align-items:center;gap:15px;box-shadow:0 -2px 10px rgba(0,0,0,0.1)}
        .pay-total{font-size:14px}
        .pay-total span{color:#ff6b6b;font-size:22px;font-weight:700}
        .pay-btn{flex:1;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer}
        .message-list{padding:15px}
        .message-item{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid #f5f5f5;cursor:pointer}
        .message-icon{width:50px;height:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
        .message-info{flex:1}
        .message-title{font-size:15px;font-weight:600;margin-bottom:6px}
        .message-desc{font-size:13px;color:#999;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .message-time{font-size:12px;color:#999}
        .search-page{padding:15px}
        .search-history{margin-bottom:20px}
        .search-history-title{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between}
        .search-tags{display:flex;flex-wrap:wrap;gap:8px}
        .search-tag{padding:8px 14px;background:#f5f5f5;border-radius:15px;font-size:13px;cursor:pointer}
        .coupon-tabs{display:flex;background:#fff;padding:0 15px}
        .coupon-tab{flex:1;text-align:center;padding:15px 0;font-size:14px;color:#666;cursor:pointer}
        .coupon-tab.active{color:#667eea;font-weight:600;border-bottom:2px solid #667eea}
        .coupon-list{padding:15px}
        .coupon-card{display:flex;background:#fff;border-radius:12px;margin-bottom:15px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
        .coupon-left{width:100px;background:linear-gradient(135deg,#ff6b6b 0%,#ff8e8e 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px}
        .coupon-value{font-size:28px;font-weight:700}
        .coupon-value small{font-size:14px}
        .coupon-limit{font-size:11px;opacity:0.9}
        .coupon-right{flex:1;padding:15px}
        .coupon-title{font-size:14px;font-weight:600;margin-bottom:6px}
        .coupon-desc{font-size:12px;color:#999;margin-bottom:8px}
        .coupon-time{font-size:11px;color:#999}
        .coupon-use-btn{margin-top:8px;padding:6px 14px;background:#ff6b6b;color:#fff;border-radius:12px;font-size:12px;display:inline-block;cursor:pointer}
        .balance-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:30px 15px;color:#fff;text-align:center}
        .balance-label{font-size:14px;opacity:0.9}
        .balance-value{font-size:42px;font-weight:700;margin:10px 0}
        .balance-value small{font-size:18px}
        .balance-actions{display:flex;gap:15px;margin-top:20px}
        .balance-action{flex:1;background:rgba(255,255,255,0.2);padding:12px;border-radius:25px;text-align:center;font-size:14px;cursor:pointer}
        .balance-record{margin:15px;background:#fff;border-radius:12px}
        .balance-record-title{padding:15px;font-size:14px;font-weight:600;border-bottom:1px solid #f0f0f0}
        .balance-record-item{display:flex;justify-content:space-between;padding:15px;border-bottom:1px solid #f0f0f0}
        .balance-record-item:last-child{border-bottom:none}
        .balance-record-left h4{font-size:14px;margin-bottom:4px}
        .balance-record-left p{font-size:12px;color:#999}
        .balance-record-right{text-align:right}
        .balance-record-right span{color:#ff6b6b;font-weight:600}
        .balance-record-right span.reduce{color:#52c41a}
        .points-header{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);padding:30px 15px;color:#fff;text-align:center}
        .points-value{font-size:42px;font-weight:700}
        .points-desc{font-size:13px;opacity:0.9;margin-top:8px}
        .points-rules{margin:15px;background:#fff;border-radius:12px;padding:15px}
        .points-rules h3{font-size:15px;margin-bottom:12px}
        .points-rule-item{display:flex;gap:10px;padding:10px 0;font-size:13px;color:#666}
        .points-rule-num{color:#f5576c;font-weight:600}
        .page-header{background:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0;position:sticky;top:0;z-index:100}
        .page-title{font-size:17px;font-weight:600}
        .page-back{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:15px}
        .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;display:none}
        .toast.show{display:block;animation:fadeIn 0.3s}
        @keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
        .order-confirm-section{background:#fff;margin:15px;border-radius:12px;padding:15px}
        .order-confirm-title{font-size:14px;font-weight:600;margin-bottom:12px}
        .order-confirm-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px}
        .order-confirm-products{margin-top:10px}
        .order-confirm-product{display:flex;gap:10px;padding:10px 0}
        .order-confirm-product-img{width:50px;height:50px;background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:20px}
        .order-confirm-product-info{flex:1}
        .order-confirm-product-name{font-size:13px;margin-bottom:4px}
        .order-confirm-product-spec{font-size:11px;color:#999}
        .order-confirm-product-price{font-size:13px;font-weight:600}
    </style>
</head>
<body>
    <div class="app">
        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="header">
                <h1>元气饮品</h1>
                <div class="search-bar" onclick="showPage('page-search')">
                    <svg width="16" height="16" fill="#fff" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                    <input type="text" placeholder="搜索饮品" readonly>
                </div>
            </div>
            <div class="banner">
                <div class="banner-slider" onclick="showPage('page-coupon')">
                    <span>限时特惠 全场8折</span>
                    <div class="banner-dots"><div class="banner-dot active"></div><div class="banner-dot"></div><div class="banner-dot"></div></div>
                </div>
            </div>
            <div class="category-nav">
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#ff6b6b20;">🍹</div><span>碳酸饮料</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#52c41a20;">🍵</div><span>茶饮料</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#faad1410;">☕</div><span>咖啡</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#722ed120;">🥛</div><span>乳品饮料</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#fadb1410;">🧃</div><span>果汁</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#13c2c220;">💪</div><span>运动饮料</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#eb2f9620;">🍶</div><span>酸奶</span></div>
                <div class="category-item" onclick="showPage('page-category')"><div class="category-icon" style="background:#9c27b020;">🍬</div><span>零食</span></div>
            </div>
            <div class="activity-section">
                <div class="activity-card" onclick="showPage('page-coupon')"><h3>领券中心</h3><p>新人专享满20减5</p></div>
                <div class="activity-card" style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);" onclick="showPage('page-points')"><h3>积分商城</h3><p>积分当钱花</p></div>
            </div>
            <div class="product-section">
                <div class="section-title">热销推荐<a href="javascript:void(0)" onclick="showPage('page-category')">查看更多 ></a></div>
                <div class="product-list">
                    <div class="product-card" onclick="showProductDetail('可口可乐','冰镇可乐 330ml',5.5,'🍹')">
                        <div class="product-img">🍹</div>
                        <div class="product-info"><div class="product-name">可口可乐 冰镇可乐 330ml</div><div class="product-bottom"><div class="product-price"><small>¥</small>5.5</div><div class="add-cart-btn" onclick="event.stopPropagation();openSpecModal('可口可乐')">+</div></div></div>
                    </div>
                    <div class="product-card" onclick="showProductDetail('元气森林','无糖气泡水 480ml',6.0,'🍹')">
                        <div class="product-img">🍹</div>
                        <div class="product-info"><div class="product-name">元气森林 无糖气泡水 480ml</div><div class="product-bottom"><div class="product-price"><small>¥</small>6.0</div><div class="add-cart-btn" onclick="event.stopPropagation();openSpecModal('元气森林')">+</div></div></div>
                    </div>
                    <div class="product-card" onclick="showProductDetail('农夫山泉','NFC橙汁 300ml',12.0,'🧃')">
                        <div class="product-img">🧃</div>
                        <div class="product-info"><div class="product-name">农夫山泉 NFC橙汁 300ml</div><div class="product-bottom"><div class="product-price"><small>¥</small>12.0</div><div class="add-cart-btn" onclick="event.stopPropagation();openSpecModal('农夫山泉')">+</div></div></div>
                    </div>
                    <div class="product-card" onclick="showProductDetail('雀巢咖啡','丝滑拿铁 268ml',8.5,'☕')">
                        <div class="product-img">☕</div>
                        <div class="product-info"><div class="product-name">雀巢咖啡 丝滑拿铁 268ml</div><div class="product-bottom"><div class="product-price"><small>¥</small>8.5</div><div class="add-cart-btn" onclick="event.stopPropagation();openSpecModal('雀巢咖啡')">+</div></div></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品详情页 -->
        <div id="page-detail" class="page">
            <div class="detail-header">
                <div class="back-btn" onclick="goBack()"><svg width="16" height="16" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
                <span style="font-size:16px;font-weight:600;">商品详情</span>
                <div class="back-btn"><svg width="16" height="16" fill="#333" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
            </div>
            <div id="detailImage" class="detail-img">🍹</div>
            <div class="detail-content">
                <div class="detail-price"><small>¥</small><span id="detailPrice">5.5</span></div>
                <div class="detail-title" id="detailTitle">可口可乐 冰镇可乐 330ml</div>
                <div class="detail-desc">冰爽可口的气泡饮料，330ml罐装，随时随地享受畅快口感。</div>
                <div class="spec-section"><div class="spec-title">规格</div><div class="spec-options"><div class="spec-option active" onclick="selectSpec(this)">330ml</div><div class="spec-option" onclick="selectSpec(this)">500ml</div><div class="spec-option" onclick="selectSpec(this)">1L</div></div></div>
                <div class="spec-section"><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></div>
            </div>
            <div style="height:80px;"></div>
            <div class="detail-bottom"><button class="add-cart-btn-large" onclick="addToCart()">加入购物车</button><button class="buy-now-btn" onclick="buyNow()">立即购买</button></div>
        </div>
        <!-- 分类页 -->
        <div id="page-category" class="page">
            <div class="header"><h1>全部分类</h1></div>
            <div class="category-layout">
                <div class="category-sidebar">
                    <div class="category-sidebar-item active" onclick="switchCategory(this,'soda')">碳酸饮料</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'tea')">茶饮料</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'coffee')">咖啡</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'milk')">乳品饮料</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'juice')">果汁</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'sports')">运动饮料</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'yogurt')">酸奶</div>
                    <div class="category-sidebar-item" onclick="switchCategory(this,'snacks')">零食</div>
                </div>
                <div class="category-content">
                    <div id="categoryBanner" class="category-banner"><h2>🍹 碳酸饮料专区</h2><p>清凉一夏 畅爽无限</p></div>
                    <div id="categoryProductList" class="product-list"></div>
                </div>
            </div>
        </div>
        <!-- 购物车页 -->
        <div id="page-cart" class="page">
            <div class="cart-header"><div style="display:flex;justify-content:space-between;align-items:center;"><span class="cart-title">购物车</span><span class="cart-edit" onclick="showToast('已清除无效商品')">清空</span></div></div>
            <div class="cart-store">
                <div class="cart-store-name">元气饮品旗舰店</div>
                <div class="cart-item"><div class="cart-item-img">🍹</div><div class="cart-item-info"><div class="cart-item-name">可口可乐 330ml</div><div class="cart-item-spec">冰镇</div><div class="cart-item-bottom"><div class="cart-item-price">¥5.5</div><div class="quantity-control"><div class="qty-btn" onclick="changeQty(this,-1)">-</div><div class="qty-num">2</div><div class="qty-btn" onclick="changeQty(this,1)">+</div></div></div></div></div>
                <div class="cart-item"><div class="cart-item-img">🧃</div><div class="cart-item-info"><div class="cart-item-name">农夫山泉 NFC橙汁 300ml</div><div class="cart-item-spec">常温</div><div class="cart-item-bottom"><div class="cart-item-price">¥12.0</div><div class="quantity-control"><div class="qty-btn" onclick="changeQty(this,-1)">-</div><div class="qty-num">1</div><div class="qty-btn" onclick="changeQty(this,1)">+</div></div></div></div></div>
            </div>
            <div style="height:80px;"></div>
            <div class="cart-bottom"><div class="cart-total">合计: <span>¥23.0</span></div><button class="checkout-btn" onclick="showPage('page-order-confirm')">去结算</button></div>
        </div>
        <!-- 订单页 -->
        <div id="page-order" class="page">
            <div class="order-tabs"><div class="order-tab active" onclick="switchOrderTab(this)">全部</div><div class="order-tab" onclick="switchOrderTab(this)">待付款</div><div class="order-tab" onclick="switchOrderTab(this)">待发货</div><div class="order-tab" onclick="switchOrderTab(this)">待收货</div></div>
            <div class="order-list">
                <div class="order-card" onclick="showPage('page-order-detail')"><div class="order-card-header"><span class="order-id">订单号: 202401150001</span><span class="order-status">待支付</span></div><div class="order-items"><div class="order-item-img">🍹</div><div class="order-item-img">🧃</div></div><div class="order-footer"><div class="order-total">共2件商品 合计: <span>¥23.0</span></div><div class="order-action">去支付</div></div></div>
                <div class="order-card"><div class="order-card-header"><span class="order-id">订单号: 202401140002</span><span class="order-status">配送中</span></div><div class="order-items"><div class="order-item-img">☕</div><div class="order-item-img">🥛</div></div><div class="order-footer"><div class="order-total">共2件商品 合计: <span>¥18.5</span></div><div class="order-action">查看详情</div></div></div>
            </div>
        </div>
        <!-- 订单详情页 -->
        <div id="page-order-detail" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">订单详情</span><span></span></div>
            <div style="padding:15px;">
                <div class="order-confirm-section" style="background:#fff3e0;"><div style="display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid #ffe0b2;"><div style="font-size:24px;">🚴</div><div><div style="font-size:14px;font-weight:600;">配送中</div><div style="font-size:12px;color:#666;">预计30分钟内送达</div></div></div><div style="padding-top:15px;"><div style="font-size:13px;color:#666;">配送地址</div><div style="font-size:14px;font-weight:500;margin-top:4px;">张三 138****8888</div><div style="font-size:13px;color:#666;margin-top:4px;">北京市朝阳区建国路88号SOHO现代城</div></div></div>
                <div class="order-confirm-section"><div class="order-confirm-title">订单信息</div><div class="order-confirm-row"><span>订单编号</span><span>202401150001</span></div><div class="order-confirm-row"><span>下单时间</span><span>2024-01-15 14:30</span></div><div class="order-confirm-row"><span>支付方式</span><span>微信支付</span></div></div>
                <div class="order-confirm-section"><div class="order-confirm-title">商品清单</div><div class="order-confirm-products"><div class="order-confirm-product"><div class="order-confirm-product-img">🍹</div><div class="order-confirm-product-info"><div class="order-confirm-product-name">可口可乐 330ml</div><div class="order-confirm-product-spec">x2 冰镇</div></div><div class="order-confirm-product-price">¥11.0</div></div><div class="order-confirm-product"><div class="order-confirm-product-img">🧃</div><div class="order-confirm-product-info"><div class="order-confirm-product-name">农夫山泉 NFC橙汁 300ml</div><div class="order-confirm-product-spec">x1 常温</div></div><div class="order-confirm-product-price">¥12.0</div></div></div><div style="border-top:1px solid #f0f0f0;margin-top:10px;padding-top:10px;display:flex;justify-content:space-between;"><span style="font-size:13px;color:#666;">运费</span><span style="font-size:13px;">¥0</span></div><div style="display:flex;justify-content:flex-end;margin-top:8px;"><span style="font-size:15px;">实付款: <span style="color:#ff6b6b;font-weight:700;">¥23.0</span></span></div></div>
            </div>
        </div>
        <!-- 订单确认页 -->
        <div id="page-order-confirm" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">确认订单</span><span></span></div>
            <div class="address-card" onclick="showToast('选择收货地址')"><div class="address-icon">🏠</div><div class="address-info"><div class="address-name">张三 <span>138****8888</span></div><div class="address-detail">北京市朝阳区建国路88号SOHO现代城</div><span class="address-default">默认</span></div><div style="color:#ccc;font-size:20px;">></div></div>
            <div class="order-confirm-section"><div class="order-confirm-title">商品清单</div><div class="order-confirm-products"><div class="order-confirm-product"><div class="order-confirm-product-img">🍹</div><div class="order-confirm-product-info"><div class="order-confirm-product-name">可口可乐 330ml</div><div class="order-confirm-product-spec">x2 冰镇</div></div><div class="order-confirm-product-price">¥11.0</div></div><div class="order-confirm-product"><div class="order-confirm-product-img">🧃</div><div class="order-confirm-product-info"><div class="order-confirm-product-name">农夫山泉 NFC橙汁 300ml</div><div class="order-confirm-product-spec">x1 常温</div></div><div class="order-confirm-product-price">¥12.0</div></div></div></div>
            <div class="order-confirm-section"><div class="order-confirm-row"><span>商品金额</span><span>¥23.0</span></div><div class="order-confirm-row"><span>运费</span><span>¥0</span></div><div class="order-confirm-row"><span>优惠券</span><span style="color:#ff6b6b;">-¥2.0</span></div></div>
            <div style="height:80px;"></div>
            <div class="pay-bottom"><div class="pay-total">合计: <span>¥21.0</span></div><button class="pay-btn" onclick="showPage('page-pay')">提交订单</button></div>
        </div>
        <!-- 支付页 -->
        <div id="page-pay" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">订单支付</span><span></span></div>
            <div style="text-align:center;padding:40px 15px;"><div style="font-size:14px;color:#999;">应付金额</div><div style="font-size:42px;font-weight:700;color:#ff6b6b;margin-top:10px;">¥21.0</div></div>
            <div class="pay-methods">
                <div class="pay-method" onclick="selectPay(this)"><div class="pay-icon" style="background:#07c16020;">💚</div><div class="pay-info"><div class="pay-name">微信支付</div><div class="pay-desc">推荐</div></div><div class="pay-radio selected"></div></div>
                <div class="pay-method" onclick="selectPay(this)"><div class="pay-icon" style="background:#1677ff20;">💳</div><div class="pay-info"><div class="pay-name">银行卡支付</div><div class="pay-desc">绑定银行卡快捷支付</div></div><div class="pay-radio"></div></div>
                <div class="pay-method" onclick="selectPay(this)"><div class="pay-icon" style="background:#faad1420;">💰</div><div class="pay-info"><div class="pay-name">余额支付</div><div class="pay-desc">可用余额: ¥100.00</div></div><div class="pay-radio"></div></div>
            </div>
            <div style="height:80px;"></div>
            <div class="pay-bottom"><button class="pay-btn" onclick="paySuccess()">确认支付</button></div>
        </div>
        <!-- 支付成功页 -->
        <div id="page-pay-success" class="page">
            <div style="text-align:center;padding:80px 15px;"><div style="width:80px;height:80px;background:#52c41a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:40px;color:#fff;">✓</div><div style="font-size:22px;font-weight:600;margin-top:20px;">支付成功</div><div style="font-size:14px;color:#999;margin-top:10px;">订单号: 202401150001</div><div style="margin-top:40px;"><button onclick="showPage('page-order')" style="padding:12px 40px;background:#667eea;color:#fff;border:none;border-radius:25px;font-size:15px;cursor:pointer;margin:5px;">查看订单</button><button onclick="showPage('page-home')" style="padding:12px 40px;background:#fff;color:#667eea;border:1px solid #667eea;border-radius:25px;font-size:15px;cursor:pointer;margin:5px;">返回首页</button></div></div>
        </div>
        <!-- 我的页面 -->
        <div id="page-profile" class="page">
            <div class="profile-header"><div class="profile-avatar">👤</div><div class="profile-info"><h2>张三</h2><p>会员ID: 888888</p></div></div>
            <div class="member-card" onclick="showPage('page-member')"><div class="member-left"><h3>超级会员</h3><p>立即续费 享更多权益</p></div><div class="member-arrow">></div></div>
            <div style="display:flex;background:#fff;margin:15px;border-radius:12px;padding:15px 0;">
                <div style="flex:1;text-align:center;cursor:pointer;" onclick="showPage('page-balance')"><div style="font-size:22px;font-weight:700;color:#ff6b6b;">¥100.0</div><div style="font-size:12px;color:#999;margin-top:4px;">余额</div></div>
                <div style="flex:1;text-align:center;cursor:pointer;" onclick="showPage('page-points')"><div style="font-size:22px;font-weight:700;color:#667eea;">2,580</div><div style="font-size:12px;color:#999;margin-top:4px;">积分</div></div>
                <div style="flex:1;text-align:center;cursor:pointer;" onclick="showPage('page-coupon')"><div style="font-size:22px;font-weight:700;color:#f5576c;">5</div><div style="font-size:12px;color:#999;margin-top:4px;">优惠券</div></div>
            </div>
            <div class="menu-section">
                <div class="menu-item" onclick="showPage('page-order')"><div class="menu-item-left"><div class="menu-icon">📋</div><span>我的订单</span></div><span style="color:#999;font-size:14px;">></span></div>
                <div class="menu-item" onclick="showPage('page-address')"><div class="menu-item-left"><div class="menu-icon">📍</div><span>收货地址</span></div><span style="color:#999;font-size:14px;">></span></div>
                <div class="menu-item" onclick="showPage('page-coupon')"><div class="menu-item-left"><div class="menu-icon">🎫</div><span>我的优惠券</span></div><span style="color:#999;font-size:14px;">></span></div>
            </div>
            <div class="menu-section">
                <div class="menu-item" onclick="showPage('page-message')"><div class="menu-item-left"><div class="menu-icon">🔔</div><span>消息通知</span></div><span style="color:#999;font-size:14px;">></span></div>
                <div class="menu-item"><div class="menu-item-left"><div class="menu-icon">⚙️</div><span>设置</span></div><span style="color:#999;font-size:14px;">></span></div>
                <div class="menu-item"><div class="menu-item-left"><div class="menu-icon">❓</div><span>帮助与反馈</span></div><span style="color:#999;font-size:14px;">></span></div>
            </div>
        </div>
        <!-- 收货地址页 -->
        <div id="page-address" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">收货地址</span><span style="color:#667eea;font-size:14px;cursor:pointer;" onclick="showToast('新增地址')">新增</span></div>
            <div class="address-card" style="margin-top:15px;"><div class="address-icon">🏠</div><div class="address-info"><div class="address-name">张三 <span>138****8888</span></div><div class="address-detail">北京市朝阳区建国路88号SOHO现代城</div><span class="address-default">默认</span></div><div style="color:#ccc;font-size:20px;">></div></div>
            <div class="address-card"><div class="address-icon" style="background:#52c41a;">🏢</div><div class="address-info"><div class="address-name">李四 <span>139****6666</span></div><div class="address-detail">北京市海淀区中关村大街1号</div></div><div style="color:#ccc;font-size:20px;">></div></div>
        </div>
        <!-- 会员中心页 -->
        <div id="page-member" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">会员中心</span><span></span></div>
            <div style="background:linear-gradient(135deg,#ffeaa7 0%,#fdcb6e 100%);padding:30px 15px;text-align:center;"><div style="font-size:40px;margin-bottom:10px;">👑</div><div style="font-size:20px;font-weight:700;">超级会员</div><div style="font-size:13px;color:#666;margin-top:6px;">到期时间: 2025-01-15</div><div style="margin-top:20px;display:flex;justify-content:center;gap:15px;"><div style="text-align:center;"><div style="font-size:20px;font-weight:700;">8.8</div><div style="font-size:11px;color:#666;">折扣</div></div><div style="text-align:center;"><div style="font-size:20px;font-weight:700;">双倍</div><div style="font-size:11px;color:#666;">积分</div></div><div style="text-align:center;"><div style="font-size:20px;font-weight:700;">免</div><div style="font-size:11px;color:#666;">配送费</div></div></div></div>
            <div style="margin:15px;background:#fff;border-radius:12px;padding:15px;"><div style="font-size:14px;font-weight:600;margin-bottom:15px;">会员权益</div><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:center;"><div><div style="font-size:24px;margin-bottom:6px;">🎁</div><div style="font-size:12px;">专属优惠券</div></div><div><div style="font-size:24px;margin-bottom:6px;">⚡</div><div style="font-size:12px;">优先配送</div></div><div><div style="font-size:24px;margin-bottom:6px;">☔</div><div style="font-size:12px;">雨天不涨价</div></div></div></div>
            <div style="margin:15px;background:#fff;border-radius:12px;padding:15px;"><div style="font-size:14px;font-weight:600;margin-bottom:15px;">续费会员</div><div style="display:flex;gap:10px;"><div style="flex:1;background:#fff;border:2px solid #fdcb6e;border-radius:10px;padding:15px;text-align:center;cursor:pointer;"><div style="font-size:14px;font-weight:600;">月卡</div><div style="font-size:20px;font-weight:700;color:#fdcb6e;margin:8px 0;">¥9.9</div><div style="font-size:11px;color:#999;">每月可省50元</div></div><div style="flex:1;background:#fff;border:2px solid #667eea;border-radius:10px;padding:15px;text-align:center;cursor:pointer;"><div style="font-size:14px;font-weight:600;">年卡</div><div style="font-size:20px;font-weight:700;color:#667eea;margin:8px 0;">¥99</div><div style="font-size:11px;color:#999;">立省240元</div></div></div></div>
        </div>
        <!-- 优惠券页 -->
        <div id="page-coupon" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">优惠券</span><span></span></div>
            <div class="coupon-tabs"><div class="coupon-tab active" onclick="switchCouponTab(this)">可用(5)</div><div class="coupon-tab" onclick="switchCouponTab(this)">已使用(2)</div><div class="coupon-tab" onclick="switchCouponTab(this)">已过期(1)</div></div>
            <div class="coupon-list">
                <div class="coupon-card"><div class="coupon-left"><div class="coupon-value"><small>¥</small>5</div><div class="coupon-limit">满20可用</div></div><div class="coupon-right"><div class="coupon-title">新人专享券</div><div class="coupon-desc">限新用户首次下单使用</div><div class="coupon-time">有效期至 2024-02-15</div><span class="coupon-use-btn" onclick="showToast('优惠券已领取')">立即领取</span></div></div>
                <div class="coupon-card"><div class="coupon-left" style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);"><div class="coupon-value"><small>¥</small>10</div><div class="coupon-limit">满50可用</div></div><div class="coupon-right"><div class="coupon-title">会员专享券</div><div class="coupon-desc">超级会员专属优惠</div><div class="coupon-time">有效期至 2024-01-30</div><span class="coupon-use-btn" style="background:#667eea;">可使用</span></div></div>
            </div>
        </div>
        <!-- 余额页 -->
        <div id="page-balance" class="page">
            <div class="balance-header"><div class="balance-label">账户余额</div><div class="balance-value"><small>¥</small>100.0</div><div class="balance-actions"><div class="balance-action" onclick="showToast('充值功能')">充值</div><div class="balance-action" onclick="showToast('提现功能')">提现</div></div></div>
            <div class="balance-record"><div class="balance-record-title">收支记录</div><div class="balance-record-item"><div class="balance-record-left"><h4>订单支付</h4><p>2024-01-15 14:30</p></div><div class="balance-record-right"><span class="reduce">-¥21.0</span></div></div><div class="balance-record-item"><div class="balance-record-left"><h4>余额充值</h4><p>2024-01-10 10:00</p></div><div class="balance-record-right"><span>+¥100.0</span></div></div></div>
        </div>
        <!-- 积分页 -->
        <div id="page-points" class="page">
            <div class="points-header"><div style="font-size:14px;opacity:0.9;">我的积分</div><div class="points-value">2,580</div><div class="points-desc">可兑换价值 ¥25.80 的商品</div></div>
            <div class="points-rules"><h3>积分规则</h3><div class="points-rule-item"><span class="points-rule-num">+10</span><span>每消费1元获得积分</span></div><div class="points-rule-item"><span class="points-rule-num">x2</span><span>会员双倍积分</span></div><div class="points-rule-item"><span class="points-rule-num">100</span><span>积分可抵1元</span></div></div>
            <div style="margin:15px;background:#fff;border-radius:12px;padding:15px;"><div style="font-size:14px;font-weight:600;margin-bottom:15px;">积分商城</div><div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;"><div style="background:#f9f9f9;border-radius:10px;padding:12px;cursor:pointer;"><div style="font-size:30px;margin-bottom:8px;">🎁</div><div style="font-size:13px;font-weight:500;">满50减5券</div><div style="font-size:12px;color:#f5576c;margin-top:4px;">500积分</div></div><div style="background:#f9f9f9;border-radius:10px;padding:12px;cursor:pointer;"><div style="font-size:30px;margin-bottom:8px;">☕</div><div style="font-size:13px;font-weight:500;">免费饮品券</div><div style="font-size:12px;color:#f5576c;margin-top:4px;">2000积分</div></div></div></div>
        </div>
        <!-- 消息页 -->
        <div id="page-message" class="page">
            <div class="page-header"><div class="page-back" onclick="goBack()"><svg width="20" height="20" fill="#333" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回</div><span class="page-title">消息通知</span><span style="color:#667eea;font-size:14px;cursor:pointer;">全部已读</span></div>
            <div class="message-list">
                <div class="message-item"><div class="message-icon">📦</div><div class="message-info"><div class="message-title">订单已发货</div><div class="message-desc">您的订单已发货，预计30分钟内送达，请注意查收</div><div class="message-time" style="margin-top:6px;">2024-01-15 15:30</div></div></div>
                <div class="message-item"><div class="message-icon" style="background:linear-gradient(135deg,#ff6b6b 0%,#ff8e8e 100%);">🎫</div><div class="message-info"><div class="message-title">优惠券到期提醒</div><div class="message-desc">您有1张优惠券即将过期，请尽快使用</div><div class="message-time" style="margin-top:6px;">2024-01-14 10:00</div></div></div>
                <div class="message-item"><div class="message-icon" style="background:linear-gradient(135deg,#52c41a 0%,#73d13d 100%);">💰</div><div class="message-info"><div class="message-title">积分变动通知</div><div class="message-desc">您的账户新增200积分，来源：订单消费</div><div class="message-time" style="margin-top:6px;">2024-01-13 18:00</div></div></div>
            </div>
        </div>
        <!-- 搜索页 -->
        <div id="page-search" class="page">
            <div class="header"><div style="display:flex;align-items:center;gap:10px;"><div class="back-btn" onclick="goBack()" style="background:rgba(255,255,255,0.2);"><svg width="16" height="16" fill="#fff" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div><div class="search-bar" style="flex:1;background:rgba(255,255,255,0.2);"><svg width="16" height="16" fill="#fff" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg><input type="text" placeholder="搜索饮品" style="color:#fff;"></div></div></div>
            <div class="search-page">
                <div class="search-history"><div class="search-history-title"><span>搜索历史</span><span style="color:#999;" onclick="showToast('已清空历史')">清空</span></div><div class="search-tags"><div class="search-tag">可乐</div><div class="search-tag">橙汁</div><div class="search-tag">咖啡</div><div class="search-tag">奶茶</div></div></div>
                <div class="search-history"><div class="hot-search-title">热门搜索</div><div class="hot-rank"><div class="hot-rank-item"><div class="hot-rank-num" style="color:#ff6b6b;">1</div><div class="hot-rank-name">可口可乐</div></div><div class="hot-rank-item"><div class="hot-rank-num" style="color:#ff6b6b;">2</div><div class="hot-rank-name">元气森林</div></div></div><div class="hot-rank"><div class="hot-rank-item"><div class="hot-rank-num" style="color:#999;">3</div><div class="hot-rank-name">农夫山泉</div></div><div class="hot-rank-item"><div class="hot-rank-num" style="color:#999;">4</div><div class="hot-rank-name">雀巢咖啡</div></div></div></div>
            </div>
        </div>
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="switchNav(this,'page-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="switchNav(this,'page-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="switchNav(this,'page-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="switchNav(this,'page-order')"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg><span>订单</span></div>
            <div class="nav-item" onclick="switchNav(this,'page-profile')"><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 class="modal-overlay" id="specModal" onclick="closeSpecModal()"></div>
        <div class="spec-modal" id="specModalContent">
            <div class="spec-modal-header"><div class="spec-modal-img" id="modalProductImg">🍹</div><div class="spec-modal-info"><div class="spec-modal-price" id="modalProductPrice">¥5.5</div><div class="spec-modal-stock">库存: 100件</div></div></div>
            <div class="spec-modal-content">
                <div class="spec-group"><div class="spec-group-title">规格</div><div class="spec-group-options"><div class="spec-group-option active" onclick="selectModalSpec(this)">330ml</div><div class="spec-group-option" onclick="selectModalSpec(this)">500ml</div><div class="spec-group-option" onclick="selectModalSpec(this)">1L</div></div></div>
                <div class="spec-group"><div class="spec-group-title">温度</div><div class="spec-group-options"><div class="spec-group-option active" onclick="selectModalSpec(this)">冰镇</div><div class="spec-group-option" onclick="selectModalSpec(this)">常温</div></div></div>
                <div class="spec-quantity"><div class="spec-quantity-title">数量</div><div class="spec-quantity-control"><div class="spec-qty-btn" onclick="changeModalQty(-1)">-</div><div class="spec-qty-num" id="modalQty">1</div><div class="spec-qty-btn" onclick="changeModalQty(1)">+</div></div></div>
            </div>
            <div class="spec-modal-footer"><button class="spec-add-cart" onclick="confirmAddCart()">加入购物车</button><button class="spec-buy-now" onclick="confirmBuyNow()">立即购买</button></div>
        </div>
        <div class="toast" id="toast"></div>
    </div>
    <script>
        let pageHistory=['page-home'];
        let currentProduct={};
        const categoryData={
            soda:{name:'碳酸饮料',banner:'🍹 碳酸饮料专区',color:'#ff6b6b',products:[{name:'可口可乐 330ml',price:5.5,icon:'🍹'},{name:'百事可乐 330ml',price:5.5,icon:'🥤'},{name:'元气森林气泡水 480ml',price:6.0,icon:'🍹'},{name:'雪碧 330ml',price:5.0,icon:'💚'},{name:'芬达 330ml',price:5.5,icon:'🍊'},{name:'北冰洋 330ml',price:6.5,icon:'🧊'}]},
            tea:{name:'茶饮料',banner:'🍵 茶饮料专区',color:'#52c41a',products:[{name:'农夫山泉东方树叶 500ml',price:5.0,icon:'🍵'},{name:'康师傅冰红茶 500ml',price:4.0,icon:'🧃'},{name:'统一绿茶 500ml',price:4.5,icon:'🍃'},{name:'王老吉 310ml',price:5.5,icon:'🔥'},{name:'加多宝 310ml',price:5.5,icon:'🔥'},{name:'三得利乌龙茶 500ml',price:6.0,icon:'🍵'}]},
            coffee:{name:'咖啡',banner:'☕ 咖啡专区',color:'#faad14',products:[{name:'雀巢丝滑拿铁 268ml',price:8.5,icon:'☕'},{name:'雀巢美式 268ml',price:7.5,icon:'🥤'},{name:'星巴克星冰乐 281ml',price:19.0,icon:'🧊'},{name:'可口可乐咖啡 330ml',price:6.5,icon:'☕'},{name:'娃哈哈咖啡 500ml',price:5.0,icon:'🥤'},{name:'贝纳颂咖啡 300ml',price:8.0,icon:'☕'}]},
            milk:{name:'乳品饮料',banner:'🥛 乳品饮料专区',color:'#722ed1',products:[{name:'伊利安慕希 205g',price:12.0,icon:'🥛'},{name:'蒙牛纯甄 200g',price:11.5,icon:'🥛'},{name:'娃哈哈AD钙奶 220ml',price:4.0,icon:'🍼'},{name:'旺旺牛奶 245ml',price:5.0,icon:'🥛'},{name:'养味草莓奶 320ml',price:6.0,icon:'🍓'},{name:'统一小浣熊 250ml',price:4.5,icon:'🐻'}]},
            juice:{name:'果汁',banner:'🧃 果汁专区',color:'#fadb14',products:[{name:'农夫山泉NFC橙汁 300ml',price:12.0,icon:'🍊'},{name:'汇源100%苹果汁 1L',price:14.0,icon:'🍎'},{name:'味全每日C葡萄汁 300ml',price:8.0,icon:'🍇'},{name:'农夫山泉NFC苹果汁 300ml',price:12.0,icon:'🍏'},{name:'纯果乐果粒橙 420ml',price:6.0,icon:'🍊'},{name:'水溶C100柠檬汁 445ml',price:7.5,icon:'🍋'}]},
            sports:{name:'运动饮料',banner:'💪 运动饮料专区',color:'#13c2c2',products:[{name:'农夫山泉尖叫 550ml',price:5.5,icon:'💪'},{name:'佳得乐 600ml',price:6.0,icon:'⚡'},{name:'脉动 600ml',price:5.5,icon:'💪'},{name:'东鹏特饮 250ml',price:6.0,icon:'🐂'},{name:'红牛 250ml',price:7.0,icon:'🐂'},{name:'乐虎 250ml',price:5.0,icon:'🐯'}]},
            yogurt:{name:'酸奶',banner:'🍶 酸奶专区',color:'#eb2f96',products:[{name:'安慕希希腊酸奶 205g',price:12.0,icon:'🥛'},{name:'纯甄小蛮腰 200g',price:11.5,icon:'🏃'},{name:'莫斯利安 200g',price:10.0,icon:'⛰️'},{name:'三元冰岛酸奶 180g',price:8.5,icon:'❄️'},{name:'天润浓缩酸奶 180g',price:7.0,icon:'🐄'},{name:'如实酸奶 140g',price:9.0,icon:'✨'}]},
            snacks:{name:'零食',banner:'🍬 零食专区',color:'#9c27b0',products:[{name:'乐事薯片 70g',price:8.0,icon:'🍟'},{name:'奥利奥饼干 133g',price:9.0,icon:'🍪'},{name:'德芙巧克力 43g',price:12.0,icon:'🍫'},{name:'旺旺仙贝 40g',price:4.5,icon:'🍘'},{name:'卫龙辣条 106g',price:5.0,icon:'🌶️'},{name:'好丽友派 96g',price:10.0,icon:'🍫'}]}
        };
        function switchCategory(element,categoryKey){
            document.querySelectorAll('.category-sidebar-item').forEach(item=>item.classList.remove('active'));
            element.classList.add('active');
            const data=categoryData[categoryKey];
            if(!data)return;
            const banner=document.getElementById('categoryBanner');
            banner.innerHTML='<h2>'+data.banner+'</h2><p>清凉一夏 畅爽无限</p>';
            banner.style.background='linear-gradient(135deg,'+data.color+' 0%,'+data.color+'88 100%)';
            const productList=document.getElementById('categoryProductList');
            productList.innerHTML=data.products.map(p=>'<div class="product-card" onclick="showProductDetail(\''+p.name+'\',\''+p.name+'\','+p.price+',\''+p.icon+'\')"><div class="product-img">'+p.icon+'</div><div class="product-info"><div class="product-name">'+p.name+'</div><div class="product-bottom"><div class="product-price"><small>¥</small>'+p.price+'</div><div class="add-cart-btn" onclick="event.stopPropagation();openSpecModal(\''+p.name+'\')">+</div></div></div></div>').join('');
        }
        switchCategory(document.querySelector('.category-sidebar-item'),'soda');
        function showPage(pageId){document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));document.getElementById(pageId).classList.add('active');pageHistory.push(pageId);window.scrollTo(0,0);}
        function goBack(){if(pageHistory.length>1){pageHistory.pop();const prevPage=pageHistory[pageHistory.length-1];document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));document.getElementById(prevPage).classList.add('active');}}
        function switchNav(element,pageId){document.querySelectorAll('.nav-item').forEach(item=>item.classList.remove('active'));element.classList.add('active');showPage(pageId);}
        function showProductDetail(name,desc,price,icon){currentProduct={name,desc,price,icon};document.getElementById('detailImage').innerHTML=icon;document.getElementById('detailTitle').textContent=name;document.getElementById('detailPrice').textContent=price;showPage('page-detail');}
        function selectSpec(element){element.parentElement.querySelectorAll('.spec-option').forEach(opt=>opt.classList.remove('active'));element.classList.add('active');}
        function openSpecModal(name){document.getElementById('specModal').classList.add('show');document.getElementById('specModalContent').classList.add('show');document.getElementById('modalProductImg').innerHTML=currentProduct.icon||'🍹';document.getElementById('modalProductPrice').textContent='¥'+(currentProduct.price||5.5);document.getElementById('modalQty').textContent='1';}
        function closeSpecModal(){document.getElementById('specModal').classList.remove('show');document.getElementById('specModalContent').classList.remove('show');}
        function selectModalSpec(element){element.parentElement.querySelectorAll('.spec-group-option').forEach(opt=>opt.classList.remove('active'));element.classList.add('active');}
        function changeModalQty(delta){const qtyEl=document.getElementById('modalQty');let qty=parseInt(qtyEl.textContent)+delta;if(qty<1)qty=1;if(qty>99)qty=99;qtyEl.textContent=qty;}
        function addToCart(){showToast('已加入购物车');showPage('page-cart');}
        function buyNow(){showToast('正在跳转结算...');setTimeout(()=>showPage('page-order-confirm'),500);}
        function confirmAddCart(){closeSpecModal();showToast('已加入购物车');}
        function confirmBuyNow(){closeSpecModal();showPage('page-order-confirm');}
        function changeQty(btn,delta){const qtyEl=btn.parentElement.querySelector('.qty-num');let qty=parseInt(qtyEl.textContent)+delta;if(qty<1)qty=1;if(qty>99)qty=99;qtyEl.textContent=qty;}
        function switchOrderTab(element){element.parentElement.querySelectorAll('.order-tab').forEach(tab=>tab.classList.remove('active'));element.classList.add('active');}
        function selectPay(element){element.parentElement.querySelectorAll('.pay-radio').forEach(radio=>radio.classList.remove('selected'));element.querySelector('.pay-radio').classList.add('selected');}
        function paySuccess(){showToast('支付成功');setTimeout(()=>showPage('page-pay-success'),500);}
        function switchCouponTab(element){element.parentElement.querySelectorAll('.coupon-tab').forEach(tab=>tab.classList.remove('active'));element.classList.add('active');}
        function showToast(message){const toast=document.getElementById('toast');toast.textContent=message;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2000);}
    </script>
</body>
</html>