QuayMed — 医疗诊所网站模板
一套现代响应式全科诊所网站模板，由 Themedown 为 The Doctors QuayMed（奥克兰 CBD Cornerstone 认证全科诊所）重设计并手工构建。免费用于个人和商业项目。
快速开始
bash
git clone https://github.com/themedown-templates/quaymed-redesign.git
cd quaymed-redesign
# 直接用浏览器打开 index.html，或用本地服务器：
npx serve .
无需构建、无需 npm install，打开即用。
页面
| 页面 | 说明 |
|---|---|
| 首页 | 全宽 Hero + 5 项信任条 + 双诊所卡片 + 6 服务网格 + 患者任务面板 + 互联护理 + 团队/VLCA 分栏 + 营业时间摘要 + FAQ 手风琴 + 预约 CTA |
| 服务 | 页面 Hero + 10 项编号服务目录（全科咨询、意外伤害、儿童健康、孕产护理、性健康、旅行医学、体检、健康检查、小手术、职业健康） |
| 团队 | 页面 Hero + 协作护理特性 + 4 角色卡片（医生、护理、行政、联合健康）+ 团队肖像横幅 + 3 价值观网格 + CTA |
| 联系 | 页面 Hero + 紧急提示侧栏 + 双诊所详情卡片（Britomart & Wynyard）+ 咨询表单（姓名、邮箱、电话、诊所选择、留言） |
| 营业时间与费用 | 页面 Hero + 双诊所时刻表 + 4 信息卡片（注册、费用、结果、在线支付）+ 非工作时间提示 + CTA |
技术栈
- HTML5 — 语义化标签，完整 ARIA 无障碍支持
- CSS3 — 自定义属性、CSS Grid、Flexbox、clamp() 流体排版、backdrop-filter
- JavaScript — 原生 JS（移动菜单切换、联系表单处理）
- Phosphor Icons — CDN 加载的统一图标库
- Google Fonts — Inter（正文）+ Plus Jakarta Sans（标题）
特性
- 全响应式 — 移动优先，1080px 以下汉堡菜单
- 深海蓝 + 青绿品牌配色（10 个设计令牌）
- 毛玻璃 sticky 导航栏
- 全宽 Hero 配编辑风格图片条
- 5 项信任条（Cornerstone 认证、双诊所、营业时间、在线预约、统一团队）
- 双诊所位置卡片，含实景照片和联系方式
- 6 服务网格 + 患者快捷任务面板
- 互联护理分栏卡片（文字 + 图片）
- 团队/VLCA 分栏面板，含权益勾选列表
- 营业时间网格 + FAQ 手风琴
- 绿底预约 CTA 横幅
- 全站页脚，含双诊所联系方式
- 跳过导航无障碍链接
- 键盘导航 focus-visible 轮廓
- 零构建工具、零依赖 — 静态文件夹即可运行
设计规范
完整设计规范见 docs/design.md — 包含品牌色彩体系、字体层级、布局原则、组件行为及设计反模式约束。
开源协议
MIT — 免费用于个人和商业项目。
