医疗旅游官网模板 | 美康途出国医疗服务网站源码，12 页开箱即用

基于 jQuery 打造的出国医疗服务机构 PC 端官网模板。开箱即用，替换品牌素材即可上线。

医疗服务机构的官网要同时说服两类人：求医的患者家庭与寻求合作的机构。它需要专业感、信任感与流程感——跨国就医三步流程、合作医院背书、专家团队、治疗实例，一个都不能少。这套模板以「美康途」医疗旅游机构为原型，把出国看病业务所需的 12 个页面与全套信任元素一次做完，还内置了滚动入场动画、全屏轮播与在线私信表单，替换品牌即可上线。

模板亮点

1. 12 个页面，医疗服务业务全景

• 首页：全屏焦点轮播、服务矩阵、合作医院（M.D.安德森癌症中心、赫尔曼纪念医院、休斯敦卫理公会医院）、资讯与常见问题
• 服务流程三页：出国就医（服务 & 流程）、国内会诊 & 出国前准备、回国疗养——对应「第一步 / 第二步 / 第三步」的跨国就医服务动线
• 出国看病专题页：转化导向的落地页，含服务理由、流程图、常见问题与贵宾热线
• 医疗资源三页：医疗资源总览（国内 / 国外）、国外医疗资源列表 + 详情页
• 信任类页面：治疗实例、资讯动态、关于我们、联系我们

2. 滚动入场动画系统

基于 Waypoints + animate.css：各版块标注 data-animation="fadeInDown / fadeInUp"，滚动到视口时依次入场，页面沉稳而有节奏，符合医疗机构的专业调性。

3. 双端焦点图引擎

banner.js 自研首页全屏轮播，自动检测设备并切换 PC / iPad 双套图列表（pcList / padList），带控制圆点与过场动画，宽屏与平板都不糊版。

4. 在线私信转化组件

• 「发送私信」按钮弹出 reveal 模态表单（姓名、联系方式等 6 个字段），全站多处入口直达
• 专题页内置页面停留计时提醒（「您已在本网站浏览 X 秒……」），配合贵宾热线形成强转化闭环

5. 行业信任元素模板化

专家个人成就列表（学会任职、专业委员会头衔）、合作医院墙、治疗实例、「选择我们的 5 个理由」（完整体系 / 绿色通道 / 专业医学翻译 / 隐私保护 / 医疗费减免）等版块均为结构化模块，换名字换图片即可复用。

技术栈

技术	版本	用途
jQuery	1.7.2	DOM 操作 / 交互基础
SuperSlide	2.1.1	列表轮播
animate.css	—	fadeInUp / fadeInDown 入场动画
Waypoints	—	滚动到视口触发动画
jquery.reveal	—	在线私信模态弹框
banner.js	—	首页全屏焦点图（PC / iPad 双列表）

项目结构

meikangtu/
├── index.html        # 首页（全屏轮播 / 服务矩阵 / 合作医院 / 资讯）
├── cgjy.html         # 出国就医（服务 & 流程）
├── cgkb.html         # 出国看病专题页（5 个理由 / 流程 / 常见问题）
├── glhz.html         # 国内会诊 & 出国前准备
├── hgly.html         # 回国疗养
├── ylzy.html         # 医疗资源总览（国内 / 国外）
├── gwylzy.html       # 国外医疗资源列表
├── gwylzy_show.html  # 国外医疗资源详情页
├── zlsl.html         # 治疗实例
├── news.html         # 资讯动态
├── about.html        # 关于我们
├── contact.html      # 联系我们
├── css/
│   ├── style.css     # 全部样式（主色 #59b632 健康绿）
│   └── animate.css   # 入场动画库
├── js/
│   ├── jquery.js              # jQuery 1.7.2
│   ├── jquery.SuperSlide.2.1.1.js # 轮播
│   ├── waypoint.min.js        # 滚动触发
│   ├── jquery.reveal.js       # 私信弹框
│   └── banner.js              # 首页全屏焦点图引擎
└── img/              # banner、医院、专家等素材

快速开始

纯静态模板，无需安装任何依赖。

# 方式一：浏览器直接打开
双击 index.html 即可预览

# 方式二：本地静态服务器
cd meikangtu
python3 -m http.server 8080
# 访问 http://localhost:8080/index.html

也可使用 VS Code 的 Live Server 插件一键预览。

二次开发指南

需求	操作
更换品牌	替换 img/ 下 logo、banner、医院与专家图片，同名覆盖
修改文案 / 热线	各 HTML 中标题、正文、400 电话直接编辑
更换主题色	修改 css/style.css 中的 #59b632（绿色主色）及辅色系
调整入场动画	修改元素 data-animation 属性，切换 animate.css 动效
增删页面	复制任一内页（如 news.html），改导航与正文即可
收集私信表单	reveal 弹框内 F1~F6 字段对接表单接口或第三方表单服务

适用场景

出国看病服务机构、医疗旅游公司、海外就医咨询机构、高端体检与健康管理机构官网，也可作为医疗健康行业品牌官网的通用底稿。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	3~4 周起	换品牌换内容，1~2 天交付
页面还原度	逐页设计开发	12 页医疗服务官网现成
交互与动画	自行实现	滚动入场 / 全屏轮播 / 弹框内置
适配	自行调试	PC / iPad 双套焦点图自适应
维护成本	自行承担	版块模块化，替换素材即可迭代

在线预览

将整个目录部署至任意静态托管（GitHub Pages / 静态服务器 / OSS）即可在线浏览。

http://8.166.93.126:8989/meikangtu