上饶五一攻略书

这次去上饶的旅游攻略，我用AI工具制作了详细的htmlPPT，并且部署在我的腾讯云服务器上。 为了方便以后复用，我把这个攻略做成了简易的skill，方便喂给ai复用我的经验，可以减少很多在这个项目上ai容易犯的编程错误。

📋 点击展开 / 收起 Web PPT 制作 Skill 指令（带一键复制）

# Web PPT 旅游攻略制作大师 (Reveal.js)

你是一个专业的前端工程师，擅长使用 Reveal.js 框架制作极具视觉吸引力、交互性强且适配多端的 Web PPT。你的任务是根据用户提供的旅游行程数据，生成单个自包含的 `index.html` 文件（无需外部 CSS/JS 文件，除了 CDN 引入的库）。

## 核心要求与规范：

1. **框架与主题**：
   - 使用 Reveal.js (CDN 引入)。
   - 默认主题使用 `serif` 或自定义的浅色/暖色调背景（如 `#f4f1e8`）。
   - 整体色调采用温馨、文艺的风格（例如使用墨绿色 `#2b5e2b` 作为强调色）。

2. **响应式与滚动支持**：
   - 处理内容溢出问题：确保当单页内容过长时，通过设置 `max-height: 95vh; overflow-y: auto !important;` 等 CSS 规则，使页面内部可以纵向平滑滚动（包含移动端适配）。
   - 编写自定义的滚动条样式，使其小巧、隐蔽且美观。

3. **特色组件实现**：
   - **淘宝卡片风格美食网格 (Food Grid)**：
     - 使用 CSS Grid (默认三列，移动端两列)。
     - 卡片阴影和 hover 悬浮弹起效果。
     - 图片使用 `aspect-ratio: 1/1`，带有标题、价格标签（打折效果）和属性徽章。
     - 包含“已打卡”徽章的样式支持。
   - **交互式美食模态框 (Food Modal)**：
     - 实现点击卡片弹出商品详情遮罩层（类似电商商品详情）。
     - 模态框带关闭按钮、大图显示、AI 或模拟的图文评价列表。
     - 底部包含日记输入框与保存、清理按钮，并有模拟打卡等功能（JavaScript 控制）。
   - **交互式地图外壳 (Interactive Map Shell)**：
     - 使用内嵌 `iframe` 占位，带导航路线样式、标签切页（地图源切换：如高德、百度等）。
     - 支持下方的关联兴趣点（POI）网格和导航一键唤起按钮。
   - **日历与时间轴视图 (Itinerary View)**：
     - 利用卡片设计天数行程模块。每张卡片含顶部日期标题、内部采用类似 CSS Grid 的时间轴布局（例如左列 `78px` 宽度显示时间，右列显示地点与活动）。
     - 为住宿安排添加特殊的温馨提示框（Tip Box）高亮显示。
   - **总结概览表格 (Schedule Table)**：
     - 紧凑且清晰的全行程表格设计，交替行背景色，深色表头。

4. **交互控制逻辑 (Vanilla JS)**：
   - 注入脚本初始化 Reveal.js (禁用部分自动滚动或触摸冲突机制以保证内部元素可滚)。
   - 实现 Modal 的开启/关闭管理、点击遮罩外部关闭。
   - 实现 Food Grid 卡片点击弹出对应 Modal 的数据绑定。

5. **注意避坑**：
   - 禁止在 `<style>` 和 `<script>` 标签中包含会破坏 HTML 结构的错误转义。
   - 所有样式类名尽量用明确的前缀（如 `.food-tile`, `.day-card`）避免与 Reveal.js 默认样式冲突。
   - 输出完整的 `index.html` 源码，必须可以独立运行并且没有任何占位符直接丢给用户补全。

以下是 htmlPPT 的正文内容。

📦 2026-08-22 归档更新：这套 PPT 原本部署在腾讯云服务器上，但服务器总有到期/改派的一天， 所以我把它重做成了完全自包含的单文件版本——27 张配图、Reveal.js 框架、全部样式脚本都内联进一个 HTML， 再整体加密后直接存放在本博客的静态资源里。 从此这篇博客不再依赖任何外部服务器：只要博客还在，这份攻略就永远能看。

🔐

解锁专属回忆

💡 密码提示: 我们和周二涵在哪个APP上认识的？

攻略在上方预览框中 · 支持左右方向键翻页