# HTML 可视化方案对比模板 本文档定义了航线比价方案的 HTML 可视化文件模板。 ## 目录 1. [完整 HTML 模板](#完整-html-模板) 2. [样式说明](#样式说明) 3. [组件说明](#组件说明) 4. [使用方法](#使用方法) --- ## 完整 HTML 模板 ```html 航线比价 | {{出发城市}} ↔ {{区域}} | {{日期区间}}

✈️ 航线比价方案

{{出发城市}} ↔ {{区域}}多城 · {{日期区间}}
{{候选城市列表}} · 共{{组合数}}种组合 · 已筛出 Top 3
📍
出发城市
{{出发城市}}
📅
假期范围
{{日期区间}}
👥
出行人数
{{人数}}人
🎯
优化偏好
{{偏好}}

🥇 方案1

综合最优
✈️ 去程
{{出发城市}} → {{方案1去程城市}}
{{方案1去程日期}} · {{方案1去程航班号}}
{{方案1去程时间}} · {{方案1去程航空公司}}
中转{{方案1去程中转次数}}次（{{方案1去程中转城市}}）· 总飞行{{方案1去程总时长}}
¥{{方案1去程价格}}/人
✈️ 回程
{{方案1回程城市}} → {{出发城市}}
{{方案1回程日期}} · {{方案1回程航班号}}
{{方案1回程时间}} · {{方案1回程航空公司}}
中转{{方案1回程中转次数}}次（{{方案1回程中转城市}}）· 总飞行{{方案1回程总时长}}
¥{{方案1回程价格}}/人
💰 往返总价/人
¥{{方案1总价}}
⏱️ 总飞行时长
{{方案1总飞行时长}}
🔄 总中转次数
{{方案1总中转}}次
💡 {{方案1理由}}
✈️ 预订去程 ✈️ 预订回程

🥈 方案2

更省钱
✈️ 去程
{{出发城市}} → {{方案2去程城市}}
{{方案2去程日期}} · {{方案2去程航班号}}
{{方案2去程时间}} · 中转{{方案2去程中转次数}}次 · 总飞行{{方案2去程总时长}}
¥{{方案2去程价格}}/人
✈️ 回程
{{方案2回程城市}} → {{出发城市}}
{{方案2回程日期}} · {{方案2回程航班号}}
{{方案2回程时间}} · 中转{{方案2回程中转次数}}次 · 总飞行{{方案2回程总时长}}
¥{{方案2回程价格}}/人
💰 往返总价/人
¥{{方案2总价}}
⏱️ 总飞行时长
{{方案2总飞行时长}}
🔄 总中转次数
{{方案2总中转}}次
📉 比方案1便宜 ¥{{方案2省钱差额}}/人
⚠️ 代价：{{方案2代价说明}}
✈️ 预订去程 ✈️ 预订回程

🥉 方案3

更省时 / 更稳
✈️ 去程
{{出发城市}} → {{方案3去程城市}}
{{方案3去程日期}} · {{方案3去程航班号}}
{{方案3去程时间}} · 中转{{方案3去程中转次数}}次 · 总飞行{{方案3去程总时长}}
¥{{方案3去程价格}}/人
✈️ 回程
{{方案3回程城市}} → {{出发城市}}
{{方案3回程日期}} · {{方案3回程航班号}}
{{方案3回程时间}} · 中转{{方案3回程中转次数}}次 · 总飞行{{方案3回程总时长}}
¥{{方案3回程价格}}/人
💰 往返总价/人
¥{{方案3总价}}
⏱️ 总飞行时长
{{方案3总飞行时长}}
🔄 总中转次数
{{方案3总中转}}次
⏱️ 比方案1省 {{方案3省时差额}} 飞行 / 少 {{方案3少中转}} 次中转
⚠️ 代价：{{方案3代价说明}}
✈️ 预订去程 ✈️ 预订回程

📊 三方案速览对比

