我先获取设计系统建议和合适的图片素材。图片素材不太匹配奶茶场景，我再搜索更合适的。没有合适的奶茶图片，我将使用纯色块和图标来设计。现在开始构建这个高保真奶茶点单小程序UI。
```json
{
"summary": "设计了一个手机端奶茶点单小程序的高保真原型，尺寸750×1334px。采用简洁色块风格，主题色#7850EE，辅助色#A77AEA、#1F1244、#0084FF，提醒色#FD67D0。包含顶部状态栏、搜索区、分类导航、推荐商品卡片、底部四个Tab导航（主页、点单、订单、用户）。使用Font Awesome图标，Google Fonts的Outfit字体，整体风格现代、色彩鲜明、层级清晰。",
"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 href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;70…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --primary: #7850EE;\n --primary-light: #A77AEA;\n --primary-dark: #1F1244;\n --accent: #0084FF;\n --remind: #FD67D0;\n --bg: #F5F3FF;\n --card-bg: #FFFFFF;\n --text-primary: #1F1244;\n --text-secondary: #6B5E8A;\n --text-light: #9B8EB8;\n --shadow-sm: 0 2px 8px rgba(120, 80, 238, 0.08);\n --shadow-md: 0 4px 20px rgba(120, 80, 238, 0.12);\n --shadow-lg: 0 8px 40px rgba(120, 80, 238, 0.16);\n --radius-sm: 12px;\n --radius-md: 20px;\n --radius-lg: 28px;\n --radius-xl: 36px;\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: 'Outfit', 'Noto Sans SC', sans-serif;\n background: var(--bg);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n padding: 20px;\n }\n\n .phone-frame {\n width: 750px;\n height: 1334px;\n background: var(--bg);\n border-radius: 60px;\n overflow: hidden;\n position: relative;\n box-shadow: 0 30px 80px rgba(31, 18, 68, 0.25), 0 0 0 1px rgba(120, 80, 238, 0.1);\n display: flex;\n flex-direction: column;\n }\n\n /* 状态栏 */\n .status-bar {\n height: 80px;\n background: linear-gradient(135deg, var(--primary-dark) 0%, #2D1A5E 100%);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 40px;\n color: white;\n font-size: 26px;\n font-weight: 500;\n flex-shrink: 0;\n position: relative;\n z-index: 10;\n }\n\n .status-bar .time {\n font-weight: 600;\n letter-spacing: 1px;\n }\n\n .status-icons {\n display: flex;\n gap: 12px;\n font-size: 22px;\n }\n\n /* 灵动岛 */\n .dynamic-island {\n position: absolute;\n top: 14px;\n left: 50%;\n transform: translateX(-50%);\n width: 180px;\n height: 36px;\n background: #0a0a0a;\n border-radius: 20px;\n z-index: 20;\n }\n\n /* 主内容区 - 可滚动 */\n .main-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding-bottom: 0;\n scroll-behavior: smooth;\n }\n\n .main-content::-webkit-scrollbar {\n display: none;\n }\n\n /* 头部 */\n .header {\n padding: 24px 32px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .logo-area {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .logo-icon {\n width: 52px;\n height: 52px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 28px;\n box-shadow: 0 4px 12px rgba(120, 80, 238, 0.3);\n }\n\n .logo-text {\n font-size: 28px;\n font-weight: 700;\n color: var(--primary-dark);\n letter-spacing: 2px;\n }\n\n .logo-text span {\n color: var(--primary);\n }\n\n .header-actions {\n display: flex;\n gap: 16px;\n }\n\n .header-actions .icon-btn {\n width: 52px;\n height: 52px;\n background: white;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-secondary);\n font-size: 22px;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n }\n\n .header-actions .icon-btn:active {\n transform: scale(0.92);\n }\n\n /* 搜索栏 */\n .search-bar {\n margin: 8px 32px 20px;\n padding: 0 24px;\n height: 72px;\n background: white;\n border-radius: 36px;\n display: flex;\n align-items: center;\n gap: 16px;\n box-shadow: var(--shadow-sm);\n border: 2px solid rgba(120, 80, 238, 0.06);\n }\n\n .search-bar i {\n color: var(--text-light);\n font-size: 24px;\n }\n\n .search-bar input {\n flex: 1;\n border: none;\n outline: none;\n font-size: 24px;\n font-family: inherit;\n color: var(--text-primary);\n background: transparent;\n }\n\n .search-bar input::placeholder {\n color: var(--text-light);\n font-weight: 300;\n }\n\n .search-bar .search-btn {\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n color: white;\n border: none;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n font-size: 22px;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .search-bar .search-btn:active {\n transform: scale(0.9);\n }\n\n /* Banner 轮播 */\n .banner-section {\n padding: 0 32px;\n margin-bottom: 24px;\n }\n\n .banner-card {\n height: 200px;\n border-radius: var(--radius-md);\n background: linear-gradient(135deg, var(--primary-dark) 0%, #3D1F8E 40%, var(--primary) 100%);\n padding: 32px 36px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(120, 80, 238, 0.25);\n }\n\n .banner-card::before {\n content: '';\n position: absolute;\n top: -60px;\n right: -40px;\n width: 240px;\n height: 240px;\n border-radius: 50%;\n background: rgba(167, 122, 234, 0.15);\n }\n\n .banner-card::after {\n content: '';\n position: absolute;\n bottom: -80px;\n right: 20px;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n background: rgba(0, 132, 255, 0.1);\n }\n\n .banner-text {\n position: relative;\n z-index: 2;\n color: white;\n }\n\n .banner-text .tag {\n display: inline-block;\n background: var(--remind);\n padding: 4px 16px;\n border-radius: 20px;\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 12px;\n letter-spacing: 1px;\n }\n\n .banner-text h2 {\n font-size: 36px;\n font-weight: 700;\n line-height: 1.2;\n margin-bottom: 8px;\n }\n\n .banner-text p {\n font-size: 20px;\n opacity: 0.85;\n font-weight: 300;\n }\n\n .banner-text .price {\n font-size: 32px;\n font-weight: 700;\n color: #FFD700;\n margin-top: 8px;\n }\n\n .banner-img {\n position: relative;\n z-index: 2;\n width: 140px;\n height: 140px;\n background: rgba(255,255,255,0.12);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 64px;\n color: white;\n backdrop-filter: blur(4px);\n border: 2px solid rgba(255,255,255,0.2);\n flex-shrink: 0;\n }\n\n .banner-dots {\n display: flex;\n gap: 8px;\n justify-content: center;\n margin-top: 16px;\n }\n\n .banner-dots span {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #D5C8F0;\n transition: all 0.3s;\n }\n\n .banner-dots span.active {\n width: 32px;\n border-radius: 6px;\n background: var(--primary);\n }\n\n /* 分类导航 */\n .categories {\n padding: 0 32px;\n margin-bottom: 28px;\n }\n\n .categories .title-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .categories .title-row h3 {\n font-size: 26px;\n font-weight: 700;\n color: var(--text-primary);\n }\n\n .categories .title-row a {\n font-size: 20px;\n color: var(--text-light);\n text-decoration: none;\n font-weight: 400;\n }\n\n .category-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 16px;\n }\n\n .category-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .category-item:active {\n transform: scale(0.92);\n }\n\n .category-item .icon-wrap {\n width: 90px;\n height: 90px;\n border-radius: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n color: white;\n box-shadow: var(--shadow-sm);\n transition: all 0.3s;\n }\n\n .category-item:nth-child(1) .icon-wrap { background: linear-gradient(135deg, #7850EE, #A77AEA); }\n .category-item:nth-child(2) .icon-wrap { background: linear-gradient(135deg, #0084FF, #4DA8FF); }\n .category-item:nth-child(3) .icon-wrap { background: linear-gradient(135deg, #FD67D0, #FF8ADE); }\n .category-item:nth-child(4) .icon-wrap { background: linear-gradient(135deg, #1F1244, #3D2A6E); }\n\n .category-item span {\n font-size: 20px;\n color: var(--text-secondary);\n font-weight: 500;\n }\n\n /* 推荐商品 */\n .recommend-section {\n padding: 0 32px;\n margin-bottom: 28px;\n }\n\n .recommend-section .title-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .recommend-section .title-row h3 {\n font-size: 26px;\n font-weight: 700;\n color: var(--text-primary);\n }\n\n .recommend-section .title-row a {\n font-size: 20px;\n color: var(--text-light);\n text-decoration: none;\n }\n\n .product-list {\n display: flex;\n gap: 20px;\n overflow-x: auto;\n padding-bottom: 8px;\n scroll-snap-type: x mandatory;\n }\n\n .product-list::-webkit-scrollbar {\n display: none;\n }\n\n .product-card {\n min-width: 240px;\n background: white;\n border-radius: var(--radius-md);\n padding: 20px;\n box-shadow: var(--shadow-sm);\n scroll-snap-align: start;\n transition: all 0.3s;\n cursor: pointer;\n position: relative;\n border: 1px solid rgba(120, 80, 238, 0.04);\n }\n\n .product-card:active {\n transform: scale(0.97);\n }\n\n .product-card .badge {\n position: absolute;\n top: 12px;\n left: 12px;\n background: var(--remind);\n color: white;\n font-size: 16px;\n font-weight: 600;\n padding: 4px 12px;\n border-radius: 20px;\n }\n\n .product-card .product-img {\n width: 100%;\n height: 160px;\n border-radius: 16px;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 56px;\n color: white;\n }\n\n .product-card:nth-child(1) .product-img { background: linear-gradient(135deg, #FDE8F0, #FBCFE8); color: #EC4899; }\n .product-card:nth-child(2) .product-img { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color: #0EA5E9; }\n .product-card:nth-child(3) .product-img { background: linear-gradient(135deg, #F3E8FF, #E9D5FF); color: #A855F7; }\n .product-card:nth-child(4) .product-img { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: #10B981; }\n\n .product-card .product-name {\n font-size: 22px;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 4px;\n }\n\n .product-card .product-desc {\n font-size: 17px;\n color: var(--text-light);\n margin-bottom: 10px;\n font-weight: 300;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .product-card .product-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .product-card .product-price {\n font-size: 26px;\n font-weight: 700;\n color: var(--primary);\n }\n\n .product-card .product-price small {\n font-size: 16px;\n font-weight: 400;\n }\n\n .product-card .add-btn {\n width: 44px;\n height: 44px;\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n border: none;\n border-radius: 14px;\n color: white;\n font-size: 18px;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(120, 80, 238, 0.3);\n }\n\n .product-card .add-btn:active {\n transform: scale(0.85);\n }\n\n /* 热门推荐 - 网格 */\n .hot-section {\n padding: 0 32px;\n margin-bottom: 28px;\n }\n\n .hot-section .title-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .hot-section .title-row h3 {\n font-size: 26px;\n font-weight: 700;\n color: var(--text-primary);\n }\n\n .hot-section .title-row a {\n font-size: 20px;\n color: var(--text-light);\n text-decoration: none;\n }\n\n .hot-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n .hot-item {\n background: white;\n border-radius: var(--radius-sm);\n padding: 18px;\n display: flex;\n align-items: center;\n gap: 14px;\n box-shadow: var(--shadow-sm);\n cursor: pointer;\n transition: all 0.2s;\n border: 1px solid rgba(120, 80, 238, 0.04);\n }\n\n .hot-item:active {\n transform: scale(0.97);\n }\n\n .hot-item .hot-icon {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n color: white;\n flex-shrink: 0;\n }\n\n .hot-item:nth-child(1) .hot-icon { background: linear-gradient(135deg, #FD67D0, #FF8ADE); }\n .hot-item:nth-child(2) .hot-icon { background: linear-gradient(135deg, #0084FF, #4DA8FF); }\n .hot-item:nth-child(3) .hot-icon { background: linear-gradient(135deg, #7850EE, #A77AEA); }\n .hot-item:nth-child(4) .hot-icon { background: linear-gradient(135deg, #1F1244, #3D2A6E); }\n\n .hot-item .hot-info h4 {\n font-size: 20px;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 2px;\n }\n\n .hot-item .hot-info p {\n font-size: 16px;\n color: var(--text-light);\n font-weight: 300;\n }\n\n .hot-item .hot-info .hot-price {\n font-size: 20px;\n font-weight: 700;\n color: var(--primary);\n margin-top: 2px;\n }\n\n /* 底部导航 */\n .bottom-nav {\n height: 120px;\n background: white;\n border-top: 1px solid rgba(120, 80, 238, 0.08);\n display: flex;\n align-items: center;\n justify-content: space-around;\n padding: 0 16px;\n flex-shrink: 0;\n box-shadow: 0 -4px 20px rgba(31, 18, 68, 0.06);\n position: relative;\n z-index: 10;\n }\n\n .nav-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n padding: 8px 20px;\n border-radius: 16px;\n transition: all 0.2s;\n position: relative;\n border: none;\n background: transparent;\n font-family: inherit;\n }\n\n .nav-item:active {\n transform: scale(0.9);\n }\n\n .nav-item i {\n font-size: 28px;\n color: var(--text-light);\n transition: all 0.3s;\n }\n\n .nav-item span {\n font-size: 18px;\n color: var(--text-light);\n font-weight: 500;\n transition: all 0.3s;\n }\n\n .nav-item.active i {\n color: var(--primary);\n }\n\n .nav-item.active span {\n color: var(--primary);\n font-weight: 600;\n }\n\n .nav-item.active::before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 3px;\n background: var(--primary);\n border-radius: 0 0 4px 4px;\n }\n\n .nav-item .badge-dot {\n position: absolute;\n top: 4px;\n right: 14px;\n width: 18px;\n height: 18px;\n background: var(--remind);\n border-radius: 50%;\n font-size: 10px;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n border: 2px solid white;\n }\n\n /* 底部安全区 */\n .safe-area {\n height: 20px;\n background: white;\n flex-shrink: 0;\n }\n\n /* 动画 */\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .animate-in {\n animation: fadeUp 0.5s ease-out forwards;\n }\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 </style>\n</head>\n<body>\n <div class=\"phone-frame\">\n <!-- 状态栏 -->\n <div class=\"status-bar\">\n <div class=\"dynamic-island\"></div>\n <span class=\"time\">9:41</span>\n <div class=\"status-icons\">\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\n <!-- 主内容 -->\n <div class=\"main-content\">\n <!-- 头部 -->\n <div class=\"header animate-in delay-1\">\n <div class=\"logo-area\">\n <div class=\"logo-icon\">\n <i class=\"fa-solid fa-mug-saucer\"></i>\n </div>\n <div class=\"logo-text\">茶屿<span>·</span>茶</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"icon-btn\">\n <i class=\"fa-regular fa-bell\"></i>\n </button>\n <button class=\"icon-btn\">\n <i class=\"fa-regular fa-heart\"></i>\n </button>\n </div>\n </div>\n\n <!-- 搜索栏 -->\n <div class=\"search-bar animate-in delay-2\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <input type=\"text\" placeholder=\"搜索你喜欢的饮品...\">\n <button class=\"search-btn\">\n <i class=\"fa-solid fa-arrow-right\"></i>\n </button>\n </div>\n\n <!-- Banner -->\n <div class=\"banner-section animate-in delay-3\">\n <div class=\"banner-card\">\n <div class=\"banner-text\">\n <div class=\"tag\">🔥 限时特惠</div>\n <h2>杨枝甘露</h2>\n <p>鲜芒·西柚·椰奶</p>\n <div class=\"price\">¥19.9</div>\n </div>\n <div class=\"banner-img\">\n <i class=\"fa-solid fa-glass-water\"></i>\n </div>\n </div>\n <div class=\"banner-dots\">\n <span class=\"active\"></span>\n <span></span>\n <span></span>\n </div>\n </div>\n\n <!-- 分类 -->\n <div class=\"categories animate-in delay-4\">\n <div class=\"title-row\">\n <h3>饮品分类</h3>\n <a href=\"#\">查看全部 <i class=\"fa-solid fa-chevron-right\" style=\"font-size: 14px;\"></i></a>\n </div>\n <div class=\"category-grid\">\n <div class=\"category-item\">\n <div class=\"icon-wrap\"><i class=\"fa-solid fa-leaf\"></i></div>\n <span>鲜果茶</span>\n </div>\n <div class=\"category-item\">\n <div class=\"icon-wrap\"><i class=\"fa-solid fa-cow\"></i></div>\n <span>奶茶</span>\n </div>\n <div class=\"category-item\">\n <div class=\"icon-wrap\"><i class=\"fa-solid fa-snowflake\"></i></div>\n <span>冰沙</span>\n </div>\n <div class=\"category-item\">\n <div class=\"icon-wrap\"><i class=\"fa-solid fa-fire\"></i></div>\n <span>热饮</span>\n </div>\n </div>\n </div>\n\n <!-- 推荐商品 -->\n <div class=\"recommend-section animate-in delay-5\">\n <div class=\"title-row\">\n <h3>为你推荐</h3>\n <a href=\"#\">更多 <i class=\"fa-solid fa-chevron-right\" style=\"font-size: 14px;\"></i></a>\n </div>\n <div class=\"product-list\">\n <div class=\"product-card\">\n <div class=\"badge\">人气TOP</div>\n <div class=\"product-img\">\n <i class=\"fa-solid fa-cup-straw\"></i>\n </div>\n <div class=\"product-name\">杨枝甘露</div>\n <div class=\"product-desc\">鲜芒果·西柚粒·椰奶</div>\n <div class=\"product-bottom\">\n <span class=\"product-price\"><small>¥</small>19.9</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n <div class=\"product-card\">\n <div class=\"badge\" style=\"background: var(--accent);\">新品</div>\n <div class=\"product-img\">\n <i class=\"fa-solid fa-cup-togo\"></i>\n </div>\n <div class=\"product-name\">多肉葡萄</div>\n <div class=\"product-desc\">手剥葡萄·茶冻·芝士</div>\n <div class=\"product-bottom\">\n <span class=\"product-price\"><small>¥</small>22.9</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n <div class=\"product-card\">\n <div class=\"badge\" style=\"background: var(--primary);\">推荐</div>\n <div class=\"product-img\">\n <i class=\"fa-solid fa-whiskey-glass\"></i>\n </div>\n <div class=\"product-name\">芋泥波波</div>\n <div class=\"product-desc\">芋泥·鲜奶·珍珠</div>\n <div class=\"product-bottom\">\n <span class=\"product-price\"><small>¥</small>16.9</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n <div class=\"product-card\">\n <div class=\"product-img\">\n <i class=\"fa-solid fa-martini-glass-citrus\"></i>\n </div>\n <div class=\"product-name\">柠檬绿茶</div>\n <div class=\"product-desc\">香水柠檬·茉莉绿茶</div>\n <div class=\"product-bottom\">\n <span class=\"product-price\"><small>¥</small>12.9</span>\n <button class=\"add-btn\"><i class=\"fa-solid fa-plus\"></i></button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- 热门推荐 -->\n <div class=\"hot-section animate-in delay-6\">\n <div class=\"title-row\">\n <h3>热门榜单</h3>\n <a href=\"#\">更多 <i class=\"fa-solid fa-chevron-right\" style=\"font-size: 14px;\"></i></a>\n </div>\n <div class=\"hot-grid\">\n <div class=\"hot-item\">\n <div class=\"hot-icon\"><i class=\"fa-solid fa-crown\"></i></div>\n <div class=\"hot-info\">\n <h4>芝士莓莓</h4>\n <p>草莓·芝士奶盖</p>\n <div class=\"hot-price\">¥24.9</div>\n </div>\n </div>\n <div class=\"hot-item\">\n <div class=\"hot-icon\"><i class=\"fa-solid fa-star\"></i></div>\n <div class=\"hot-info\">\n <h4>黑糖珍珠</h4>\n <p>黑糖·鲜奶·珍珠</p>\n <div