logo
0
0
WeChat Login

新疆 · 伊犁大环线行程图(Vue 3 版本)

11 天行程交互可视化页面 · 基于 Vue 3 + Vite 重构。

🚀 快速开始

# 安装依赖
npm install         # 或 yarn / pnpm install

# 启动开发服务器(默认 http://localhost:5173)
npm run dev

# 打包构建
npm run build

# 预览构建产物
npm run preview

旧的纯静态 HTML 版本已备份为 index.legacy.html,如需查看可使用 npx serve . 后访问。

🗂️ 目录结构

.
├── index.html                  # Vite 入口 HTML(挂载 #app)
├── index.legacy.html           # 旧版纯 HTML/JS 实现(备份)
├── vite.config.js              # Vite 配置
├── package.json
└── src/
    ├── main.js                 # Vue 应用入口
    ├── App.vue                 # 总布局:标题/地图卡/图例/控制按钮
    ├── styles/
    │   └── global.css          # 全局 CSS 变量、body 基础样式
    ├── data/
    │   └── itinerary.js        # 行程数据 + 路径辅助函数
    ├── store/
    │   └── useItinerary.js     # 状态与播放控制(响应式 ref)
    └── components/
        ├── MapSvg.vue          # SVG 地图(路径/节点/徽章)
        ├── Timeline.vue        # 左侧竖向时间轴胶囊
        └── InfoPanel.vue       # 详情面板(当天 legs/住宿/小贴士)

🎯 主要交互特性

  • 自动播放:进入页面 400ms 后开始,每 3s 切换一天
  • 点击节点 / 时间轴 / 日数徽章:立即聚焦该天,并暂停自动播放
  • 点击后 60s 自动从下一天继续播放
  • 重置 按钮:清空所有高亮、定时器,回到初始状态
  • 聚焦模式(focus-mode):只显示当天的线路 / 节点 / 标签 / 日数徽章
  • 响应式:≤ 880px 时地图横向滚动 + 时间轴胶囊收紧

🧩 数据扩展

修改 src/data/itinerary.js

  • POINTS:节点坐标(基于 1200×720 viewBox)
  • ITINERARY:每天的 legs / type / stay / tip / title 等
  • 不需要改任何渲染代码,组件会自动响应。