您说得对，我需要生成全部8个界面！之前的输出被截断了。让我重新输出完整的所有8个界面。
```json
{
"summary": "完整生成奶茶点单小程序全部8套高保真界面（750×1334px），包含：1-启动欢迎页、2-主页、3-点单页、4-商品详情页、5-购物车页、6-确认订单/结算页、7-订单列表页、8-个人中心页。统一底部四栏导航，极简色块风格，使用主色#7850EE、辅助色#A77AEA/#1F1244/#0084FF、提醒色#FD67D0。Font Awesome图标+Outfit/Noto Sans SC字体。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>茶屿·奶茶点单 · 8屏高保真UI</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;70…\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #7850EE;\n --secondary: #A77AEA;\n --dark: #1F1244;\n --accent: #0084FF;\n --pink: #FD67D0;\n --bg-light: #F8F8FF;\n --white: #FFFFFF;\n --gray-bg: #F5F0FF;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Noto Sans SC', 'Outfit', sans-serif;\n background: #EDE8F5;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px 10px;\n }\n .phone-frame {\n width: 375px;\n max-width: 100%;\n background: var(--white);\n border-radius: 32px;\n overflow: hidden;\n box-shadow: 0 20px 60px rgba(120, 80, 238, 0.25);\n margin-bottom: 30px;\n position: relative;\n }\n .phone-screen {\n width: 100%;\n aspect-ratio: 750 / 1334;\n position: relative;\n overflow: hidden;\n background: var(--white);\n }\n .screen-content {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n }\n .bottom-nav {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n background: var(--white);\n display: flex;\n align-items: center;\n justify-content: space-around;\n border-top: 1px solid rgba(31, 18, 68, 0.06);\n z-index: 50;\n box-shadow: 0 -2px 20px rgba(31, 18, 68, 0.04);\n }\n .nav-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n transition: all 0.2s;\n }\n .nav-item i { font-size: 24px; transition: all 0.2s; }\n .nav-item span { font-size: 18px; font-weight: 500; transition: all 0.2s; }\n .nav-item.active i, .nav-item.active span { color: var(--primary); }\n .nav-item:not(.active) i, .nav-item:not(.active) span { color: var(--dark); }\n .status-bar {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px;\n font-size: 12px;\n color: var(--white);\n font-weight: 500;\n }\n .status-bar.dark { color: var(--dark); }\n .scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n .scroll-area::-webkit-scrollbar { display: none; }\n .hide-scrollbar::-webkit-scrollbar { display: none; }\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-8px); }\n }\n @keyframes pulse-glow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 80, 238, 0.4); }\n 50% { box-shadow: 0 0 0 12px rgba(120, 80, 238, 0); }\n }\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n }\n .animate-float { animation: float 3s ease-in-out infinite; }\n .animate-slide-up { animation: slideUp 0.6s ease-out forwards; }\n .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }\n .animate-scale-in { animation: scaleIn 0.5s ease-out forwards; }\n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.2s; }\n .delay-3 { animation-delay: 0.3s; }\n .delay-4 { animation-delay: 0.4s; }\n .delay-5 { animation-delay: 0.5s; }\n .badge-pink {\n background: var(--pink);\n color: white;\n font-size: 10px;\n padding: 2px 8px;\n border-radius: 20px;\n font-weight: 600;\n }\n </style>\n</head>\n<body>\n\n <!-- ============================================ -->\n <!-- SCREEN 1: 启动欢迎页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\" style=\"background: linear-gradient(160deg, #7850EE 0%, #A77AEA 100%);\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px;\">\n <div class=\"animate-scale-in\" style=\"display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:40px;\">\n <div style=\"width:100px;height:100px;background:rgba(255,255,255,0.2);border-radius:24px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:48px;color:white;\"></i>\n </div>\n <div style=\"text-align:center;\">\n <div style=\"font-size:40px;font-weight:800;color:white;letter-spacing:2px;font-family:'Outfit','Noto Sans SC',sans-serif;\">茶屿</div>\n <div style=\"font-size:16px;color:rgba(255,255,255,0.7);margin-top:4px;letter-spacing:6px;\">CHA·YU</div>\n </div>\n </div>\n <div class=\"animate-float\" style=\"position:relative;width:200px;height:180px;margin-bottom:50px;\">\n <div style=\"position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:120px;height:140px;background:rgba(255,255,255,0.15);border-radius:16px 16px 30px 30px;backdrop-filter:blur(2px);\"></div>\n <div style=\"position:absolute;top:10px;left:50%;transform:translateX(-50%);width:100px;height:20px;background:rgba(255,255,255,0.25);border-radius:10px 10px 4px 4px;\"></div>\n <div style=\"position:absolute;top:-20px;left:60%;width:8px;height:60px;background:rgba(255,255,255,0.3);border-radius:4px;transform:rotate(15deg);\"></div>\n <div style=\"position:absolute;bottom:30px;left:30%;width:16px;height:16px;border-radius:50%;background:rgba(253,103,208,0.5);\"></div>\n <div style=\"position:absolute;bottom:50px;left:55%;width:12px;height:12px;border-radius:50%;background:rgba(0,132,255,0.4);\"></div>\n <div style=\"position:absolute;bottom:20px;left:45%;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.3);\"></div>\n <div style=\"position:absolute;bottom:60px;left:40%;width:10px;height:10px;border-radius:50%;background:rgba(253,103,208,0.4);\"></div>\n <div style=\"position:absolute;top:30px;left:25%;width:30px;height:16px;background:rgba(255,255,255,0.2);border-radius:50% 50% 50% 0;transform:rotate(-30deg);\"></div>\n </div>\n <div class=\"animate-slide-up delay-3\" style=\"width:100%;display:flex;justify-content:center;\">\n <button style=\"width:280px;height:56px;background:#FD67D0;border:none;border-radius:28px;color:white;font-size:28px;font-weight:600;cursor:pointer;box-shadow:0 8px 30px rgba(253,103,208,0.4);transition:all 0.3s;font-family:'Noto Sans SC',sans-serif;\"\n onmouseover=\"this.style.transform='scale(1.03)'\" onmouseout=\"this.style.transform='scale(1)'\">\n 立即进入 <i class=\"fa-solid fa-arrow-right\" style=\"margin-left:8px;font-size:20px;\"></i>\n </button>\n </div>\n </div>\n <div style=\"height:20px;\"></div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">① 启动欢迎页 · 1/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 2: 主页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 16px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;\">\n <span style=\"font-size:32px;font-weight:700;color:white;font-family:'Outfit','Noto Sans SC',sans-serif;\">茶屿</span>\n <i class=\"fa-solid fa-magnifying-glass\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <div style=\"background:white;border-radius:20px;padding:10px 18px;display:flex;align-items:center;gap:8px;border:1px solid rgba(31,18,68,0.08);\">\n <i class=\"fa-solid fa-search\" style=\"font-size:16px;color:#1F1244;opacity:0.4;\"></i>\n <span style=\"font-size:22px;color:#1F1244;opacity:0.5;\">搜索饮品、小料...</span>\n </div>\n </div>\n <div class=\"scroll-area\" style=\"padding:0 20px;\">\n <div style=\"margin:16px 0;height:200px;border-radius:16px;background:linear-gradient(135deg,#A77AEA,#7850EE);display:flex;align-items:center;justify-content:space-between;padding:0 24px;overflow:hidden;position:relative;\">\n <div style=\"position:absolute;top:-20px;right:-20px;width:120px;height:120px;border-radius:50%;background:rgba(253,103,208,0.2);\"></div>\n <div style=\"position:absolute;bottom:-30px;left:-30px;width:100px;height:100px;border-radius:50%;background:rgba(0,132,255,0.15);\"></div>\n <div>\n <div style=\"background:#FD67D0;display:inline-block;padding:4px 14px;border-radius:20px;font-size:14px;color:white;font-weight:600;margin-bottom:8px;\">新品上市</div>\n <div style=\"font-size:28px;font-weight:700;color:white;\">杨枝甘露</div>\n <div style=\"font-size:18px;color:rgba(255,255,255,0.8);margin-top:4px;\">第二杯半价</div>\n </div>\n <div style=\"width:80px;height:120px;background:rgba(255,255,255,0.15);border-radius:12px 12px 24px 24px;position:relative;\">\n <div style=\"position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:60px;height:12px;background:rgba(255,255,255,0.2);border-radius:6px;\"></div>\n </div>\n </div>\n <div style=\"margin-bottom:16px;\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:12px;\">\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#A77AEA;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-fire\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">热门饮品</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#0084FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-lemon\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">果茶</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#A77AEA;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-leaf\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">奶绿</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#0084FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-hot\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">纯茶</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#A77AEA;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-cube\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">小料</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#0084FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-cake-candles\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">甜点</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#A77AEA;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-snowflake\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">冰饮</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:52px;height:52px;border-radius:14px;background:#0084FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-temperature-high\" style=\"font-size:22px;color:white;\"></i>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">热饮</span>\n </div>\n </div>\n </div>\n <div style=\"margin-bottom:16px;\">\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;\">\n <span style=\"font-size:30px;font-weight:700;color:#1F1244;\">人气推荐</span>\n <span style=\"font-size:22px;color:#0084FF;font-weight:500;\">更多 <i class=\"fa-solid fa-chevron-right\" style=\"font-size:14px;\"></i></span>\n </div>\n <div style=\"display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;\" class=\"hide-scrollbar\">\n <div style=\"min-width:140px;background:white;border-radius:16px;padding:14px;box-shadow:0 2px 12px rgba(31,18,68,0.06);\">\n <div style=\"width:100%;height:100px;background:linear-gradient(135deg,#A77AEA,#7850EE);border-radius:12px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:32px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;\">招牌奶茶</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-top:6px;\">\n <span style=\"font-size:26px;font-weight:700;color:#FD67D0;\">¥18</span>\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">热销</span>\n </div>\n </div>\n <div style=\"min-width:140px;background:white;border-radius:16px;padding:14px;box-shadow:0 2px 12px rgba(31,18,68,0.06);\">\n <div style=\"width:100%;height:100px;background:linear-gradient(135deg,#0084FF,#7850EE);border-radius:12px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-lemon\" style=\"font-size:32px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;\">满杯橙橙</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-top:6px;\">\n <span style=\"font-size:26px;font-weight:700;color:#FD67D0;\">¥22</span>\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">新品</span>\n </div>\n </div>\n <div style=\"min-width:140px;background:white;border-radius:16px;padding:14px;box-shadow:0 2px 12px rgba(31,18,68,0.06);\">\n <div style=\"width:100%;height:100px;background:linear-gradient(135deg,#FD67D0,#A77AEA);border-radius:12px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-seedling\" style=\"font-size:32px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;\">抹茶拿铁</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-top:6px;\">\n <span style=\"font-size:26px;font-weight:700;color:#FD67D0;\">¥25</span>\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">推荐</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"height:100px;\"></div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">② 主页 · 2/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 3: 点单页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 14px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"text-align:center;font-size:30px;font-weight:600;color:white;\">在线点单</div>\n </div>\n <div style=\"flex:1;display:flex;overflow:hidden;position:relative;\">\n <div style=\"width:160px;min-width:160px;background:#F8F8FF;overflow-y:auto;padding:8px 0;\" class=\"hide-scrollbar\">\n <div style=\"padding:12px 16px;background:#A77AEA;color:white;font-size:22px;font-weight:600;border-radius:0 20px 20px 0;margin-right:0;\">全部</div>\n <div style=\"padding:12px 16px;color:#1F1244;font-size:22px;font-weight:500;\">招牌奶茶</div>\n <div style=\"padding:12px 16px;color:#1F1244;font-size:22px;font-weight:500;\">鲜果茶</div>\n <div style=\"padding:12px 16px;color:#1F1244;font-size:22px;font-weight:500;\">咖啡</div>\n <div style=\"padding:12px 16px;color:#1F1244;font-size:22px;font-weight:500;\">小食</div>\n <div style=\"padding:12px 16px;color:#1F1244;font-size:22px;font-weight:500;\">加料</div>\n </div>\n <div style=\"flex:1;overflow-y:auto;padding:12px 14px 100px;\" class=\"hide-scrollbar\">\n <div style=\"display:flex;flex-direction:column;gap:14px;\">\n <div style=\"background:white;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);position:relative;\">\n <div style=\"width:80px;height:80px;min-width:80px;background:linear-gradient(135deg,#A77AEA,#7850EE);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:30px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">招牌奶茶</span>\n <span style=\"background:#FD67D0;color:white;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;\">爆款</span>\n </div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.5;margin:4px 0;\">经典港式风味</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:24px;font-weight:700;color:#FD67D0;\">¥18</span>\n <button style=\"background:#7850EE;color:white;border:none;padding:6px 16px;border-radius:20px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">加购</button>\n </div>\n </div>\n </div>\n <div style=\"background:white;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);position:relative;\">\n <div style=\"width:80px;height:80px;min-width:80px;background:linear-gradient(135deg,#0084FF,#7850EE);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-lemon\" style=\"font-size:30px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">满杯橙橙</span>\n <span style=\"background:#0084FF;color:white;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;\">新品</span>\n </div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.5;margin:4px 0;\">鲜橙现榨 维C满分</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:24px;font-weight:700;color:#FD67D0;\">¥22</span>\n <button style=\"background:#7850EE;color:white;border:none;padding:6px 16px;border-radius:20px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">加购</button>\n </div>\n </div>\n </div>\n <div style=\"background:white;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);position:relative;\">\n <div style=\"width:80px;height:80px;min-width:80px;background:linear-gradient(135deg,#FD67D0,#A77AEA);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-seedling\" style=\"font-size:30px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">抹茶拿铁</span>\n <span style=\"background:#FD67D0;color:white;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;\">推荐</span>\n </div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.5;margin:4px 0;\">日式抹茶 浓郁丝滑</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:24px;font-weight:700;color:#FD67D0;\">¥25</span>\n <button style=\"background:#7850EE;color:white;border:none;padding:6px 16px;border-radius:20px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">加购</button>\n </div>\n </div>\n </div>\n <div style=\"background:white;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);position:relative;\">\n <div style=\"width:80px;height:80px;min-width:80px;background:linear-gradient(135deg,#A77AEA,#1F1244);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-hot\" style=\"font-size:30px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">金骏眉红茶</span>\n </div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.5;margin:4px 0;\">高山红茶 醇厚回甘</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:24px;font-weight:700;color:#FD67D0;\">¥15</span>\n <button style=\"background:#7850EE;color:white;border:none;padding:6px 16px;border-radius:20px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">加购</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Floating cart bar -->\n <div style=\"position:absolute;bottom:100px;left:0;right:0;height:70px;background:white;border-top:1px solid rgba(31,18,68,0.06);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:40;box-shadow:0 -4px 20px rgba(0,0,0,0.04);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"position:relative;\">\n <i class=\"fa-solid fa-cart-shopping\" style=\"font-size:26px;color:#1F1244;\"></i>\n <span style=\"position:absolute;top:-6px;right:-10px;background:#FD67D0;color:white;font-size:10px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;\">3</span>\n </div>\n <span style=\"font-size:20px;color:#1F1244;font-weight:500;\">¥52</span>\n </div>\n <button style=\"background:#0084FF;color:white;border:none;padding:10px 28px;border-radius:24px;font-size:22px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">去结算</button>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">③ 点单页 · 3/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 4: 商品详情页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 14px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;gap:12px;\">\n <i class=\"fa-solid fa-chevron-left\" style=\"font-size:22px;color:white;\"></i>\n <span style=\"font-size:28px;font-weight:600;color:white;\">招牌奶茶</span>\n </div>\n </div>\n <!-- Product image area -->\n <div style=\"height:280px;background:linear-gradient(135deg,#A77AEA 0%,#D4B8FF 50%,#F0E6FF 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;\">\n <div style=\"position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(120,80,238,0.1);\"></div>\n <div style=\"position:absolute;bottom:-20px;left:-20px;width:100px;height:100px;border-radius:50%;background:rgba(253,103,208,0.08);\"></div>\n <div style=\"width:140px;height:180px;background:linear-gradient(180deg,rgba(120,80,238,0.3),rgba(120,80,238,0.1));border-radius:20px 20px 40px 40px;display:flex;align-items:center;justify-content:center;position:relative;\">\n <div style=\"position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:100px;height:16px;background:rgba(120,80,238,0.25);border-radius:8px;\"></div>\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:60px;color:rgba(120,80,238,0.3);\"></i>\n </div>\n </div>\n <div class=\"scroll-area\" style=\"padding:16px 20px 100px;\">\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;\">\n <span style=\"font-size:34px;font-weight:700;color:#1F1244;\">招牌奶茶</span>\n <span style=\"font-size:32px;font-weight:800;color:#FD67D0;\">¥18</span>\n </div>\n <div style=\"font-size:22px;color:#1F1244;opacity:0.5;margin-bottom:20px;\">经典港式风味，茶味浓郁，丝滑入口</div>\n <!-- Size selection -->\n <div style=\"margin-bottom:16px;\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;margin-bottom:8px;\">甜度</div>\n <div style=\"display:flex;gap:10px;flex-wrap:wrap;\">\n <div style=\"padding:8px 20px;border-radius:20px;background:#7850EE;color:white;font-size:20px;font-weight:500;\">三分糖</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">五分糖</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">全糖</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">无糖</div>\n </div>\n </div>\n <div style=\"margin-bottom:16px;\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;margin-bottom:8px;\">温度</div>\n <div style=\"display:flex;gap:10px;flex-wrap:wrap;\">\n <div style=\"padding:8px 20px;border-radius:20px;background:#7850EE;color:white;font-size:20px;font-weight:500;\">冰</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">少冰</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">常温</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">热</div>\n </div>\n </div>\n <div style=\"margin-bottom:16px;\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;margin-bottom:8px;\">加料</div>\n <div style=\"display:flex;gap:10px;flex-wrap:wrap;\">\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">珍珠 +¥2</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">椰果 +¥2</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">布丁 +¥3</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:#EEEEEE;color:#1F1244;font-size:20px;font-weight:500;\">芋泥 +¥3</div>\n </div>\n </div>\n <!-- Quantity -->\n <div style=\"display:flex;align-items:center;gap:16px;margin-bottom:16px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">数量</span>\n <div style=\"display:flex;align-items:center;gap:12px;\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;\"><i class=\"fa-solid fa-minus\"></i></div>\n <span style=\"font-size:26px;font-weight:600;color:#1F1244;\">1</span>\n <div style=\"width:36px;height:36px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;\"><i class=\"fa-solid fa-plus\"></i></div>\n </div>\n </div>\n <div style=\"height:90px;\"></div>\n </div>\n <!-- Bottom action bar -->\n <div style=\"position:absolute;bottom:100px;left:0;right:0;height:90px;background:white;border-top:1px solid rgba(31,18,68,0.06);display:flex;align-items:center;gap:14px;padding:0 20px;z-index:40;\">\n <button style=\"flex:1;height:54px;background:#A77AEA;color:white;border:none;border-radius:27px;font-size:24px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">加入购物车</button>\n <button style=\"flex:1;height:54px;background:#7850EE;color:white;border:none;border-radius:27px;font-size:24px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">立即购买</button>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">④ 商品详情 · 4/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 5: 购物车页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 14px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:30px;font-weight:600;color:white;\">我的购物车</span>\n <span style=\"font-size:22px;color:white;opacity:0.8;\">编辑</span>\n </div>\n </div>\n <div class=\"scroll-area\" style=\"padding:16px 20px 140px;\">\n <div style=\"display:flex;flex-direction:column;gap:14px;\">\n <div style=\"background:white;border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"width:70px;height:70px;min-width:70px;background:linear-gradient(135deg,#A77AEA,#7850EE);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:26px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;\">招牌奶茶</div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.4;\">三分糖 · 冰</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-top:4px;\">\n <span style=\"font-size:22px;font-weight:700;color:#FD67D0;\">¥18</span>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:28px;height:28px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;font-size:12px;\"><i class=\"fa-solid fa-minus\"></i></div>\n <span style=\"font-size:22px;font-weight:600;color:#1F1244;\">2</span>\n <div style=\"width:28px;height:28px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;font-size:12px;\"><i class=\"fa-solid fa-plus\"></i></div>\n </div>\n </div>\n </div>\n </div>\n <div style=\"background:white;border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"width:70px;height:70px;min-width:70px;background:linear-gradient(135deg,#0084FF,#7850EE);border-radius:14px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-lemon\" style=\"font-size:26px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;\">满杯橙橙</div>\n <div style=\"font-size:18px;color:#1F1244;opacity:0.4;\">全糖 · 少冰</div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-top:4px;\">\n <span style=\"font-size:22px;font-weight:700;color:#FD67D0;\">¥22</span>\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:28px;height:28px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;font-size:12px;\"><i class=\"fa-solid fa-minus\"></i></div>\n <span style=\"font-size:22px;font-weight:600;color:#1F1244;\">1</span>\n <div style=\"width:28px;height:28px;border-radius:50%;background:#A77AEA;display:flex;align-items:center;justify-content:center;color:white;cursor:pointer;font-size:12px;\"><i class=\"fa-solid fa-plus\"></i></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- Settlement bar -->\n <div style=\"position:absolute;bottom:100px;left:0;right:0;height:80px;background:white;border-top:1px solid rgba(31,18,68,0.06);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:40;\">\n <div>\n <span style=\"font-size:22px;color:#1F1244;\">合计：</span>\n <span style=\"font-size:30px;font-weight:800;color:#FD67D0;\">¥58</span>\n </div>\n <button style=\"background:#7850EE;color:white;border:none;padding:12px 36px;border-radius:28px;font-size:24px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">去下单</button>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">⑤ 购物车 · 5/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 6: 确认订单/结算页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 14px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;gap:12px;\">\n <i class=\"fa-solid fa-chevron-left\" style=\"font-size:22px;color:white;\"></i>\n <span style=\"font-size:30px;font-weight:600;color:white;\">确认订单</span>\n </div>\n </div>\n <div class=\"scroll-area\" style=\"padding:16px 20px 140px;\">\n <!-- Pickup info -->\n <div style=\"background:#F5F0FF;border-radius:16px;padding:16px;margin-bottom:14px;\">\n <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">取餐门店</span>\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <span style=\"font-size:22px;color:#1F1244;\">茶屿·万达广场店</span>\n <i class=\"fa-solid fa-chevron-down\" style=\"font-size:14px;color:#1F1244;opacity:0.4;\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">取餐时间</span>\n <div style=\"display:flex;align-items:center;gap:8px;\">\n <span style=\"background:#0084FF;color:white;padding:4px 12px;border-radius:16px;font-size:18px;\">立即取餐</span>\n <span style=\"font-size:22px;color:#1F1244;\">现在</span>\n </div>\n </div>\n </div>\n <!-- Order items -->\n <div style=\"background:white;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;margin-bottom:12px;\">商品清单</div>\n <div style=\"display:flex;flex-direction:column;gap:10px;\">\n <div style=\"display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid rgba(31,18,68,0.06);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:40px;height:40px;background:linear-gradient(135deg,#A77AEA,#7850EE);border-radius:10px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:16px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div>\n <div style=\"font-size:22px;font-weight:500;color:#1F1244;\">招牌奶茶</div>\n <div style=\"font-size:16px;color:#1F1244;opacity:0.4;\">三分糖·冰 x2</div>\n </div>\n </div>\n <span style=\"font-size:22px;font-weight:700;color:#1F1244;\">¥36</span>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <div style=\"width:40px;height:40px;background:linear-gradient(135deg,#0084FF,#7850EE);border-radius:10px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-lemon\" style=\"font-size:16px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div>\n <div style=\"font-size:22px;font-weight:500;color:#1F1244;\">满杯橙橙</div>\n <div style=\"font-size:16px;color:#1F1244;opacity:0.4;\">全糖·少冰 x1</div>\n </div>\n </div>\n <span style=\"font-size:22px;font-weight:700;color:#1F1244;\">¥22</span>\n </div>\n </div>\n </div>\n <!-- Coupon -->\n <div style=\"background:white;border-radius:16px;padding:16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <i class=\"fa-solid fa-ticket\" style=\"font-size:22px;color:#FD67D0;\"></i>\n <span style=\"font-size:22px;color:#1F1244;\">优惠券</span>\n <span style=\"background:#FD67D0;color:white;padding:2px 10px;border-radius:12px;font-size:16px;\">1张可用</span>\n </div>\n <i class=\"fa-solid fa-chevron-right\" style=\"font-size:16px;color:#1F1244;opacity:0.3;\"></i>\n </div>\n <!-- Fee detail -->\n <div style=\"background:white;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"display:flex;justify-content:space-between;margin-bottom:6px;\">\n <span style=\"font-size:22px;color:#1F1244;\">商品小计</span>\n <span style=\"font-size:22px;color:#1F1244;\">¥58</span>\n </div>\n <div style=\"display:flex;justify-content:space-between;margin-bottom:6px;\">\n <span style=\"font-size:22px;color:#1F1244;\">配送费</span>\n <span style=\"font-size:22px;color:#1F1244;\">¥0</span>\n </div>\n <div style=\"display:flex;justify-content:space-between;margin-bottom:6px;\">\n <span style=\"font-size:22px;color:#1F1244;\">优惠减免</span>\n <span style=\"font-size:22px;color:#FD67D0;\">-¥5</span>\n </div>\n <div style=\"display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid rgba(31,18,68,0.06);\">\n <span style=\"font-size:24px;font-weight:600;color:#1F1244;\">实付金额</span>\n <span style=\"font-size:28px;font-weight:800;color:#FD67D0;\">¥53</span>\n </div>\n </div>\n <!-- Payment method -->\n <div style=\"background:white;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"font-size:24px;font-weight:600;color:#1F1244;margin-bottom:12px;\">支付方式</div>\n <div style=\"display:flex;gap:12px;\">\n <div style=\"flex:1;padding:12px;border-radius:14px;background:#7850EE;color:white;display:flex;align-items:center;justify-content:center;gap:8px;\">\n <i class=\"fa-brands fa-weixin\" style=\"font-size:22px;\"></i>\n <span style=\"font-size:20px;font-weight:500;\">微信支付</span>\n </div>\n <div style=\"flex:1;padding:12px;border-radius:14px;background:#F5F0FF;color:#1F1244;display:flex;align-items:center;justify-content:center;gap:8px;\">\n <i class=\"fa-brands fa-alipay\" style=\"font-size:22px;\"></i>\n <span style=\"font-size:20px;font-weight:500;\">支付宝</span>\n </div>\n </div>\n </div>\n <div style=\"height:80px;\"></div>\n </div>\n <!-- Submit button -->\n <div style=\"position:absolute;bottom:100px;left:0;right:0;z-index:40;padding:0 20px;background:white;padding-top:12px;padding-bottom:12px;border-top:1px solid rgba(31,18,68,0.06);\">\n <button style=\"width:100%;height:54px;background:#7850EE;color:white;border:none;border-radius:27px;font-size:26px;font-weight:600;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">提交订单并支付</button>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">⑥ 确认订单 · 6/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 7: 订单列表页 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <div style=\"background:var(--primary);padding:0 20px 14px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"text-align:center;font-size:30px;font-weight:600;color:white;\">全部订单</div>\n </div>\n <div class=\"scroll-area\" style=\"padding:16px 20px 100px;\">\n <!-- Order tabs -->\n <div style=\"display:flex;gap:8px;margin-bottom:16px;\">\n <div style=\"padding:8px 20px;border-radius:20px;background:#7850EE;color:white;font-size:20px;font-weight:500;\">全部</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:white;color:#1F1244;font-size:20px;font-weight:500;border:1px solid rgba(31,18,68,0.08);\">待取餐</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:white;color:#1F1244;font-size:20px;font-weight:500;border:1px solid rgba(31,18,68,0.08);\">已完成</div>\n <div style=\"padding:8px 20px;border-radius:20px;background:white;color:#1F1244;font-size:20px;font-weight:500;border:1px solid rgba(31,18,68,0.08);\">已取消</div>\n </div>\n <!-- Order cards -->\n <div style=\"display:flex;flex-direction:column;gap:14px;\">\n <div style=\"background:white;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"display:flex;justify-content:space-between;margin-bottom:10px;\">\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">#ORD-20240101</span>\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">12-25 14:30</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:10px;\">\n <div style=\"width:50px;height:50px;min-width:50px;background:linear-gradient(135deg,#A77AEA,#7850EE);border-radius:12px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:20px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"font-size:22px;font-weight:500;color:#1F1244;\">招牌奶茶 x2 · 满杯橙橙 x1</div>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:8px;\">\n <span style=\"font-size:18px;color:#FD67D0;font-weight:600;\">● 待取餐</span>\n <span style=\"font-size:22px;font-weight:700;color:#1F1244;\">¥58</span>\n </div>\n <button style=\"background:#A77AEA;color:white;border:none;padding:6px 16px;border-radius:18px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">查看详情</button>\n </div>\n </div>\n <div style=\"background:white;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"display:flex;justify-content:space-between;margin-bottom:10px;\">\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">#ORD-20240102</span>\n <span style=\"font-size:18px;color:#1F1244;opacity:0.5;\">12-24 10:15</span>\n </div>\n <div style=\"display:flex;align-items:center;gap:12px;margin-bottom:10px;\">\n <div style=\"width:50px;height:50px;min-width:50px;background:linear-gradient(135deg,#FD67D0,#A77AEA);border-radius:12px;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-seedling\" style=\"font-size:20px;color:rgba(255,255,255,0.6);\"></i>\n </div>\n <div style=\"flex:1;\">\n <div style=\"font-size:22px;font-weight:500;color:#1F1244;\">抹茶拿铁 x1</div>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:8px;\">\n <span style=\"font-size:18px;color:#0084FF;font-weight:600;\">● 已完成</span>\n <span style=\"font-size:22px;font-weight:700;color:#1F1244;\">¥25</span>\n </div>\n <button style=\"background:#A77AEA;color:white;border:none;padding:6px 16px;border-radius:18px;font-size:18px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">查看详情</button>\n </div>\n </div>\n </div>\n <div style=\"height:20px;\"></div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">⑦ 订单列表 · 7/8</div>\n </div>\n\n <!-- ============================================ -->\n <!-- SCREEN 8: 个人中心 -->\n <!-- ============================================ -->\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"screen-content\">\n <!-- Profile header -->\n <div style=\"background:linear-gradient(160deg,#7850EE,#A77AEA);padding:0 20px 24px;\">\n <div class=\"status-bar\">\n <span>9:41</span>\n <div style=\"display:flex;gap:6px;align-items:center;\">\n <i class=\"fa-solid fa-signal\"></i>\n <i class=\"fa-solid fa-wifi\"></i>\n <i class=\"fa-solid fa-battery-full\"></i>\n </div>\n </div>\n <div style=\"display:flex;align-items:center;gap:16px;margin-bottom:16px;\">\n <div style=\"width:72px;height:72px;min-width:72px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,0.3);\">\n <i class=\"fa-solid fa-user\" style=\"font-size:32px;color:white;\"></i>\n </div>\n <div>\n <div style=\"display:flex;align-items:center;gap:8px;\">\n <span style=\"font-size:34px;font-weight:700;color:white;\">小屿同学</span>\n <span style=\"background:#FD67D0;color:white;font-size:14px;padding:2px 12px;border-radius:20px;font-weight:600;\">钻石会员</span>\n </div>\n <div style=\"display:flex;gap:20px;margin-top:6px;\">\n <div><span style=\"font-size:28px;font-weight:700;color:white;\">1280</span><span style=\"font-size:16px;color:rgba(255,255,255,0.7);margin-left:4px;\">积分</span></div>\n <div><span style=\"font-size:28px;font-weight:700;color:white;\">5</span><span style=\"font-size:16px;color:rgba(255,255,255,0.7);margin-left:4px;\">优惠券</span></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"scroll-area\" style=\"padding:16px 20px 100px;\">\n <!-- Grid menu -->\n <div style=\"background:white;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(31,18,68,0.04);\">\n <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:12px;\">\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:44px;height:44px;border-radius:12px;background:#F5F0FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-ticket\" style=\"font-size:20px;color:#7850EE;\"></i>\n </div>\n <span style=\"font-size:18px;color:#1F1244;\">优惠券</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:44px;height:44px;border-radius:12px;background:#F0F8FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-coins\" style=\"font-size:20px;color:#0084FF;\"></i>\n </div>\n <span style=\"font-size:18px;color:#1F1244;\">积分</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:44px;height:44px;border-radius:12px;background:#FFF0F5;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-location-dot\" style=\"font-size:20px;color:#FD67D0;\"></i>\n </div>\n <span style=\"font-size:18px;color:#1F1244;\">地址</span>\n </div>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:6px;\">\n <div style=\"width:44px;height:44px;border-radius:12px;background:#F5F0FF;display:flex;align-items:center;justify-content:center;\">\n <i class=\"fa-solid fa-headset\" style=\"font-size:20px;color:#7850EE;\"></i>\n </div>\n <span style=\"font-size:18px;color:#1F1244;\">客服</span>\n </div>\n </div>\n </div>\n <!-- List menu -->\n <div style=\"background:white;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(31,18,68,0.04);margin-bottom:14px;\">\n <div style=\"padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(31,18,68,0.04);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <i class=\"fa-solid fa-receipt\" style=\"font-size:20px;color:#1F1244;opacity:0.5;\"></i>\n <span style=\"font-size:22px;color:#1F1244;\">订单记录</span>\n </div>\n <i class=\"fa-solid fa-chevron-right\" style=\"font-size:14px;color:#1F1244;opacity:0.3;\"></i>\n </div>\n <div style=\"padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(31,18,68,0.04);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <i class=\"fa-solid fa-heart\" style=\"font-size:20px;color:#1F1244;opacity:0.5;\"></i>\n <span style=\"font-size:22px;color:#1F1244;\">收藏饮品</span>\n </div>\n <i class=\"fa-solid fa-chevron-right\" style=\"font-size:14px;color:#1F1244;opacity:0.3;\"></i>\n </div>\n <div style=\"padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(31,18,68,0.04);\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <i class=\"fa-solid fa-gear\" style=\"font-size:20px;color:#1F1244;opacity:0.5;\"></i>\n <span style=\"font-size:22px;color:#1F1244;\">设置</span>\n </div>\n <i class=\"fa-solid fa-chevron-right\" style=\"font-size:14px;color:#1F1244;opacity:0.3;\"></i>\n </div>\n <div style=\"padding:16px 20px;display:flex;align-items:center;justify-content:space-between;\">\n <div style=\"display:flex;align-items:center;gap:10px;\">\n <i class=\"fa-solid fa-circle-info\" style=\"font-size:20px;color:#1F1244;opacity:0.5;\"></i>\n <span style=\"font-size:22px;color:#1F1244;\">关于我们</span>\n </div>\n <i class=\"fa-solid fa-chevron-right\" style=\"font-size:14px;color:#1F1244;opacity:0.3;\"></i>\n </div>\n </div>\n <!-- Logout -->\n <button style=\"width:100%;padding:16px;border-radius:16px;background:#F5F0FF;border:none;color:#1F1244;font-size:22px;font-weight:500;cursor:pointer;font-family:'Noto Sans SC',sans-serif;\">退出登录</button>\n <div style=\"height:20px;\"></div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-cart-shopping\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item active\">\n <i class=\"fa-solid fa-user\"></i>\n <span>我的</span>\n </div>\n </div>\n </div>\n </div>\n <div style=\"text-align:center;padding:10px 0 14px;font-size:13px;color:#7850EE;font-weight:500;background:rgba(120,80,238,0.04);\">⑧ 个人中心 · 8/8</div>\n </div>\n\n <!-- Page indicator -->\n <div style=\"text-align:center;padding:20px 10px 40px;color:#1F1244;font-size:16px;opacity:0.5;\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"margin-right:6px;\"></i>\n 茶屿·奶茶点单 · 8屏高保真UI设计\n <i class=\"fa-solid fa-mug-saucer\" style=\"margin-left:6px;\"></i>\n </div>\n\n</body>\n</html>"
},
"next": ["调整间距比例", "增加动效细节", "深化交互状态", "补充空状态页", "优化字体层级"],
"breakpoint": "xs"
}
```