深色主题奶茶点单小程序高保真原型UI设计

By 13625651589, 26 May, 2026

推理

用户要求：
1. 手机端奶茶点单小程序UI界面，尺寸750x1334px
2. 颜色：主题层#7850EE（原用户写#785OEE，O应为0），辅助层#A77AEA、#1F1244、#0084FF，提醒层#FD67D0
3. 风格：简洁，色块，类别分明，重点突出，功能简单
4. 导航栏在页面正下方，四个栏目（主页，点单，订单，用户）
5. 字体大小适中
6. 只需要高保真原型

注意：用户这次特别强调"导航栏在页面正下方，需要有四个栏目（主页，点单，订单，用户）"

这是750x1334的移动端设计，需要把这个导航栏放在底部。

让我重新设计一个更完整的版本，包含底部导航。

我注意到用户提供的颜色中有一个笔误：#785OEE 应该是 #7850EE（O→0）。用户要求很明确：
1. 尺寸750x1334px
2. 颜色：#7850EE, #A77AEA, #1F1244, #0084FF, #FD67D0
3. 底部导航栏：主页、点单、订单、用户
4. 高保真原型
5. 简洁、色块、类别分明

注意：#785OEE 应该是 #7850EE

现在我需要设计一个完整的奶茶点单小程序界面，包含底部四个tab导航。

我打算让这个页面是"点单"页面（因为用户说奶茶点单小程序），但底部导航有四个tab。

让我设计一个完整的界面：

1. 顶部：品牌名 + 定位 + 搜索
2. 中间：分类tab（热销、奶茶、果茶、纯茶、小料）
3. 内容区：饮品卡片网格
4. 底部：固定的购物车预览栏 + 底部导航栏

实际上用户说"只需要高保真原型"，所以我可以不做交互，但要做视觉设计。

考虑到是750x1334，这是典型的手机屏幕尺寸，我需要在单个屏幕内展示完整内容。

让我设计这个高保真原型UI。

我会把焦点放在"点单"tab上，显示完整的点单页面。这些图片不太适合直接用在奶茶点单界面中作为饮品图片。我将在饮品卡片中使用Font Awesome图标代替真实图片，这样更合适。

现在让我设计一个完整的750x1334px高保真原型HTML。

设计要点：
1. 深色主题（基于#1F1244深紫色为基底）
2. 主色#7850EE，辅助#A77AEA，#0084FF，#1F1244，提醒色#FD67D0
3. 底部导航四个tab：主页、点单、订单、用户
4. 当前在"点单"页面
5. 简洁色块风格，类别分明
6. 包含：顶部品牌区、搜索、分类、饮品列表、购物车栏、底部导航

因为是高保真原型，尺寸严格750x1334，要让内容在单屏内展示完整。

让我设计布局：

顶部区域（约130px）：品牌名+定位文字+搜索框
分类导航（约70px）：热销/奶茶/果茶/纯茶/小料
饮品列表（约700px）：2列网格，每个卡片包含图标/图片、标签、名称、价格、加号按钮
购物车栏（约90px）：购物车图标+数量、总价、去结算按钮
底部导航（约100px）：四个tab

总计：130+70+700+90+100+间距≈1334... 需要调整。

实际上可以滚动，但用户说高保真原型，最好是页面内容刚好合适或者轻微滚动。

让我重新规划：

顶部品牌+搜索：约140px
分类导航：约70px
饮品列表：用grid展示，展示4-6个卡片，每个约200px高
购物车栏：约90px
底部导航：约110px

总计：140+70+400(2行)+90+110+间隙≈900px左右，可以在750x1334内展示，上下留白。

实际上因为750x1334是固定尺寸，我可以让内容在scroll-container中滚动，但背景固定。

更合理的是让整个页面刚好展示完整内容，底部导航固定。

让我设计成固定底部导航+购物车栏，中间内容区域可滚动。

结构：
- 固定顶部：品牌+搜索（不滚动）
- 固定分类导航（不滚动）
- 中间滚动区域（饮品列表）
- 固定购物车栏
- 固定底部导航

