我先获取设计系统建议和图片素材。好的，我来设计这个奶茶点单小程序的UI界面。让我先确认一下颜色值——用户给的"#785OEE"中"O"应该是"0"，即#7850EE。
现在开始设计这个750x1334px的手机端奶茶点单界面。
```json
{
"summary": "设计了一个750x1334px的奶茶点单小程序UI界面。采用深色主题，主色#7850EE（紫色），辅助色#A77AEA、#1F1244、#0084FF，提醒色#FD67D0（粉色）。顶部为品牌头图+搜索栏，中间为分类导航（热销/奶茶/果茶/纯茶/小料），下方为饮品列表卡片（含图片、名称、价格、标签），底部固定购物车栏。整体风格简洁色块化，类别分明，重点突出。",
"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=750, 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=Noto+Sans+SC:wght@300;400;500;…\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #7850EE;\n --primary-light: #A77AEA;\n --primary-dark: #1F1244;\n --accent-blue: #0084FF;\n --accent-pink: #FD67D0;\n --bg-dark: #0D0820;\n --bg-card: #1A1235;\n --bg-card2: #231A42;\n --text-primary: #FFFFFF;\n --text-secondary: rgba(255,255,255,0.7);\n --text-muted: rgba(255,255,255,0.4);\n --radius-sm: 12px;\n --radius-md: 16px;\n --radius-lg: 24px;\n --radius-xl: 32px;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background: var(--bg-dark);\n color: var(--text-primary);\n width: 750px;\n height: 1334px;\n overflow: hidden;\n position: relative;\n }\n\n /* 背景装饰 */\n .bg-glow-1 {\n position: absolute;\n top: -200px;\n right: -150px;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(120,80,238,0.25) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n .bg-glow-2 {\n position: absolute;\n bottom: 100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: radial-gradient(circle, rgba(253,103,208,0.12) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n .bg-glow-3 {\n position: absolute;\n top: 400px;\n left: 200px;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(0,132,255,0.08) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n\n /* 滚动容器 */\n .scroll-container {\n position: relative;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scroll-behavior: smooth;\n padding-bottom: 140px;\n }\n .scroll-container::-webkit-scrollbar {\n width: 0;\n }\n\n /* 顶部渐变条 */\n .top-bar {\n background: linear-gradient(135deg, var(--primary) 0%, #6A3FD8 100%);\n padding: 40px 32px 28px;\n position: relative;\n overflow: hidden;\n }\n .top-bar::after {\n content: '';\n position: absolute;\n top: -60px;\n right: -40px;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(167,122,234,0.3) 0%, transparent 70%);\n border-radius: 50%;\n }\n .top-bar::before {\n content: '';\n position: absolute;\n bottom: -80px;\n left: -30px;\n width: 160px;\n height: 160px;\n background: radial-gradient(circle, rgba(253,103,208,0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n /* 搜索框 */\n .search-box {\n background: rgba(255,255,255,0.15);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 50px;\n padding: 14px 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: all 0.3s ease;\n }\n .search-box:focus-within {\n background: rgba(255,255,255,0.22);\n border-color: rgba(255,255,255,0.25);\n }\n .search-box input {\n background: transparent;\n border: none;\n outline: none;\n color: #fff;\n font-size: 26px;\n font-family: 'Noto Sans SC', sans-serif;\n width: 100%;\n }\n .search-box input::placeholder {\n color: rgba(255,255,255,0.5);\n }\n\n /* 分类导航 */\n .category-tab {\n display: flex;\n gap: 12px;\n padding: 24px 32px 20px;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .category-tab::-webkit-scrollbar {\n display: none;\n }\n .cat-item {\n flex-shrink: 0;\n padding: 12px 28px;\n border-radius: 50px;\n font-size: 24px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n background: var(--bg-card);\n color: var(--text-secondary);\n border: 1px solid transparent;\n position: relative;\n user-select: none;\n }\n .cat-item.active {\n background: var(--primary);\n color: #fff;\n box-shadow: 0 8px 24px rgba(120,80,238,0.35);\n transform: scale(1.02);\n }\n .cat-item:active {\n transform: scale(0.95);\n }\n\n /* 饮品卡片 */\n .menu-grid {\n padding: 8px 28px 20px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n\n .drink-card {\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n padding: 20px 18px 18px;\n position: relative;\n transition: all 0.3s ease;\n border: 1px solid rgba(255,255,255,0.04);\n cursor: pointer;\n }\n .drink-card:active {\n transform: scale(0.97);\n }\n\n .drink-card .img-wrap {\n width: 100%;\n aspect-ratio: 1/1;\n border-radius: var(--radius-md);\n overflow: hidden;\n margin-bottom: 14px;\n background: linear-gradient(135deg, var(--bg-card2), var(--bg-dark));\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n .drink-card .img-wrap i {\n font-size: 56px;\n opacity: 0.6;\n }\n\n .drink-card .tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: 18px;\n font-weight: 500;\n margin-bottom: 8px;\n }\n .tag-hot {\n background: rgba(253,103,208,0.2);\n color: var(--accent-pink);\n }\n .tag-new {\n background: rgba(0,132,255,0.2);\n color: var(--accent-blue);\n }\n .tag-recommend {\n background: rgba(167,122,234,0.2);\n color: var(--primary-light);\n }\n\n .drink-card .name {\n font-size: 26px;\n font-weight: 700;\n margin-bottom: 4px;\n line-height: 1.3;\n }\n .drink-card .desc {\n font-size: 20px;\n color: var(--text-muted);\n margin-bottom: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .drink-card .price-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .drink-card .price {\n font-size: 28px;\n font-weight: 700;\n color: var(--accent-pink);\n }\n .drink-card .price .unit {\n font-size: 20px;\n font-weight: 500;\n }\n .drink-card .add-btn {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--primary);\n border: none;\n color: #fff;\n font-size: 22px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.25s ease;\n box-shadow: 0 4px 12px rgba(120,80,238,0.3);\n }\n .drink-card .add-btn:active {\n transform: scale(0.85);\n box-shadow: 0 2px 6px rgba(120,80,238,0.2);\n }\n\n /* 底部购物车栏 */\n .cart-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 130px;\n background: var(--bg-card);\n border-top: 1px solid rgba(255,255,255,0.06);\n padding: 16px 28px 20px;\n display: flex;\n align-items: center;\n gap: 20px;\n backdrop-filter: blur(20px);\n z-index: 50;\n }\n\n .cart-icon-wrap {\n position: relative;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: var(--primary-dark);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .cart-icon-wrap i {\n font-size: 28px;\n color: var(--primary-light);\n }\n .cart-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: var(--accent-pink);\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(253,103,208,0.4);\n }\n\n .cart-info {\n flex: 1;\n }\n .cart-info .total {\n font-size: 30px;\n font-weight: 700;\n }\n .cart-info .total .num {\n color: var(--accent-pink);\n }\n .cart-info .hint {\n font-size: 20px;\n color: var(--text-muted);\n margin-top: 2px;\n }\n\n .cart-checkout {\n padding: 16px 40px;\n border-radius: 50px;\n background: linear-gradient(135deg, var(--primary) 0%, #6A3FD8 100%);\n border: none;\n color: #fff;\n font-size: 28px;\n font-weight: 700;\n font-family: 'Noto Sans SC', sans-serif;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 6px 20px rgba(120,80,238,0.35);\n white-space: nowrap;\n }\n .cart-checkout:active {\n transform: scale(0.96);\n box-shadow: 0 3px 10px rgba(120,80,238,0.2);\n }\n\n /* 动画 */\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\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 .animate-fade-up {\n animation: fadeUp 0.5s ease forwards;\n opacity: 0;\n }\n .delay-1 { animation-delay: 0.05s; }\n .delay-2 { animation-delay: 0.1s; }\n .delay-3 { animation-delay: 0.15s; }\n .delay-4 { animation-delay: 0.2s; }\n .delay-5 { animation-delay: 0.25s; }\n .delay-6 { animation-delay: 0.3s; }\n .delay-7 { animation-delay: 0.35s; }\n .delay-8 { animation-delay: 0.4s; }\n\n /* 数量选择器 */\n .qty-control {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .qty-btn {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .qty-btn.minus {\n background: rgba(255,255,255,0.08);\n color: var(--text-secondary);\n }\n .qty-btn.plus {\n background: var(--primary);\n color: #fff;\n }\n .qty-btn:active {\n transform: scale(0.85);\n }\n .qty-num {\n font-size: 22px;\n font-weight: 600;\n min-width: 28px;\n text-align: center;\n }\n\n /* 轮播指示器 */\n .banner-dots {\n display: flex;\n gap: 8px;\n justify-content: center;\n margin-top: 16px;\n }\n .banner-dots span {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n transition: all 0.3s ease;\n }\n .banner-dots span.active {\n width: 32px;\n border-radius: 5px;\n background: var(--accent-pink);\n }\n\n /* 特色标签行 */\n .feature-row {\n display: flex;\n gap: 12px;\n padding: 0 28px 16px;\n overflow-x: auto;\n scrollbar-width: none;\n }\n .feature-row::-webkit-scrollbar {\n display: none;\n }\n .feature-chip {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 50px;\n background: var(--bg-card);\n border: 1px solid rgba(255,255,255,0.05);\n font-size: 22px;\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.25s ease;\n }\n .feature-chip i {\n font-size: 20px;\n color: var(--primary-light);\n }\n .feature-chip:active {\n transform: scale(0.95);\n background: var(--bg-card2);\n }\n </style>\n</head>\n<body>\n <!-- 背景光晕 -->\n <div class=\"bg-glow-1\"></div>\n <div class=\"bg-glow-2\"></div>\n <div class=\"bg-glow-3\"></div>\n\n <!-- 主容器 -->\n <div class=\"scroll-container\">\n \n <!-- 顶部品牌区 -->\n <div class=\"top-bar\">\n <div class=\"flex items-center justify-between mb-6\" style=\"position:relative;z-index:2;\">\n <div>\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-leaf\" style=\"font-size:32px;color:rgba(255,255,255,0.9);\"></i>\n <span style=\"font-size:32px;font-weight:900;letter-spacing:2px;font-family:'Quicksand','Noto Sans SC',sans-serif;\">茶屿</span>\n </div>\n <div style=\"font-size:20px;color:rgba(255,255,255,0.6);margin-top:2px;\">新鲜手作 · 每日现泡</div>\n </div>\n <div class=\"flex items-center gap-6\">\n <i class=\"fa-regular fa-bell\" style=\"font-size:28px;color:rgba(255,255,255,0.7);cursor:pointer;\"></i>\n <div style=\"width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;\">\n <i class=\"fa-regular fa-user\" style=\"font-size:22px;color:rgba(255,255,255,0.8);\"></i>\n </div>\n </div>\n </div>\n\n <!-- 搜索框 -->\n <div class=\"search-box\" style=\"position:relative;z-index:2;\">\n <i class=\"fa-solid fa-magnifying-glass\" style=\"font-size:22px;color:rgba(255,255,255,0.5);\"></i>\n <input type=\"text\" placeholder=\"搜索饮品、小料...\" />\n </div>\n </div>\n\n <!-- 特色标签 -->\n <div class=\"feature-row animate-fade-up delay-1\">\n <div class=\"feature-chip\">\n <i class=\"fa-solid fa-fire\"></i>\n <span>今日热销</span>\n </div>\n <div class=\"feature-chip\">\n <i class=\"fa-solid fa-tag\"></i>\n <span>限时特惠</span>\n </div>\n <div class=\"feature-chip\">\n <i class=\"fa-solid fa-gem\"></i>\n <span>新品上市</span>\n </div>\n <div class=\"feature-chip\">\n <i class=\"fa-solid fa-star\"></i>\n <span>会员专享</span>\n </div>\n </div>\n\n <!-- 分类导航 -->\n <div class=\"category-tab animate-fade-up delay-2\">\n <div class=\"cat-item active\">🔥 热销</div>\n <div class=\"cat-item\">🧋 奶茶</div>\n <div class=\"cat-item\">🍑 果茶</div>\n <div class=\"cat-item\">🍵 纯茶</div>\n <div class=\"cat-item\">🧊 小料</div>\n </div>\n\n <!-- 饮品列表 -->\n <div class=\"menu-grid\">\n <!-- 卡片1 -->\n <div class=\"drink-card animate-fade-up delay-3\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#2D1F5E,#1A1235);\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"font-size:56px;color:var(--primary-light);\"></i>\n </div>\n <div class=\"tag tag-hot\">🔥 热销</div>\n <div class=\"name\">招牌芋泥奶茶</div>\n <div class=\"desc\">芋泥+鲜奶+珍珠</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>22</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n <!-- 卡片2 -->\n <div class=\"drink-card animate-fade-up delay-4\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#1F3A5E,#1A1235);\">\n <i class=\"fa-solid fa-martini-glass-citrus\" style=\"font-size:56px;color:var(--accent-blue);\"></i>\n </div>\n <div class=\"tag tag-new\">✨ 新品</div>\n <div class=\"name\">青提爆柠茶</div>\n <div class=\"desc\">青提+柠檬+绿茶</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>18</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n <!-- 卡片3 -->\n <div class=\"drink-card animate-fade-up delay-5\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#3D1F3E,#1A1235);\">\n <i class=\"fa-solid fa-cup-straw\" style=\"font-size:56px;color:var(--accent-pink);\"></i>\n </div>\n <div class=\"tag tag-recommend\">👍 推荐</div>\n <div class=\"name\">黑糖珍珠牛乳</div>\n <div class=\"desc\">黑糖+鲜牛乳+珍珠</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>20</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n <!-- 卡片4 -->\n <div class=\"drink-card animate-fade-up delay-6\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#1F3D2E,#1A1235);\">\n <i class=\"fa-solid fa-leaf\" style=\"font-size:56px;color:#6FCF97;\"></i>\n </div>\n <div class=\"tag tag-new\">✨ 新品</div>\n <div class=\"name\">茉莉奶绿</div>\n <div class=\"desc\">茉莉花茶+鲜奶</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>16</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n <!-- 卡片5 -->\n <div class=\"drink-card animate-fade-up delay-7\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#2E1F3D,#1A1235);\">\n <i class=\"fa-solid fa-whiskey-glass\" style=\"font-size:56px;color:#B388FF;\"></i>\n </div>\n <div class=\"tag tag-hot\">🔥 热销</div>\n <div class=\"name\">杨枝甘露</div>\n <div class=\"desc\">芒果+西柚+椰奶</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>24</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n <!-- 卡片6 -->\n <div class=\"drink-card animate-fade-up delay-8\">\n <div class=\"img-wrap\" style=\"background:linear-gradient(135deg,#1F2D3D,#1A1235);\">\n <i class=\"fa-solid fa-mug-hot\" style=\"font-size:56px;color:var(--primary-light);\"></i>\n </div>\n <div class=\"tag tag-recommend\">👍 推荐</div>\n <div class=\"name\">厚芋泥波波</div>\n <div class=\"desc\">芋泥+波波+鲜奶</div>\n <div class=\"price-row\">\n <span class=\"price\"><span class=\"unit\">¥</span>19</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n </div>\n\n <!-- 底部占位 -->\n <div style=\"height:20px;\"></div>\n </div>\n\n <!-- 底部购物车栏 -->\n <div class=\"cart-bar\">\n <div class=\"cart-icon-wrap\">\n <i class=\"fa-solid fa-bag-shopping\"></i>\n <div class=\"cart-badge\">3</div>\n </div>\n <div class=\"cart-info\">\n <div class=\"total\">合计 <span class=\"num\">¥56</span></div>\n <div class=\"hint\">满30减5 · 再买1件享优惠</div>\n </div>\n <button class=\"cart-checkout\">去结算</button>\n </div>\n\n <script>\n // 分类切换交互\n document.querySelectorAll('.cat-item').forEach(item => {\n item.addEventListener('click', function() {\n document.querySelectorAll('.cat-item').forEach(el => el.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n // 加号按钮点击反馈\n document.querySelectorAll('.add-btn').forEach(btn => {\n btn.addEventListener('click', function(e) {\n e.stopPropagation();\n this.style.transform = 'scale(0.7)';\n setTimeout(() => {\n this.style.transform = 'scale(1)';\n }, 150);\n \n // 简单购物车数量更新演示\n const badge = document.querySelector('.cart-badge');\n const current = parseInt(badge.textContent);\n badge.textContent = current + 1;\n \n // 更新总价演示\n const totalEl = document.querySelector('.cart-info .total .num');\n const prices = [22, 18, 20, 16, 24, 19];\n const currentTotal = parseInt(totalEl.textContent.replace('¥', ''));\n // 随机加一个价格\n const addPrice = prices[Math.floor(Math.random() * prices.length)];\n totalEl.textContent = '¥' + (currentTotal + addPrice);\n });\n });\n\n // 特色标签点击\n document.querySelectorAll('.feature-chip').forEach(chip => {\n chip.addEventListener('click', function() {\n this.style.background = 'var(--bg-card2)';\n setTimeout(() => {\n this.style.background = 'var(--bg-card)';\n }, 200);\n });\n });\n\n // 饮品卡片点击\n document.querySelectorAll('.drink-card').forEach(card => {\n card.addEventListener('click', function() {\n // 模拟跳转详情\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["增加饮品详情弹窗", "添加购物车动画", "优化小料选择", "增加会员积分", "接入真实支付"],
"breakpoint": "xs"
}
```