# 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. 安装依赖
```bash
npm install
# 或
pnpm install
```

### 2. 启动开发服务器
```bash
npm run dev
# 或
pnpm run dev
```

### 3. 构建生产版本
```bash
npm run build
# 或
pnpm run build
```

### 4. 预览生产版本
```bash
npm run preview
# 或
pnpm run preview
```

## 主要功能

### 🎯 核心组件

1. **Header** - 响应式导航栏，支持平滑滚动
2. **Hero** - 首页展示区域，包含公司信息和核心价值
3. **CompanyIntro** - 公司介绍，展示背景和优势
4. **Mission** - 使命愿景，说明公司目标和理念
5. **ProductMatrix** - 产品矩阵，展示三大核心产品
6. **VascularScenarios** - AI应用场景，包含三个核心场景：
   - 智能诊断
   - AI智能化增强
   - 健康管理
7. **Architecture** - 系统架构，展示完整的技术架构
8. **FutureVision** - 未来愿景，包含演示视频
9. **Conclusion** - 总结展望，联系方式和合作邀请
10. **Footer** - 页脚信息

### 🎨 设计特色

- **响应式设计** - 完美适配桌面、平板、手机
- **现代化UI** - 使用Tailwind CSS构建美观界面
- **流畅动画** - Framer Motion提供丰富的交互动画
- **医疗主题** - 蓝白色调，体现专业性和科技感
- **组件化架构** - 模块化设计，易于维护和扩展

### 🚀 性能优化

- **代码分割** - 按需加载组件
- **图片优化** - 使用现代图片格式
- **CSS优化** - Tailwind CSS按需生成
- **构建优化** - Vite提供快速构建

## 部署

项目已部署到：https://bwnyugik.manus.space

可以使用以下方式部署：

1. **静态部署** - 构建后部署dist目录
2. **Vercel** - 连接GitHub仓库自动部署
3. **Netlify** - 拖拽dist目录部署
4. **GitHub Pages** - 使用GitHub Actions自动部署

## 开发说明

### 添加新组件
1. 在`src/components/`目录下创建新组件
2. 在`App.jsx`中导入并使用
3. 添加相应的样式和动画

### 修改样式
- 主要使用Tailwind CSS类名
- 自定义样式在`App.css`中添加
- 响应式设计使用Tailwind的响应式前缀

### 添加动画
- 使用Framer Motion的`motion`组件
- 配置`initial`、`animate`、`whileInView`等属性
- 使用`viewport={{ once: true }}`优化性能

## 许可证

MIT License