这样比较符合真实小程序结构。

实际上对于高保真原型，我觉得可以设计成整体不滚动或者少量滚动，在750x1334内完整展示。

让我设计能够完整展示的方案：

顶部区域：品牌名称+定位+搜索框 - 约130px
特色标签行：约55px
分类导航：约70px
饮品卡片2行：每行约2个卡片，每个卡片约200px → 400px
购物车栏：约90px
底部导航：约110px

130+55+70+400+90+110 = 855px，剩余空间约479px... 太多了

我可以把卡片做大一些，每个约250px，两行500px

130+55+70+500+90+110 = 955px，剩余约379px

或者我可以把顶部做得更丰富，增加一些展示元素。

实际上对于750x1334，我可以把内容设计得饱满一些。

让我重新设计：

顶部品牌区（含logo、品牌名、定位、搜索）：约170px
特色芯片行：约55px
分类导航：约65px
饮品卡片（2行，每行2个，每个约270px高）：约540px
购物车预览栏：约90px
底部导航栏：约110px

170+55+65+540+90+110 = 1030px，加上间距和padding约1200px左右，可以接受。

让我开始写代码吧。得到了一张抽象几何背景图，可以用来做背景装饰。不过不适合直接作为饮品图片。我继续用Font Awesome图标来代表饮品。

现在开始写完整的HTML代码。好吧，没有更合适的图片资源了。我就用Font Awesome图标结合渐变背景色块来设计饮品卡片。

现在开始写完整的HTML代码。这是一个750x1334px的手机端高保真原型。

设计思路：
- 深色背景（#0D0820或#1F1244）
- 顶部紫色渐变区域（主色#7850EE）
- 品牌标识+搜索
- 分类导航（色块风格）
- 饮品卡片网格（2列）
- 底部固定购物车栏
- 底部固定导航栏（4个tab：主页、点单、订单、用户）

颜色使用：
- 主题层：#7850EE（紫色）
- 辅助层：#A77AEA（浅紫）、#1F1244（深紫）、#0084FF（蓝色）
- 提醒层：#FD67D0（粉色）

注意：用户写的#785OEE中的O应该是0，即#7850EE好的，我就用Font Awesome图标配合渐变色块背景来设计饮品卡片图片区域。现在开始写代码。

角色

assistant

content

