AI赋能医疗与健康
这是一个基于React的AI医疗展示网站，展示了数耀科技的AI赋能医疗与健康。
项目结构
ai-medical-website/
├── public/ # 静态资源文件
├── src/ # 源代码
│ ├── components/ # React组件
│ │ ├── Header.jsx # 导航头部组件
│ │ ├── Hero.jsx # 首页英雄区域
│ │ ├── CompanyIntro.jsx # 公司介绍组件
│ │ ├── Mission.jsx # 使命愿景组件
│ │ ├── ProductMatrix.jsx # 产品矩阵组件
│ │ ├── VascularScenarios.jsx # AI应用场景组件
│ │ ├── Architecture.jsx # 系统架构组件
│ │ ├── FutureVision.jsx # 未来愿景组件
│ │ ├── Conclusion.jsx # 总结组件
│ │ └── Footer.jsx # 页脚组件
│ ├── App.jsx # 主应用组件
│ ├── App.css # 样式文件
│ └── main.jsx # 应用入口
├── index.html # HTML模板
├── package.json # 项目依赖
├── vite.config.js # Vite配置
└── README.md # 项目说明
技术栈
- React 18 - 前端框架
- Vite - 构建工具
- Tailwind CSS - CSS框架
- Framer Motion - 动画库
- Lucide React - 图标库
安装和运行
1. 安装依赖
npm install
# 或
pnpm install
2. 启动开发服务器
npm run dev
# 或
pnpm run dev
3. 构建生产版本
npm run build
# 或
pnpm run build
4. 预览生产版本
npm run preview
# 或
pnpm run preview
主要功能
🎯 核心组件
- Header - 响应式导航栏，支持平滑滚动
- Hero - 首页展示区域，包含公司信息和核心价值
- CompanyIntro - 公司介绍，展示背景和优势
- Mission - 使命愿景，说明公司目标和理念
- ProductMatrix - 产品矩阵，展示三大核心产品
- VascularScenarios - AI应用场景，包含三个核心场景：
- 智能诊断
- AI智能化增强
- 健康管理
- Architecture - 系统架构，展示完整的技术架构
- FutureVision - 未来愿景，包含演示视频
- Conclusion - 总结展望，联系方式和合作邀请
- Footer - 页脚信息
🎨 设计特色
- 响应式设计 - 完美适配桌面、平板、手机
- 现代化UI - 使用Tailwind CSS构建美观界面
- 流畅动画 - Framer Motion提供丰富的交互动画
- 医疗主题 - 蓝白色调，体现专业性和科技感
- 组件化架构 - 模块化设计，易于维护和扩展
🚀 性能优化
- 代码分割 - 按需加载组件
- 图片优化 - 使用现代图片格式
- CSS优化 - Tailwind CSS按需生成
- 构建优化 - Vite提供快速构建
部署
项目已部署到：https://bwnyugik.manus.space
可以使用以下方式部署：
- 静态部署 - 构建后部署dist目录
- Vercel - 连接GitHub仓库自动部署
- Netlify - 拖拽dist目录部署
- GitHub Pages - 使用GitHub Actions自动部署
开发说明
添加新组件
- 在
src/components/目录下创建新组件 - 在
App.jsx中导入并使用 - 添加相应的样式和动画
修改样式
- 主要使用Tailwind CSS类名
- 自定义样式在
App.css中添加 - 响应式设计使用Tailwind的响应式前缀
添加动画
- 使用Framer Motion的
motion组件 - 配置
initial、animate、whileInView等属性 - 使用
viewport={{ once: true }}优化性能
许可证
MIT License