Created
December 24, 2025 09:22
-
-
Save jumperhsu/00339e895886255e16dc1173acdbb7a1 to your computer and use it in GitHub Desktop.
旅遊計劃：2026上海蘇州旅遊
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>2026上海蘇州旅遊 - 旅遊計劃</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f8f9fa; | |
| color: #333; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| width: 100%; | |
| max-width: 100vw; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| width: 100%; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #4a6fa5, #6b8cbc); | |
| color: white; | |
| padding: 30px 20px; | |
| border-radius: 10px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| font-size: clamp(1.8rem, 4vw, 2.5rem); | |
| margin-bottom: 10px; | |
| word-break: break-word; | |
| } | |
| .header-info { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| background: rgba(255,255,255,0.1); | |
| padding: 20px; | |
| border-radius: 8px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .info-item { | |
| font-size: clamp(0.9rem, 2vw, 1rem); | |
| word-break: break-word; | |
| } | |
| .info-item strong { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-size: 0.9em; | |
| opacity: 0.9; | |
| } | |
| /* 天數導航 */ | |
| .days-nav-container { | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| margin-bottom: 30px; | |
| padding-bottom: 10px; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: thin; | |
| } | |
| .days-nav { | |
| display: flex; | |
| min-width: min-content; | |
| width: max-content; | |
| } | |
| .days-nav-container::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .days-nav-container::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 3px; | |
| } | |
| .days-nav-container::-webkit-scrollbar-thumb { | |
| background: #4a6fa5; | |
| border-radius: 3px; | |
| } | |
| .day-nav-btn { | |
| padding: 12px 20px; | |
| background: white; | |
| border: 2px solid #4a6fa5; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: all 0.3s; | |
| font-size: clamp(0.8rem, 1.5vw, 0.9rem); | |
| min-width: 120px; | |
| text-align: center; | |
| font-weight: 600; | |
| color: #4a6fa5; | |
| margin-right: 10px; | |
| } | |
| .day-nav-btn:hover, | |
| .day-nav-btn.active { | |
| background: #4a6fa5; | |
| color: white; | |
| } | |
| /* 天數內容 */ | |
| .day-content { | |
| display: none; | |
| background: white; | |
| border-radius: 10px; | |
| padding: 25px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.08); | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-x: hidden; | |
| } | |
| .day-content.active { | |
| display: block; | |
| } | |
| .day-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| padding-bottom: 15px; | |
| border-bottom: 2px solid #f0f0f0; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .day-title { | |
| color: #4a6fa5; | |
| font-size: clamp(1.3rem, 3vw, 1.8rem); | |
| font-weight: bold; | |
| word-break: break-word; | |
| } | |
| .day-date { | |
| color: #666; | |
| font-size: clamp(0.9rem, 2vw, 1rem); | |
| background: #f8f9fa; | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| white-space: nowrap; | |
| } | |
| /* 活動項目 */ | |
| .activities-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .activity-item { | |
| background: #f9f9f9; | |
| border-left: 4px solid #4a6fa5; | |
| border-radius: 8px; | |
| padding: 20px; | |
| transition: all 0.3s; | |
| position: relative; | |
| width: 100%; | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| .activity-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .activity-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 15px; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .activity-name { | |
| font-weight: bold; | |
| font-size: clamp(1rem, 2vw, 1.2rem); | |
| color: #4a6fa5; | |
| word-break: break-word; | |
| max-width: 100%; | |
| } | |
| .activity-category { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| margin-left: 10px; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .activity-category.attraction { | |
| background-color: #e3f2fd; | |
| color: #1565c0; | |
| } | |
| .activity-category.activity { | |
| background-color: #e8f5e9; | |
| color: #2e7d32; | |
| } | |
| .activity-category.accommodation { | |
| background-color: #fff3e0; | |
| color: #ef6c00; | |
| } | |
| .activity-category.shopping { | |
| background-color: #fff0f5; | |
| color: #c2185b; | |
| } | |
| .activity-category.other { | |
| background-color: #f5f5f5; | |
| color: #616161; | |
| } | |
| .activity-time { | |
| color: #666; | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| background: white; | |
| padding: 5px 10px; | |
| border-radius: 15px; | |
| border: 1px solid #e0e0e0; | |
| flex-shrink: 0; | |
| } | |
| .activity-details { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| margin-top: 15px; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .activity-details div { | |
| font-size: 0.9rem; | |
| word-break: break-word; | |
| max-width: 100%; | |
| } | |
| .activity-details i { | |
| color: #4a6fa5; | |
| margin-right: 8px; | |
| width: 20px; | |
| } | |
| /* 交通方式 */ | |
| .transport-item { | |
| background: #f0f7ff; | |
| border-left: 4px solid #6b8cbc; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin: 15px 0 15px 30px; | |
| position: relative; | |
| width: calc(100% - 30px); | |
| max-width: 100%; | |
| overflow: hidden; | |
| } | |
| .transport-item::before { | |
| content: ""; | |
| position: absolute; | |
| left: -20px; | |
| top: 50%; | |
| width: 20px; | |
| height: 1px; | |
| background-color: #e0e0e0; | |
| } | |
| .transport-item::after { | |
| content: "→"; | |
| position: absolute; | |
| left: -25px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .transport-type { | |
| display: inline-block; | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| background-color: #e3f2fd; | |
| color: #1565c0; | |
| margin-bottom: 10px; | |
| white-space: nowrap; | |
| } | |
| .transport-main { | |
| border-left-color: #4caf50; | |
| } | |
| .transport-alternate { | |
| border-left-color: #ff9800; | |
| } | |
| /* 費用統計 */ | |
| .cost-summary { | |
| background: white; | |
| border-radius: 10px; | |
| padding: 25px; | |
| margin-top: 30px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.08); | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-x: auto; | |
| } | |
| .cost-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 15px; | |
| font-size: clamp(0.8rem, 1.5vw, 0.9rem); | |
| min-width: 600px; | |
| } | |
| .cost-table th, .cost-table td { | |
| padding: 10px 12px; | |
| text-align: left; | |
| border-bottom: 1px solid #e0e0e0; | |
| word-break: break-word; | |
| white-space: nowrap; | |
| max-width: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .cost-table th { | |
| background-color: #f0f0f0; | |
| color: #333; | |
| font-weight: 600; | |
| position: sticky; | |
| top: 0; | |
| } | |
| .cost-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .total-cost { | |
| font-weight: bold; | |
| color: #ff7e5f; | |
| } | |
| .cost-category { | |
| font-weight: 600; | |
| color: #4a6fa5; | |
| background-color: rgba(74, 111, 165, 0.1); | |
| } | |
| .cost-subcategory { | |
| padding-left: 20px !important; | |
| font-weight: 500; | |
| } | |
| .cost-total-row { | |
| font-weight: bold; | |
| background-color: rgba(255, 126, 95, 0.1); | |
| } | |
| /* 響應式設計 */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 15px; | |
| } | |
| header { | |
| padding: 20px 15px; | |
| } | |
| .header-info { | |
| grid-template-columns: 1fr; | |
| gap: 15px; | |
| } | |
| .day-nav-btn { | |
| min-width: 100px; | |
| padding: 10px 15px; | |
| } | |
| .day-content { | |
| padding: 20px; | |
| } | |
| .activity-details { | |
| grid-template-columns: 1fr; | |
| } | |
| .activity-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| .activity-category { | |
| margin-left: 0; | |
| margin-top: 5px; | |
| } | |
| .transport-item { | |
| margin-left: 20px; | |
| width: calc(100% - 20px); | |
| } | |
| .days-nav { | |
| width: max-content; | |
| } | |
| .cost-table { | |
| min-width: 500px; | |
| } | |
| .cost-table th, .cost-table td { | |
| padding: 8px 10px; | |
| font-size: 0.75rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| header { | |
| padding: 15px 10px; | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| } | |
| .day-nav-btn { | |
| min-width: 80px; | |
| padding: 8px 12px; | |
| font-size: 0.8rem; | |
| } | |
| .activity-item { | |
| padding: 15px; | |
| } | |
| .transport-item { | |
| padding: 12px; | |
| } | |
| .cost-table { | |
| min-width: 400px; | |
| font-size: 0.7rem; | |
| } | |
| .cost-table th, .cost-table td { | |
| padding: 6px 8px; | |
| } | |
| } | |
| /* 頁腳 */ | |
| footer { | |
| text-align: center; | |
| margin-top: 50px; | |
| padding-top: 20px; | |
| border-top: 1px solid #e0e0e0; | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .print-btn { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: #4a6fa5; | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.2); | |
| transition: all 0.3s; | |
| z-index: 100; | |
| border: none; | |
| } | |
| .print-btn:hover { | |
| background: #6b8cbc; | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1><i class="fas fa-map-marked-alt"></i> 2026上海蘇州旅遊</h1> | |
| <div class="header-info"> | |
| <div class="info-item"> | |
| <strong>旅遊開始日期</strong> | |
| 2026年3月14日 | |
| </div> | |
| <div class="info-item"> | |
| <strong>旅遊結束日期</strong> | |
| 2026年3月22日 | |
| </div> | |
| <div class="info-item"> | |
| <strong>旅遊天數</strong> | |
| 9 天 | |
| </div> | |
| </div> | |
| </header> | |
| <div class="days-nav-container" id="daysNavContainer"> | |
| <div class="days-nav" id="daysNav"> | |
| <button class="day-nav-btn active" data-day="1"> | |
| Day 1 | |
| </button> | |
| <button class="day-nav-btn " data-day="2"> | |
| Day 2 | |
| </button> | |
| <button class="day-nav-btn " data-day="3"> | |
| Day 3 | |
| </button> | |
| <button class="day-nav-btn " data-day="4"> | |
| Day 4 | |
| </button> | |
| <button class="day-nav-btn " data-day="5"> | |
| Day 5 | |
| </button> | |
| <button class="day-nav-btn " data-day="6"> | |
| Day 6 | |
| </button> | |
| <button class="day-nav-btn " data-day="7"> | |
| Day 7 | |
| </button> | |
| <button class="day-nav-btn " data-day="8"> | |
| Day 8 | |
| </button> | |
| <button class="day-nav-btn " data-day="9"> | |
| Day 9 | |
| </button> | |
| </div> | |
| </div> | |
| <div id="daysContent"> | |
| <div class="day-content active" id="dayContent1"> | |
| <div class="day-header"> | |
| <div class="day-title">第 1 天</div> | |
| <div class="day-date">2026年3月14日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">出發</span> | |
| <span class="activity-category transport"> | |
| 交通 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 13:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 三和國中捷運站</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 13:00 - 14:45</div> | |
| <div><i class="fas fa-route"></i> 三和國中捷運站 → 機場第二航廈站</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">機捷</span> | |
| <span class="activity-category transport"> | |
| 交通 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 14:45 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 機場第二航廈站</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">機場報到</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 15:00 - 16:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 桃園機場二航廈出境大廳</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">貴賓室</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 16:00 - 17:20 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 桃園機場二航廈環亞貴賓室A區</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">候機</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 17:20 - 18:05 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 桃園機場二航廈</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 18:05 - 20:05</div> | |
| <div><i class="fas fa-route"></i> 桃園機場二航廈 → 上海浦東機場二航廈</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">抵達上海</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 20:05 - 21:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海浦東機場二航廈</div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">浦東機場二航廈站</span> | |
| <span class="activity-category transport"> | |
| 交通 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 21:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海浦東機場二航廈</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 21:00 - 23:00</div> | |
| <div><i class="fas fa-route"></i> 上海浦東機場二航廈 → 上海靜安聯儲幸福PARKHOME飯店</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">上海靜安聯儲幸福PARKHOME飯店</span> | |
| <span class="activity-category accommodation"> | |
| 住宿 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 23:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent2"> | |
| <div class="day-header"> | |
| <div class="day-title">第 2 天</div> | |
| <div class="day-date">2026年3月15日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div class="transport-item accommodation-start-point"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <i class="fas fa-bed" style="color: #ef6c00;"></i> | |
| <div> | |
| <div style="font-weight: bold; color: #ef6c00;">今日起點：前一天的住宿</div> | |
| <div>上海靜安聯儲幸福PARKHOME飯店 - 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店早餐</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 07:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| <div><i class="fas fa-map-pin"></i> 200443, 上海, 靜安區, 場中路2250號</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 08:00 - 09:00</div> | |
| <div><i class="fas fa-route"></i> 上海靜安聯儲幸福PARKHOME飯店 → 豫園商城</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">豫園商城</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 09:00 - 10:20 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 豫園商城</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| TWD 133.00 | |
| <small>(133.00 TWD)</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 10:20 - 10:30</div> | |
| <div><i class="fas fa-route"></i> 豫園商城 → 上海城隍廟</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">上海城隍廟</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 10:30 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海城隍廟</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| TWD 43.00 | |
| <small>(43.00 TWD)</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 11:20 - 11:30</div> | |
| <div><i class="fas fa-route"></i> 上海城隍廟 → 上海城隍廟福佑門小商品市場</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">上海城隍廟福佑門小商品市場</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 11:30 - 12:30 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海城隍廟福佑門小商品市場</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 12:30 - 12:40</div> | |
| <div><i class="fas fa-route"></i> 上海城隍廟福佑門小商品市場 → 南京路步行街</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">南京路步行街</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 12:40 - 15:40 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 南京路步行街</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 15:50 - 16:10</div> | |
| <div><i class="fas fa-route"></i> 南京路步行街 → 外攤</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">外攤</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 16:10 - 20:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 外攤</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 20:00 - 21:00</div> | |
| <div><i class="fas fa-route"></i> 外攤 → 上海靜安聯儲幸福PARKHOME飯店</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店入住</span> | |
| <span class="activity-category accommodation"> | |
| 住宿 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 21:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent3"> | |
| <div class="day-header"> | |
| <div class="day-title">第 3 天</div> | |
| <div class="day-date">2026年3月16日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div class="transport-item accommodation-start-point"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <i class="fas fa-bed" style="color: #ef6c00;"></i> | |
| <div> | |
| <div style="font-weight: bold; color: #ef6c00;">今日起點：前一天的住宿</div> | |
| <div>飯店入住 - 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店早餐</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 07:00 - 08:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 08:00 - 09:00</div> | |
| <div><i class="fas fa-route"></i> 上海靜安聯儲幸福PARKHOME飯店 → 武康路歷史街區</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">武康路歷史街區漫遊</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 09:00 - 12:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 武康路歷史街區</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 12:00 - 12:50</div> | |
| <div><i class="fas fa-route"></i> 武康路歷史街區 → 田子坊</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">田子坊漫遊</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 12:50 - 14:50 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 田子坊</div> | |
| <div><i class="fas fa-sticky-note"></i> 由老弄堂改造的藝術文創區，格局狹小緊湊，小店、畫廊、咖啡館林立，氛圍市井而文藝。 | |
| https://docs.google.com/spreadsheets/d/e/2PACX-1vTOs1lm5EPdxUVviZxcW41Fvzczi9f8CiXmgPw1fVIZIrVneM6lN6WsMr6r74gZ37x-reQsxR04FiB5/pubhtml#gid=1426154670</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 14:50 - 16:00</div> | |
| <div><i class="fas fa-route"></i> 田子坊 → 1933老場坊</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">1933老場坊</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 16:00 - 17:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 1933老場坊</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 17:00 - 17:40</div> | |
| <div><i class="fas fa-route"></i> 1933老場坊 → 陸家嘴</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">陸家嘴</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 17:40 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 陸家嘴</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 19:40 - 20:30</div> | |
| <div><i class="fas fa-route"></i> 陸家嘴 → 上海靜安聯儲幸福PARKHOME飯店</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店入住</span> | |
| <span class="activity-category accommodation"> | |
| 住宿 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 20:30 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent4"> | |
| <div class="day-header"> | |
| <div class="day-title">第 4 天</div> | |
| <div class="day-date">2026年3月17日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div class="transport-item accommodation-start-point"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <i class="fas fa-bed" style="color: #ef6c00;"></i> | |
| <div> | |
| <div style="font-weight: bold; color: #ef6c00;">今日起點：前一天的住宿</div> | |
| <div>飯店入住 - 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店早餐</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 07:00 - 07:30 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海靜安聯儲幸福PARKHOME飯店</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 07:30 - 08:15</div> | |
| <div><i class="fas fa-route"></i> 上海靜安聯儲幸福PARKHOME飯店 → 上海高鐵站</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">搭乘高鐵</span> | |
| <span class="activity-category transport"> | |
| 交通 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 08:15 - 08:47 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 上海高鐵站</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 08:47 - 09:00</div> | |
| <div><i class="fas fa-route"></i> 上海高鐵站 → 蘇州高鐵站</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">抵達蘇州</span> | |
| <span class="activity-category transport"> | |
| 交通 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 09:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 蘇州高鐵站</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 09:00 - 09:30</div> | |
| <div><i class="fas fa-route"></i> 蘇州高鐵站 → 慧聞飯店(拙政園平江路店)</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店行李寄存</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 09:30 - 10:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 慧聞飯店(拙政園平江路店)</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 10:00 - 11:00</div> | |
| <div><i class="fas fa-route"></i> 慧聞飯店(拙政園平江路店) → 虎丘山</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">虎丘山</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 11:00 - 16:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 虎丘山</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| TWD 265.00 | |
| <small>(265.00 TWD)</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 16:00 - 16:30</div> | |
| <div><i class="fas fa-route"></i> 虎丘山 → 七里山塘</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">七里山塘</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 16:30 - 20:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 七里山塘</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 20:00 - 21:00</div> | |
| <div><i class="fas fa-route"></i> 七里山塘 → 慧聞飯店(拙政園平江路店)</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店入住</span> | |
| <span class="activity-category accommodation"> | |
| 住宿 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 21:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 慧聞飯店(拙政園平江路店)</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| CNY 166.00 | |
| <small>(713.80 TWD)</small> | |
| (每人 356.90 TWD) | |
| </div> | |
| <div><i class="fas fa-sticky-note"></i> 特惠雙床房/含早/CNY 166</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent5"> | |
| <div class="day-header"> | |
| <div class="day-title">第 5 天</div> | |
| <div class="day-date">2026年3月18日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div class="transport-item accommodation-start-point"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <i class="fas fa-bed" style="color: #ef6c00;"></i> | |
| <div> | |
| <div style="font-weight: bold; color: #ef6c00;">今日起點：前一天的住宿</div> | |
| <div>飯店入住 - 慧聞飯店(拙政園平江路店)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店早餐</span> | |
| <span class="activity-category activity"> | |
| 活動 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 06:30 - 07:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 慧聞飯店(拙政園平江路店)</div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 07:10 - 07:30</div> | |
| <div><i class="fas fa-route"></i> 慧聞飯店(拙政園平江路店) → 拙政園</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">拙政園</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 07:30 - 10:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 拙政園</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| TWD 309.00 | |
| <small>(309.00 TWD)</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 10:00 - 10:20</div> | |
| <div><i class="fas fa-route"></i> 拙政園 → 獅子林</div> | |
| <div style="margin: 15px 0;"> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">獅子林</span> | |
| <span class="activity-category attraction"> | |
| 景點 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 10:20 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 獅子林</div> | |
| <div><i class="fas fa-money-bill-wave"></i> | |
| TWD 133.00 | |
| <small>(133.00 TWD)</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="transport-item transport-main"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;"> | |
| <div> | |
| <i class="fas fa-star" style="color: #4caf50;"></i> 主要 | |
| </div> | |
| </div> | |
| <div><i class="fas fa-clock"></i> 10:20 - 21:00</div> | |
| <div><i class="fas fa-route"></i> 獅子林 → 慧聞飯店(拙政園平江路店)</div> | |
| <div style="margin: 15px 0;"> | |
| <div style="margin: 8px 0; padding: 8px; background: white; border-radius: 4px; border-left: 3px solid #4caf50;"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 5px;"> | |
| <span><strong>地鐵</strong> <span style="color: #4caf50;">(✓ 主要)</span></span> | |
| </div> | |
| </div> | |
| <div style="margin: 8px 0; padding: 8px; background: white; border-radius: 4px; border-left: 3px solid #ff9800;"> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 5px;"> | |
| <span><strong>計程車</strong> <span style="color: #ff9800;">(○ 次要)</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-header"> | |
| <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px;"> | |
| <span class="activity-name">飯店入住</span> | |
| <span class="activity-category accommodation"> | |
| 住宿 | |
| </span> | |
| </div> | |
| <div class="activity-time"> | |
| 21:00 | |
| </div> | |
| </div> | |
| <div class="activity-details"> | |
| <div><i class="fas fa-map-marker-alt"></i> 慧聞飯店(拙政園平江路店)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent6"> | |
| <div class="day-header"> | |
| <div class="day-title">第 6 天</div> | |
| <div class="day-date">2026年3月19日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div style="text-align: center; padding: 40px 20px; color: #999;"> | |
| <i class="fas fa-calendar-plus" style="font-size: 3rem; margin-bottom: 15px;"></i> | |
| <p>當日暫無行程安排</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent7"> | |
| <div class="day-header"> | |
| <div class="day-title">第 7 天</div> | |
| <div class="day-date">2026年3月20日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div style="text-align: center; padding: 40px 20px; color: #999;"> | |
| <i class="fas fa-calendar-plus" style="font-size: 3rem; margin-bottom: 15px;"></i> | |
| <p>當日暫無行程安排</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent8"> | |
| <div class="day-header"> | |
| <div class="day-title">第 8 天</div> | |
| <div class="day-date">2026年3月21日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div style="text-align: center; padding: 40px 20px; color: #999;"> | |
| <i class="fas fa-calendar-plus" style="font-size: 3rem; margin-bottom: 15px;"></i> | |
| <p>當日暫無行程安排</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="day-content " id="dayContent9"> | |
| <div class="day-header"> | |
| <div class="day-title">第 9 天</div> | |
| <div class="day-date">2026年3月22日</div> | |
| </div> | |
| <div class="activities-container"> | |
| <div style="text-align: center; padding: 40px 20px; color: #999;"> | |
| <i class="fas fa-calendar-plus" style="font-size: 3rem; margin-bottom: 15px;"></i> | |
| <p>當日暫無行程安排</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cost-summary"> | |
| <h3><i class="fas fa-calculator"></i> 費用統計</h3> | |
| <table class="cost-table"> | |
| <thead> | |
| <tr> | |
| <th>類別</th> | |
| <th>幣別</th> | |
| <th>原幣費用</th> | |
| <th>換算台幣</th> | |
| <th>分攤人數</th> | |
| <th>每人費用(台幣)</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="cost-category"> | |
| <td colspan="6"><strong>景點</strong></td> | |
| </tr> | |
| <tr class="cost-subcategory"> | |
| <td></td> | |
| <td>TWD</td> | |
| <td>883.00</td> | |
| <td>883.00</td> | |
| <td>1</td> | |
| <td class="total-cost">883.00</td> | |
| </tr> | |
| <tr class="cost-category"> | |
| <td colspan="6"><strong>住宿</strong></td> | |
| </tr> | |
| <tr class="cost-subcategory"> | |
| <td></td> | |
| <td>CNY</td> | |
| <td>166.00</td> | |
| <td>713.80</td> | |
| <td>2</td> | |
| <td class="total-cost">356.90</td> | |
| </tr> | |
| <tr class="cost-total-row"> | |
| <td colspan="3"><strong>總計 (新台幣)</strong></td> | |
| <td><strong>1596.80</strong></td> | |
| <td></td> | |
| <td class="total-cost"><strong>1239.90</strong></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <footer> | |
| <p>使用「旅遊計劃規劃」應用程式創建 • 2025/12/24</p> | |
| <p style="margin-top: 5px; font-size: 0.8rem; color: #999;"> | |
| 分享自：2026上海蘇州旅遊 • 最後更新：2025/12/24 下午05:22 | |
| </p> | |
| </footer> | |
| </div> | |
| <button class="print-btn" onclick="window.print()"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.querySelectorAll('.day-nav-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const day = this.dataset.day; | |
| showDayContent(day); | |
| }); | |
| }); | |
| showDayContent(1); | |
| }); | |
| function showDayContent(day) { | |
| document.querySelectorAll('.day-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| const dayContent = document.getElementById('dayContent' + day); | |
| if (dayContent) { | |
| dayContent.classList.add('active'); | |
| } | |
| document.querySelectorAll('.day-nav-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| if (btn.dataset.day === day) { | |
| btn.classList.add('active'); | |
| } | |
| }); | |
| dayContent.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment