好的！我已经搜索到了相关的旅行App UI设计素材。由于没有现成的4个界面的完整设计图，我直接用 **HTML + TailwindCSS** 为你搭建一个**高保真UI设计概念展示**，用卡片式布局呈现这4个界面 —— 视觉风格走高级感、轻奢路线 ✨好，现在我为你用 **HTML + TailwindCSS** 打造一个高保真的 **旅行规划App UI设计概念展示页**，4个界面用卡片式布局呈现，风格走高级轻奢路线。
```json
{
"summary": "生成了一个旅行行程规划App的UI设计概念展示页面，包含4个界面（首页、行程详情页、景点详情页、个人界面）的高保真视觉展示，采用卡片式设计、深绿+金色轻奢配色、圆角玻璃态质感，配合风景背景图营造沉浸式旅行氛围。",
"widget": {
"type": "custom-template",
"isAPI": false,
"api": null,
"fullWidth": true,
"html": "<style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…;);\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .travel-portfolio {\n font-family: 'Inter', sans-serif;\n background: #fafaf9;\n min-height: 100vh;\n padding: 2rem 1rem;\n }\n\n .portfolio-header {\n text-align: center;\n margin-bottom: 3.5rem;\n padding-top: 1rem;\n }\n\n .portfolio-header h1 {\n font-family: 'Inter', sans-serif;\n font-weight: 700;\n font-size: 2.2rem;\n color: #1a1a2e;\n letter-spacing: -0.03em;\n }\n\n .portfolio-header .sub {\n color: #8c8c8c;\n font-size: 0.95rem;\n font-weight: 400;\n margin-top: 0.4rem;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n }\n\n .divider-line {\n width: 60px;\n height: 2.5px;\n background: linear-gradient(90deg, #b8a07a, #d4b88c);\n margin: 0.8rem auto 0;\n border-radius: 4px;\n }\n\n .app-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n max-width: 1320px;\n margin: 0 auto;\n padding: 0 1rem;\n }\n\n .phone-frame {\n position: relative;\n background: #ffffff;\n border-radius: 40px;\n box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);\n padding: 12px;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n aspect-ratio: 390 / 844;\n max-width: 100%;\n }\n\n .phone-frame:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 35px 80px -18px rgba(0, 0, 0, 0.25);\n }\n\n .phone-screen {\n width: 100%;\n height: 100%;\n border-radius: 30px;\n overflow: hidden;\n position: relative;\n background: #f8f7f4;\n display: flex;\n flex-direction: column;\n }\n\n .screen-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px 14px;\n scrollbar-width: none;\n }\n\n .screen-content::-webkit-scrollbar {\n display: none;\n }\n\n /* ====== Status Bar ====== */\n .status-bar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 16px 4px;\n font-size: 11px;\n font-weight: 600;\n color: #1a1a2e;\n flex-shrink: 0;\n }\n\n .status-bar .time {\n font-weight: 600;\n }\n\n .status-icons {\n display: flex;\n gap: 5px;\n align-items: center;\n font-size: 11px;\n }\n\n /* ====== Bottom Nav ====== */\n .bottom-nav {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 8px 10px 14px;\n border-top: 1px solid rgba(0, 0, 0, 0.05);\n flex-shrink: 0;\n }\n\n .nav-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n font-size: 9px;\n color: #aaa;\n transition: color 0.2s;\n cursor: default;\n }\n\n .nav-item.active {\n color: #2d6a4f;\n }\n\n .nav-item i {\n font-size: 16px;\n }\n\n /* ====== Card Base ====== */\n .card {\n background: #ffffff;\n border-radius: 16px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n padding: 14px;\n margin-bottom: 12px;\n transition: all 0.25s;\n border: 1px solid rgba(0, 0, 0, 0.03);\n }\n\n .card-highlight {\n background: linear-gradient(135deg, #2d6a4f, #1b4332);\n color: #fff;\n border: none;\n }\n\n .card-soft {\n background: rgba(45, 106, 79, 0.04);\n border: 1px solid rgba(45, 106, 79, 0.08);\n }\n\n /* ====== Screen 1: Home ====== */\n .home-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n }\n\n .home-header .greeting h2 {\n font-size: 13px;\n font-weight: 500;\n color: #888;\n }\n\n .home-header .greeting h1 {\n font-size: 18px;\n font-weight: 700;\n color: #1a1a2e;\n margin-top: 0;\n }\n\n .avatar-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: linear-gradient(135deg, #b8a07a, #d4b88c);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 600;\n font-size: 16px;\n }\n\n .search-bar {\n display: flex;\n align-items: center;\n background: #fff;\n border-radius: 14px;\n padding: 10px 14px;\n margin-bottom: 16px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n border: 1px solid rgba(0, 0, 0, 0.04);\n gap: 10px;\n }\n\n .search-bar i {\n color: #b8a07a;\n font-size: 14px;\n }\n\n .search-bar input {\n border: none;\n outline: none;\n flex: 1;\n font-size: 12px;\n color: #333;\n background: transparent;\n font-family: 'Inter', sans-serif;\n }\n\n .search-bar input::placeholder {\n color: #bbb;\n }\n\n .section-title {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .section-title h3 {\n font-size: 14px;\n font-weight: 700;\n color: #1a1a2e;\n }\n\n .section-title span {\n font-size: 11px;\n color: #b8a07a;\n font-weight: 500;\n }\n\n .category-pills {\n display: flex;\n gap: 6px;\n margin-bottom: 16px;\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .category-pills::-webkit-scrollbar {\n display: none;\n }\n\n .pill {\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 500;\n white-space: nowrap;\n background: #f0efec;\n color: #666;\n border: none;\n cursor: default;\n }\n\n .pill.active {\n background: #2d6a4f;\n color: #fff;\n }\n\n .trip-card {\n background: #fff;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n margin-bottom: 12px;\n border: 1px solid rgba(0, 0, 0, 0.03);\n }\n\n .trip-card .card-img {\n height: 80px;\n background-size: cover;\n background-position: center;\n position: relative;\n }\n\n .trip-card .card-body {\n padding: 10px 12px 12px;\n }\n\n .trip-card .card-body h4 {\n font-size: 13px;\n font-weight: 700;\n color: #1a1a2e;\n margin-bottom: 3px;\n }\n\n .trip-card .card-body .meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 10px;\n color: #999;\n }\n\n .trip-card .card-body .meta .price {\n color: #2d6a4f;\n font-weight: 700;\n font-size: 12px;\n }\n\n .badge-gold {\n background: rgba(184, 160, 122, 0.15);\n color: #b8a07a;\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 9px;\n font-weight: 600;\n }\n\n /* ====== Screen 2: Trip Detail ====== */\n .detail-cover {\n height: 110px;\n background-size: cover;\n background-position: center;\n border-radius: 16px;\n margin-bottom: 12px;\n position: relative;\n display: flex;\n align-items: flex-end;\n padding: 12px;\n }\n\n .detail-cover .overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 60%);\n border-radius: 16px;\n }\n\n .detail-cover .title-on-img {\n position: relative;\n z-index: 1;\n color: #fff;\n }\n\n .detail-cover .title-on-img h2 {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 2px;\n }\n\n .detail-cover .title-on-img p {\n font-size: 10px;\n opacity: 0.85;\n }\n\n .day-item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 0;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n }\n\n .day-item:last-child {\n border-bottom: none;\n }\n\n .day-marker {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: #2d6a4f;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: 700;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .day-marker.passive {\n background: #e8e7e4;\n color: #999;\n }\n\n .day-info {\n flex: 1;\n }\n\n .day-info h5 {\n font-size: 12px;\n font-weight: 600;\n color: #1a1a2e;\n margin-bottom: 2px;\n }\n\n .day-info p {\n font-size: 10px;\n color: #999;\n line-height: 1.4;\n }\n\n .day-info .tag {\n display: inline-block;\n background: rgba(45, 106, 79, 0.08);\n color: #2d6a4f;\n padding: 1px 8px;\n border-radius: 4px;\n font-size: 8px;\n font-weight: 500;\n margin-top: 3px;\n }\n\n .progress-bar {\n height: 4px;\n background: #e8e7e4;\n border-radius: 4px;\n overflow: hidden;\n margin: 8px 0 4px;\n }\n\n .progress-bar .fill {\n height: 100%;\n background: linear-gradient(90deg, #2d6a4f, #4a9b74);\n border-radius: 4px;\n width: 65%;\n }\n\n /* ====== Screen 3: Attraction Detail ====== */\n .attraction-hero {\n height: 130px;\n border-radius: 16px;\n background-size: cover;\n background-position: center;\n margin-bottom: 10px;\n position: relative;\n }\n\n .attraction-hero .back-btn {\n position: absolute;\n top: 10px;\n left: 10px;\n width: 30px;\n height: 30px;\n background: rgba(255,255,255,0.9);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n color: #333;\n backdrop-filter: blur(4px);\n cursor: default;\n }\n\n .attraction-hero .bookmark {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 30px;\n height: 30px;\n background: rgba(255,255,255,0.9);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n color: #e74c3c;\n backdrop-filter: blur(4px);\n cursor: default;\n }\n\n .rating-row {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 4px 0 8px;\n }\n\n .rating-row .stars {\n color: #f5a623;\n font-size: 10px;\n }\n\n .rating-row .score {\n font-weight: 700;\n font-size: 13px;\n color: #1a1a2e;\n }\n\n .rating-row .reviews {\n font-size: 10px;\n color: #aaa;\n }\n\n .info-chips {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n margin-bottom: 10px;\n }\n\n .chip {\n padding: 4px 10px;\n border-radius: 8px;\n font-size: 10px;\n background: #f5f4f2;\n color: #666;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .chip i {\n font-size: 10px;\n color: #b8a07a;\n }\n\n .chip.green {\n background: rgba(45, 106, 79, 0.08);\n color: #2d6a4f;\n }\n\n .chip.green i {\n color: #2d6a4f;\n }\n\n .desc-text {\n font-size: 11px;\n color: #777;\n line-height: 1.6;\n margin-bottom: 10px;\n }\n\n .gallery-thumbs {\n display: flex;\n gap: 6px;\n }\n\n .gallery-thumbs .thumb {\n flex: 1;\n height: 44px;\n border-radius: 8px;\n background-size: cover;\n background-position: center;\n }\n\n .btn-primary-sm {\n background: #2d6a4f;\n color: #fff;\n border: none;\n border-radius: 12px;\n padding: 10px 0;\n width: 100%;\n font-size: 12px;\n font-weight: 600;\n font-family: 'Inter', sans-serif;\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n margin-top: 8px;\n }\n\n /* ====== Screen 4: Profile ====== */\n .profile-card {\n text-align: center;\n padding: 20px 14px 14px;\n }\n\n .profile-card .avatar-lg {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: linear-gradient(135deg, #b8a07a, #d4b88c);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-weight: 700;\n font-size: 22px;\n margin: 0 auto 8px;\n }\n\n .profile-card h3 {\n font-size: 15px;\n font-weight: 700;\n color: #1a1a2e;\n }\n\n .profile-card p {\n font-size: 11px;\n color: #aaa;\n margin-top: 2px;\n }\n\n .stats-row {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 10px;\n }\n\n .stats-row .stat {\n text-align: center;\n }\n\n .stats-row .stat .num {\n font-size: 16px;\n font-weight: 700;\n color: #1a1a2e;\n }\n\n .stats-row .stat .label {\n font-size: 9px;\n color: #bbb;\n margin-top: 1px;\n }\n\n .menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 11px 0;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n font-size: 12px;\n color: #444;\n cursor: default;\n }\n\n .menu-item:last-child {\n border-bottom: none;\n }\n\n .menu-item .left {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .menu-item .left i:first-child {\n width: 18px;\n color: #b8a07a;\n font-size: 13px;\n }\n\n .menu-item .right {\n color: #ccc;\n font-size: 11px;\n }\n\n .menu-item .badge-count {\n background: #e74c3c;\n color: #fff;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n font-size: 9px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* ====== Screen Label ====== */\n .screen-label {\n text-align: center;\n margin-top: 14px;\n font-size: 13px;\n font-weight: 600;\n color: #1a1a2e;\n letter-spacing: 0.02em;\n }\n\n .screen-label .sub-label {\n font-size: 10px;\n color: #bbb;\n font-weight: 400;\n margin-top: 2px;\n }\n\n /* ====== Responsive ====== */\n @media (max-width: 1024px) {\n .app-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 600px) {\n .app-grid {\n grid-template-columns: 1fr;\n gap: 2rem;\n max-width: 360px;\n }\n .portfolio-header h1 {\n font-size: 1.5rem;\n }\n .travel-portfolio {\n padding: 1.5rem 0.5rem;\n }\n }\n</style>\n\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n\n<div class=\"travel-portfolio\">\n <div class=\"portfolio-header\">\n <h1>✦ Voyage 旅行规划</h1>\n <p class=\"sub\">App UI Design Concept · 4 Screens</p>\n <div class=\"divider-line\"></div>\n </div>\n\n <div class=\"app-grid\">\n\n <!-- ====== Screen 1: 首页 Home ====== -->\n <div>\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"status-bar\">\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 <div class=\"screen-content\">\n <!-- Header -->\n <div class=\"home-header\">\n <div class=\"greeting\">\n <h2>Good morning 👋</h2>\n <h1>探索世界</h1>\n </div>\n <div class=\"avatar-circle\">J</div>\n </div>\n <!-- Search -->\n <div class=\"search-bar\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <input type=\"text\" placeholder=\"Search destinations, hotels...\" value=\"\">\n <i class=\"fa-solid fa-sliders\" style=\"color:#ccc; font-size:13px;\"></i>\n </div>\n <!-- Categories -->\n <div class=\"category-pills\">\n <span class=\"pill active\">All</span>\n <span class=\"pill\">Beach</span>\n <span class=\"pill\">Mountain</span>\n <span class=\"pill\">City</span>\n <span class=\"pill\">Culture</span>\n <span class=\"pill\">Food</span>\n </div>\n <!-- Section: Featured Trips -->\n <div class=\"section-title\">\n <h3>Featured Trips</h3>\n <span>See all <i class=\"fa-solid fa-arrow-right\" style=\"font-size:9px;\"></i></span>\n </div>\n <!-- Trip Card 1 -->\n <div class=\"trip-card\">\n <div class=\"card-img\" style=\"background-image: url('/assets/images/16-9/nature-02.jpg');\"></div>\n <div class=\"card-body\">\n <h4>🏔️ 瑞士阿尔卑斯之旅</h4>\n <div class=\"meta\">\n <span><i class=\"fa-regular fa-calendar\"></i> 12-18 Jun</span>\n <span><i class=\"fa-regular fa-clock\"></i> 7 days</span>\n <span class=\"price\">$2,850</span>\n </div>\n </div>\n </div>\n <!-- Trip Card 2 -->\n <div class=\"trip-card\">\n <div class=\"card-img\" style=\"background-image: url('/assets/images/travel-nature/travel-nature-11.jpg');\"></div>\n <div class=\"card-body\">\n <h4>🌿 日本京都·岚山枫韵</h4>\n <div class=\"meta\">\n <span><i class=\"fa-regular fa-calendar\"></i> 3-9 Nov</span>\n <span><i class=\"fa-regular fa-clock\"></i> 7 days</span>\n <span class=\"price\">$1,920</span>\n </div>\n </div>\n </div>\n <!-- Section: Recent -->\n <div class=\"section-title\" style=\"margin-top:2px;\">\n <h3>Recent Places</h3>\n </div>\n <div class=\"card\" style=\"display:flex;align-items:center;gap:10px;padding:10px 12px;\">\n <div style=\"width:36px;height:36px;border-radius:10px;background:#e8e7e4;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;\">🗺</div>\n <div style=\"flex:1;\">\n <div style=\"font-size:12px;font-weight:600;color:#1a1a2e;\">巴厘岛·乌布</div>\n <div style=\"font-size:10px;color:#bbb;\">Last visited · 2 months ago</div>\n </div>\n <span class=\"badge-gold\">4.8</span>\n </div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item active\"><i class=\"fa-solid fa-house\"></i><span>Home</span></div>\n <div class=\"nav-item\"><i class=\"fa-solid fa-map\"></i><span>Trips</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-compass\"></i><span>Explore</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-user\"></i><span>Profile</span></div>\n </div>\n </div>\n </div>\n <div class=\"screen-label\">\n 首页 Home\n <div class=\"sub-label\">Featured trips + 搜索 + 分类</div>\n </div>\n </div>\n\n <!-- ====== Screen 2: 行程详情页 Trip Detail ====== -->\n <div>\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"status-bar\">\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 <div class=\"screen-content\">\n <!-- Back + Title -->\n <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n <div style=\"width:30px;height:30px;border-radius:50%;background:#f5f4f2;display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;cursor:default;\"><i class=\"fa-solid fa-chevron-left\"></i></div>\n <div style=\"font-size:15px;font-weight:700;color:#1a1a2e;\">行程详情</div>\n </div>\n <!-- Cover Image -->\n <div class=\"detail-cover\" style=\"background-image: url('/assets/images/hero/hero-1-v2-4.jpeg');\">\n <div class=\"overlay\"></div>\n <div class=\"title-on-img\">\n <h2>🇨🇭 瑞士阿尔卑斯之旅</h2>\n <p><i class=\"fa-regular fa-calendar\"></i> 12 Jun - 18 Jun · 7 days</p>\n </div>\n </div>\n <!-- Quick Info Cards -->\n <div style=\"display:flex;gap:6px;margin-bottom:12px;\">\n <div class=\"card\" style=\"flex:1;padding:8px;text-align:center;margin:0;\">\n <div style=\"font-size:14px;font-weight:700;color:#2d6a4f;\">$2,850</div>\n <div style=\"font-size:9px;color:#aaa;\">Total</div>\n </div>\n <div class=\"card\" style=\"flex:1;padding:8px;text-align:center;margin:0;\">\n <div style=\"font-size:14px;font-weight:700;color:#1a1a2e;\">5</div>\n <div style=\"font-size:9px;color:#aaa;\">Destinations</div>\n </div>\n <div class=\"card\" style=\"flex:1;padding:8px;text-align:center;margin:0;\">\n <div style=\"font-size:14px;font-weight:700;color:#1a1a2e;\">4.9</div>\n <div style=\"font-size:9px;color:#aaa;\">Rating</div>\n </div>\n </div>\n <!-- Progress -->\n <div class=\"card\" style=\"padding:10px 12px;margin-bottom:10px;\">\n <div style=\"display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:#666;\">\n <span>Trip Progress</span>\n <span style=\"color:#2d6a4f;font-weight:600;\">Day 4 of 7</span>\n </div>\n <div class=\"progress-bar\"><div class=\"fill\"></div></div>\n <div style=\"display:flex;justify-content:space-between;font-size:9px;color:#ccc;margin-top:2px;\">\n <span>Start</span>\n <span>End</span>\n </div>\n </div>\n <!-- Itinerary -->\n <div class=\"section-title\"><h3>行程安排</h3></div>\n <div class=\"card\" style=\"padding:4px 12px 2px;\">\n <div class=\"day-item\">\n <div class=\"day-marker\">1</div>\n <div class=\"day-info\">\n <h5>苏黎世 · 老城漫步 <span class=\"tag\">Today</span></h5>\n <p>Lindenhof 观景台 → 班霍夫大街 → 苏黎世湖游船</p>\n </div>\n </div>\n <div class=\"day-item\">\n <div class=\"day-marker\">2</div>\n <div class=\"day-info\">\n <h5>卢塞恩 · 湖光山色</h5>\n <p>卡佩尔廊桥 → 狮子纪念碑 → 瑞吉山缆车</p>\n </div>\n </div>\n <div class=\"day-item\">\n <div class=\"day-marker passive\">3</div>\n <div class=\"day-info\">\n <h5>因特拉肯 · 少女峰</h5>\n <p>黄金列车 → 少女峰火车站 → 冰宫</p>\n </div>\n </div>\n <div class=\"day-item\">\n <div class=\"day-marker passive\">4</div>\n <div class=\"day-info\">\n <h5>采尔马特 · 马特洪峰</h5>\n <p>Gornergrat 观景台 → 黑面羊体验</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\"><i class=\"fa-solid fa-house\"></i><span>Home</span></div>\n <div class=\"nav-item active\"><i class=\"fa-solid fa-map\"></i><span>Trips</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-compass\"></i><span>Explore</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-user\"></i><span>Profile</span></div>\n </div>\n </div>\n </div>\n <div class=\"screen-label\">\n 行程详情页 Trip Detail\n <div class=\"sub-label\">行程概览 + 每日安排 + 进度追踪</div>\n </div>\n </div>\n\n <!-- ====== Screen 3: 景点详情页 Attraction Detail ====== -->\n <div>\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"status-bar\">\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 <div class=\"screen-content\">\n <!-- Hero Image -->\n <div class=\"attraction-hero\" style=\"background-image: url('/assets/images/travel-nature/travel-nature-11.jpg');\">\n <div class=\"back-btn\"><i class=\"fa-solid fa-chevron-left\"></i></div>\n <div class=\"bookmark\"><i class=\"fa-solid fa-heart\"></i></div>\n </div>\n <!-- Title + Rating -->\n <div style=\"display:flex;justify-content:space-between;align-items:flex-start;\">\n <div>\n <h3 style=\"font-size:17px;font-weight:700;color:#1a1a2e;margin:0;\">岚山竹林</h3>\n <div style=\"font-size:10px;color:#aaa;margin-top:2px;\"><i class=\"fa-solid fa-location-dot\" style=\"color:#b8a07a;\"></i> 京都市右京区</div>\n </div>\n <div style=\"text-align:right;\">\n <div class=\"rating-row\" style=\"margin:0;\">\n <span class=\"stars\"><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star\"></i><i class=\"fa-solid fa-star-half-alt\"></i></span>\n <span class=\"score\">4.8</span>\n </div>\n <div style=\"font-size:9px;color:#bbb;\">2,346 reviews</div>\n </div>\n </div>\n <!-- Info Chips -->\n <div class=\"info-chips\">\n <span class=\"chip green\"><i class=\"fa-regular fa-clock\"></i> 1-2 hrs</span>\n <span class=\"chip\"><i class=\"fa-solid fa-yen-sign\"></i> Free</span>\n <span class=\"chip\"><i class=\"fa-solid fa-bus\"></i> Bus 72</span>\n <span class=\"chip\"><i class=\"fa-regular fa-sun\"></i> 06:00-18:00</span>\n </div>\n <!-- Description Card -->\n <div class=\"card\" style=\"padding:12px;\">\n <p class=\"desc-text\">\n 岚山竹林是京都最具标志性的景观之一。高耸的竹子在风中摇曳，光影交错间形成一条通往天宫的绿色隧道。步行其中，仿佛置身于另一个世界，是旅行者不可错过的体验。\n </p>\n <div class=\"gallery-thumbs\">\n <div class=\"thumb\" style=\"background-image: url('/assets/images/16-9/nature-02.jpg');\"></div>\n <div class=\"thumb\" style=\"background-image: url('/assets/images/travel-nature/travel-nature-11.jpg');\"></div>\n <div class=\"thumb\" style=\"background: #e8e7e4;display:flex;align-items:center;justify-content:center;font-size:12px;color:#999;\">+5</div>\n </div>\n </div>\n <!-- Tips Card -->\n <div class=\"card card-soft\" style=\"padding:10px 12px;\">\n <div style=\"display:flex;gap:8px;align-items:flex-start;\">\n <div style=\"font-size:16px;flex-shrink:0;\">💡</div>\n <div>\n <div style=\"font-size:11px;font-weight:600;color:#1a1a2e;margin-bottom:2px;\">Pro Tip</div>\n <p style=\"font-size:10px;color:#888;line-height:1.4;\">清晨8点前到达，避开人潮，独享竹林的宁静与光影交错之美。</p>\n </div>\n </div>\n </div>\n <!-- Nearby Card -->\n <div class=\"section-title\"><h3>Nearby Attractions</h3></div>\n <div style=\"display:flex;gap:6px;\">\n <div class=\"card\" style=\"flex:1;padding:8px;margin:0;text-align:center;\">\n <div style=\"font-size:18px;margin-bottom:4px;\">⛩</div>\n <div style=\"font-size:9px;font-weight:600;color:#333;\">天龙寺</div>\n <div style=\"font-size:8px;color:#aaa;\">0.3 km</div>\n </div>\n <div class=\"card\" style=\"flex:1;padding:8px;margin:0;text-align:center;\">\n <div style=\"font-size:18px;margin-bottom:4px;\">🍵</div>\n <div style=\"font-size:9px;font-weight:600;color:#333;\">抹茶体验</div>\n <div style=\"font-size:8px;color:#aaa;\">0.5 km</div>\n </div>\n <div class=\"card\" style=\"flex:1;padding:8px;margin:0;text-align:center;\">\n <div style=\"font-size:18px;margin-bottom:4px;\">🌊</div>\n <div style=\"font-size:9px;font-weight:600;color:#333;\">渡月桥</div>\n <div style=\"font-size:8px;color:#aaa;\">1.2 km</div>\n </div>\n </div>\n <!-- Action Button -->\n <button class=\"btn-primary-sm\"><i class=\"fa-regular fa-map\"></i> 添加到行程</button>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\"><i class=\"fa-solid fa-house\"></i><span>Home</span></div>\n <div class=\"nav-item\"><i class=\"fa-solid fa-map\"></i><span>Trips</span></div>\n <div class=\"nav-item active\"><i class=\"fa-regular fa-compass\"></i><span>Explore</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-user\"></i><span>Profile</span></div>\n </div>\n </div>\n </div>\n <div class=\"screen-label\">\n 景点详情页 Attraction\n <div class=\"sub-label\">景点介绍 + 图集 + 周边推荐 + Pro Tips</div>\n </div>\n </div>\n\n <!-- ====== Screen 4: 个人界面 Profile ====== -->\n <div>\n <div class=\"phone-frame\">\n <div class=\"phone-screen\">\n <div class=\"status-bar\">\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 <div class=\"screen-content\">\n <!-- Settings icon -->\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;\">\n <div style=\"font-size:15px;font-weight:700;color:#1a1a2e;\">Profile</div>\n <div style=\"width:32px;height:32px;border-radius:50%;background:#f5f4f2;display:flex;align-items:center;justify-content:center;font-size:13px;color:#555;cursor:default;\"><i class=\"fa-solid fa-gear\"></i></div>\n </div>\n <!-- Profile Card -->\n <div class=\"card profile-card\">\n <div class=\"avatar-lg\">J</div>\n <h3>Joyce Chen</h3>\n <p><i class=\"fa-regular fa-envelope\"></i> joyce.chen@voyage.com</p>\n <div class=\"stats-row\">\n <div class=\"stat\">\n <div class=\"num\">12</div>\n <div class=\"label\">Trips</div>\n </div>\n <div class=\"stat\">\n <div class=\"num\">28</div>\n <div class=\"label\">Countries</div>\n </div>\n <div class=\"stat\">\n <div class=\"num\">156</div>\n <div class=\"label\">Photos</div>\n </div>\n </div>\n </div>\n <!-- Membership Card -->\n <div class=\"card card-highlight\" style=\"padding:12px 14px;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;\">\n <div>\n <div style=\"font-size:9px;font-weight:500;opacity:0.7;text-transform:uppercase;letter-spacing:0.1em;\">Membership</div>\n <div style=\"font-size:15px;font-weight:700;margin-top:2px;\">Voyage Gold</div>\n <div style=\"font-size:9px;opacity:0.7;margin-top:1px;\">2,450 pts to next tier</div>\n </div>\n <div style=\"font-size:28px;font-weight:300;opacity:0.3;\">✦</div>\n </div>\n <div class=\"progress-bar\" style=\"background:rgba(255,255,255,0.2);margin-top:6px;\"><div class=\"fill\" style=\"width:68%;background:#d4b88c;\"></div></div>\n </div>\n <!-- Menu Items -->\n <div class=\"card\" style=\"padding:0 14px;margin-top:4px;\">\n <div class=\"menu-item\">\n <div class=\"left\"><i class=\"fa-regular fa-bookmark\"></i> Saved</div>\n <div class=\"right\">24 <i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;margin-left:4px;\"></i></div>\n </div>\n <div class=\"menu-item\">\n <div class=\"left\"><i class=\"fa-regular fa-clock\"></i> Recent</div>\n <div class=\"right\"><i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;\"></i></div>\n </div>\n <div class=\"menu-item\">\n <div class=\"left\"><i class=\"fa-regular fa-star\"></i> Reviews</div>\n <div class=\"right\" style=\"display:flex;align-items:center;gap:6px;\"><span style=\"color:#f5a623;font-size:10px;\"><i class=\"fa-solid fa-star\"></i> 4.9</span> <i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;\"></i></div>\n </div>\n <div class=\"menu-item\">\n <div class=\"left\"><i class=\"fa-regular fa-bell\"></i> Notifications</div>\n <div class=\"right\" style=\"display:flex;align-items:center;gap:6px;\"><span class=\"badge-count\">3</span> <i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;\"></i></div>\n </div>\n <div class=\"menu-item\">\n <div class=\"left\"><i class=\"fa-regular fa-circle-question\"></i> Help</div>\n <div class=\"right\"><i class=\"fa-solid fa-chevron-right\" style=\"font-size:9px;\"></i></div>\n </div>\n <div class=\"menu-item\" style=\"border:none;\">\n <div class=\"left\"><i class=\"fa-solid fa-arrow-right-from-bracket\" style=\"color:#e74c3c;\"></i> <span style=\"color:#e74c3c;\">Sign Out</span></div>\n </div>\n </div>\n </div>\n <div class=\"bottom-nav\">\n <div class=\"nav-item\"><i class=\"fa-solid fa-house\"></i><span>Home</span></div>\n <div class=\"nav-item\"><i class=\"fa-solid fa-map\"></i><span>Trips</span></div>\n <div class=\"nav-item\"><i class=\"fa-regular fa-compass\"></i><span>Explore</span></div>\n <div class=\"nav-item active\"><i class=\"fa-regular fa-user\"></i><span>Profile</span></div>\n </div>\n </div>\n </div>\n <div class=\"screen-label\">\n 个人界面 Profile\n <div class=\"sub-label\">个人信息 + 会员卡 + 菜单列表</div>\n </div>\n </div>\n\n </div>\n</div>",
"next": ["调整配色方案","增加更多动效","添加UI标注尺寸","替换为真实风景图","增加深色模式预览"]
}
}
```
---
## ✨ 设计说明
这4个界面围绕 **"轻奢旅行 + 卡片式设计"** 展开，整体调性克制且高级：
| 界面 | 设计亮点 |
|------|---------|
| 🏠 **首页** | 搜索栏 + 分类药丸 + 特色旅行卡片（带风景封面），底部导航突出"发现感" |
| 📋 **行程详情页** | 封面大图 + 数据统计三卡片 + 进度条 + 每日行程Timeline，信息层级清晰 |
| 🏔 **景点详情页** | 景点大图+收藏、评分、信息标签、描述卡片、Pro Tip、周边推荐、加入行程按钮 |
| 👤 **个人界面** | 个人资料卡 + **Voyage Gold 会员卡（绿色渐变）** + 菜单列表，金色点缀高级感 |
### 🎨 配色体系
- **主色：** `#2d6a4f`（深翠绿）— 自然、安心、高级
- **点缀：** `#b8a07a / #d4b88c`（香槟金）— 轻奢、温暖
- **背景：** 米白 `#fafaf9` + 极浅灰卡片，营造呼吸感
### 📐 卡片式设计
所有界面均以 **圆角卡片** 承载内容，配合细腻的阴影、微妙的边框和**悬停抬起效果**，让每个信息模块都像一张"精致卡片"堆叠在屏幕上。