初始提交:AI医疗展示网站,包含回到顶部按钮功能(排除大文件)

This commit is contained in:
高浩然
2025-06-26 17:47:01 +08:00
commit a6e406539f
78 changed files with 17704 additions and 0 deletions

134
README.md Normal file
View File

@@ -0,0 +1,134 @@
# 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