Meditek - Health & Medical HTML Template

# 项目简介 Meditek 是一套医疗健康类 HTML5 网站模板，主题名为 Diango，包含首页、医生、科室服务、博客、商城（购物车/结算）、预约等完整页面，适用于中小型医院、诊所或健康管理中心快速搭建官网。 ## 技术栈 - HTML5 + CSS3（静态模板） - Bootstrap 5（栅格与基础组件） - jQuery（DOM 交互与插件驱动） - Swiper（轮播图） - MagnificPopup（图片/视频弹窗） - MeanMenu（移动端导航） - WOW.js + CounterUp（动画效果） - Font Awesome 6 Pro（图标） - Google Fonts（Sora 字体） ## 项目结构 ``` meditekhtml-10/ ├── documentation/ # 官方文档站（参考用） │ ├── index.html │ └── assets/ └── main-file/ # 实际使用的模板主文件 ├── index.html # 首页（主） ├── index-2/3/4.html # 首页变体 ├── about.html # 关于我们 ├── service.html # 科室/服务列表 ├── service-details.html ├── doctor.html # 医生团队 ├── doctor-details.html ├── appointment.html # 预约页面 ├── blog.html # 博客 ├── blog-grid.html ├── blog-details.html ├── product.html # 商城产品 ├── product-details.html ├── cart.html / checkout.html / wishlist.html ├── contact.html # 联系/留言 ├── error.html └── assets/ ├── css/main.css # 核心样式 ├── js/main.js # 交互脚本 └── mail.php # 邮件发送后端 ``` ## 核心文件说明 - `main-file/index.html` — 首页，集合 Banner、医生介绍、服务项目、计数器等模块 - `main-file/assets/css/main.css` — 主题全部样式，定义了颜色系统、组件与响应式布局 - `main-file/assets/js/main.js` — 预加载、移动菜单、滚动监听、弹窗、回到顶部等交互逻辑 - `main-file/assets/mail.php` — 联系/预约表单的后端邮件发送脚本 - `main-file/service.html` — 科室/服务展示页面模板 - `main-file/doctor.html` — 医疗团队与医生介绍页面 ## 快速开始 1. 将 `main-file/` 目录部署到任意 Web 服务器（或直接用 VS Code Live Server 插件预览） 2. 在浏览器打开 `index.html` 即可查看首页 3. 如需启用联系表单功能，将 `assets/mail.php` 配置为可执行的 PHP 环境，并检查页面中表单的 `action` 指向 ## 使用建议 - 所有页面均在 `index.html` 基础上通过复制修改而来，修改前建议备份 - `main.css` 文件较大（约数千行），自定义样式可新建子 CSS 文件并在 `index.html` 中引入，避免直接改动原文件导致后续升级困难 - 移动端导航依赖 MeanMenu，修改菜单结构后需同步更新 `main.js` 中的 `#mobile-menu` 选择器绑定