基于 jQuery + SuperSlide 打造的医疗健康旅游（专病诊治 + 康复疗养）PC 端官网模板。开箱即用，替换品牌素材即可上线。
医疗健康旅游类站点的内容链条长：既要展示专家实力与疗法体系，又要呈现疗养资源、资讯动态与咨询转化路径，页面多、版式杂，从零切图往往耗时数周。这套模板以”银屑病诊治 + 阿尔山温泉疗养”为完整业务样本，把专病门户所需的全部页面与交互一次性做齐。
本模板为美康途系列新版，与旧版（海外医疗资源门户风格）定位互补：新版以蓝色视觉聚焦”专病全流程”叙事——专家会诊、最新疗法、康复疗养、医疗资源、活动专题、资讯问答，适合专科医疗、温泉康养、健康旅游类机构直接套用。
模板亮点
1. 12 个页面开箱即用
首页、专家会诊、最新疗法、康复疗养、医疗资源、活动专题、阿尔山动态、常见问题列表 / 详情、搜索结果、关于我们、联系我们，覆盖专病医疗门户从品牌展示到咨询转化的完整链路。
2. 首页”诊治全流程”营销叙事
首页按”治疗最佳时期（进展期 / 静止期 / 消退期三态选项卡）→ 专家会诊（权威专家介绍）→ 最新疗法（矿泉 + 中药组合）→ 康复食材（疗养体系）→ 五大保障 → 常见问题”层层递进，转化逻辑现成，替换文案即可复用。
3. 专业交互组件
- 全屏焦点图：自研 banner.js 支持分层入场动画，主视觉冲击力强
- 三态切换选项卡：疾病分期内容即点即换
- Waypoints 滚动入场：各区块 fadeInDown / fadeInUp 依次浮现
- reveal 弹层：咨询提示等内容弹出交互
4. 资讯与搜索体系完整
阿尔山动态、常见问题列表 / 详情、站内搜索结果页一应俱全，资讯栏目结构与详情排版无需重构。
5. 蓝橙双色医疗视觉体系
主色 #476ed2（专业蓝）搭配点缀色 #f68a32（活力橙），医疗信任感与行动号召兼顾；配图含温泉、食材、专家等场景素材占位，替换成本低。
6. 纯静态、易二次开发
零构建、零依赖安装，HTML / CSS / JS 三层分离，命名清晰（页面级 class 前缀区分），任一页面均可独立修改。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.2 | DOM 操作 / 交互逻辑 |
| SuperSlide | 2.1.1 | 选项卡 / 切换组件 |
| jQuery Waypoints | 2.0.0 | 滚动触发入场动画 |
| animate.css | – | CSS3 动画库 |
| jquery.reveal | – | 弹层 |
| banner.js（自研） | – | 首页全屏焦点图 |
项目结构
meikangtu-new/
├── index.html # 首页（诊治全流程营销叙事）
├── zjhz.html # 专家会诊（银屑病诊治全流程体系）
├── zxlh.html # 最新疗法（矿泉 + 特效中药方案）
├── kfly.html # 康复疗养（疗养流程 / 阿尔山海神圣泉）
├── ylzy.html # 医疗资源（国内医疗资源 / 专家简介）
├── ylzt.html # 活动专题页（"走出'银'影"主题活动）
├── aesdt.html # 阿尔山动态（资讯列表）
├── news.html # 常见问题列表
├── news_show.html # 常见问题详情
├── search_result.html # 站内搜索结果页
├── about.html # 关于我们（公司介绍）
├── contact.html # 联系我们
├── css/
│ ├── style.css # 主样式（主题色 / 布局）
│ └── animate.css # 动画样式
├── js/ # jQuery / SuperSlide / Waypoints / banner 等
└── images/ # 页面图片素材快速开始
纯静态模板，无需安装任何依赖：
# 方式一：浏览器直接打开
双击 index.html 即可浏览
# 方式二：本地静态服务器（推荐）
python3 -m http.server 8080
# 访问 http://localhost:8080
# 方式三：VS Code Live Server 插件
右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 images/ 中 logo、banner 与配图，同名覆盖即可 |
| 修改文案链接 | 各 HTML 内文案与 href 直接修改 |
| 更换主题色 | 修改 css/style.css 中 #476ed2（主蓝）与 #f68a32（点缀橙） |
| 调整栏目 | 导航在 top-s2 的 nav 结构内增删，侧栏同步修改 |
| 增删页面 | 复制任一内页为模板，改标题、侧栏与正文即可 |
适用场景
皮肤病 / 专科医疗机构官网、温泉康养基地、医疗健康旅游公司、疗养院、健康管理中心，也可作为任何”专病诊治 + 康复疗养”叙事结构的医疗行业门户模板。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~4 周起 | 1~2 天上线 |
| 页面还原度 | 反复验收 | 12 页成品直接演示 |
| 交互与动画 | 逐一开发 | 焦点图 / 选项卡 / 滚动动画齐备 |
| 双版本体系 | 单一风格 | 可与旧版门户模板组合使用 |
| 维护成本 | 自行承担 | 纯静态结构，改文案即可迭代 |
在线预览
将整个目录部署至任意静态托管（GitHub Pages / Vercel / 阿里云 OSS 等）即可在线访问。
http://8.166.93.126:8989/meikangtu-new
评论0