# 云秒科技 **Repository Path**: chai-j33333333/cloud-seconds ## Basic Information - **Project Name**: 云秒科技 - **Description**: 笔试题 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-06 - **Last Updated**: 2025-11-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 云秒科技 - 中医闻诊智能综合系统官网 > AI驱动的数字中医与智能健康 · 声—气一体 AI 闻诊平台 --- ## 📋 项目简介 本项目是**云秒科技**（杭州云秒科技有限公司）的官方网站，展示中医闻诊智能综合系统及相关产品体系。网站采用现代化的响应式设计，完全参考 [大经中医官网](https://dajingtcm.com/) 的设计风格，提供完整的产品展示、解决方案、案例介绍和联系方式等功能。 ### 核心产品 - 🏥 **中医智能辅助诊疗系统** - 知识图谱 + 规则引擎 + 大模型三权融合 - 📚 **名老中医经验智能化传承系统** - 医案结构化、术语规范化、关系图谱驱动 - 👃 **中医智能闻诊系统（声气一体）** - 32通道电子鼻 + 语音采集，AI量化分析 - ☁️ **区域数智中医云平台** - 临床/共享/协同/监管/科研五中心一体化 - 🧠 **华智云翳大模型** - 行业预训练 + 指令微调，可解释推理 - 💓 **中医智能脉诊仪（第二代）** - 三指全按，28种脉象，六维参数 --- ## ✨ 功能特性 ### 页面结构 - ✅ **首页** (`index.html`) - 产品体系展示、技术优势、核心优势、应用场景 - ✅ **关于我们** (`about.html`) - 公司介绍、企业文化、核心价值观 - ✅ **产品体系** (`product.html`) - 产品总览页，卡片式布局 - ✅ **产品详情页** (6个独立页面) - 详细的产品介绍、技术架构、应用价值 - ✅ **解决方案** (`scheme.html`) - 行业解决方案展示 - ✅ **成功案例** (`case.html`) - 客户案例与成效展示 - ✅ **联系我们** (`contact.html`) - 联系表单（含表单校验和Mock数据请求） ### 技术特性 - 🎨 **现代化设计** - 青绿/蓝绿配色方案，清新科技感 - 📱 **完全响应式** - 适配桌面、平板、移动端 - ⚡ **性能优化** - 图片懒加载、防抖函数、平滑滚动 - 🎯 **交互体验** - 手风琴展开、滚动动画、返回顶部 - 🔍 **SEO友好** - 语义化HTML5、meta标签优化 - ♿ **可访问性** - ARIA标签、键盘导航支持 --- ## 🛠️ 技术栈 ### 前端技术 - **HTML5** - 语义化标签，清晰的结构层次 - **CSS3** - 现代CSS特性（Grid、Flexbox、CSS变量、动画） - **JavaScript (ES6+)** - 原生JS，无框架依赖 - **Font Awesome 6.4.0** - 图标库（CDN） ### 工具库 - **Mock.js** - 模拟后端API请求 - **Axios** - HTTP请求库（用于联系表单） ### 开发工具 - **AI辅助编程** - 使用Claude/ChatGPT等AI工具辅助开发 - **版本控制** - Git + GitHub --- ## 📁 项目结构 ``` 云渺科技笔试题/ ├── index.html # 首页 ├── about.html # 关于我们 ├── product.html # 产品总览页 ├── product-assist.html # 产品详情：辅助诊疗系统 ├── product-inheritance.html # 产品详情：经验传承系统 ├── product-olfaction.html # 产品详情：闻诊系统 ├── product-cloud.html # 产品详情：区域云平台 ├── product-model.html # 产品详情：大模型 ├── product-pulse.html # 产品详情：脉诊仪 ├── scheme.html # 解决方案 ├── case.html # 成功案例 ├── contact.html # 联系我们 ├── css/ │ └── style.css # 主样式文件（1700+行） ├── js/ │ └── script.js # 主脚本文件（300+行） ├── images/ # 图片资源 │ ├── 云秒科技.png │ ├── device-main.png │ ├── device-side.png │ └── ... ├── docs/ # 文档文件夹 │ ├── 20261105.md # 原始需求文档 │ ├── 需求文档.md # 需求文档 │ ├── README.md # 项目说明（旧版） │ └── ... ├── AI-PROMPTS.md # AI提示词使用记录 └── README.md # 本文件 ``` --- ## 🚀 快速开始 ### 方式一：直接打开（推荐） 1. 克隆或下载项目到本地 2. 直接用浏览器打开 `index.html` 即可 ### 方式二：使用本地服务器 #### Python 3 ```bash # 在项目根目录执行 python -m http.server 8000 # 访问 http://localhost:8000 ``` #### Node.js (http-server) ```bash # 安装 http-server npm install -g http-server # 在项目根目录执行 http-server -p 8000 # 访问 http://localhost:8000 ``` #### VS Code Live Server 1. 安装 VS Code 扩展 "Live Server" 2. 右键点击 `index.html` 3. 选择 "Open with Live Server" --- ## 🎨 设计规范 ### 配色方案 - **主色（Primary）**：`#0F9CA8` - 清新、理性、具科技感 - **深主色（Dark Primary）**：`#0C7C85` - 用于悬停或标题 - **浅主色（Light Primary）**：`#5DC5CC` - 柔和、友好的辅助色 - **强调色（Accent）**：`#FF6B35` - 珊瑚橙，活力强 - **警告色（Warning）**：`#FFD166` - 柠檬黄，明亮点缀 - **文本色**：`#2E3A3D`（深灰）、`#7B8B8E`（中灰） - **背景色**：`#E6EBEC`（浅灰）、`#ffffff`（白色） ### 响应式断点 - **移动端**：`< 768px` - 单列布局，汉堡菜单 - **平板端**：`768px - 1024px` - 2列网格布局 - **桌面端**：`> 1024px` - 多列网格布局，完整功能 --- ## 📝 功能说明 ### 导航栏 - 固定顶部导航，滚动时背景加深 - 移动端自动切换为汉堡菜单 - 平滑滚动到对应区域 ### 首页功能 - **顶部宣传区** - 公司介绍与核心价值主张 - **产品体系** - 5个产品卡片，点击跳转详情页 - **技术优势** - 5个技术亮点展示 - **核心优势** - 6大核心技术优势 - **华智云翳大模型** - 大模型展示区域 - **中医智能闻诊仪** - 设备展示（正面+侧面图） - **功能模块** - 手风琴式展开/收起 - **应用场景** - 4个应用场景卡片 - **服务客户** - 客户案例展示 - **合作伙伴** - 合作伙伴列表 ### 产品详情页 每个产品详情页包含： - 产品概述与核心特性 - 技术架构/原理说明 - 应用流程展示 - 适用人群与场景 - 应用价值分析 - 部署与对接方案 - 合规与安全说明 - CTA按钮（联系我们、返回产品列表） ### 联系表单 - 完整的表单校验（姓名、邮箱、电话、留言） - 使用 Mock.js 模拟后端请求 - 成功/失败提示反馈 - Element UI 风格的样式 --- ## 🌐 浏览器兼容性 - ✅ Chrome (最新版) - ✅ Firefox (最新版) - ✅ Safari (最新版) - ✅ Edge (最新版) - ✅ 移动端浏览器（iOS Safari、Chrome Mobile） --- ## 📦 部署指南 ### GitHub Pages 1. 将项目推送到 GitHub 仓库 2. 进入仓库 Settings → Pages 3. 选择 Source 为 `main` 分支，`/` 根目录 4. 访问 `https://[username].github.io/[repository-name]` ### Vercel 1. 安装 Vercel CLI：`npm i -g vercel` 2. 在项目根目录执行：`vercel` 3. 按照提示完成部署 ### Netlify 1. 登录 [Netlify](https://www.netlify.com/) 2. 拖拽项目文件夹到部署区域 3. 或连接 GitHub 仓库自动部署 ### 其他静态托管 项目为纯静态网站，可部署到任何静态托管服务： - 阿里云 OSS - 腾讯云 COS - 七牛云 - 又拍云 - 等等 --- ## 📸 图片资源说明 ### 必需图片 - `images/云秒科技.png` - Logo（导航栏和页脚使用） - `images/device-main.png` - 闻诊仪正面图 - `images/device-side.png` - 闻诊仪侧面图 ### 产品图片（可选） - `images/assist.svg` - 辅助诊疗系统图标 - `images/inheritance.svg` - 经验传承系统图标 - `images/cloud.svg` - 区域云平台图标 - `images/华智云翳.png` - 大模型图片 - `images/中医智能脉诊仪器.png` - 脉诊仪图片 **注意**：如果图片缺失，部分位置会显示占位符或使用 SVG 图标替代。 --- ## 🔧 开发说明 ### CSS 变量 所有颜色、间距、圆角等设计令牌都定义在 `:root` 中，便于统一修改： ```css :root { --primary-color: #0F9CA8; --primary-dark: #0C7C85; --primary-light: #5DC5CC; --accent-color: #FF6B35; --text-dark: #2E3A3D; /* ... */ } ``` ### JavaScript 模块 主要功能模块： - 导航栏滚动效果 - 移动端汉堡菜单 - 平滑滚动 - 手风琴效果 - 滚动动画（Intersection Observer） - 图片懒加载 - 返回顶部按钮 - 产品页切换逻辑 ### 性能优化 - ✅ 图片懒加载（`loading="lazy"`） - ✅ 防抖函数（resize、scroll事件） - ✅ CSS动画（硬件加速） - ✅ 响应式图片（`max-width: 100%`） --- ## 📚 相关文档 - [需求文档](./docs/需求文档.md) - 完整的需求说明 - [AI提示词记录](./AI-PROMPTS.md) - 开发过程中使用的所有AI提示词 - [原始需求](./docs/20261105.md) - 笔试题原始需求 --- ## ✅ 完成情况检查清单 ### 基础要求 - [x] 参考网站设计风格 - [x] 完全仿照参考网站布局 - [x] Logo替换为云秒科技 - [x] 添加智能诊疗仪器栏目 - [x] 添加华智云翳大模型展示 - [x] 删除新闻资讯模块 ### 功能要求 - [x] 响应式设计（移动端适配） - [x] 导航栏固定定位 - [x] 平滑滚动效果 - [x] 手风琴展开/收起 - [x] 图片懒加载 - [x] 表单校验功能 - [x] Mock数据请求 ### 页面完整性 - [x] 首页（index.html） - [x] 关于我们（about.html） - [x] 产品体系（product.html + 6个详情页） - [x] 解决方案（scheme.html） - [x] 成功案例（case.html） - [x] 联系我们（contact.html） ### 代码质量 - [x] 语义化HTML5 - [x] CSS变量管理 - [x] 代码注释完整 - [x] 浏览器兼容性 - [x] 性能优化 --- ## 👨‍💻 开发信息 - **开发日期**：2025年11月6日 - **开发方式**：AI辅助编程 - **开发工具**：Claude / ChatGPT / GitHub Copilot - **项目类型**：静态网站 - **代码行数**：3000+ 行（HTML + CSS + JavaScript） --- ## 📄 许可证 本项目为笔试题作品，仅供展示和学习使用。 --- ## 🙏 致谢 - 参考网站：[大经中医官网](https://dajingtcm.com/) - 图标库：[Font Awesome](https://fontawesome.com/) - AI工具：Claude、ChatGPT --- **最后更新**：2025年11月6日