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

📋 项目概述

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

🎯 主要功能模块

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)

• 公司简介和使命
• 联系方式和表单
• 最新动态时间线
• 隐私政策

🎨 设计特色

• 主色调：蓝（#1e3c72）、紫（#6a2c91）、亮青色（#00d4ff）
• 导航栏：粘性导航，支持下拉菜单
• 响应式设计：完美适配桌面、平板和手机
• 交互效果：平滑过渡、悬停效果、轮播图

📁 文件结构

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