去→回 往返总价/人 总飞行 总中转 标签
🥇 {{方案1去程城市}}→{{方案1回程城市}}回 ¥{{方案1总价}} {{方案1总飞行时长}} {{方案1总中转}}次 综合最优
🥈 {{方案2去程城市}}→{{方案2回程城市}}回 ¥{{方案2总价}} {{方案2总飞行时长}} {{方案2总中转}}次 更省钱
🥉 {{方案3去程城市}}→{{方案3回程城市}}回 ¥{{方案3总价}} {{方案3总飞行时长}} {{方案3总中转}}次 更省时

🗺️ 可玩性路线建议（基于方案1）

✈️ {{方案1去程城市}}
→
{{中间城市1}}
→
{{方案1回程城市}} ✈️
{{城际交通说明1}}
{{城际交通说明2}}
💡 {{路线建议一句话}}

‼️ 重要提醒

  • 机票价格实时波动，以上为当前搜索结果，建议尽快预订锁定价格
  • {{签证提醒}}
  • {{季节/天气提醒}}
  • {{其他提醒}}

由 FlyAI 航线比价助手生成 · {{生成时间}}

数据来源：飞猪旅行 · 价格仅供参考

``` --- ## 样式说明 ### 配色方案 | 元素 | 颜色 | 用途 | |------|------|------| | 主色调 | `#0f2027 → #203a43 → #2c5364` | 头部、深色调背景 | | 方案1 | `#f093fb → #f5576c` | 综合最优，粉红系 | | 方案2 | `#4facfe → #00f2fe` | 更省钱，蓝色系 | | 方案3 | `#43e97b → #38f9d7` | 更省时，绿色系 | | 路线建议 | `#ffecd2 → #fcb69f` | 暖色，柔和 | | 提醒 | `#fff3cd` | 黄色警告 | | 价格高亮 | `#e74c3c` | 红色，醒目 | ### 响应式断点 - **桌面端**：> 600px，双栏航班信息 - **移动端**：≤ 600px，单栏布局 --- ## 组件说明 ### 1. 头部区域 (header) 展示"航线比价方案"标题、出发地↔区域、候选城市列表 ### 2. 约束摘要 (constraints) 4格快速预览：出发城市、假期范围、人数、优化偏好 ### 3. 方案卡片 (plan-card) - plan-header：方案标题 + 标签（综合最优/更省钱/更省时） - flight-section：去程/回程双栏航班信息 - plan-summary：3格摘要（总价/总飞行/总中转） - plan-reason：一句话推荐理由 - plan-diff：与方案1的差异说明 - book-links：飞猪预订按钮 ### 4. 对比表格 (compare-card) 三方案横向对比表 ### 5. 路线建议 (route-card) 可视化城市顺序流 + 城际交通说明 ### 6. 提醒 (tips-card) 价格波动、签证、天气等提醒 --- ## 使用方法 ### 生成 HTML 文件 1. 完成所有航线搜索和评分 2. 替换模板中的 `{{变量}}` 占位符 3. 使用 `create_file` 工具生成文件 ### 核心变量列表 | 变量 | 说明 | 示例 | |------|------|------| | `{{出发城市}}` | 用户出发城市 | 杭州 | | `{{区域}}` | 目的地区域 | 南欧 | | `{{日期区间}}` | 假期范围 | 10.1-10.7 | | `{{候选城市列表}}` | 所有候选城市 | 巴塞罗那 · 马德里 · 里斯本 | | `{{组合数}}` | 评估的组合总数 | 9 | | `{{人数}}` | 出行人数 | 2 | | `{{偏好}}` | 用户偏好 | 综合最优 | | `{{方案N去程城市}}` | 方案N的去程到达城市 | 巴塞罗那 | | `{{方案N回程城市}}` | 方案N的回程出发城市 | 里斯本 | | `{{方案N总价}}` | 方案N的往返总价/人 | 5,280 | | `{{方案N总飞行时长}}` | 方案N的总飞行时长 | 28h | | `{{方案N总中转}}` | 方案N的总中转次数 | 2 | | `{{方案N理由}}` | 方案N的推荐理由 | 价格适中... | | `{{方案N去程jumpUrl}}` | 去程飞猪预订链接 | https://... | | `{{方案N回程jumpUrl}}` | 回程飞猪预订链接 | https://... | | `{{生成时间}}` | 方案生成时间 | 2026-03-31 |