2026-06-23 18:08:51 +08:00
|
|
|
|
# 海古纪生物科技网站 - 项目说明
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 项目概述
|
|
|
|
|
|
|
|
|
|
|
|
这是为三亚海古纪生物科技有限公司创建的专业企业网站，展示公司的产品、服务、技术优势和学术成果。
|
|
|
|
|
|
|
|
|
|
|
|
## 🎯 主要功能模块
|
|
|
|
|
|
|
|
|
|
|
|
### 1. **首页** (`index.html`)
|
|
|
|
|
|
- 轮播图展示（公司理念、最新消息、产品展示、联系信息）
|
|
|
|
|
|
- 产品/服务快速预览
|
|
|
|
|
|
- 学术文献和最新动态展示
|
|
|
|
|
|
- 响应式设计，适配多种设备
|
|
|
|
|
|
|
|
|
|
|
|
### 2. **产品页面** (`pages/products.html`)
|
|
|
|
|
|
- **AI生信科学家**：全自动生物信息分析平台
|
|
|
|
|
|
- **HSmaster**：植物基因分型系统
|
|
|
|
|
|
- 包含产品介绍、案例解析、结果展示三个标签页
|
|
|
|
|
|
|
|
|
|
|
|
### 3. **服务页面** (`pages/services.html`)
|
|
|
|
|
|
- **Hyper-seq测序**：超低成本基因分型技术
|
|
|
|
|
|
- **全基因组重测序**：高覆盖、高精度测序服务
|
|
|
|
|
|
- 详细的技术流程和应用场景
|
|
|
|
|
|
|
|
|
|
|
|
### 4. **应用领域** (`pages/applications.html`)
|
|
|
|
|
|
- 种业研究应用
|
|
|
|
|
|
- 微生物研究应用
|
|
|
|
|
|
- 动植物研究应用
|
|
|
|
|
|
|
|
|
|
|
|
### 5. **综合优势** (`pages/advantages.html`)
|
|
|
|
|
|
- 测序平台
|
|
|
|
|
|
- 分析平台
|
|
|
|
|
|
- 核心实验室
|
|
|
|
|
|
- 客户服务系统（CSS）
|
|
|
|
|
|
|
|
|
|
|
|
### 6. **资源中心** (`pages/resources.html`)
|
|
|
|
|
|
- 精选案例（支持筛选）
|
|
|
|
|
|
- 视频中心
|
|
|
|
|
|
- 学术文献检索功能
|
|
|
|
|
|
|
|
|
|
|
|
### 7. **关于我们** (`pages/about.html`)
|
|
|
|
|
|
- 公司简介和使命
|
|
|
|
|
|
- 联系方式和表单
|
|
|
|
|
|
- 最新动态时间线
|
|
|
|
|
|
- 隐私政策
|
|
|
|
|
|
|
|
|
|
|
|
## 🎨 设计特色
|
|
|
|
|
|
|
2026-07-15 16:29:11 +08:00
|
|
|
|
- **主色调**：蓝（#0E48C1）、紫（#E23AFB）、亮青色（#3DF8F8）
|
2026-06-23 18:08:51 +08:00
|
|
|
|
- **导航栏**：粘性导航，支持下拉菜单
|
|
|
|
|
|
- **响应式设计**：完美适配桌面、平板和手机
|
|
|
|
|
|
- **交互效果**：平滑过渡、悬停效果、轮播图
|
|
|
|
|
|
|
|
|
|
|
|
## 📁 文件结构
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
网站/
|
|
|
|
|
|
├── index.html # 首页
|
|
|
|
|
|
├── pages/
|
|
|
|
|
|
│ ├── products.html # 产品页面
|
|
|
|
|
|
│ ├── services.html # 服务页面
|
|
|
|
|
|
│ ├── applications.html # 应用领域
|
|
|
|
|
|
│ ├── advantages.html # 综合优势
|
|
|
|
|
|
│ ├── resources.html # 资源中心
|
|
|
|
|
|
│ └── about.html # 关于我们
|
|
|
|
|
|
├── css/
|
|
|
|
|
|
│ ├── style.css # 主样式
|
|
|
|
|
|
│ ├── nav.css # 导航栏样式
|
|
|
|
|
|
│ ├── footer.css # 底部样式
|
|
|
|
|
|
│ ├── pages.css # 页面通用样式
|
|
|
|
|
|
│ ├── resources.css # 资源中心样式
|
|
|
|
|
|
│ └── about.css # 关于我们样式
|
|
|
|
|
|
├── js/
|
|
|
|
|
|
│ ├── carousel.js # 轮播图功能
|
|
|
|
|
|
│ ├── nav.js # 导航功能
|
|
|
|
|
|
│ ├── pages.js # 标签页切换
|
|
|
|
|
|
│ ├── resources.js # 资源筛选功能
|
|
|
|
|
|
│ └── about.js # 表单处理
|
|
|
|
|
|
└── 公司资料/
|
|
|
|
|
|
├── logo.png # 公司logo
|
|
|
|
|
|
├── 产品/ # 产品资料
|
|
|
|
|
|
└── 服务/ # 服务资料
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 使用指南
|
|
|
|
|
|
|
|
|
|
|
|
### 基本使用
|
|
|
|
|
|
1. 在浏览器中打开 `index.html` 即可浏览网站
|
|
|
|
|
|
2. 点击导航栏菜单进行页面跳转
|
|
|
|
|
|
3. 所有页面支持响应式设计
|
|
|
|
|
|
|
|
|
|
|
|
### 自定义内容
|
|
|
|
|
|
需要修改的主要内容位置：
|
|
|
|
|
|
|
|
|
|
|
|
1. **Logo和公司信息**
|
|
|
|
|
|
- 修改 `logo.png` 路径，替换公司logo
|
|
|
|
|
|
- 编辑各页面的联系信息
|
|
|
|
|
|
|
|
|
|
|
|
2. **服务内容**
|
|
|
|
|
|
- 全基因组重测序内容需要补充（当前为占位符）
|
|
|
|
|
|
- 在 `pages/services.html` 中的 `#wgs-intro` 部分添加内容
|
|
|
|
|
|
|
|
|
|
|
|
3. **资源和案例**
|
|
|
|
|
|
- 在 `pages/resources.html` 中添加实际的案例和视频链接
|
|
|
|
|
|
- 完成筛选功能的实际后端集成
|
|
|
|
|
|
|
|
|
|
|
|
4. **联系方式**
|
|
|
|
|
|
- 在 `pages/about.html` 中更新联系信息
|
|
|
|
|
|
- 集成实际的表单提交服务
|
|
|
|
|
|
|
|
|
|
|
|
## ⚠️ 需要完成的工作
|
|
|
|
|
|
|
|
|
|
|
|
### 高优先级
|
|
|
|
|
|
1. **补充全基因组重测序服务内容**
|
|
|
|
|
|
- 添加详细的技术参数
|
|
|
|
|
|
- 补充应用案例
|
|
|
|
|
|
- 完善技术流程说明
|
|
|
|
|
|
|
|
|
|
|
|
2. **替换示意图片**
|
|
|
|
|
|
- hero 图片 (hero1-4.jpg)
|
|
|
|
|
|
- 视频缩略图
|
|
|
|
|
|
- 产品展示图
|
|
|
|
|
|
|
|
|
|
|
|
3. **表单后端集成**
|
|
|
|
|
|
- 联系表单提交接口
|
|
|
|
|
|
- 样品寄送表单功能
|
|
|
|
|
|
|
|
|
|
|
|
### 中优先级
|
|
|
|
|
|
1. **资源中心筛选功能**
|
|
|
|
|
|
- 完成后端API集成
|
|
|
|
|
|
- 添加真实案例数据
|
|
|
|
|
|
|
|
|
|
|
|
2. **视频中心**
|
|
|
|
|
|
- 添加视频链接或嵌入
|
|
|
|
|
|
- 配置视频播放器
|
|
|
|
|
|
|
|
|
|
|
|
3. **微信公众号二维码**
|
|
|
|
|
|
- 替换为实际二维码
|
|
|
|
|
|
|
|
|
|
|
|
### 低优先级
|
|
|
|
|
|
1. **SEO优化**
|
|
|
|
|
|
- 添加 meta 标签
|
|
|
|
|
|
- 优化页面标题和描述
|
|
|
|
|
|
|
|
|
|
|
|
2. **性能优化**
|
|
|
|
|
|
- 图片压缩和懒加载
|
|
|
|
|
|
- 代码分割和缓存策略
|
|
|
|
|
|
|
|
|
|
|
|
3. **分析工具集成**
|
|
|
|
|
|
- Google Analytics
|
|
|
|
|
|
- 热力图分析
|
|
|
|
|
|
|
|
|
|
|
|
## 🔧 技术栈
|
|
|
|
|
|
|
|
|
|
|
|
- **前端**：HTML5、CSS3、原生JavaScript
|
|
|
|
|
|
- **响应式**：CSS Grid、Flexbox
|
|
|
|
|
|
- **浏览器兼容**：Chrome、Firefox、Safari、Edge
|
|
|
|
|
|
|
|
|
|
|
|
## 📞 支持
|
|
|
|
|
|
|
|
|
|
|
|
- 公司地址：三亚市海南大学研究院D栋204
|
|
|
|
|
|
- 联系电话：16689001917（谢经理）
|
|
|
|
|
|
- 邮箱：info@haiguji.com
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
**最后更新**：2024年6月
|
|
|
|
|
|
|
