初始提交:AI医疗展示网站,包含回到顶部按钮功能(排除大文件)
This commit is contained in:
134
README.md
Normal file
134
README.md
Normal 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
|
||||
|
||||
Reference in New Issue
Block a user