# 海古纪生物科技网站 - 项目说明

## 📋 项目概述

这是为三亚海古纪生物科技有限公司创建的专业企业网站，展示公司的产品、服务、技术优势和学术成果。

## 🎯 主要功能模块

### 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`)
- 公司简介和使命
- 联系方式和表单
- 最新动态时间线
- 隐私政策

## 🎨 设计特色

- **主色调**：蓝（#0E48C1）、紫（#E23AFB）、亮青色（#3DF8F8）
- **导航栏**：粘性导航，支持下拉菜单
- **响应式设计**：完美适配桌面、平板和手机
- **交互效果**：平滑过渡、悬停效果、轮播图

## 📁 文件结构

```
网站/
├── 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月