135 lines
3.6 KiB
Markdown
135 lines
3.6 KiB
Markdown
# 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
|
||
|