```json
{
"summary": "设计了一个750x1334px的奶茶点单小程序高保真原型UI。深色主题(基底#1F1244)，主色#7850EE、辅助#A77AEA/#0084FF/#1F1244、提醒色#FD67D0。顶部紫色色块品牌区+搜索框，特色标签行，分段式分类导航，2列饮品卡片网格(含图标色块/标签/名称/价格/加号)，底部固定购物车栏+四tab底部导航(主页/点单/订单/用户)。色块分明、简洁清晰。",
"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.68);\n --text-muted: rgba(255,255,255,0.35);\n --radius-sm: 12px;\n --radius-md: 16px;\n --radius-lg: 20px;\n }\n * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }\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 .bg-glow {\n position: absolute;\n top: -180px;\n right: -160px;\n width: 520px;\n height: 520px;\n background: radial-gradient(circle, rgba(120,80,238,0.18) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n .bg-glow-2 {\n position: absolute;\n bottom: 220px;\n left: -120px;\n width: 380px;\n height: 380px;\n background: radial-gradient(circle, rgba(253,103,208,0.10) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n\n /* ===== 顶部品牌区 ===== */\n .header {\n background: linear-gradient(135deg, var(--primary) 0%, #6A3FD8 100%);\n padding: 38px 32px 24px;\n position: relative;\n overflow: hidden;\n }\n .header::after {\n content: '';\n position: absolute;\n top: -50px;\n right: -30px;\n width: 180px;\n height: 180px;\n background: radial-gradient(circle, rgba(167,122,234,0.25) 0%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n }\n .header-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 18px;\n position: relative;\n z-index: 2;\n }\n .brand {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .brand-icon {\n width: 44px;\n height: 44px;\n background: rgba(255,255,255,0.18);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .brand-icon i { font-size: 24px; color: #fff; }\n .brand-text {\n font-size: 30px;\n font-weight: 900;\n letter-spacing: 2px;\n line-height: 1.1;\n }\n .brand-sub {\n font-size: 17px;\n color: rgba(255,255,255,0.55);\n letter-spacing: 1px;\n }\n .header-actions {\n display: flex;\n align-items: center;\n gap: 18px;\n }\n .header-actions i {\n font-size: 26px;\n color: rgba(255,255,255,0.75);\n cursor: pointer;\n }\n .avatar {\n width: 42px;\n height: 42px;\n border-radius: 50%;\n background: rgba(255,255,255,0.15);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .avatar i { font-size: 20px; color: rgba(255,255,255,0.8); }\n\n /* 搜索框 */\n .search-box {\n background: rgba(255,255,255,0.14);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 50px;\n padding: 12px 22px;\n display: flex;\n align-items: center;\n gap: 12px;\n position: relative;\n z-index: 2;\n }\n .search-box i { font-size: 20px; color: rgba(255,255,255,0.45); }\n .search-box input {\n background: transparent;\n border: none;\n outline: none;\n color: #fff;\n font-size: 24px;\n font-family: 'Noto Sans SC', sans-serif;\n width: 100%;\n }\n .search-box input::placeholder { color: rgba(255,255,255,0.4); }\n\n /* ===== 特色标签 ===== */\n .feature-strip {\n padding: 18px 28px 12px;\n display: flex;\n gap: 12px;\n overflow-x: auto;\n scrollbar-width: none;\n }\n .feature-strip::-webkit-scrollbar { display: none; }\n .feature-chip {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 22px;\n border-radius: 50px;\n background: var(--bg-card);\n border: 1px solid rgba(255,255,255,0.05);\n font-size: 21px;\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.25s ease;\n }\n .feature-chip i { font-size: 18px; }\n .feature-chip:active { transform: scale(0.95); background: var(--bg-card2); }\n .chip-fire i { color: #FF6B6B; }\n .chip-tag i { color: var(--accent-pink); }\n .chip-gem i { color: var(--accent-blue); }\n .chip-star i { color: #FFD93D; }\n\n /* ===== 分类导航 ===== */\n .category-bar {\n display: flex;\n gap: 10px;\n padding: 10px 28px 14px;\n overflow-x: auto;\n scrollbar-width: none;\n }\n .category-bar::-webkit-scrollbar { display: none; }\n .cat-item {\n flex-shrink: 0;\n padding: 14px 30px;\n border-radius: 50px;\n font-size: 24px;\n font-weight: 600;\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 user-select: none;\n }\n .cat-item.active {\n background: var(--primary);\n color: #fff;\n box-shadow: 0 6px 20px rgba(120,80,238,0.3);\n }\n .cat-item:active { transform: scale(0.95); }\n\n /* ===== 内容区 ===== */\n .scroll-area {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 200px;\n overflow-y: auto;\n overflow-x: hidden;\n scroll-behavior: smooth;\n }\n .scroll-area::-webkit-scrollbar { width: 0; }\n\n .menu-grid {\n padding: 6px 28px 30px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 18px;\n }\n\n /* 饮品卡片 */\n .drink-card {\n background: var(--bg-card);\n border-radius: var(--radius-lg);\n padding: 18px 16px 16px;\n transition: all 0.25s ease;\n border: 1px solid rgba(255,255,255,0.04);\n cursor: pointer;\n }\n .drink-card:active { transform: scale(0.97); }\n\n .drink-img {\n width: 100%;\n aspect-ratio: 1/1;\n border-radius: var(--radius-md);\n overflow: hidden;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n .drink-img i { font-size: 52px; opacity: 0.7; }\n\n .drink-tag {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 20px;\n font-size: 17px;\n font-weight: 600;\n margin-bottom: 8px;\n line-height: 1.3;\n }\n .tag-hot { background: rgba(253,103,208,0.18); color: var(--accent-pink); }\n .tag-new { background: rgba(0,132,255,0.18); color: var(--accent-blue); }\n .tag-rec { background: rgba(167,122,234,0.18); color: var(--primary-light); }\n .tag-sale { background: rgba(255,107,107,0.18); color: #FF6B6B; }\n\n .drink-name {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.25;\n margin-bottom: 2px;\n }\n .drink-desc {\n font-size: 19px;\n color: var(--text-muted);\n margin-bottom: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .drink-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .drink-price {\n font-size: 30px;\n font-weight: 700;\n color: var(--accent-pink);\n }\n .drink-price .sym { font-size: 22px; font-weight: 500; }\n .drink-add {\n width: 46px;\n height: 46px;\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.2s ease;\n box-shadow: 0 4px 14px rgba(120,80,238,0.28);\n }\n .drink-add:active { transform: scale(0.82); box-shadow: 0 2px 6px rgba(120,80,238,0.15); }\n\n /* 销量角标 */\n .sale-badge {\n position: absolute;\n top: 8px;\n left: 8px;\n padding: 3px 10px;\n border-radius: 20px;\n font-size: 16px;\n font-weight: 600;\n background: rgba(0,0,0,0.5);\n backdrop-filter: blur(4px);\n color: rgba(255,255,255,0.9);\n }\n .drink-img { position: relative; }\n\n /* ===== 底部购物车栏 ===== */\n .cart-bar {\n position: absolute;\n bottom: 108px;\n left: 0;\n right: 0;\n height: 92px;\n background: var(--bg-card);\n border-top: 1px solid rgba(255,255,255,0.05);\n padding: 12px 24px;\n display: flex;\n align-items: center;\n gap: 16px;\n backdrop-filter: blur(16px);\n z-index: 40;\n }\n .cart-icon {\n position: relative;\n width: 60px;\n height: 60px;\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 i { font-size: 26px; color: var(--primary-light); }\n .cart-badge {\n position: absolute;\n top: -3px;\n right: -3px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background: var(--accent-pink);\n color: #fff;\n font-size: 15px;\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 .cart-info {\n flex: 1;\n min-width: 0;\n }\n .cart-total {\n font-size: 28px;\n font-weight: 700;\n }\n .cart-total .num { color: var(--accent-pink); }\n .cart-hint {\n font-size: 19px;\n color: var(--text-muted);\n }\n .cart-btn {\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: 26px;\n font-weight: 700;\n font-family: 'Noto Sans SC', sans-serif;\n cursor: pointer;\n white-space: nowrap;\n transition: all 0.25s ease;\n box-shadow: 0 6px 20px rgba(120,80,238,0.3);\n }\n .cart-btn:active { transform: scale(0.96); box-shadow: 0 3px 10px rgba(120,80,238,0.15); }\n\n /* ===== 底部导航 ===== */\n .bottom-nav {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 108px;\n background: #16102E;\n border-top: 1px solid rgba(255,255,255,0.06);\n display: flex;\n align-items: stretch;\n z-index: 50;\n padding-bottom: 4px;\n }\n .nav-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--text-muted);\n border: none;\n background: transparent;\n font-family: 'Noto Sans SC', sans-serif;\n position: relative;\n }\n .nav-item i {\n font-size: 28px;\n transition: all 0.25s ease;\n }\n .nav-item span {\n font-size: 19px;\n font-weight: 500;\n transition: all 0.25s ease;\n }\n .nav-item.active {\n color: var(--primary-light);\n }\n .nav-item.active i {\n color: var(--primary);\n text-shadow: 0 0 20px rgba(120,80,238,0.3);\n }\n .nav-item.active span {\n color: #fff;\n font-weight: 600;\n }\n .nav-item:active { opacity: 0.7; }\n\n /* 导航指示器 */\n .nav-indicator {\n position: absolute;\n top: 0;\n left: 0;\n width: 25%;\n height: 3px;\n background: var(--primary);\n border-radius: 0 0 4px 4px;\n transition: left 0.3s cubic-bezier(0.4,0,0.2,1);\n pointer-events: none;\n }\n\n /* 动画 */\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(18px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .anim-fade { animation: fadeUp 0.5s ease forwards; opacity: 0; }\n .d1 { animation-delay: 0.05s; }\n .d2 { animation-delay: 0.10s; }\n .d3 { animation-delay: 0.15s; }\n .d4 { animation-delay: 0.20s; }\n .d5 { animation-delay: 0.25s; }\n .d6 { animation-delay: 0.30s; }\n .d7 { animation-delay: 0.35s; }\n .d8 { animation-delay: 0.40s; }\n </style>\n</head>\n<body>\n \n <div class=\"bg-glow\"></div>\n <div class=\"bg-glow-2\"></div>\n\n \n <div class=\"scroll-area\">\n\n \n <div class=\"header\">\n <div class=\"header-row\">\n <div class=\"brand\">\n <div class=\"brand-icon\"><i class=\"fa-solid fa-leaf\"></i></div>\n <div>\n <div class=\"brand-text\">茶屿</div>\n <div class=\"brand-sub\">CHA·YU</div>\n </div>\n </div>\n <div class=\"header-actions\">\n <i class=\"fa-regular fa-bell\"></i>\n <div class=\"avatar\"><i class=\"fa-regular fa-user\"></i></div>\n </div>\n </div>\n <div class=\"search-box\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <input type=\"text\" placeholder=\"搜索饮品、小料...\" />\n </div>\n </div>\n\n \n <div class=\"feature-strip anim-fade d1\">\n <div class=\"feature-chip chip-fire\"><i class=\"fa-solid fa-fire\"></i>今日热销</div>\n <div class=\"feature-chip chip-tag\"><i class=\"fa-solid fa-tag\"></i>限时特惠</div>\n <div class=\"feature-chip chip-gem\"><i class=\"fa-solid fa-gem\"></i>新品上市</div>\n <div class=\"feature-chip chip-star\"><i class=\"fa-solid fa-star\"></i>会员专享</div>\n </div>\n\n \n <div class=\"category-bar anim-fade d2\">\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 \n <div class=\"drink-card anim-fade d3\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#2D1F5E,#1A1235);\">\n <i class=\"fa-solid fa-mug-saucer\" style=\"color:var(--primary-light);\"></i>\n <div class=\"sale-badge\">月售 892</div>\n </div>\n <div class=\"drink-tag tag-hot\">🔥 热销</div>\n <div class=\"drink-name\">招牌芋泥奶茶</div>\n <div class=\"drink-desc\">芋泥 · 鲜奶 · 珍珠</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>22</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n \n <div class=\"drink-card anim-fade d4\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#1F3A5E,#1A1235);\">\n <i class=\"fa-solid fa-martini-glass-citrus\" style=\"color:var(--accent-blue);\"></i>\n <div class=\"sale-badge\">月售 654</div>\n </div>\n <div class=\"drink-tag tag-new\">✨ 新品</div>\n <div class=\"drink-name\">青提爆柠茶</div>\n <div class=\"drink-desc\">青提 · 柠檬 · 绿茶</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>18</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n \n <div class=\"drink-card anim-fade d5\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#3D1F3E,#1A1235);\">\n <i class=\"fa-solid fa-cup-straw\" style=\"color:var(--accent-pink);\"></i>\n <div class=\"sale-badge\">月售 1.2k</div>\n </div>\n <div class=\"drink-tag tag-rec\">👍 推荐</div>\n <div class=\"drink-name\">黑糖珍珠牛乳</div>\n <div class=\"drink-desc\">黑糖 · 鲜牛乳 · 珍珠</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>20</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n \n <div class=\"drink-card anim-fade d6\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#1F3D2E,#1A1235);\">\n <i class=\"fa-solid fa-leaf\" style=\"color:#6FCF97;\"></i>\n <div class=\"sale-badge\">月售 780</div>\n </div>\n <div class=\"drink-tag tag-new\">✨ 新品</div>\n <div class=\"drink-name\">茉莉奶绿</div>\n <div class=\"drink-desc\">茉莉花茶 · 鲜奶</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>16</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n \n <div class=\"drink-card anim-fade d7\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#2E1F3D,#1A1235);\">\n <i class=\"fa-solid fa-whiskey-glass\" style=\"color:#B388FF;\"></i>\n <div class=\"sale-badge\">月售 1.5k</div>\n </div>\n <div class=\"drink-tag tag-hot\">🔥 热销</div>\n <div class=\"drink-name\">杨枝甘露</div>\n <div class=\"drink-desc\">芒果 · 西柚 · 椰奶</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>24</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n\n \n <div class=\"drink-card anim-fade d8\">\n <div class=\"drink-img\" style=\"background:linear-gradient(135deg,#1F2D3D,#1A1235);\">\n <i class=\"fa-solid fa-mug-hot\" style=\"color:var(--primary-light);\"></i>\n <div class=\"sale-badge\">月售 623</div>\n </div>\n <div class=\"drink-tag tag-rec\">👍 推荐</div>\n <div class=\"drink-name\">厚芋泥波波</div>\n <div class=\"drink-desc\">芋泥 · 波波 · 鲜奶</div>\n <div class=\"drink-footer\">\n <span class=\"drink-price\"><span class=\"sym\">¥</span>19</span>\n <button class=\"drink-add\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n </div>\n\n <div style=\"height:10px;\"></div>\n </div>\n\n \n <div class=\"cart-bar\">\n <div class=\"cart-icon\">\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=\"cart-total\">合计 <span class=\"num\">¥56</span></div>\n <div class=\"cart-hint\">满30减5 · 再买1件享优惠</div>\n </div>\n <button class=\"cart-btn\">去结算</button>\n </div>\n\n \n <div class=\"bottom-nav\">\n <div class=\"nav-item\" data-tab=\"0\">\n <i class=\"fa-solid fa-house\"></i>\n <span>主页</span>\n </div>\n <div class=\"nav-item active\" data-tab=\"1\">\n <i class=\"fa-solid fa-pen\"></i>\n <span>点单</span>\n </div>\n <div class=\"nav-item\" data-tab=\"2\">\n <i class=\"fa-solid fa-clipboard-list\"></i>\n <span>订单</span>\n </div>\n <div class=\"nav-item\" data-tab=\"3\">\n <i class=\"fa-solid fa-user\"></i>\n <span>用户</span>\n </div>\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('.nav-item').forEach(item => {\n item.addEventListener('click', function() {\n document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n // 加号按钮\n document.querySelectorAll('.drink-add').forEach(btn => {\n btn.addEventListener('click', function(e) {\n e.stopPropagation();\n this.style.transform = 'scale(0.7)';\n setTimeout(() => { this.style.transform = 'scale(1)'; }, 150);\n const badge = document.querySelector('.cart-badge');\n badge.textContent = parseInt(badge.textContent) + 1;\n const totalEl = document.querySelector('.cart-total .num');\n const prices = [22, 18, 20, 16, 24, 19];\n const add = prices[Math.floor(Math.random() * prices.length)];\n totalEl.textContent = '¥' + (parseInt(totalEl.textContent.replace('¥','')) + add);\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(() => { this.style.background = 'var(--bg-card)'; }, 200);\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["增加饮品详情弹窗", "添加购物车动画", "优化小料选择", "增加会员积分", "接入真实支付"],
"breakpoint": "xs"
}
```

total_tokens

23198

summary

设计了一个750x1334px的奶茶点单小程序高保真原型UI。深色主题(基底#1F1244)，主色#7850EE、辅助#A77AEA/#0084FF/#1F1244、提醒色#FD67D0。顶部紫色色块品牌区+搜索框，特色标签行，分段式分类导航，2列饮品卡片网格(含图标色块/标签/名称/价格/加号)，底部固定购物车栏+四tab底部导航(主页/点单/订单/用户)。色块分明、简洁清晰。

uiParsing

关闭