I'll start by getting the design system recommendations and assets for this milk tea ordering mini-program.Now let me create the complete 8-screen high-fidelity UI for the milk tea ordering mini-program. This is a mobile-first design at 750×1334px.
```json
{
"summary": "为奶茶点单小程序生成8套高保真移动端界面（750×1334px），采用极简色块风，主色#7850EE，辅助色#A77AEA/#1F1244/#0084FF，提醒色#FD67D0。包含启动页、主页、点单页、商品详情、购物车、结算页、订单列表、个人中心，统一底部四栏导航。所有元素以纯色块+圆角构成，无复杂图片，使用Font Awesome图标，Google Fonts选用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>茶屿·奶茶点单</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 * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\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 0;\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 - Global */\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 {\n font-size: 24px;\n transition: all 0.2s;\n }\n .nav-item span {\n font-size: 18px;\n font-weight: 500;\n transition: all 0.2s;\n }\n .nav-item.active i,\n .nav-item.active span {\n color: var(--primary);\n }\n .nav-item:not(.active) i,\n .nav-item:not(.active) span {\n color: var(--dark);\n }\n /* Status bar mock */\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 {\n color: var(--dark);\n }\n /* Scrollable content area */\n .scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n .scroll-area::-webkit-scrollbar {\n display: none;\n }\n /* Custom animations */\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 {\n animation: float 3s ease-in-out infinite;\n }\n .animate-slide-up {\n animation: slideUp 0.6s ease-out forwards;\n }\n .animate-fade-in {\n animation: fadeIn 0.8s ease-out forwards;\n }\n .animate-scale-in {\n animation: scaleIn 0.5s ease-out forwards;\n }\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 /* Color blocks for illustrations */\n .cup-shape {\n width: 80px;\n height: 100px;\n border-radius: 8px 8px 20px 20px;\n position: relative;\n }\n .cup-shape::after {\n content: '';\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 14px;\n border-radius: 6px;\n background: inherit;\n opacity: 0.7;\n }\n .bubble {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n position: absolute;\n }\n /* Badge */\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 /* Tag styles */\n .tag-primary {\n background: var(--primary);\n color: white;\n }\n .tag-outline {\n background: transparent;\n border: 1.5px solid var(--primary);\n color: var(--primary);\n }\n .tag-gray {\n background: #EEEEEE;\n color: var(--dark);\n }\n /* Scrollbar hide for all */\n .hide-scrollbar::-webkit-scrollbar { display: none; }\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\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 <!-- Status Bar -->\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 <!-- Content -->\n <div style=\"flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px;\">\n <!-- Logo area -->\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 <!-- Illustration -->\n <div class=\"animate-float\" style=\"position:relative;width:200px;height:180px;margin-bottom:50px;\">\n <!-- Cup base -->\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 <!-- Cup lid -->\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 <!-- Straw -->\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 <!-- Bubble decorations -->\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 <!-- Leaf -->\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 <!-- Enter Button -->\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 <!-- Bottom safe area -->\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 <!-- Top bar -->\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 <!-- Search box -->\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 <!-- Scrollable content -->\n <div class=\"scroll-area\" style=\"padding:0 20px;\">\n <!-- Banner Carousel -->\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 <!-- Quick Categories -->\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 <!-- Popular Recommendations -->\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 <!-- Spacer for bottom nav -->\n <div style=\"height:100px;\"></div>\n </div>\n <!-- Bottom Nav -->\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 <!-- Top bar -->\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 <!-- Main content: left sidebar + right list -->\n <div style=\"flex:1;display:flex;overflow:hidden;position:relative;\">\n <!-- Left sidebar -->\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 <!-- Right product list -->\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 <!-- Product 1 -->\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 <!-- Product 2 -->\n <div style=\"background:white;border-radius:16px;padding:14px;display:flex;gap:14px;box-shadow:0 2px 10px rgba(31,18,