Initial commit: 海古纪生物科技公司官网
This commit is contained in:
h4erj
@@ -0,0 +1,4 @@
|
||||
.venv/
|
||||
node_modules/
|
||||
.DS_Store
|
||||
*.log
|
||||
@@ -0,0 +1,170 @@
|
||||
# 海古纪生物科技网站 - 项目说明
|
||||
|
||||
## 📋 项目概述
|
||||
|
||||
这是为三亚海古纪生物科技有限公司创建的专业企业网站，展示公司的产品、服务、技术优势和学术成果。
|
||||
|
||||
## 🎯 主要功能模块
|
||||
|
||||
### 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月
|
||||
|
||||
+344
@@ -0,0 +1,344 @@
|
||||
/* 鍏充簬鎴戜滑椤甸潰鐗规畩鏍峰紡 */
|
||||
.about-container {
|
||||
grid-template-columns: 250px 1fr;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
margin-bottom: 60px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-section.active-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.about-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin: 25px 0 15px 0;
|
||||
color: var(--primary-purple);
|
||||
}
|
||||
|
||||
/* 鍏徃浠嬬粛 */
|
||||
.company-intro {
|
||||
background: var(--light-bg);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.company-intro p {
|
||||
color: var(--light-text);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 鍏徃浜偣 */
|
||||
.company-highlights {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.highlight-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.highlight-item {
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(106, 44, 145, 0.1) 100%);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.highlight-item h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.highlight-item p {
|
||||
color: var(--light-text);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 鍥㈤槦淇℃伅 */
|
||||
.team-section {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
border-top: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.team-info {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.team-info p {
|
||||
margin-bottom: 10px;
|
||||
color: var(--light-text);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 鑱旂郴琛ㄥ崟 */
|
||||
.contact-form-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
background: var(--light-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.info-block h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-block p {
|
||||
color: var(--light-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 鑱旂郴琛ㄥ崟 */
|
||||
.contact-form {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.contact-form h3 {
|
||||
margin-top: 0;
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--dark-text);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-purple);
|
||||
box-shadow: 0 0 0 3px rgba(106, 44, 145, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
/* 鏃堕棿绾?*/
|
||||
.news-timeline {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.news-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, var(--primary-purple), var(--accent-color));
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
top: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-purple);
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 0 0 2px var(--primary-purple);
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: var(--primary-purple);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
color: var(--primary-blue);
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: var(--light-text);
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 闅愮鏀跨瓥鍐呭 */
|
||||
.privacy-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.privacy-content h3 {
|
||||
margin: 25px 0 15px 0;
|
||||
color: var(--primary-blue);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.privacy-content p {
|
||||
color: var(--light-text);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 鍝嶅簲寮?*/
|
||||
@media (max-width: 768px) {
|
||||
.about-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-form-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.highlight-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.news-timeline {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
left: -35px;
|
||||
}
|
||||
|
||||
.news-timeline::before {
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.contact-form-container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 8px;
|
||||
font-size: 16px; /* 闃叉鍦╥OS涓婅嚜鍔ㄦ斁澶?*/
|
||||
}
|
||||
|
||||
.privacy-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(130px, 0.42fr) 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.phone-row select,
|
||||
.phone-row input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
color: #6b7280;
|
||||
font-size: 0.88rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: #b91c1c;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.phone-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
#custom-country-code,
|
||||
#custom-inquiry-type {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.phone-row #custom-country-code {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
.phone-row #phone {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.phone-row #custom-country-code,
|
||||
.phone-row #phone {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
/* 底部样式 */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a4a8a 100%);
|
||||
color: white;
|
||||
padding: 28px 0 12px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.9fr 1.35fr 0.9fr;
|
||||
gap: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
color: #00d4ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-section p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.86rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-section ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-section ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
opacity: 0.9;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer-partners {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.partner-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 44px;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.partner-link:hover {
|
||||
border-color: #00d4ff;
|
||||
background: rgba(0, 212, 255, 0.12);
|
||||
}
|
||||
|
||||
.partner-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
flex: 0 0 auto;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.partner-logo.text-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1e3c72;
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.qr-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 54px);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.qr-slot {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.38);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.footer-section ul li a:hover {
|
||||
color: #00d4ff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 社交链接 */
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
background: #00d4ff;
|
||||
color: #1e3c72;
|
||||
border-color: #00d4ff;
|
||||
}
|
||||
|
||||
/* 底部栏 */
|
||||
.footer-bottom {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-bottom a:hover {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-section p,
|
||||
.footer-section ul li a {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.footer {
|
||||
padding: 26px 0 12px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer-section p,
|
||||
.footer-section ul li a {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding: 15px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
+310
@@ -0,0 +1,310 @@
|
||||
/* 导航栏样式 */
|
||||
.navbar {
|
||||
background: white;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.logo-section:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #6a2c91;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #6a2c91;
|
||||
background: rgba(106, 44, 145, 0.08);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.7rem;
|
||||
margin-left: 5px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.nav-item:hover .arrow {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
/* 下拉菜单 */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: white;
|
||||
min-width: 200px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s;
|
||||
margin-top: 0;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.nav-item:hover .dropdown-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dropdown-menu a:first-child {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.dropdown-menu a:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.dropdown-menu a:hover {
|
||||
background: #f5f5f5;
|
||||
padding-left: 25px;
|
||||
color: #6a2c91;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu a.active,
|
||||
.submenu-trigger.active > a {
|
||||
color: #6a2c91;
|
||||
background: #f3eef8;
|
||||
}
|
||||
|
||||
.submenu-trigger {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submenu-trigger > a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.submenu-menu {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
min-width: 230px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-8px);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.submenu-trigger:hover .submenu-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
/* 二维码容器 */
|
||||
.qrcode-container {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.qrcode-container p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.qr-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed #bbb;
|
||||
background: #f8fafc;
|
||||
color: #777;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* 右侧导航 */
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
color: #1e3c72;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-icon:hover {
|
||||
transform: scale(1.1);
|
||||
background: rgba(106, 44, 145, 0.08);
|
||||
}
|
||||
|
||||
.customer-service-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
color: #1e3c72;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.customer-service-link:hover {
|
||||
color: #6a2c91;
|
||||
background: rgba(106, 44, 145, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-contact {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #6a2c91 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 25px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-contact:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(106, 44, 145, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式导航 */
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
height: 60px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
margin-left: 20px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.btn-contact {
|
||||
padding: 8px 15px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-contact {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+708
@@ -0,0 +1,708 @@
|
||||
/* 页面样式 */
|
||||
.page-hero {
|
||||
background: linear-gradient(135deg, #10294f 0%, #355a88 58%, #5c3d8c 100%);
|
||||
color: white;
|
||||
padding: 56px 20px;
|
||||
text-align: center;
|
||||
min-height: 260px;
|
||||
height: 40vh;
|
||||
max-height: 380px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.page-hero-content p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* 产品/服务容器 */
|
||||
.products-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* 侧边栏导航 */
|
||||
.product-sidebar {
|
||||
position: sticky;
|
||||
top: 90px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.product-nav {
|
||||
background: var(--light-bg);
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.nav-section h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.nav-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-section ul li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-section .nav-item {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.nav-section .nav-item:hover,
|
||||
.nav-section .nav-item.active {
|
||||
background: white;
|
||||
color: var(--primary-purple);
|
||||
border-left-color: var(--primary-purple);
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* 产品内容 */
|
||||
.product-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
margin-bottom: 60px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-section.active-section,
|
||||
.about-section.active-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--light-text);
|
||||
margin-bottom: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 产品标签页 */
|
||||
.product-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 30px 0;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--primary-purple);
|
||||
border-bottom-color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 特性网格 */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 25px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 18px;
|
||||
margin: 28px 0;
|
||||
}
|
||||
|
||||
.media-card {
|
||||
background: white;
|
||||
border: 1px solid #edf0f5;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.media-card img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.media-card h4 {
|
||||
color: var(--primary-blue);
|
||||
font-size: 0.98rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.media-card p {
|
||||
color: var(--light-text);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
background: var(--light-bg);
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.feature-item h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.feature-item ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.feature-item ul li {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
color: var(--light-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-item ul li:before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 高亮框 */
|
||||
.highlight-box {
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(106, 44, 145, 0.1) 100%);
|
||||
border-left: 4px solid var(--accent-color);
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.highlight-box h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.highlight-box ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.highlight-box ul li {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.highlight-box ul li:before {
|
||||
content: "🏆";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 工作流程 */
|
||||
.workflow-section {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.workflow-section h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.workflow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
overflow-x: auto;
|
||||
padding: 20px;
|
||||
background: var(--light-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.workflow-step p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent-color);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* 案例网格 */
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 25px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.case-item {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(16, 41, 79, 0.08);
|
||||
border-top: 3px solid var(--primary-purple);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.case-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.case-item h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.case-item p {
|
||||
color: var(--light-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.table-section {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.table-section h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.service-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(16, 41, 79, 0.08);
|
||||
}
|
||||
|
||||
.service-table thead {
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-table th {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-table td {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.service-table tbody tr:hover {
|
||||
background: var(--light-bg);
|
||||
}
|
||||
|
||||
.service-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 应用列表 */
|
||||
.application-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.app-item {
|
||||
background: var(--light-bg);
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--accent-color);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
border-left-color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.app-item h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.app-item p {
|
||||
color: var(--light-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 结果展示 */
|
||||
.result-showcase {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 25px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(106, 44, 145, 0.1) 100%);
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-item h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-item p {
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
/* 占位符和提示框 */
|
||||
.placeholder-section,
|
||||
.contact-prompt,
|
||||
.info-box {
|
||||
background: linear-gradient(135deg, rgba(106, 44, 145, 0.05) 0%, rgba(0, 212, 255, 0.05) 100%);
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
margin: 25px 0;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.placeholder-section h4,
|
||||
.contact-prompt h4,
|
||||
.info-box h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.placeholder-section ul,
|
||||
.contact-prompt ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.placeholder-section ul li,
|
||||
.contact-prompt ul li {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
color: var(--light-text);
|
||||
}
|
||||
|
||||
.placeholder-section ul li:before,
|
||||
.contact-prompt ul li:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
color: #00a8cc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.products-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.product-sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.page-hero-content h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.product-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 15px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.workflow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.feature-grid,
|
||||
.case-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.service-table th,
|
||||
.service-table td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-hero {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.page-hero-content h1 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.page-hero-content p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.product-tabs {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 专业学术版式增强 */
|
||||
.product-content {
|
||||
max-width: 980px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.product-section h2,
|
||||
.about-section h2,
|
||||
.resource-section h2 {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.prose-block {
|
||||
margin: 24px 0;
|
||||
color: #34405a;
|
||||
line-height: 1.9;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.prose-block p {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.inline-figure {
|
||||
margin: 18px 0 26px;
|
||||
border: 1px solid #e6ebf2;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.inline-figure img,
|
||||
.media-card img,
|
||||
.preview-image,
|
||||
.video-placeholder img {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.inline-figure img {
|
||||
width: 100%;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.inline-figure figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 0.86rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
background: rgba(4, 12, 24, 0.82);
|
||||
}
|
||||
|
||||
.image-lightbox.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-lightbox img {
|
||||
max-width: 92vw;
|
||||
max-height: 88vh;
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.image-lightbox button {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #10294f;
|
||||
font-size: 1.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.service-video-block {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.service-video-block video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.service-video-block h4 {
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.service-video-block p {
|
||||
color: #34405a;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.service-video-block {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,558 @@
|
||||
/* 璧勬簮涓績鐗规畩鏍峰紡 */
|
||||
.resources-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.resource-sidebar {
|
||||
position: sticky;
|
||||
top: 90px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
background: var(--light-bg);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.filter-section h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--dark-text);
|
||||
}
|
||||
|
||||
.filter-group select,
|
||||
.filter-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 0.85rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.filter-group select:hover,
|
||||
.filter-group select:focus,
|
||||
.filter-group input:hover,
|
||||
.filter-group input:focus {
|
||||
border-color: var(--primary-purple);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--primary-purple);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-search:hover {
|
||||
background: var(--primary-blue);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.reset-link {
|
||||
display: block;
|
||||
margin: 10px auto 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--primary-purple);
|
||||
cursor: pointer;
|
||||
font-size: 0.86rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.empty-result {
|
||||
display: none;
|
||||
color: var(--light-text);
|
||||
background: var(--light-bg);
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 璧勬簮鍐呭 */
|
||||
.resource-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.resource-section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.resource-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 璧勬簮鍗＄墖缃戞牸 */
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, rgba(30, 60, 114, 0.05) 0%, rgba(106, 44, 145, 0.05) 100%);
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
color: var(--primary-blue);
|
||||
font-size: 1.05rem;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.year-badge {
|
||||
background: var(--primary-purple);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.journal {
|
||||
color: var(--light-text);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.if-badge {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
padding: 15px 20px;
|
||||
flex: 1;
|
||||
color: var(--light-text);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--light-bg);
|
||||
color: var(--primary-blue);
|
||||
padding: 4px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--primary-blue);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
padding: 15px 20px;
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: #00a8cc;
|
||||
background: var(--light-bg);
|
||||
}
|
||||
|
||||
/* 瑙嗛缃戞牸 */
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.video-placeholder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-placeholder::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.video-card:hover .video-placeholder::after {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.video-card:hover .play-icon {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.video-card h4 {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
color: var(--primary-blue);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.video-card p {
|
||||
padding: 0 15px;
|
||||
margin: 0 0 10px 0;
|
||||
color: var(--light-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.video-duration {
|
||||
padding: 0 15px 15px 15px !important;
|
||||
font-size: 0.85rem !important;
|
||||
color: var(--accent-color) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 鍝嶅簲寮?*/
|
||||
@media (max-width: 768px) {
|
||||
.resources-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.resource-sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.resource-grid,
|
||||
.video-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.news-feature-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(16, 41, 79, 0.08);
|
||||
}
|
||||
|
||||
.news-feature-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.92fr) 1.08fr;
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
}
|
||||
|
||||
.news-feature-hero img,
|
||||
.news-inline-figure img,
|
||||
.news-image-grid img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.news-feature-hero img {
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.news-feature-hero h3 {
|
||||
color: var(--primary-blue);
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.news-feature-hero p,
|
||||
.news-prose p,
|
||||
.news-prose li {
|
||||
color: #34405a;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.news-prose {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.news-prose h4 {
|
||||
color: var(--primary-blue);
|
||||
margin: 10px 0 12px;
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
|
||||
.news-prose ul {
|
||||
padding-left: 20px;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.news-inline-figure {
|
||||
margin: 20px 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.news-inline-figure img {
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.news-inline-figure figcaption,
|
||||
.news-image-grid figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.news-image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
padding: 0 24px 10px;
|
||||
}
|
||||
|
||||
.news-image-grid figure {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.news-image-grid img {
|
||||
height: 240px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.doi-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.doi-links a {
|
||||
color: #fff;
|
||||
background: var(--primary-blue);
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.video-card video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.video-card-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.news-feature-hero,
|
||||
.news-image-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.video-card-wide {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 0 0 28px;
|
||||
border-bottom: 2px solid #e5ebf3;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.resource-tab {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
color: #5f6b7a;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.resource-tab:hover,
|
||||
.resource-tab.active {
|
||||
color: var(--primary-purple);
|
||||
border-bottom-color: var(--primary-purple);
|
||||
}
|
||||
|
||||
.resource-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resource-section.active-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.resource-card.is-filtered-out {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resource-card-thumb {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.video-card-grid .resource-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-resource-card video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #0f172a;
|
||||
}
|
||||
+364
@@ -0,0 +1,364 @@
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-blue: #1e3c72;
|
||||
--primary-purple: #6a2c91;
|
||||
--secondary-blue: #2a5298;
|
||||
--accent-color: #00d4ff;
|
||||
--light-bg: #f5f7fa;
|
||||
--dark-text: #333;
|
||||
--light-text: #666;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: var(--dark-text);
|
||||
line-height: 1.6;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 英雄部分 */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 40vh;
|
||||
min-height: 320px;
|
||||
max-height: 460px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
|
||||
}
|
||||
|
||||
.hero-carousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hero-slide.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: slideIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-slide img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.26;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
padding-left: 60px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2.45rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--accent-color) 0%, #00a8cc 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 轮播控件 */
|
||||
.carousel-controls {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.carousel-dot.active {
|
||||
background: white;
|
||||
width: 30px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 产品预览部分 */
|
||||
.products-preview {
|
||||
padding: 80px 0;
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
.products-preview h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 50px;
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
background: white;
|
||||
padding: 22px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s;
|
||||
border-top: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: contain;
|
||||
background: #f7f9fc;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.preview-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.preview-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.preview-card p {
|
||||
color: var(--light-text);
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: #00a8cc;
|
||||
}
|
||||
|
||||
/* 学术与动态部分 */
|
||||
.academic-news {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.section-col h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-purple);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
padding: 20px;
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
background: var(--light-bg);
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.news-item:hover {
|
||||
background: #e8f1ff;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.news-item h4 {
|
||||
margin-bottom: 8px;
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.news-item p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
color: #00a8cc;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.products-preview h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.home-video-section {
|
||||
background: #f8fafc;
|
||||
padding: 42px 20px;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
}
|
||||
|
||||
.home-video-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.75fr) 1.25fr;
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-video-copy h2 {
|
||||
color: var(--primary-blue);
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.home-video-copy p {
|
||||
color: #34405a;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
display: inline-block;
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.home-video-layout video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: block;
|
||||
background: #0f172a;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 14px 30px rgba(16, 41, 79, 0.16);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-video-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"id": "7cc87ade-16e2-43ac-a32a-6a6378a7dcb1",
|
||||
"createdAt": "2026-06-23T03:34:21.749Z",
|
||||
"notified": false,
|
||||
"notifiedAt": null,
|
||||
"name": "黄思嘉",
|
||||
"email": "h4erj@outlook.com",
|
||||
"countryCode": "+86",
|
||||
"phone": "+8617363318309",
|
||||
"inquiryType": "技术咨询",
|
||||
"message": "测试"
|
||||
}
|
||||
]
|
||||
+288
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>海古纪生物科技 - 精准基因组学解决方案</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#home" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="pages/products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="pages/services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="pages/services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="pages/services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/applications.html#breeding">种业研究</a>
|
||||
<a href="pages/applications.html#microbe">微生物研究</a>
|
||||
<a href="pages/applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/advantages.html#sequencing">测序平台</a>
|
||||
<a href="pages/advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="pages/advantages.html#synthesis">合成平台</a>
|
||||
<a href="pages/advantages.html#analysis">分析平台</a>
|
||||
<a href="pages/advantages.html#lab">核心实验室</a>
|
||||
<a href="pages/advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/resources.html#case">精选案例</a>
|
||||
<a href="pages/resources.html#news">资讯动态</a>
|
||||
<a href="pages/resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="pages/about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="pages/about.html#haiguji">海古纪</a>
|
||||
<a href="pages/about.html#contact">联系我们</a>
|
||||
<a href="pages/about.html#news">最新动态</a>
|
||||
<a href="pages/about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>扫描关注公众号</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="pages/customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="pages/about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 首页 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-carousel">
|
||||
<!-- 第一张：公司理念 -->
|
||||
<div class="hero-slide active">
|
||||
<div class="hero-content">
|
||||
<h1>精准基因组学解决方案</h1>
|
||||
<p>为全球科研与产业赋能基因组大数据</p>
|
||||
<button class="btn-primary">了解更多</button>
|
||||
</div>
|
||||
<img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种">
|
||||
</div>
|
||||
|
||||
<!-- 第二张：产品展示 -->
|
||||
<div class="hero-slide">
|
||||
<div class="hero-content">
|
||||
<h1>HSmaster 全自动文库制备系统</h1>
|
||||
<p>核酸提取、PCR扩增、文库质检全流程无人值守</p>
|
||||
<a class="btn-primary hero-btn" href="pages/products.html#hsmaster">查看产品</a>
|
||||
</div>
|
||||
<img src="公司资料/产品/HSmaster/图片/HSmaster全自动文库制备系统.png" alt="HSmaster全自动文库制备系统">
|
||||
</div>
|
||||
|
||||
<!-- 第三张：AI生信科学家 -->
|
||||
<div class="hero-slide">
|
||||
<div class="hero-content">
|
||||
<h1>AI 生信科学家</h1>
|
||||
<p>上传数据后自动识别项目类型，规划并执行多组学分析路径</p>
|
||||
<a class="btn-primary hero-btn" href="pages/products.html#ai-scientist">浏览产品</a>
|
||||
</div>
|
||||
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家">
|
||||
</div>
|
||||
|
||||
<!-- 第四张：联系信息 -->
|
||||
<div class="hero-slide">
|
||||
<div class="hero-content">
|
||||
<h1>立即联系我们</h1>
|
||||
<p>获取专业的基因组学解决方案</p>
|
||||
<a class="btn-primary hero-btn" href="pages/about.html#contact">咨询服务</a>
|
||||
</div>
|
||||
<img src="公司资料/产品/HSmaster/图片/文库流水线.png" alt="文库流水线">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-controls">
|
||||
<button class="carousel-dot active" onclick="currentSlide(1)"></button>
|
||||
<button class="carousel-dot" onclick="currentSlide(2)"></button>
|
||||
<button class="carousel-dot" onclick="currentSlide(3)"></button>
|
||||
<button class="carousel-dot" onclick="currentSlide(4)"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品与服务预览 -->
|
||||
<!-- 首页视频 -->
|
||||
<section class="home-video-section">
|
||||
<div class="container home-video-layout">
|
||||
<div class="home-video-copy">
|
||||
<span class="section-kicker">南繁科研现场</span>
|
||||
<h2>海大南繁：走向世界的育种中心</h2>
|
||||
<p>通过视频了解海南大学南繁科研与育种创新基础，感受海古纪技术服务所依托的南繁产业场景。</p>
|
||||
<a class="card-link" href="pages/resources.html#video">更多视频 →</a>
|
||||
</div>
|
||||
<video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
|
||||
<source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
|
||||
您的浏览器暂不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
<section class="products-preview">
|
||||
<div class="container">
|
||||
<h2>我们的产品与服务</h2>
|
||||
<div class="preview-grid">
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
|
||||
<h3>AI生信科学家</h3>
|
||||
<p>全自动、自规划的多组学分析智能体</p>
|
||||
<a href="pages/products.html#ai-scientist" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
|
||||
<h3>Hyper-seq测序</h3>
|
||||
<p>极低成本、高效、灵活的DNA测序文库制备</p>
|
||||
<a href="pages/services.html#hyper-seq" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
|
||||
<h3>全基因组重测序</h3>
|
||||
<p>高精度全基因组测序与分析服务</p>
|
||||
<a href="pages/services.html#wgs" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 学术文献与动态 -->
|
||||
<section class="academic-news">
|
||||
<div class="container">
|
||||
<div class="section-row">
|
||||
<div class="section-col">
|
||||
<h2>学术文献</h2>
|
||||
<div class="news-list">
|
||||
<div class="news-item">
|
||||
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
||||
<p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<h4>马铃薯同源四倍体基因组研究</h4>
|
||||
<p>Plant Biotechnology Journal (IF=13.8)</p>
|
||||
<a href="#" class="read-more">查看详情 →</a>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<h4>美人蕉科植物基因组研究</h4>
|
||||
<p>Frontiers in Plant Science (IF=6.627)</p>
|
||||
<a href="#" class="read-more">查看详情 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-col">
|
||||
<h2>最新动态</h2>
|
||||
<div class="news-list">
|
||||
<div class="news-item">
|
||||
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
||||
<p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<h4>Hyper-seq技术获得国际发明专利</h4>
|
||||
<p>专利号：No.2020/06979</p>
|
||||
<a href="#" class="read-more">查看详情 →</a>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<h4>获崖州湾杯科技创新大赛一等奖</h4>
|
||||
<p>技术创新突破行业瓶颈</p>
|
||||
<a href="#" class="read-more">查看详情 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="pages/about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="pages/about.html#contact">联系我们</a></li>
|
||||
<li><a href="pages/about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="#">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/carousel.js"></script>
|
||||
<script src="js/nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+301
@@ -0,0 +1,301 @@
|
||||
// 关于我们页面功能
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const navItems = document.querySelectorAll('.nav-section .nav-item');
|
||||
|
||||
function showSection(targetId) {
|
||||
const sections = document.querySelectorAll('.product-content > section');
|
||||
const target = document.querySelector(targetId);
|
||||
if (!target) return;
|
||||
|
||||
sections.forEach(section => section.classList.remove('active-section'));
|
||||
target.classList.add('active-section');
|
||||
|
||||
navItems.forEach(nav => {
|
||||
nav.classList.toggle('active', nav.getAttribute('href') === targetId);
|
||||
});
|
||||
|
||||
setDropdownActive(targetId);
|
||||
history.replaceState(null, '', targetId);
|
||||
}
|
||||
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
showSection(this.getAttribute('href'));
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.dropdown-menu a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (document.querySelector(`.nav-section .nav-item[href="${targetId}"]`)) {
|
||||
e.preventDefault();
|
||||
showSection(targetId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (document.querySelector(`.nav-section .nav-item[href="${targetId}"]`)) {
|
||||
e.preventDefault();
|
||||
showSection(targetId);
|
||||
}
|
||||
});
|
||||
});
|
||||
const hash = window.location.hash;
|
||||
const initialItem = hash ? document.querySelector(`.nav-section .nav-item[href="${hash}"]`) : navItems[0];
|
||||
if (initialItem) showSection(initialItem.getAttribute('href'));
|
||||
|
||||
document.querySelectorAll('.nav-menu > li > .nav-link').forEach(link => {
|
||||
if ((link.getAttribute('href') || '').includes('about')) link.classList.add('active');
|
||||
});
|
||||
|
||||
initContactFormControls();
|
||||
// 在 about.js 的 DOMContentLoaded 末尾添加
|
||||
window.addEventListener('hashchange', function () {
|
||||
const hash = window.location.hash;
|
||||
if (hash) {
|
||||
const targetItem = document.querySelector(`.nav-section .nav-item[href="${hash}"]`);
|
||||
if (targetItem) {
|
||||
showSection(hash);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 处理联系表单提交
|
||||
function setDropdownActive(targetId) {
|
||||
document.querySelectorAll('.dropdown-menu a').forEach(link => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
const hash = href.includes('#') ? href.substring(href.indexOf('#')) : href;
|
||||
link.classList.toggle('active', hash === targetId);
|
||||
});
|
||||
}
|
||||
|
||||
function getInquiryTypeLabel(value) {
|
||||
const labels = {
|
||||
technical: '技术咨询',
|
||||
business: '商务合作',
|
||||
academic: '学术支持',
|
||||
sample: '样品寄送'
|
||||
};
|
||||
return labels[value] || value;
|
||||
}
|
||||
|
||||
function validateEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
function normalizePhone(phone) {
|
||||
return phone.replace(/[\s()-]/g, '');
|
||||
}
|
||||
|
||||
function validateCountryCode(countryCode) {
|
||||
return /^\+[1-9]\d{0,3}$/.test(countryCode);
|
||||
}
|
||||
|
||||
function validatePhone(countryCode, phone) {
|
||||
if (!phone) return true;
|
||||
const normalized = normalizePhone(phone);
|
||||
const rules = {
|
||||
'+86': /^1[3-9]\d{9}$/,
|
||||
'+1': /^[2-9]\d{2}[2-9]\d{6}$/,
|
||||
'+44': /^7\d{9}$/,
|
||||
'+81': /^0?\d{9,10}$/,
|
||||
'+65': /^[689]\d{7}$/,
|
||||
other: /^\d{6,15}$/
|
||||
};
|
||||
return (rules[countryCode] || rules.other).test(normalized);
|
||||
}
|
||||
|
||||
function showFormError(form, message) {
|
||||
let box = form.querySelector('.form-error');
|
||||
if (!box) {
|
||||
box = document.createElement('p');
|
||||
box.className = 'form-error';
|
||||
form.querySelector('button[type="submit"]').insertAdjacentElement('beforebegin', box);
|
||||
}
|
||||
box.textContent = message;
|
||||
}
|
||||
|
||||
// 处理联系表单提交
|
||||
async function handleContactForm(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
const inquirySelect = document.getElementById('inquiry-type');
|
||||
const customInquiryInput = document.getElementById('custom-inquiry-type');
|
||||
const countrySelect = document.getElementById('country-code');
|
||||
const customCountryInput = document.getElementById('custom-country-code');
|
||||
const rawInquiryType = inquirySelect.style.display === 'none' ? 'other' : inquirySelect.value;
|
||||
const customInquiryType = customInquiryInput.value.trim();
|
||||
const rawCountryCode = countrySelect.style.display === 'none' ? 'other' : countrySelect.value;
|
||||
const customCountryCode = customCountryInput.value.trim();
|
||||
const countryCode = rawCountryCode === 'other' ? customCountryCode : rawCountryCode;
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const phone = document.getElementById('phone').value.trim();
|
||||
const submitButton = form.querySelector('button[type="submit"]');
|
||||
|
||||
const formData = {
|
||||
name: document.getElementById('name').value.trim(),
|
||||
email,
|
||||
countryCode,
|
||||
customCountryCode,
|
||||
phone,
|
||||
inquiryType: rawInquiryType === 'other' ? 'other' : getInquiryTypeLabel(rawInquiryType),
|
||||
customInquiryType,
|
||||
otherInquiryType: customInquiryType,
|
||||
message: document.getElementById('message').value.trim()
|
||||
};
|
||||
|
||||
if (!formData.name) {
|
||||
showFormError(form, '请填写姓名。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email && !phone) {
|
||||
showFormError(form, '邮箱和手机至少填写一项。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (email && !validateEmail(email)) {
|
||||
showFormError(form, '请填写正确的邮箱格式。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (phone && rawCountryCode === 'other' && !validateCountryCode(customCountryCode)) {
|
||||
showFormError(form, '请填写正确的国家/地区代码，例如 +66。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (phone && !validatePhone(rawCountryCode, phone)) {
|
||||
showFormError(form, '请填写正确的手机号码。左侧已选择国家/地区代码，右侧只需填写号码本身。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (rawInquiryType === 'other' && !customInquiryType) {
|
||||
showFormError(form, '选择“其他”时，请填写咨询类型。');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.message) {
|
||||
showFormError(form, '请填写消息内容。');
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = '提交中...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
const result = await response.json().catch(() => ({}));
|
||||
if (!response.ok || !result.ok) {
|
||||
throw new Error((result.errors || ['提交失败，请稍后再试。']).join('；'));
|
||||
}
|
||||
showFormError(form, '');
|
||||
alert('感谢您的消息！我们会尽快与您联系。');
|
||||
form.reset();
|
||||
resetInlineControls();
|
||||
} catch (error) {
|
||||
showFormError(form, error.message || '提交失败，请稍后再试。');
|
||||
} finally {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = '提交消息';
|
||||
}
|
||||
}
|
||||
|
||||
function resetInlineControls() {
|
||||
const inquirySelect = document.getElementById('inquiry-type');
|
||||
const customInquiryInput = document.getElementById('custom-inquiry-type');
|
||||
const countrySelect = document.getElementById('country-code');
|
||||
const customCountryInput = document.getElementById('custom-country-code');
|
||||
if (inquirySelect && customInquiryInput) {
|
||||
inquirySelect.style.display = '';
|
||||
customInquiryInput.style.display = 'none';
|
||||
customInquiryInput.value = '';
|
||||
customInquiryInput.required = false;
|
||||
}
|
||||
if (countrySelect && customCountryInput) {
|
||||
countrySelect.style.display = '';
|
||||
customCountryInput.style.display = 'none';
|
||||
customCountryInput.value = '';
|
||||
customCountryInput.required = false;
|
||||
}
|
||||
}
|
||||
|
||||
function initContactFormControls() {
|
||||
const inquirySelect = document.getElementById('inquiry-type');
|
||||
const customInquiryInput = document.getElementById('custom-inquiry-type');
|
||||
const countrySelect = document.getElementById('country-code');
|
||||
const customCountryInput = document.getElementById('custom-country-code');
|
||||
|
||||
if (inquirySelect && customInquiryInput) {
|
||||
inquirySelect.addEventListener('change', () => {
|
||||
if (inquirySelect.value === 'other') {
|
||||
inquirySelect.style.display = 'none';
|
||||
customInquiryInput.style.display = 'block';
|
||||
customInquiryInput.required = true;
|
||||
customInquiryInput.focus();
|
||||
}
|
||||
});
|
||||
customInquiryInput.addEventListener('blur', () => {
|
||||
if (!customInquiryInput.value.trim()) {
|
||||
inquirySelect.value = 'technical';
|
||||
inquirySelect.style.display = '';
|
||||
customInquiryInput.style.display = 'none';
|
||||
customInquiryInput.required = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (countrySelect && customCountryInput) {
|
||||
countrySelect.addEventListener('change', () => {
|
||||
if (countrySelect.value === 'other') {
|
||||
countrySelect.style.display = 'none';
|
||||
customCountryInput.style.display = 'block';
|
||||
customCountryInput.required = true;
|
||||
customCountryInput.focus();
|
||||
}
|
||||
});
|
||||
customCountryInput.addEventListener('blur', () => {
|
||||
if (!customCountryInput.value.trim()) {
|
||||
countrySelect.value = '+86';
|
||||
countrySelect.style.display = '';
|
||||
customCountryInput.style.display = 'none';
|
||||
customCountryInput.required = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 页面加载时处理锚点导航
|
||||
|
||||
function initImageLightbox() {
|
||||
if (document.querySelector('.image-lightbox')) return;
|
||||
const box = document.createElement('div');
|
||||
box.className = 'image-lightbox';
|
||||
box.innerHTML = '<button type="button" aria-label="关闭">×</button><img alt="图片预览">';
|
||||
document.body.appendChild(box);
|
||||
const img = box.querySelector('img');
|
||||
const close = () => box.classList.remove('open');
|
||||
box.querySelector('button').addEventListener('click', close);
|
||||
box.addEventListener('click', event => { if (event.target === box) close(); });
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
|
||||
document.querySelectorAll('.product-content img, .resource-content img, .about-container img, .products-preview img').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
img.src = item.currentSrc || item.src;
|
||||
img.alt = item.alt || '图片预览';
|
||||
box.classList.add('open');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
// 轮播功能
|
||||
let currentSlideIndex = 1;
|
||||
showSlides(currentSlideIndex);
|
||||
|
||||
function currentSlide(n) {
|
||||
showSlides(currentSlideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
const slides = document.querySelectorAll('.hero-slide');
|
||||
const dots = document.querySelectorAll('.carousel-dot');
|
||||
|
||||
if (n > slides.length) {
|
||||
currentSlideIndex = 1;
|
||||
}
|
||||
if (n < 1) {
|
||||
currentSlideIndex = slides.length;
|
||||
}
|
||||
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
dots.forEach(dot => dot.classList.remove('active'));
|
||||
|
||||
slides[currentSlideIndex - 1].classList.add('active');
|
||||
dots[currentSlideIndex - 1].classList.add('active');
|
||||
}
|
||||
|
||||
// 自动轮播
|
||||
setInterval(() => {
|
||||
currentSlideIndex++;
|
||||
showSlides(currentSlideIndex);
|
||||
}, 5000);
|
||||
|
||||
// 按钮点击事件
|
||||
document.querySelectorAll('.btn-primary').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const targetId = this.textContent.includes('了解') ? '#products' : '#contact';
|
||||
// 这里可以添加页面跳转逻辑
|
||||
console.log('按钮被点击');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
// 导航栏功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Logo 点击返回首页
|
||||
const logoSection = document.querySelector('.logo-section');
|
||||
if (logoSection) {
|
||||
logoSection.addEventListener('click', () => {
|
||||
window.location.href = 'index.html';
|
||||
});
|
||||
}
|
||||
|
||||
// 响应式导航菜单（如果需要移动版本）
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
if (navMenu) {
|
||||
// 点击菜单项后关闭下拉菜单（如果有特殊需求）
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
// 保留默认行为，允许正常跳转
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 响应式设计支持
|
||||
if (window.innerWidth <= 768) {
|
||||
adjustMobileNav();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
adjustMobileNav();
|
||||
}
|
||||
});
|
||||
|
||||
const path = window.location.pathname;
|
||||
document.querySelectorAll('.nav-menu > li > .nav-link').forEach(link => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
const isHome = (href === '#home' || href.endsWith('index.html')) && !path.includes('/pages/');
|
||||
const isCurrent =
|
||||
isHome ||
|
||||
(href.includes('products') && path.includes('products')) ||
|
||||
(href.includes('services') && path.includes('services')) ||
|
||||
(href.includes('applications') && path.includes('applications')) ||
|
||||
(href.includes('advantages') && path.includes('advantages')) ||
|
||||
(href.includes('resources') && path.includes('resources')) ||
|
||||
(href.includes('about') && path.includes('about'));
|
||||
if (isCurrent) link.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
function adjustMobileNav() {
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
if (navMenu) {
|
||||
// 移动设备上的调整
|
||||
// 可以根据需要添加汉堡菜单等功能
|
||||
}
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function initImageLightbox() {
|
||||
if (document.querySelector('.image-lightbox')) return;
|
||||
const box = document.createElement('div');
|
||||
box.className = 'image-lightbox';
|
||||
box.innerHTML = '<button type="button" aria-label="关闭">×</button><img alt="图片预览">';
|
||||
document.body.appendChild(box);
|
||||
const img = box.querySelector('img');
|
||||
const close = () => box.classList.remove('open');
|
||||
box.querySelector('button').addEventListener('click', close);
|
||||
box.addEventListener('click', event => { if (event.target === box) close(); });
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
|
||||
document.querySelectorAll('.product-content img, .resource-content img, .about-container img, .products-preview img').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
img.src = item.currentSrc || item.src;
|
||||
img.alt = item.alt || '图片预览';
|
||||
box.classList.add('open');
|
||||
});
|
||||
});
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
function pauseVideos(scope) {
|
||||
(scope || document).querySelectorAll('video').forEach(video => {
|
||||
if (!video.paused) video.pause();
|
||||
});
|
||||
}
|
||||
|
||||
// 标签页切换功能：只切换当前模块内部内容，避免其他产品/服务出现空白
|
||||
function switchTab(evt, tabName) {
|
||||
const section = evt.currentTarget.closest('.product-section, .about-section');
|
||||
const scope = section || document;
|
||||
pauseVideos(scope);
|
||||
const tabContents = scope.querySelectorAll('.tab-content');
|
||||
const tabBtns = evt.currentTarget.parentElement.querySelectorAll('.tab-btn');
|
||||
|
||||
tabContents.forEach(content => content.classList.remove('active'));
|
||||
tabBtns.forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
const activeContent = document.getElementById(tabName);
|
||||
if (activeContent) activeContent.classList.add('active');
|
||||
evt.currentTarget.classList.add('active');
|
||||
}
|
||||
|
||||
function normalizeSectionTarget(targetId) {
|
||||
if (!targetId) return targetId;
|
||||
if (targetId.indexOf('#wgs-') === 0) return '#wgs';
|
||||
return targetId;
|
||||
}
|
||||
|
||||
function setDropdownActive(originalTargetId, targetId) {
|
||||
document.querySelectorAll('.dropdown-menu a').forEach(link => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
const hash = href.includes('#') ? href.substring(href.indexOf('#')) : href;
|
||||
link.classList.toggle('active', hash === originalTargetId || hash === targetId);
|
||||
});
|
||||
}
|
||||
|
||||
function showContentSection(targetId) {
|
||||
const originalTargetId = targetId;
|
||||
targetId = normalizeSectionTarget(targetId);
|
||||
pauseVideos(document);
|
||||
const sections = document.querySelectorAll('.product-content > section');
|
||||
const navItems = document.querySelectorAll('.nav-section .nav-item');
|
||||
const target = document.querySelector(targetId);
|
||||
|
||||
if (!target || sections.length === 0) return;
|
||||
|
||||
sections.forEach(section => section.classList.remove('active-section'));
|
||||
target.classList.add('active-section');
|
||||
|
||||
navItems.forEach(nav => {
|
||||
nav.classList.toggle('active', nav.getAttribute('href') === targetId);
|
||||
});
|
||||
|
||||
const firstTab = target.querySelector('.tab-btn');
|
||||
const firstContent = target.querySelector('.tab-content');
|
||||
if (firstTab && firstContent) {
|
||||
target.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
target.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
||||
firstTab.classList.add('active');
|
||||
firstContent.classList.add('active');
|
||||
}
|
||||
|
||||
setDropdownActive(originalTargetId, targetId);
|
||||
history.replaceState(null, '', originalTargetId || targetId);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
initImageLightbox();
|
||||
const navItems = document.querySelectorAll('.nav-section .nav-item');
|
||||
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
showContentSection(this.getAttribute('href'));
|
||||
});
|
||||
});
|
||||
|
||||
const hash = window.location.hash;
|
||||
const normalizedHash = normalizeSectionTarget(hash);
|
||||
const initialItem = normalizedHash ? document.querySelector(`.nav-section .nav-item[href="${normalizedHash}"]`) : navItems[0];
|
||||
if (initialItem) showContentSection(hash || initialItem.getAttribute('href'));
|
||||
|
||||
document.querySelectorAll('.dropdown-menu a[href*="#"]').forEach(link => {
|
||||
link.addEventListener('click', function (e) {
|
||||
const href = this.getAttribute('href');
|
||||
const targetHash = href.includes('#') ? href.substring(href.indexOf('#')) : href;
|
||||
const normalizedTarget = normalizeSectionTarget(targetHash);
|
||||
const matchingSidebar = document.querySelector(`.nav-section .nav-item[href="${normalizedTarget}"]`);
|
||||
const samePage = !href.includes('.html') || href.split('#')[0] === '' || window.location.pathname.endsWith(href.split('#')[0]);
|
||||
if (matchingSidebar && samePage) {
|
||||
e.preventDefault();
|
||||
showContentSection(targetHash);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const path = window.location.pathname;
|
||||
document.querySelectorAll('.nav-menu > li > .nav-link').forEach(link => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
const isCurrent =
|
||||
(href.includes('products') && path.includes('products')) ||
|
||||
(href.includes('services') && path.includes('services')) ||
|
||||
(href.includes('applications') && path.includes('applications')) ||
|
||||
(href.includes('advantages') && path.includes('advantages')) ||
|
||||
(href.includes('resources') && path.includes('resources')) ||
|
||||
(href.includes('about') && path.includes('about'));
|
||||
if (isCurrent) link.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const logoSection = document.querySelector('.logo-section');
|
||||
if (logoSection) {
|
||||
logoSection.addEventListener('click', () => {
|
||||
window.location.href = document.location.pathname.includes('pages/')
|
||||
? '../index.html'
|
||||
: 'index.html';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function initImageLightbox() {
|
||||
if (document.querySelector('.image-lightbox')) return;
|
||||
const box = document.createElement('div');
|
||||
box.className = 'image-lightbox';
|
||||
box.innerHTML = '<button type="button" aria-label="关闭">×</button><img alt="图片预览">';
|
||||
document.body.appendChild(box);
|
||||
const img = box.querySelector('img');
|
||||
const close = () => box.classList.remove('open');
|
||||
box.querySelector('button').addEventListener('click', close);
|
||||
box.addEventListener('click', event => { if (event.target === box) close(); });
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
|
||||
document.querySelectorAll('.product-content img, .resource-content img, .about-container img, .products-preview img, .hero-slide img').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
img.src = item.currentSrc || item.src;
|
||||
img.alt = item.alt || '图片预览';
|
||||
box.classList.add('open');
|
||||
});
|
||||
});
|
||||
}
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
function pauseVideos(scope) {
|
||||
(scope || document).querySelectorAll('video').forEach(video => {
|
||||
if (!video.paused) video.pause();
|
||||
});
|
||||
}
|
||||
|
||||
// 资源中心筛选与标签切换
|
||||
(function () {
|
||||
function ready(fn) {
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn);
|
||||
else fn();
|
||||
}
|
||||
|
||||
ready(function () {
|
||||
const fieldFilter = document.getElementById('field-filter');
|
||||
const productFilter = document.getElementById('product-filter');
|
||||
const yearFilter = document.getElementById('year-filter');
|
||||
const impactFilter = document.getElementById('impact-filter');
|
||||
const keywordFilter = document.getElementById('keyword-filter');
|
||||
const searchBtn = document.querySelector('.btn-search');
|
||||
const resetBtn = document.querySelector('.reset-link');
|
||||
const emptyResult = document.getElementById('empty-result');
|
||||
const tabs = Array.from(document.querySelectorAll('.resource-tab'));
|
||||
const sections = Array.from(document.querySelectorAll('[data-tab-panel]'));
|
||||
|
||||
document.querySelectorAll('.nav-menu > li > .nav-link').forEach(link => {
|
||||
if ((link.getAttribute('href') || '').includes('resources')) link.classList.add('active');
|
||||
});
|
||||
|
||||
function currentTab() {
|
||||
const active = document.querySelector('.resource-tab.active');
|
||||
return active ? active.dataset.tab : 'case';
|
||||
}
|
||||
|
||||
function setDropdownActive(tabName) {
|
||||
const targetHash = '#' + tabName;
|
||||
document.querySelectorAll('.dropdown-menu a').forEach(link => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
const hash = href.includes('#') ? href.substring(href.indexOf('#')) : href;
|
||||
link.classList.toggle('active', hash === targetHash);
|
||||
});
|
||||
}
|
||||
|
||||
function activateTab(tabName, updateHash) {
|
||||
pauseVideos(document);
|
||||
tabs.forEach(tab => tab.classList.toggle('active', tab.dataset.tab === tabName));
|
||||
sections.forEach(section => section.classList.toggle('active-section', section.dataset.tabPanel === tabName));
|
||||
setDropdownActive(tabName);
|
||||
if (updateHash) history.replaceState(null, '', '#' + tabName);
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const field = fieldFilter ? fieldFilter.value : '';
|
||||
const product = productFilter ? productFilter.value : '';
|
||||
const year = yearFilter ? yearFilter.value : '';
|
||||
const impact = impactFilter ? impactFilter.value : '';
|
||||
const keyword = ((keywordFilter && keywordFilter.value) || '').trim().toLowerCase();
|
||||
const activeTab = currentTab();
|
||||
let visibleInActiveTab = 0;
|
||||
|
||||
document.querySelectorAll('.resource-card').forEach(card => {
|
||||
const text = [card.dataset.keywords, card.textContent].join(' ').toLowerCase();
|
||||
let show = true;
|
||||
if (field && card.dataset.field !== field) show = false;
|
||||
if (product && card.dataset.product !== product) show = false;
|
||||
if (year && card.dataset.year !== year) show = false;
|
||||
if (impact && card.dataset.impact !== impact) show = false;
|
||||
if (keyword && !text.includes(keyword)) show = false;
|
||||
|
||||
card.classList.toggle('is-filtered-out', !show);
|
||||
if (show && card.dataset.type === activeTab) visibleInActiveTab += 1;
|
||||
});
|
||||
|
||||
if (emptyResult) emptyResult.style.display = visibleInActiveTab === 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => activateTab(tab.dataset.tab, true));
|
||||
});
|
||||
|
||||
if (searchBtn) searchBtn.addEventListener('click', applyFilters);
|
||||
if (keywordFilter) {
|
||||
keywordFilter.addEventListener('keydown', event => {
|
||||
if (event.key === 'Enter') applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener('click', () => {
|
||||
if (fieldFilter) fieldFilter.value = '';
|
||||
if (productFilter) productFilter.value = '';
|
||||
if (yearFilter) yearFilter.value = '';
|
||||
if (impactFilter) impactFilter.value = '';
|
||||
if (keywordFilter) keywordFilter.value = '';
|
||||
applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('video').forEach(video => {
|
||||
video.addEventListener('play', () => {
|
||||
document.querySelectorAll('video').forEach(other => {
|
||||
if (other !== video && !other.paused) other.pause();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.card-link').forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
const href = link.getAttribute('href') || '';
|
||||
if (!href || href === '#') event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
const hash = (window.location.hash || '#case').replace('#', '');
|
||||
const initial = tabs.some(tab => tab.dataset.tab === hash) ? hash : 'case';
|
||||
activateTab(initial, false);
|
||||
initImageLightbox();
|
||||
// 监听 hash 变化，支持导航栏下拉菜单点击跳转
|
||||
window.addEventListener('hashchange', function () {
|
||||
const newHash = (window.location.hash || '#case').replace('#', '');
|
||||
const tabExists = tabs.some(tab => tab.dataset.tab === newHash);
|
||||
if (tabExists) {
|
||||
activateTab(newHash, false);
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
function initImageLightbox() {
|
||||
if (document.querySelector('.image-lightbox')) return;
|
||||
const box = document.createElement('div');
|
||||
box.className = 'image-lightbox';
|
||||
box.innerHTML = '<button type="button" aria-label="关闭">×</button><img alt="图片预览">';
|
||||
document.body.appendChild(box);
|
||||
const img = box.querySelector('img');
|
||||
const close = () => box.classList.remove('open');
|
||||
box.querySelector('button').addEventListener('click', close);
|
||||
box.addEventListener('click', event => { if (event.target === box) close(); });
|
||||
document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
|
||||
document.querySelectorAll('.product-content img, .resource-content img, .about-container img, .products-preview img').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
img.src = item.currentSrc || item.src;
|
||||
img.alt = item.alt || '图片预览';
|
||||
box.classList.add('open');
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"check:contacts": "node scripts/check-contact-messages.js"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>关于我们 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<link rel="stylesheet" href="../css/about.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="advantages.html#synthesis">合成平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>关于我们</h1>
|
||||
<p>精准基因组学，引领生物技术未来</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="products-container about-container">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="product-sidebar">
|
||||
<nav class="product-nav">
|
||||
<div class="nav-section">
|
||||
<h3>快速导航</h3>
|
||||
<ul>
|
||||
<li><a href="#haiguji" class="nav-item active">公司简介</a></li>
|
||||
<li><a href="#contact" class="nav-item">联系我们</a></li>
|
||||
<li><a href="#news" class="nav-item">最新动态</a></li>
|
||||
<li><a href="#privacy" class="nav-item">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="product-content">
|
||||
<!-- 海古纪 -->
|
||||
<section id="haiguji" class="about-section">
|
||||
<h2>关于海古纪</h2>
|
||||
|
||||
<div class="company-intro">
|
||||
<h3>公司名称</h3>
|
||||
<p><strong>三亚海古纪生物科技有限公司</strong></p>
|
||||
|
||||
<h3>企业使命</h3>
|
||||
<p>聚焦种业科技自主突破，打造高通量基因组解析、智能化分子设计及全链条AI育种技术体系，通过基因组大数据与人工智能深度融合，驱动动植物育种从传统经验模式向智能体设计范式跨越升级。</p>
|
||||
|
||||
<h3>企业愿景</h3>
|
||||
<p>成为全球物种设计与智慧育种决策的创新标杆，构建AI驱动的精准物种改造生态系统，以基因组大数据与AI算法重塑农业可持续发展范式。</p>
|
||||
|
||||
<h3>业务布局</h3>
|
||||
<p>公司围绕 Hyper-seq 测序、全基因组重测序、AI 生物信息分析、HSmaster
|
||||
全自动文库制备系统和大规模育种数据服务构建业务体系，服务对象覆盖高校院所、育种企业、检测机构和生命科学研发团队。</p>
|
||||
|
||||
<h3>技术转化</h3>
|
||||
<p>海古纪已获得 Hyper-seq 技术全国独家成果转化实施许可，提供从实验设计、建库测序到数据分析的一站式服务，并与海南大学三亚南繁研究院“基因组与大数据育种”团队保持深度合作。</p>
|
||||
</div>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="三亚海古纪生物科技有限公司">
|
||||
<h4>三亚海古纪生物科技有限公司</h4>
|
||||
<p>SANYA HYPER-Gene Biotechnology Co., Ltd.</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/公司简介/海南大学logo.png" alt="海南大学">
|
||||
<h4>海南大学合作基础</h4>
|
||||
<p>依托南繁科研与基因组大数据育种团队，推进 Hyper-seq 技术转化与应用。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-highlights">
|
||||
<h3>核心优势</h3>
|
||||
<div class="highlight-grid">
|
||||
<div class="highlight-item">
|
||||
<h4>✓ 原创技术</h4>
|
||||
<p>拥有Hyper-seq等自主知识产权技术，获得国际发明专利授权</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>✓ 研发实力</h4>
|
||||
<p>与海南大学深度合作，汇聚一流的基因组学研究团队</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>✓ 多平台集成</h4>
|
||||
<p>整合测序、质谱、分析等多个平台，提供综合解决方案</p>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<h4>✓ 广泛应用</h4>
|
||||
<p>服务全球40+研究机构，涵盖50+物种，50000+样品</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-section">
|
||||
<h3>核心团队</h3>
|
||||
<div class="team-info">
|
||||
<p><strong>首席科学家：</strong>夏志强 研究员/副院长</p>
|
||||
<p>海南大学三亚南繁研究院"基因组与大数据育种"团队负责人，Hyper-seq技术原创发明者</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<section id="contact" class="about-section">
|
||||
<h2>联系我们</h2>
|
||||
|
||||
<div class="contact-form-container">
|
||||
<div class="contact-info">
|
||||
<div class="info-block">
|
||||
<h4>📍 公司地址</h4>
|
||||
<p>三亚市海南大学研究院D栋204</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>📞 联系电话</h4>
|
||||
<p>谢经理：16689001917</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>基因文库技术</h4>
|
||||
<p>江肆肆：18605560158</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>育种数据服务技术</h4>
|
||||
<p>廖树欣：18889202989</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>高通量基因文库设备技术</h4>
|
||||
<p>杰瑞.葛：13601063401</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>📧 电子邮箱</h4>
|
||||
<p>info@haiguji.com</p>
|
||||
</div>
|
||||
<div class="info-block">
|
||||
<h4>🕐 工作时间</h4>
|
||||
<p>周一至周五 09:00 - 18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" onsubmit="handleContactForm(event)">
|
||||
<h3>发送消息</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label><input type="email" id="email" name="email"
|
||||
placeholder="邮箱和手机至少填写一项">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">手机</label>
|
||||
<div class="phone-row">
|
||||
<select id="country-code" name="country-code" aria-label="国家/地区代码">
|
||||
<option value="+86">中国 +86</option>
|
||||
<option value="+1">美国/加拿大 +1</option>
|
||||
<option value="+44">英国 +44</option>
|
||||
<option value="+81">日本 +81</option>
|
||||
<option value="+65">新加坡 +65</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
<input type="text" id="custom-country-code" name="custom-country-code"
|
||||
placeholder="请输入国家/地区代码，如 +66" style="display:none;">
|
||||
<input type="tel" id="phone" name="phone" placeholder="请输入手机号码，如 13812345678">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inquiry-type">咨询类型</label>
|
||||
<select id="inquiry-type" name="inquiry-type">
|
||||
<option value="technical">技术咨询</option>
|
||||
<option value="business">商务合作</option>
|
||||
<option value="academic">学术支持</option>
|
||||
<option value="sample">样品寄送</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
<input type="text" id="custom-inquiry-type" name="custom-inquiry-type" placeholder="请填写咨询类型"
|
||||
style="display:none;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">消息内容</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary" style="width: 100%;">提交消息</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 最新动态 -->
|
||||
<section id="news" class="about-section">
|
||||
<h2>最新动态</h2>
|
||||
<div class="news-timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2024年</div>
|
||||
<div class="timeline-content">
|
||||
<h4>新一代Hyper-seq技术发布</h4>
|
||||
<p>推出性能更优的Hyper-seq 2.0版本，进一步降低成本，提高分析精度。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2023年</div>
|
||||
<div class="timeline-content">
|
||||
<h4>全球合作网络扩展</h4>
|
||||
<p>与全球40+研究机构建立合作关系，服务范围覆盖亚洲、欧洲和北美。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2023年</div>
|
||||
<div class="timeline-content">
|
||||
<h4>AI生信科学家平台发布</h4>
|
||||
<p>推出全自动化、AI驱动的生物信息分析平台，实现从数据到洞见的自动化转换。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2022年</div>
|
||||
<div class="timeline-content">
|
||||
<h4>获得多项荣誉认证</h4>
|
||||
<p>获得国际发明专利授权、崖州湾杯一等奖等多项荣誉。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 隐私协议 -->
|
||||
<section id="privacy" class="about-section">
|
||||
<h2>隐私政策</h2>
|
||||
|
||||
<div class="privacy-content">
|
||||
<h3>1. 信息收集</h3>
|
||||
<p>我们仅收集完成服务所必需的信息，包括但不限于联系方式、样品信息等。</p>
|
||||
|
||||
<h3>2. 信息使用</h3>
|
||||
<p>收集的信息仅用于提供服务、技术支持和改进服务质量。我们不会将您的信息提供给第三方，除非获得您的明确授权或法律要求。</p>
|
||||
|
||||
<h3>3. 数据安全</h3>
|
||||
<p>我们采用行业标准的安全措施保护您的个人信息和研究数据，包括加密传输、访问控制和定期安全审计。</p>
|
||||
|
||||
<h3>4. 数据保存</h3>
|
||||
<p>根据与客户的协议，我们通常为期3-5年保存您的研究数据和报告。超期数据将按照您的指示安全销毁或继续保存。</p>
|
||||
|
||||
<h3>5. 知识产权</h3>
|
||||
<p>客户享有自身数据和研究成果的所有权。我们保留对自身技术和服务的知识产权。</p>
|
||||
|
||||
<h3>6. Cookie和追踪</h3>
|
||||
<p>本网站使用必要的Cookie来改进用户体验。您可以通过浏览器设置控制Cookie。</p>
|
||||
|
||||
<h3>7. 隐私更新</h3>
|
||||
<p>我们可能不时更新本隐私政策。重大更改将通过网站通知或邮件告知。</p>
|
||||
|
||||
<h3>8. 联系我们</h3>
|
||||
<p>如对隐私政策有任何疑问，请通过以下方式联系我们：</p>
|
||||
<p>邮箱：info@haiguji.com | 电话：16689001917</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="#haiguji">公司简介</a></li>
|
||||
<li><a href="#contact">联系我们</a></li>
|
||||
<li><a href="#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/about.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,307 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>综合优势 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>综合优势</h1>
|
||||
<p>业界领先的多平台集成解决方案</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 优势内容 -->
|
||||
<div class="products-container">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="product-sidebar">
|
||||
<nav class="product-nav">
|
||||
<div class="nav-section">
|
||||
<h3>优势平台</h3>
|
||||
<ul>
|
||||
<li><a href="#sequencing" class="nav-item active">测序平台</a></li>
|
||||
<li><a href="#analysis" class="nav-item">分析平台</a></li>
|
||||
<li><a href="#lab" class="nav-item">核心实验室</a></li>
|
||||
<li><a href="#css" class="nav-item">客户服务系统</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="product-content">
|
||||
<!-- 测序平台 -->
|
||||
<section id="sequencing" class="product-section">
|
||||
<h2>测序平台</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>多技术整合</h4>
|
||||
<ul>
|
||||
<li>高通量短读长测序</li>
|
||||
<li>三代长读长测序</li>
|
||||
<li>简化基因组测序（Hyper-seq）</li>
|
||||
<li>转录组测序</li>
|
||||
<li>表观组测序</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>硬件设备</h4>
|
||||
<ul>
|
||||
<li>配备国际一流的测序仪器</li>
|
||||
<li>高通量样本准备自动化系统</li>
|
||||
<li>全自动建库测序文库制备系统</li>
|
||||
<li>完整的数据处理服务器集群</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>技术优势</h4>
|
||||
<ul>
|
||||
<li>数据质量行业领先</li>
|
||||
<li>快速的结果交付周期</li>
|
||||
<li>成本优化的解决方案</li>
|
||||
<li>24小时技术支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分析平台 -->
|
||||
<section id="analysis" class="product-section">
|
||||
<h2>分析平台</h2>
|
||||
<p class="intro-subtitle">AI驱动的智能生物信息分析</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>数据处理能力</h4>
|
||||
<ul>
|
||||
<li>超大数据集处理</li>
|
||||
<li>实时数据流处理</li>
|
||||
<li>云端计算服务</li>
|
||||
<li>本地集群部署</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>分析工具库</h4>
|
||||
<ul>
|
||||
<li>标准化生信分析流程</li>
|
||||
<li>AI辅助基因发现</li>
|
||||
<li>机器学习模型库</li>
|
||||
<li>定制化分析开发</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>结果展现</h4>
|
||||
<ul>
|
||||
<li>交互式数据可视化</li>
|
||||
<li>出版级图表生成</li>
|
||||
<li>结构化报告输出</li>
|
||||
<li>数据可重复性验证</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心实验室 -->
|
||||
<section id="lab" class="product-section">
|
||||
<h2>核心实验室</h2>
|
||||
<p class="intro-subtitle">国际标准化的实验室设施与管理</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>实验室认证</h4>
|
||||
<ul>
|
||||
<li>ISO 9001质量管理体系</li>
|
||||
<li>ISO/IEC 17025认证</li>
|
||||
<li>CMA资质</li>
|
||||
<li>CNAS认可</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>安全防控</h4>
|
||||
<ul>
|
||||
<li>生物安全防护设施（BSL-1、BSL-2）</li>
|
||||
<li>完整的质量控制体系</li>
|
||||
<li>样品追踪系统</li>
|
||||
<li>严格的操作规程</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>专业团队</h4>
|
||||
<ul>
|
||||
<li>博士级研究团队</li>
|
||||
<li>资深技术人员</li>
|
||||
<li>24小时技术支持</li>
|
||||
<li>持续培训与提升</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户服务系统 -->
|
||||
<section id="css" class="product-section">
|
||||
<h2>客户服务系统 (CSS)</h2>
|
||||
<p class="intro-subtitle">一站式科研与商务服务平台</p>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>在线样品提交</h4>
|
||||
<p>用户可通过系统便捷地提交样品、查看订单状态、下载结果报告。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>实时进度跟踪</h4>
|
||||
<p>从样品接收、实验进行到结果交付的全程实时更新。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>技术咨询</h4>
|
||||
<p>专业的技术团队随时回答用户的技术问题，提供实验设计建议。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>数据管理</h4>
|
||||
<p>安全的云端数据存储，支持大文件下载和长期存档。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>学术支持</h4>
|
||||
<p>协助论文撰写、数据解读和成果发表的全程支持。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>商务合作</h4>
|
||||
<p>灵活的定价方案、批量优惠和长期合作协议。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="about.html#contact">联系我们</a></li>
|
||||
<li><a href="about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/pages.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>应用领域 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="advantages.html#synthesis">合成平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>应用领域</h1>
|
||||
<p>基因组学技术在多个领域的创新应用</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 应用内容 -->
|
||||
<div class="products-container">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="product-sidebar">
|
||||
<nav class="product-nav">
|
||||
<div class="nav-section">
|
||||
<h3>应用领域</h3>
|
||||
<ul>
|
||||
<li><a href="#breeding" class="nav-item active">种业研究</a></li>
|
||||
<li><a href="#microbe" class="nav-item">微生物研究</a></li>
|
||||
<li><a href="#animal-plant" class="nav-item">动植物研究</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="product-content">
|
||||
<!-- 种业研究 -->
|
||||
<section id="breeding" class="product-section">
|
||||
<h2>种业研究</h2>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>种质资源精准评价</h4>
|
||||
<p>通过全基因组重测序、Hyper-seq 和高通量基因分型，建立种质资源遗传多样性档案，识别优异等位变异和核心种质材料。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>重要农艺性状定位</h4>
|
||||
<p>结合 GWAS、QTL 定位、选择信号分析和表型数据，挖掘产量、品质、抗逆、熟期和株型等性状相关候选基因。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>分子标记辅助选择</h4>
|
||||
<p>围绕目标性状开发可验证、可追踪的 SNP/InDel 标记，支持亲本筛选、背景回复率评估和后代材料快速鉴定。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>基因组选择育种</h4>
|
||||
<p>以高密度基因型和多环境表型为基础构建预测模型，辅助早代选择和组合设计，缩短育种周期。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>品种鉴定与溯源</h4>
|
||||
<p>构建 DNA 指纹图谱，用于品种真实性鉴定、纯度检测、种源追踪和资源保护。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 微生物研究 -->
|
||||
<section id="microbe" class="product-section">
|
||||
<h2>微生物研究</h2>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>农业与环境微生物基因组测序</h4>
|
||||
<p>对根际菌、发酵菌、工程菌和环境菌株进行全基因组测序，解析菌株差异、功能基因、质粒结构和系统发育关系。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>土壤与环境微生物群落分析</h4>
|
||||
<p>研究土壤、水体、发酵体系和植物根际微生物群落的多样性、功能潜力与生态互作。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>功能基因与代谢通路解析</h4>
|
||||
<p>识别与氮磷循环、抗逆促生、发酵代谢和环境适应相关的功能基因，为菌株筛选和工艺优化提供依据。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>益生菌功能分析</h4>
|
||||
<p>分析益生菌的基因组成和代谢能力，用于益生菌产品开发。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>环境微生物多样性研究</h4>
|
||||
<p>评估水体、空气、土壤等环境中的微生物群落组成，监测环境质量。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 动植物研究 -->
|
||||
<section id="animal-plant" class="product-section">
|
||||
<h2>动植物研究</h2>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>作物育种与遗传改良</h4>
|
||||
<p>利用Hyper-seq等技术进行大规模群体基因型分析，加速育种进程，培育高产、抗逆优良品种。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>动物育种选择</h4>
|
||||
<p>对畜禽、水产进行基因组选择，提高生长、繁殖、品质和环境适应等生产性状。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>物种进化与系统学研究</h4>
|
||||
<p>通过基因组比较，揭示物种进化历史和系统发育关系。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>核心种质资源评估</h4>
|
||||
<p>对种质资源库进行基因组学特征分析，建立遗传多样性档案，指导资源有效利用。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>生物多样性监测</h4>
|
||||
<p>对野生动植物种群进行基因组监测，评估遗传多样性、群体结构和适应性变化。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>特性相关基因发现</h4>
|
||||
<p>通过GWAS等方法发现控制性状的候选基因，用于功能研究和育种应用。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="about.html#contact">联系我们</a></li>
|
||||
<li><a href="about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/pages.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>瀹㈡埛鏈嶅姟绯荤粺 - 娴峰彜绾敓鐗╃鎶€</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../鍏徃璧勬枡/logo.png" alt="娴峰彜绾?Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">棣栭〉</a></li>
|
||||
<li><a href="products.html" class="nav-link">浜у搧</a></li>
|
||||
<li><a href="services.html" class="nav-link">鏈嶅姟</a></li>
|
||||
<li><a href="applications.html" class="nav-link">搴旂敤棰嗗煙</a></li>
|
||||
<li><a href="advantages.html" class="nav-link">缁煎悎浼樺娍</a></li>
|
||||
<li><a href="resources.html" class="nav-link">璧勬簮涓績</a></li>
|
||||
<li><a href="about.html" class="nav-link">鍏充簬鎴戜滑</a></li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="鍏紬鍙?>鈽?/a>
|
||||
<div class=" dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>鍏紬鍙蜂簩缁寸爜</p>
|
||||
<div class="qrcode qr-empty">浜岀淮鐮?/div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="瀹㈡埛鏈嶅姟绯荤粺">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">鑱旂郴鎴戜滑</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>瀹㈡埛鏈嶅姟绯荤粺</h1>
|
||||
<p>绯荤粺姝ｅ湪瑙勫垝涓紝褰撳墠椤甸潰淇濈暀璺宠浆鍏ュ彛</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="container" style="padding: 60px 20px;">
|
||||
<div class="info-box">
|
||||
<h4>瀹㈡埛鏈嶅姟绯荤粺寤鸿涓?/h4>
|
||||
<p>鍚庣画灏嗙敤浜庨」鐩繘搴︽煡璇€佸湪绾垮挩璇€佹牱鏈俊鎭鐞嗐€佹姤鍛婁笅杞戒笌鍞悗鏀寔銆?/p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="../js/pages.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,451 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>产品 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="advantages.html#synthesis">合成平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>创新产品</h1>
|
||||
<p>为全球研究者提供先进的基因组学解决方案</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品内容 -->
|
||||
<div class="products-container">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="product-sidebar">
|
||||
<nav class="product-nav">
|
||||
<div class="nav-section">
|
||||
<h3>产品类别</h3>
|
||||
<ul>
|
||||
<li><a href="#ai-scientist" class="nav-item active">AI生信科学家</a></li>
|
||||
<li><a href="#hsmaster" class="nav-item">HSmaster</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="product-content">
|
||||
<!-- AI生信科学家 -->
|
||||
<section id="ai-scientist" class="product-section">
|
||||
<div class="product-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab(event, 'ai-intro')">产品介绍</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'ai-case')">案例解析</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'ai-result')">结果展示</button>
|
||||
</div>
|
||||
|
||||
<!-- 产品介绍 -->
|
||||
<div id="ai-intro" class="tab-content active">
|
||||
<h2>AI生信科学家</h2>
|
||||
<p class="intro-subtitle">全自动、自规划的多组学分析智能体</p>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="人工智能生物信息学科学家">
|
||||
<h4>多组学分析智能体</h4>
|
||||
<p>面向基因组、转录组、重测序、表观组等多组学数据，自动规划分析路径并生成结构化结果。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>智能规划分析全流程</h4>
|
||||
<ul>
|
||||
<li>上传数据后，AI智能体自动识别项目类型</li>
|
||||
<li>规划并执行最优分析路径</li>
|
||||
<li>覆盖基因组、转录组、重测序、表观组等多组学整合分析</li>
|
||||
<li>支持自定义分析策略，灵活适配基础研究、育种开发等场景</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<h4>智能解读与报告自动生成</h4>
|
||||
<ul>
|
||||
<li>AI驱动深度数据挖掘：变异影响、基因功能、通路网络</li>
|
||||
<li>自动生成出版级图表与结构化分析报告</li>
|
||||
<li>持续整合最新公共数据与算法</li>
|
||||
<li>提升解读深度和准确性</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<h4>平台技术特色</h4>
|
||||
<ul>
|
||||
<li>全流程自动化：从原始数据到生物洞见，全程无人值守运行</li>
|
||||
<li>环境自适配：自动配置计算环境，告别手动安装与调试</li>
|
||||
<li>透明可重复：提供完整分析日志与可复现脚本</li>
|
||||
<li>模块化扩展：轻松集成用户自有工具与流程</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow-section">
|
||||
<h4>核心业务流程</h4>
|
||||
<div class="workflow">
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-name">监管层</div>
|
||||
<p>总控项目需求、权限、资源配额</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-name">规划层</div>
|
||||
<p>自动生成分析脚本计划</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-name">执行层</div>
|
||||
<p>运行生物信息分析任务</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-name">审核层</div>
|
||||
<p>校验数据质控与结果</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-name">交付层</div>
|
||||
<p>输出整理好的结果</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-box">
|
||||
<h4>交付价值</h4>
|
||||
<p>您提供数据，AI 规划一切。系统通过 supervisors、planners、workers、reviewers、evidence、delivery
|
||||
六层协同，将项目需求、知识库检索、脚本执行、结果审核、证据留存和报告交付串成完整闭环，让生信分析像使用智能手机一样简单。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 案例解析 -->
|
||||
<div id="ai-case" class="tab-content">
|
||||
<h2>应用案例</h2>
|
||||
<div class="case-grid">
|
||||
<div class="case-item">
|
||||
<h4>多组学数据集成分析</h4>
|
||||
<p>成功整合全基因组、转录组和表观组数据，发现关键基因调控网络。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>育种材料评估</h4>
|
||||
<p>快速鉴定育种材料的遗传背景和性状相关基因。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>性状相关基因挖掘</h4>
|
||||
<p>从复杂的重测序和多组学数据中自动发现产量、品质、抗逆等性状相关候选基因。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>重测序自动流程</h4>
|
||||
<p>自动完成质控、比对、变异检测、注释、富集分析和报告生成，保留完整日志与可复现脚本。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果展示 -->
|
||||
<div id="ai-result" class="tab-content">
|
||||
<h2>典型结果</h2>
|
||||
<div class="result-showcase">
|
||||
<div class="result-item">
|
||||
<h4>出版级可视化图表</h4>
|
||||
<p>自动生成符合学术期刊标准的高质量图表</p>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<h4>结构化分析报告</h4>
|
||||
<p>完整的数据分析报告，包含方法学描述和结论</p>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<h4>可复现分析流程</h4>
|
||||
<p>提供完整的分析脚本和日志，支持结果追溯</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HSmaster -->
|
||||
<section id="hsmaster" class="product-section">
|
||||
<div class="product-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab(event, 'hsmaster-intro')">产品介绍</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'hsmaster-case')">应用案例</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'hsmaster-result')">技术参数</button>
|
||||
</div>
|
||||
|
||||
<!-- 产品介绍 -->
|
||||
<div id="hsmaster-intro" class="tab-content active">
|
||||
<h2>HSmaster植物基因分型系统</h2>
|
||||
<p class="intro-subtitle">高通量、高精度的植物基因分型解决方案</p>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/HSmaster全自动文库制备系统.png" alt="HSmaster全自动文库制备系统">
|
||||
<h4>HSmaster 全自动建库工作站</h4>
|
||||
<p>整合移液、PCR、酶标、抓手、堆栈、温控、振荡和离心模块，实现从核酸提取到建库的一步到位。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/HSmaster建库流程.png" alt="HSmaster建库流程">
|
||||
<h4>自动化建库流程</h4>
|
||||
<p>覆盖样本制备、核酸提取、PCR体系构建、文库纯化与质控，减少手工操作误差。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/文库流水线.png" alt="文库流水线">
|
||||
<h4>文库流水线</h4>
|
||||
<p>三台独立工作站串联完成核酸提取、PCR 体系构建、文库纯化，适配高通量批量生产。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>系统特色</h4>
|
||||
<ul>
|
||||
<li>高通量样品处理，全自动无人值守</li>
|
||||
<li>核酸提取、PCR扩增、文库质检全流程覆盖</li>
|
||||
<li>兼容 KASP 标记，模块化配置更灵活</li>
|
||||
<li>Hyper-seq 技术加持，实现低成本建库</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>应用领域</h4>
|
||||
<ul>
|
||||
<li>作物遗传育种</li>
|
||||
<li>种质资源评估</li>
|
||||
<li>品种鉴定与纯度检测</li>
|
||||
<li>分子标记辅助选择</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>自动化设备模块</h4>
|
||||
<ul>
|
||||
<li>植物样本制备模块：深孔板、裂解液和高速匀浆机完成破壁匀浆</li>
|
||||
<li>核酸提取和 PCR 模块：集成磁珠法、负压膜法、PCR、封膜和移液系统</li>
|
||||
<li>文库制备模块：自动化定位离心、低温、振荡、耗材堆栈和移液操作</li>
|
||||
<li>DNA 浓度检测模块：全波长光吸收酶标仪检测 DNA 浓度</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用案例 -->
|
||||
<div id="hsmaster-case" class="tab-content">
|
||||
<h2>应用案例</h2>
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/基于Hyper-seq自动化实验室的深度学习GS育种.png" alt="深度学习GS育种">
|
||||
<h4>深度学习 GS 育种</h4>
|
||||
<p>将 Hyper-seq 低成本基因测序与 LSTM 等预测模型结合，实现早代选择和精准育种决策。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/基于Hyper-seq自动化实验室的回交育种.png" alt="回交育种">
|
||||
<h4>回交育种</h4>
|
||||
<p>低成本、高通量筛选回交群体遗传背景，支持标记辅助选择和目标材料鉴定。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/应用-诱变育种.png" alt="诱变育种">
|
||||
<h4>诱变育种</h4>
|
||||
<p>检测诱变造成的全基因组变异热区，辅助抗逆新品种开发和诱变机制研究。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/应用-DNA水平溯源检验.png" alt="DNA水平溯源检验">
|
||||
<h4>DNA 水平溯源检验</h4>
|
||||
<p>建立动植物全基因组扫描体系，为引进物种鉴定、有害生物预警和来源追溯提供 SNP 指纹数据。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技术参数 -->
|
||||
<div id="hsmaster-result" class="tab-content">
|
||||
<h2>技术参数</h2>
|
||||
<div class="table-section">
|
||||
<h4>基础规格</h4>
|
||||
<table class="service-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>尺寸</td>
|
||||
<td>3400 x 890 x 2140 mm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>净重</td>
|
||||
<td>2.5T</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>电源</td>
|
||||
<td>100V-120V / 200V-240V AC，50/60Hz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>版位数</td>
|
||||
<td>60</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>通信接口</td>
|
||||
<td>3 个 USB，1 个以太网口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>显示方式</td>
|
||||
<td>20 寸触摸屏</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/自动化基因文库设备板位图.png" alt="自动化基因文库设备板位图">
|
||||
<h4>设备板位图</h4>
|
||||
<p>多模块板位布局适配批量样本处理与耗材自动调度。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/自动化核酸提取与PCR板位图.png" alt="自动化核酸提取与PCR板位图">
|
||||
<h4>核酸提取与 PCR 板位</h4>
|
||||
<p>支持核酸提取、PCR体系构建和下游建库流程连续运行。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/生信分析流程.png" alt="生信分析流程">
|
||||
<h4>配套生信流程</h4>
|
||||
<p>支持大规模基因型数据拆分、比对、SNP 检测和下游育种分析。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="about.html#contact">联系我们</a></li>
|
||||
<li><a href="about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/pages.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,473 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>资源中心 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
<link rel="stylesheet" href="../css/resources.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="advantages.html#synthesis">合成平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>资源中心</h1>
|
||||
<p>学术成果、案例精选、视频教程</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 资源中心内容 -->
|
||||
<div class="resources-wrapper">
|
||||
<!-- 左侧筛选 -->
|
||||
<aside class="resource-sidebar">
|
||||
<div class="filter-section">
|
||||
<h3>检索与筛选</h3>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>关键词检索</label>
|
||||
<input id="keyword-filter" type="search" placeholder="输入物种、技术、期刊或关键词">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>研究领域</label>
|
||||
<select id="field-filter">
|
||||
<option value="">全部领域</option>
|
||||
<option value="breeding">种业研究</option>
|
||||
<option value="microbe">微生物</option>
|
||||
<option value="plant">植物</option>
|
||||
<option value="animal">动物</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>产品类别</label>
|
||||
<select id="product-filter">
|
||||
<option value="">全部产品</option>
|
||||
<option value="hyper-seq">Hyper-seq</option>
|
||||
<option value="wgs">全基因组测序</option>
|
||||
<option value="ai">AI生信</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>年份</label>
|
||||
<select id="year-filter">
|
||||
<option value="">全部年份</option>
|
||||
<option value="2026">2026</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2024">2024</option>
|
||||
<option value="2023">2023</option>
|
||||
<option value="2022">2022</option>
|
||||
<option value="2021">2021</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>影响因子</label>
|
||||
<select id="impact-filter">
|
||||
<option value="">全部</option>
|
||||
<option value="high">IF > 10</option>
|
||||
<option value="mid">5 < IF ≤ 10</option>
|
||||
<option value="low">IF ≤ 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn-search">开始检索</button>
|
||||
<button class="reset-link" type="button">重置筛选</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="resource-content">
|
||||
<div class="resource-tabs" role="tablist" aria-label="资源中心分类">
|
||||
<button class="resource-tab active" type="button" data-tab="case">精选案例</button>
|
||||
<button class="resource-tab" type="button" data-tab="news">资讯动态</button>
|
||||
<button class="resource-tab" type="button" data-tab="video">视频中心</button>
|
||||
</div>
|
||||
|
||||
<section id="case" class="resource-section active-section" data-tab-panel="case">
|
||||
<h2>精选案例</h2>
|
||||
<div class="resource-grid">
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="high"
|
||||
data-keywords="Hyper-seq The Innovation marker-assisted selection genotyping 方法学 核心技术">
|
||||
<img class="resource-card-thumb"
|
||||
src="../公司资料/产品/HSmaster/图片/A novel,effective,and flexible marker-assisted selection and genotyping approach.png"
|
||||
alt="Hyper-seq方法学论文">
|
||||
<div class="card-header">
|
||||
<h4>Hyper-seq：新型灵活的标记辅助选择与基因分型方法</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">The Innovation</span><span
|
||||
class="if-badge">IF=32.1</span></div>
|
||||
<p class="card-desc">Hyper-seq 核心方法学论文，系统定义技术原理、建库策略与在分子育种中的应用潜力。</p>
|
||||
<div class="card-tags"><span class="tag">Hyper-seq</span><span class="tag">方法学</span><span
|
||||
class="tag">基因分型</span></div>
|
||||
<a href="https://www.cell.com/the-innovation/fulltext/S2666-6758(22)00050-9" target="_blank"
|
||||
rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2025" data-impact="high"
|
||||
data-keywords="木薯 Cassava pan-genome haplotype Molecular Plant Hyper-seq 泛基因组 单倍型图谱">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/hyper-seq.png" alt="木薯泛基因组研究">
|
||||
<div class="card-header">
|
||||
<h4>木薯泛基因组与单倍型图谱</h4><span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Molecular Plant</span><span
|
||||
class="if-badge">IF=24</span></div>
|
||||
<p class="card-desc">利用 Hyper-seq 等技术构建木薯泛基因组和单倍型图谱，解析栽培种及野生祖先的适应性进化。</p>
|
||||
<div class="card-tags"><span class="tag">泛基因组</span><span class="tag">木薯</span><span
|
||||
class="tag">Hyper-seq</span></div>
|
||||
<a href="https://europepmc.org/article/ppr/ppr685388" target="_blank" rel="noopener"
|
||||
class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="high"
|
||||
data-keywords="马铃薯 potato autotetraploid genome Plant Biotechnology Journal Hyper-seq 高杂合 同源四倍体">
|
||||
<img class="resource-card-thumb"
|
||||
src="../公司资料/产品/HSmaster/图片/Methodology and application of Hyper-seq technology (Hyper-seq-G, Hyper-seq-FD, and Hyper-seq-INC).png"
|
||||
alt="马铃薯同源四倍体基因组">
|
||||
<div class="card-header">
|
||||
<h4>马铃薯同源四倍体基因组解析</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Plant Biotechnology Journal</span><span
|
||||
class="if-badge">IF=13.263</span></div>
|
||||
<p class="card-desc">应用 Hyper-seq 技术解析高杂合同源四倍体马铃薯基因组，为复杂倍性作物研究提供重要参考。</p>
|
||||
<div class="card-tags"><span class="tag">马铃薯</span><span class="tag">四倍体</span><span
|
||||
class="tag">基因组</span></div>
|
||||
<a href="https://onlinelibrary.wiley.com/doi/full/10.1111/pbi.13883" target="_blank"
|
||||
rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="mid"
|
||||
data-keywords="象草 Elephant Grass chromosome-scale genome Molecular Ecology Resources Hyper-seq 异源四倍体 生物量">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/引进动植物样本.png" alt="象草基因组研究">
|
||||
<div class="card-header">
|
||||
<h4>象草染色体水平基因组与生物量积累研究</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Molecular Ecology Resources</span><span
|
||||
class="if-badge">IF=8.678</span></div>
|
||||
<p class="card-desc">构建象草染色体水平基因组，探索异源四倍体物种形成及高生物量积累机制。</p>
|
||||
<div class="card-tags"><span class="tag">象草</span><span class="tag">基因组组装</span><span
|
||||
class="tag">Hyper-seq</span></div>
|
||||
<a href="https://onlinelibrary.wiley.com/doi/abs/10.1111/1755-0998.13612" target="_blank"
|
||||
rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2021" data-impact="mid"
|
||||
data-keywords="茶树 Tea GWAS flavor metabolites Horticulture Research Hyper-seq 风味代谢物 分子标记">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/生信分析流程.png" alt="茶树风味代谢物GWAS">
|
||||
<div class="card-header">
|
||||
<h4>茶树风味代谢物相关分子标记 GWAS</h4><span class="year-badge">2021</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Horticulture Research</span><span
|
||||
class="if-badge">IF=7.291</span></div>
|
||||
<p class="card-desc">基于 Hyper-seq 开展基因分型和全基因组关联分析，定位茶叶风味相关代谢物分子标记。</p>
|
||||
<div class="card-tags"><span class="tag">茶树</span><span class="tag">GWAS</span><span
|
||||
class="tag">风味代谢</span></div>
|
||||
<a href="https://academic.oup.com/hr/article/doi/10.1038/s41438-021-00477-3/6446588?guestAccessKey="
|
||||
target="_blank" rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="wgs"
|
||||
data-year="2025" data-impact="mid"
|
||||
data-keywords="甘草 Glycyrrhiza comparative genomics Plant Journal bioactive compounds 比较基因组 活性成分">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/训练群体和预测群体的选择.png" alt="甘草比较基因组研究">
|
||||
<div class="card-header">
|
||||
<h4>三种甘草属植物比较基因组研究</h4><span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">The Plant Journal</span><span
|
||||
class="if-badge">IF=7.2</span></div>
|
||||
<p class="card-desc">比较三种药用甘草属植物基因组，揭示重要活性成分生产相关候选基因。</p>
|
||||
<div class="card-tags"><span class="tag">比较基因组</span><span class="tag">甘草</span><span
|
||||
class="tag">候选基因</span></div>
|
||||
<a href="https://onlinelibrary.wiley.com/doi/full/10.1111/tpj.70223" target="_blank"
|
||||
rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="wgs"
|
||||
data-year="2024" data-impact="high"
|
||||
data-keywords="白兰 Michelia alba haplotype genome Molecular Horticulture methylation flower characteristics 单倍型基因组 甲基化 花性状">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png"
|
||||
alt="白兰单倍型基因组研究">
|
||||
<div class="card-header">
|
||||
<h4>白兰高质量单倍型基因组研究</h4><span class="year-badge">2024</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Molecular Horticulture</span><span
|
||||
class="if-badge">IF=10.6</span></div>
|
||||
<p class="card-desc">构建 Michelia alba 高质量单倍型基因组，揭示甲基化模式与花性状差异。</p>
|
||||
<div class="card-tags"><span class="tag">单倍型基因组</span><span class="tag">白兰</span><span
|
||||
class="tag">表观调控</span></div>
|
||||
<a href="https://link.springer.com/article/10.1186/s43897-024-00098-z" target="_blank"
|
||||
rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="case" data-field="plant" data-product="wgs"
|
||||
data-year="2021" data-impact="mid"
|
||||
data-keywords="百香果 passion fruit chromosome-scale genome Horticulture Research evolution flavor synthesis 基因组 风味合成">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/鉴定溯源.png" alt="百香果基因组研究">
|
||||
<div class="card-header">
|
||||
<h4>百香果染色体水平基因组与风味合成研究</h4><span class="year-badge">2021</span>
|
||||
</div>
|
||||
<div class="card-meta"><span class="journal">Horticulture Research</span><span
|
||||
class="if-badge">IF=7.291</span></div>
|
||||
<p class="card-desc">构建百香果染色体水平基因组，解析物种进化与风味合成相关机制。</p>
|
||||
<div class="card-tags"><span class="tag">百香果</span><span class="tag">基因组</span><span
|
||||
class="tag">风味合成</span></div>
|
||||
<a href="https://www.maxapress.com/article/doi/10.48130/tp-0024-0021?viewType=HTML"
|
||||
target="_blank" rel="noopener" class="card-link">查看论文 →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="news" class="resource-section" data-tab-panel="news">
|
||||
<h2>资讯动态</h2>
|
||||
<div class="resource-grid">
|
||||
<article class="resource-card" data-type="news" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2025" data-impact="high"
|
||||
data-keywords="Hyper-seq 智能自动化 水稻 大豆 基因组选择 全基因组数据采集 瀚辰光翼 海南大学">
|
||||
<img class="resource-card-thumb" src="../公司资料/资讯/2025-2-12/自动化设备.jpg" alt="Hyper-seq智能自动化资讯">
|
||||
<div class="card-header">
|
||||
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4><span class="year-badge">2025</span>
|
||||
</div>
|
||||
<p class="card-desc">智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究，提升育种数据采集效率。</p>
|
||||
<div class="card-tags"><span class="tag">资讯</span><span class="tag">智能自动化</span><span
|
||||
class="tag">基因组选择</span></div>
|
||||
<a href="https://mp.weixin.qq.com/s/p7izwxbE_vgt1AMg93giyg" target="_blank" rel="noopener"
|
||||
class="card-link">查看原文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="news" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="high"
|
||||
data-keywords="Hyper-seq 方法学 The Innovation 公众号 技术原理 基因分型 标记辅助选择">
|
||||
<img class="resource-card-thumb"
|
||||
src="../公司资料/产品/HSmaster/图片/A novel,effective,and flexible marker-assisted selection and genotyping approach.png"
|
||||
alt="Hyper-seq方法学公众号解读">
|
||||
<div class="card-header">
|
||||
<h4>Hyper-seq 方法学论文公众号解读</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<p class="card-desc">围绕 Hyper-seq 的一步 PCR、低成本建库和灵活标记密度调控，解读其在标记辅助选择中的潜力。</p>
|
||||
<div class="card-tags"><span class="tag">公众号</span><span class="tag">方法学</span><span
|
||||
class="tag">Hyper-seq</span></div>
|
||||
<a href="https://mp.weixin.qq.com/s/wQnx3U8xaKNPT51Sb0MCbw" target="_blank" rel="noopener"
|
||||
class="card-link">查看推文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="news" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2025" data-impact="high"
|
||||
data-keywords="木薯 Cassava Molecular Plant 公众号 泛基因组 单倍型图谱 适应性进化">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/hyper-seq.png" alt="木薯泛基因组公众号解读">
|
||||
<div class="card-header">
|
||||
<h4>木薯泛基因组与单倍型图谱研究解读</h4><span class="year-badge">2025</span>
|
||||
</div>
|
||||
<p class="card-desc">聚焦木薯栽培种及野生祖先的泛基因组资源，呈现 Hyper-seq 在大规模基因型数据构建中的应用。</p>
|
||||
<div class="card-tags"><span class="tag">公众号</span><span class="tag">木薯</span><span
|
||||
class="tag">泛基因组</span></div>
|
||||
<a href="https://mp.weixin.qq.com/s/FdhgQAt_u-WBudSac-AU3A" target="_blank" rel="noopener"
|
||||
class="card-link">查看推文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="news" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="high"
|
||||
data-keywords="马铃薯 potato Plant Biotechnology Journal 公众号 高杂合 四倍体 基因组">
|
||||
<img class="resource-card-thumb"
|
||||
src="../公司资料/产品/HSmaster/图片/Methodology and application of Hyper-seq technology (Hyper-seq-G, Hyper-seq-FD, and Hyper-seq-INC).png"
|
||||
alt="马铃薯基因组公众号解读">
|
||||
<div class="card-header">
|
||||
<h4>马铃薯同源四倍体基因组研究解读</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<p class="card-desc">解读高杂合同源四倍体马铃薯基因组解析工作，以及 Hyper-seq 对复杂倍性作物研究的支撑价值。</p>
|
||||
<div class="card-tags"><span class="tag">公众号</span><span class="tag">马铃薯</span><span
|
||||
class="tag">四倍体</span></div>
|
||||
<a href="https://mp.weixin.qq.com/s/H_yj3oQ6Gyjty3MhxoGu0Q" target="_blank" rel="noopener"
|
||||
class="card-link">查看推文 →</a>
|
||||
</article>
|
||||
|
||||
<article class="resource-card" data-type="news" data-field="plant" data-product="hyper-seq"
|
||||
data-year="2022" data-impact="mid"
|
||||
data-keywords="象草 Elephant Grass Molecular Ecology Resources 公众号 异源四倍体 生物量 基因组组装">
|
||||
<img class="resource-card-thumb" src="../公司资料/产品/HSmaster/图片/引进动植物样本.png" alt="象草基因组公众号解读">
|
||||
<div class="card-header">
|
||||
<h4>象草染色体水平基因组研究解读</h4><span class="year-badge">2022</span>
|
||||
</div>
|
||||
<p class="card-desc">梳理象草异源四倍体物种形成和高生物量积累研究，展示基因组技术在能源草育种中的价值。</p>
|
||||
<div class="card-tags"><span class="tag">公众号</span><span class="tag">象草</span><span
|
||||
class="tag">基因组</span></div>
|
||||
<a href="https://mp.weixin.qq.com/s/vVWOKw-Gq4Asi7a1GrdvIg" target="_blank" rel="noopener"
|
||||
class="card-link">查看推文 →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="video" class="resource-section" data-tab-panel="video">
|
||||
<h2>视频中心</h2>
|
||||
<div class="resource-grid video-card-grid">
|
||||
<article class="resource-card video-resource-card" data-type="video" data-field="breeding"
|
||||
data-product="hyper-seq" data-year="2026" data-impact=""
|
||||
data-keywords="Hyper-seq 大数据育种 视频 基因分型 高通量">
|
||||
<video controls preload="metadata" poster="../公司资料/产品/HSmaster/图片/hyper-seq.png">
|
||||
<source src="../公司资料/服务/Hyper-seq测序/Hyper-seq助力大数据育种变革.mp4" type="video/mp4">
|
||||
您的浏览器暂不支持视频播放。
|
||||
</video>
|
||||
<div class="card-header">
|
||||
<h4>Hyper-seq 助力大数据育种变革</h4><span class="year-badge">视频</span>
|
||||
</div>
|
||||
<p class="card-desc">展示 Hyper-seq 在低成本、高通量基因分型和大数据育种中的应用价值。</p>
|
||||
</article>
|
||||
|
||||
<article class="resource-card video-resource-card" data-type="video" data-field="breeding"
|
||||
data-product="hyper-seq" data-year="2026" data-impact=""
|
||||
data-keywords="海大南繁 海南大学 育种中心 视频 南繁 科研">
|
||||
<video controls preload="metadata" poster="../公司资料/资讯/2025-2-12/水稻图片.png">
|
||||
<source src="../公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
|
||||
您的浏览器暂不支持视频播放。
|
||||
</video>
|
||||
<div class="card-header">
|
||||
<h4>海大南繁：走向世界的育种中心</h4><span class="year-badge">视频</span>
|
||||
</div>
|
||||
<p class="card-desc">呈现海南大学南繁科研与育种创新基础，呼应海古纪在南繁场景下的技术服务布局。</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p id="empty-result" class="empty-result">当前标签下未检索到匹配结果，请调整关键词或筛选范围。</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="about.html#contact">联系我们</a></li>
|
||||
<li><a href="about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/resources.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,725 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>服务 - 海古纪生物科技</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/nav.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<link rel="stylesheet" href="../css/pages.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="products.html#ai-scientist">AI生信科学家</a>
|
||||
<a href="products.html#hsmaster">HSmaster植物基因分型系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="services.html#hyper-seq">Hyper-seq测序</a>
|
||||
<div class="submenu-trigger">
|
||||
<a href="services.html#wgs">全基因组重测序</a>
|
||||
</div>
|
||||
<a href="services.html#process-dev">实验流程开发与技术支持</a>
|
||||
<a href="services.html#ai-agri">AI农业领域定制</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="applications.html#breeding">种业研究</a>
|
||||
<a href="applications.html#microbe">微生物研究</a>
|
||||
<a href="applications.html#animal-plant">动植物研究</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="advantages.html#sequencing">测序平台</a>
|
||||
<a href="advantages.html#mass-spec">质谱平台</a>
|
||||
<a href="advantages.html#synthesis">合成平台</a>
|
||||
<a href="advantages.html#analysis">分析平台</a>
|
||||
<a href="advantages.html#lab">核心实验室</a>
|
||||
<a href="advantages.html#css">客户服务系统</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="resources.html#case">精选案例</a>
|
||||
<a href="resources.html#news">资讯动态</a>
|
||||
<a href="resources.html#video">视频中心</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="about.html#haiguji">海古纪</a>
|
||||
<a href="about.html#contact">联系我们</a>
|
||||
<a href="about.html#news">最新动态</a>
|
||||
<a href="about.html#privacy">隐私协议</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-icon" title="公众号">☷</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="qrcode-container">
|
||||
<p>公众号二维码</p>
|
||||
<div class="qrcode qr-empty">二维码</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
||||
<a href="about.html#contact" class="btn-contact">联系我们</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<section class="page-hero">
|
||||
<div class="page-hero-content">
|
||||
<h1>测序与分析服务</h1>
|
||||
<p>从样品到数据，提供一站式基因组学解决方案</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 服务内容 -->
|
||||
<div class="products-container">
|
||||
<!-- 左侧导航 -->
|
||||
<aside class="product-sidebar">
|
||||
<nav class="product-nav">
|
||||
<div class="nav-section">
|
||||
<h3>服务类别</h3>
|
||||
<ul>
|
||||
<li><a href="#hyper-seq" class="nav-item active">Hyper-seq测序</a></li>
|
||||
<li><a href="#wgs" class="nav-item">全基因组重测序</a></li>
|
||||
<li><a href="#process-dev" class="nav-item">实验流程开发与技术支持</a></li>
|
||||
<li><a href="#ai-agri" class="nav-item">AI农业领域定制</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="product-content">
|
||||
<!-- Hyper-seq 测序 -->
|
||||
<section id="hyper-seq" class="product-section">
|
||||
<div class="product-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab(event, 'hyper-intro')">服务介绍</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'hyper-case')">应用案例</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'hyper-result')">技术流程</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'hyper-sample')">送样要求</button>
|
||||
</div>
|
||||
|
||||
<!-- 服务介绍 -->
|
||||
<div id="hyper-intro" class="tab-content active">
|
||||
<h2>Hyper-seq 超低成本测序技术</h2>
|
||||
<p class="intro-subtitle">极低成本、高效、灵活、高通量的DNA测序文库制备与基因分型技术</p>
|
||||
<div class="service-video-block service-video-feature">
|
||||
<video controls preload="metadata" poster="../公司资料/产品/HSmaster/图片/hyper-seq.png">
|
||||
<source src="../公司资料/服务/Hyper-seq测序/Hyper-seq助力大数据育种变革.mp4" type="video/mp4">
|
||||
您的浏览器暂不支持视频播放。
|
||||
</video>
|
||||
<div>
|
||||
<h4>Hyper-seq 助力大数据育种变革</h4>
|
||||
<p>通过视频快速了解 Hyper-seq 在高通量、低成本基因分型和智能育种中的应用场景。视频下方继续展示服务介绍、技术优势与适用模式。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术">
|
||||
<h4>Hyper-seq 技术</h4>
|
||||
<p>无需酶切和接头连接，通过一步 PCR 完成简化基因组、Barcode 添加和序列扩增。</p>
|
||||
</div>
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/Methodology and application of Hyper-seq technology (Hyper-seq-G, Hyper-seq-FD, and Hyper-seq-INC).png"
|
||||
alt="Hyper-seq方法与应用">
|
||||
<h4>三种核心模式</h4>
|
||||
<p>Hyper-seq-G、Hyper-seq-FD、Hyper-seq-INC 按需覆盖常规育种、大基因组低成本分型和高精度定位。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-box">
|
||||
<h4>🏆 技术成就</h4>
|
||||
<ul>
|
||||
<li>国际发明专利授权（专利号：No.2020/06979）</li>
|
||||
<li>全国颠覆性技术大赛领域赛优秀奖</li>
|
||||
<li>第一届"崖州湾杯"科技创新大赛一等奖</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h4>四大核心优势</h4>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>① 极低成本</h4>
|
||||
<ul>
|
||||
<li>1G基因组样本，建库测序成本每个样本不到10美元</li>
|
||||
<li>单个样本分析成本50–150元人民币</li>
|
||||
<li>较同类技术成本降低50%以上</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<h4>② 极简高效</h4>
|
||||
<ul>
|
||||
<li>仅需一步PCR</li>
|
||||
<li>建库时间缩短至3–5小时</li>
|
||||
<li>无需酶切、无需连接接头</li>
|
||||
<li>DNA样品质量要求低</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<h4>③ 灵活调控</h4>
|
||||
<ul>
|
||||
<li>灵活调节标记密度</li>
|
||||
<li>内置三种核心模式</li>
|
||||
<li>常规模式、极简模式、高密度模式</li>
|
||||
<li>覆盖全场景应用</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<h4>④ 高通量</h4>
|
||||
<ul>
|
||||
<li>单次完成96或384孔样本混合建库测序</li>
|
||||
<li>1000份水稻样品测序仅需一天</li>
|
||||
<li>完全自动化流程</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<h4>Hyper-seq三种核心模式</h4>
|
||||
<table class="service-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>模式</th>
|
||||
<th>标记覆盖度</th>
|
||||
<th>适用物种</th>
|
||||
<th>典型应用</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hyper-seq-G</td>
|
||||
<td>约10%基因组</td>
|
||||
<td>大多数物种</td>
|
||||
<td>常规育种研究</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hyper-seq-FD</td>
|
||||
<td>0.0024–4.2%基因组</td>
|
||||
<td>大基因组物种（小麦、玉米等）</td>
|
||||
<td>极低成本育种</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hyper-seq-INC</td>
|
||||
<td>约60%基因组</td>
|
||||
<td>所有物种</td>
|
||||
<td>高精度性状定位</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成功案例 -->
|
||||
<div id="hyper-case" class="tab-content">
|
||||
<h2>成功案例</h2>
|
||||
<div class="case-grid">
|
||||
<div class="case-item">
|
||||
<h4>马铃薯同源四倍体基因组研究</h4>
|
||||
<p><strong>发表期刊：</strong>Plant Biotechnology Journal (IF=13.8)</p>
|
||||
<p>利用Hyper-seq对150份四倍体马铃薯进行GWAS分析，成功揭示与块茎肉色显著相关的关键基因。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>美人蕉科植物基因组研究</h4>
|
||||
<p><strong>发表期刊：</strong>Frontiers in Plant Science (IF=6.627)</p>
|
||||
<p>对241份美人蕉材料进行分析，检测到1565万个SNP和InDel标记，完成群体遗传结构与叶片性状GWAS分析。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>槟榔果实形状GWAS研究</h4>
|
||||
<p><strong>发表期刊：</strong>International Journal of Molecular Sciences (IF=5.599)</p>
|
||||
<p>利用Hyper-seq对槟榔群体进行全基因组关联分析，定位调控果实形状的关键候选基因。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技术流程 -->
|
||||
<div id="hyper-result" class="tab-content">
|
||||
<h2>技术流程与应用领域</h2>
|
||||
<div class="workflow-section">
|
||||
<div class="workflow">
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-name">DNA提取</div>
|
||||
<p>新鲜叶片或 DNA 样本快速提取</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-name">一步PCR</div>
|
||||
<p>3-5 小时完成建库</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-name">混合测序</div>
|
||||
<p>96 或 384 样本混合测序</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-name">SNP检测</div>
|
||||
<p>Barcode 拆分与标记检测</p>
|
||||
</div>
|
||||
<div class="workflow-arrow">→</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-name">应用分析</div>
|
||||
<p>GWAS、QTL、指纹图谱、选择育种</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-grid">
|
||||
<div class="media-card">
|
||||
<img src="../公司资料/产品/HSmaster/图片/HSmaster建库流程.png" alt="Hyper-seq建库流程">
|
||||
<h4>建库流程</h4>
|
||||
<p>流程短、兼容性强，适合大规模群体样本快速产出基因型数据。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>① 作物遗传背景筛选与回交育种</h4>
|
||||
<p>快速、低成本地筛选回交育种中的遗传背景，精准鉴定目标材料</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>② 核心种质资源评估与构建</h4>
|
||||
<p>从庞大的种质资源库中快速筛选核心子集</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>③ DNA指纹图谱与品种鉴定</h4>
|
||||
<p>高准确性、成本低的品种资源多样性评估和纯度鉴定</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>④ 全基因组关联分析（GWAS）</h4>
|
||||
<p>检测到的分子标记数量远超传统育种芯片</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑤ 遗传图谱构建与QTL定位</h4>
|
||||
<p>灵活可调的标记密度，按需精确锁定目标QTL位点</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑥ 分子标记辅助选择育种</h4>
|
||||
<p>海量SNP/InDel标记注入"大数据基因燃料"</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑦ 基因组选择育种</h4>
|
||||
<p>构建全基因组选择模型，实现精准智能化育种</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑧ 生物安全防控与分子检测</h4>
|
||||
<p>快速分子检测，为检验检疫提供高效技术手段</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑨ 目标关键基因与新候选基因定位</h4>
|
||||
<p>快速锁定目标性状相关的关键基因或新候选基因位点</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>⑩ 物种鉴定与分类</h4>
|
||||
<p>基因组水平的分子标记比对，实现精准鉴定</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hyper-sample" class="tab-content">
|
||||
<h2>送样要求</h2>
|
||||
<div class="table-section">
|
||||
<h4>常见样本建议</h4>
|
||||
<table class="service-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>样本类型</th>
|
||||
<th>建议量</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>植物组织</td>
|
||||
<td>GBS/Hyper-seq 类项目建议至少 0.5 g</td>
|
||||
<td>优先幼叶、幼芽，避免保存过久和反复冻融</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DNA 样本</td>
|
||||
<td>GBS 文库总量 > 300 ng，浓度 > 10 ng/μL</td>
|
||||
<td>建议提供 Qubit、NanoDrop、凝胶电泳等质控结果</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>动物组织</td>
|
||||
<td>大于 0.5 g</td>
|
||||
<td>分割后液氮速冻，干冰运输</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="highlight-box">
|
||||
<h4>取样提醒</h4>
|
||||
<p>Hyper-seq 对 DNA 样品兼容性较强，但大规模项目更依赖样品一致性。建议采样前统一组织部位、保存方式、样品命名和批次信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 全基因组重测序 -->
|
||||
<section id="wgs" class="product-section">
|
||||
<div class="product-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab(event, 'wgs-intro')">产品介绍</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'wgs-case')">案例解析</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'wgs-result')">结果展示</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'wgs-sample')">送样建议</button>
|
||||
<button class="tab-btn" onclick="switchTab(event, 'wgs-faq')">常见问题</button>
|
||||
</div>
|
||||
|
||||
<div id="wgs-intro" class="tab-content active">
|
||||
<h2>全基因组重测序</h2>
|
||||
<p class="intro-subtitle">面向种业、动植物、微生物与生态进化研究的全基因组变异检测服务</p>
|
||||
<div class="prose-block">
|
||||
<p>全基因组重测序是在已有参考基因组的基础上，对个体、品系、群体或菌株进行高通量测序，并通过序列比对和变异检测，系统识别 SNP、InDel、SV、CNV
|
||||
等遗传变异。该方案适用于种质资源评价、动植物育种、微生物比较基因组、群体进化、环境适应和重要性状解析等方向。</p>
|
||||
<p>服务流程覆盖样本质控、文库构建、DNBSEQ/高通量平台测序、数据质控、参考基因组比对、变异检测、功能注释和项目报告。分析结果可继续扩展到群体结构、系统发育、选择信号、GWAS、泛基因组或菌株溯源等下游研究。
|
||||
</p>
|
||||
</div>
|
||||
<figure class="inline-figure">
|
||||
<img src="../公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程">
|
||||
<figcaption>从测序数据到变异检测、群体分析和生物学解释的标准分析路径</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item" id="wgs-animal-plant">
|
||||
<h4>动植物全基因组重测序</h4>
|
||||
<ul>
|
||||
<li>服务作物、林木、花卉、中药材、畜禽、水产和野生资源研究</li>
|
||||
<li>支持种质资源评价、遗传多样性、GWAS、QTL 和选择信号分析</li>
|
||||
<li>可结合 Hyper-seq 和 HSmaster 建立高通量育种数据体系</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item" id="wgs-microbe">
|
||||
<h4>微生物全基因组重测序</h4>
|
||||
<ul>
|
||||
<li>面向细菌、真菌、病毒和工程菌株比较研究</li>
|
||||
<li>支持耐药基因、毒力因子、质粒结构、菌株分型和传播溯源</li>
|
||||
<li>可用于工业菌种稳定性验证和污染排查</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item" id="wgs-exome">
|
||||
<h4>目标区域与候选基因测序</h4>
|
||||
<ul>
|
||||
<li>聚焦候选基因区、QTL 区间、标记区域或定制目标区域</li>
|
||||
<li>在降低测序成本的同时提高目标区域覆盖深度</li>
|
||||
<li>适合大群体育种筛查、候选位点验证和特定通路研究</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item" id="wgs-denovo">
|
||||
<h4>基因组从头测序</h4>
|
||||
<ul>
|
||||
<li>适用于无高质量参考基因组或需要构建新参考的物种</li>
|
||||
<li>可联合长读长、短读长和 Hi-C 等数据提升组装连续性</li>
|
||||
<li>为后续重测序、泛基因组和功能基因挖掘建立基础</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>多组学扩展</h4>
|
||||
<ul>
|
||||
<li>可与转录组、表观组、蛋白质组、代谢组和表型数据联合分析</li>
|
||||
<li>适合复杂性状解析和候选基因优先级排序</li>
|
||||
<li>支持 AI 生信科学家自动规划分析流程</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wgs-case" class="tab-content">
|
||||
<h2>案例解析</h2>
|
||||
<div class="case-grid">
|
||||
<div class="case-item">
|
||||
<h4>作物群体变异解析</h4>
|
||||
<p>对自然群体、杂交后代和核心种质进行全基因组重测序，建立高质量变异集，结合农艺表型筛选性状相关位点与候选基因。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>作物种质资源评价</h4>
|
||||
<p>对栽培种、地方品种和野生近缘种进行群体重测序，解析群体结构、遗传多样性和驯化选择信号。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>畜禽水产育种研究</h4>
|
||||
<p>围绕生长、繁殖、抗病、肉质和环境适应等性状开展群体变异检测，为基因组选择提供标记资源。</p>
|
||||
</div>
|
||||
<div class="case-item">
|
||||
<h4>农业与环境菌株比较</h4>
|
||||
<p>对根际菌、发酵菌、工程菌和环境菌株进行全基因组比较，分析功能基因、质粒结构、基因组稳定性和系统发育关系。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wgs-result" class="tab-content">
|
||||
<h2>结果展示</h2>
|
||||
<div class="prose-block">
|
||||
<p>项目交付包括原始数据质控报告、比对统计、覆盖度分布、变异检测结果、功能注释表、图形化统计结果和项目总结报告。群体项目可进一步输出 PCA、群体结构、系统发育树、LD
|
||||
衰减、选择信号、GWAS 曼哈顿图与候选基因列表。</p>
|
||||
</div>
|
||||
<figure class="inline-figure">
|
||||
<img src="../公司资料/产品/HSmaster/图片/训练群体和预测群体的选择.png" alt="训练群体和预测群体选择">
|
||||
<figcaption>群体重测序结果可用于训练群体与预测群体设计、基因组选择和育种决策</figcaption>
|
||||
</figure>
|
||||
<div class="table-section">
|
||||
<h4>主要交付结果</h4>
|
||||
<table class="service-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>结果类型</th>
|
||||
<th>内容</th>
|
||||
<th>用途</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>数据质控</td>
|
||||
<td>Q30、GC、过滤 reads、测序深度和覆盖度</td>
|
||||
<td>评估数据可靠性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>变异检测</td>
|
||||
<td>SNP、InDel、SV、CNV 及注释文件</td>
|
||||
<td>构建高质量变异资源</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>群体分析</td>
|
||||
<td>PCA、ADMIXTURE、系统发育、遗传多样性</td>
|
||||
<td>解析群体关系与进化背景</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>功能分析</td>
|
||||
<td>基因注释、GO/KEGG 富集、候选基因筛选</td>
|
||||
<td>支撑论文与后续实验验证</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wgs-sample" class="tab-content">
|
||||
<h2>送样建议</h2>
|
||||
<p class="intro-subtitle">不同样本类型需提前确认物种、组织来源、保存状态、样本量和项目目标。</p>
|
||||
<div class="table-section">
|
||||
<table class="service-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>样本类型</th>
|
||||
<th>建议量</th>
|
||||
<th>注意事项</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>DNA 样本</td>
|
||||
<td>总量 > 400 ng，浓度 > 24 ng/μL</td>
|
||||
<td>建议 Qubit 定量，提供 NanoDrop、凝胶或 Agilent 质控结果</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>植物组织</td>
|
||||
<td>WGS 文库至少 0.2 g，总体建议 2 g 以上</td>
|
||||
<td>优先幼叶、幼芽，避免反复冻融和长期保存</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>动物组织</td>
|
||||
<td>大于 0.1 g</td>
|
||||
<td>肌肉、鳍条、羽毛、耳组织等材料需冰上处理，液氮速冻或 -80℃ 保存，干冰运输</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>细胞样本</td>
|
||||
<td>细胞量 > 5×10<sup>6</sup></td>
|
||||
<td>优先生长对数期细胞，离心去上清后液氮速冻</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>微生物/环境样本</td>
|
||||
<td>按项目确认</td>
|
||||
<td>提前说明培养条件、样本来源、菌株用途和保存方式</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="highlight-box">
|
||||
<h4>送样提醒</h4>
|
||||
<p>为保证 DNA 质量和项目进度，请尽量统一采样部位、保存方式和样品命名；微生物样本需提前沟通培养条件、菌株来源和运输方式。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wgs-faq" class="tab-content">
|
||||
<h2>常见问题</h2>
|
||||
<div class="application-list">
|
||||
<div class="app-item">
|
||||
<h4>如何选择测序深度？</h4>
|
||||
<p>单个样本精细变异检测通常需要更高深度；大群体研究可根据群体规模、基因组大小和目标分析选择低至中深度方案。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>没有参考基因组怎么办？</h4>
|
||||
<p>可先开展基因组从头测序构建参考，也可选择近缘物种参考基因组进行探索性分析，但结果解释需更谨慎。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>重测序和 Hyper-seq 如何选择？</h4>
|
||||
<p>全基因组重测序覆盖更完整，适合系统变异发现；Hyper-seq 成本更低、通量更高，适合大规模育种分型和标记筛选。</p>
|
||||
</div>
|
||||
<div class="app-item">
|
||||
<h4>是否支持后续个性化分析？</h4>
|
||||
<p>支持。可根据项目目标扩展 GWAS、选择信号、群体历史、菌株溯源、多组学关联和 AI 辅助报告解读。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 实验流程开发与技术支持 -->
|
||||
<section id="process-dev" class="product-section">
|
||||
<h2>实验流程开发与技术支持</h2>
|
||||
<p class="intro-subtitle">依托原创技术，定制全流程实验方案</p>
|
||||
<div class="prose-block">
|
||||
<p>依托公司原创技术优势，为客户定制实验流程（如Hyper-seq实验流程），提供技术培训、流程植入、后续技术支持等服务（如协议相关合作内容）；同时可结合客户实验室硬件配置，提供实验流程适配性开发、技术问题解答、实验人员实操指导等全流程支持。</p>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>定制实验流程</h4>
|
||||
<ul>
|
||||
<li>基于Hyper-seq等原创技术定制专属实验方案</li>
|
||||
<li>结合客户实验室硬件配置进行流程适配</li>
|
||||
<li>实验流程优化与标准化</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>技术培训与植入</h4>
|
||||
<ul>
|
||||
<li>实验人员实操指导与培训</li>
|
||||
<li>流程植入与实验室体系对接</li>
|
||||
<li>技术问题全程解答</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>后续技术支持</h4>
|
||||
<ul>
|
||||
<li>协议相关的长期合作支持</li>
|
||||
<li>实验流程持续优化与迭代</li>
|
||||
<li>新技术同步更新服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI农业领域定制 -->
|
||||
<section id="ai-agri" class="product-section">
|
||||
<h2>AI农业领域定制</h2>
|
||||
<p class="intro-subtitle">AI赋能农业科研与产业应用</p>
|
||||
<div class="prose-block">
|
||||
<p>结合人工智能技术与农业科研/产业需求，定制化开发农业相关AI分析模型（如作物性状预测、育种数据挖掘、病虫害分子检测AI识别等），提供模型训练、部署及后续技术优化，助力AI在农业领域的落地应用。</p>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<h4>作物性状预测</h4>
|
||||
<ul>
|
||||
<li>基于多组学数据构建产量、品质等性状预测模型</li>
|
||||
<li>整合环境与表型数据的智能预测</li>
|
||||
<li>育种决策辅助支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>育种数据挖掘</h4>
|
||||
<ul>
|
||||
<li>大规模基因型-表型关联分析</li>
|
||||
<li>基因组选择模型构建与优化</li>
|
||||
<li>关键候选基因智能筛选</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>AI分子检测</h4>
|
||||
<ul>
|
||||
<li>病虫害分子检测AI识别</li>
|
||||
<li>智能图像识别与诊断</li>
|
||||
<li>自动化检测流程开发</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h4>模型部署与优化</h4>
|
||||
<ul>
|
||||
<li>模型训练与部署服务</li>
|
||||
<li>后续技术优化与迭代</li>
|
||||
<li>定制化AI解决方案</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>联系信息</h3>
|
||||
<p>三亚海古纪生物科技有限公司</p>
|
||||
<p>谢经理：16689001917</p>
|
||||
<p>基因文库技术：江肆肆 18605560158</p>
|
||||
<p>育种数据服务：廖树欣 18889202989</p>
|
||||
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关于海古纪</h3>
|
||||
<ul>
|
||||
<li><a href="about.html#haiguji">公司简介</a></li>
|
||||
<li><a href="about.html#contact">联系我们</a></li>
|
||||
<li><a href="about.html#privacy">隐私协议</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>合作伙伴</h3>
|
||||
<div class="footer-partners">
|
||||
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
||||
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
||||
src="../公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
<div class="qr-slot">微信</div>
|
||||
<div class="qr-slot">微博</div>
|
||||
<div class="qr-slot">公众号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../js/pages.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const net = require('net');
|
||||
const tls = require('tls');
|
||||
|
||||
const ROOT = path.resolve(__dirname, '..');
|
||||
const DATA_DIR = path.join(ROOT, 'data');
|
||||
const MESSAGE_FILE = path.join(DATA_DIR, 'contact-messages.json');
|
||||
const RECIPIENT = process.env.CONTACT_NOTIFY_TO || 'h4erj@outlook.com';
|
||||
|
||||
function readMessages() {
|
||||
if (!fs.existsSync(MESSAGE_FILE)) return [];
|
||||
try {
|
||||
const data = JSON.parse(fs.readFileSync(MESSAGE_FILE, 'utf8'));
|
||||
return Array.isArray(data) ? data : [];
|
||||
} catch (_) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function writeMessages(messages) {
|
||||
fs.mkdirSync(DATA_DIR, { recursive: true });
|
||||
fs.writeFileSync(MESSAGE_FILE, JSON.stringify(messages, null, 2) + '\n', 'utf8');
|
||||
}
|
||||
|
||||
function encodeHeader(value) {
|
||||
return `=?UTF-8?B?${Buffer.from(value, 'utf8').toString('base64')}?=`;
|
||||
}
|
||||
|
||||
function formatLine(item) {
|
||||
const email = item.email || '未填邮箱';
|
||||
const phone = item.phone ? `${item.countryCode || ''}${item.phone}` : '未填电话';
|
||||
const type = item.inquiryType || '未填写咨询类型';
|
||||
const message = String(item.message || '').replace(/\s+/g, ' ').trim();
|
||||
return `${item.name}（${email};${phone}）-${type}：${message}`;
|
||||
}
|
||||
|
||||
function smtpCommand(socket, command, expected) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let buffer = '';
|
||||
const onData = data => {
|
||||
buffer += data.toString('utf8');
|
||||
const lines = buffer.trimEnd().split(/\r?\n/);
|
||||
const last = lines[lines.length - 1] || '';
|
||||
if (!/^\d{3} /.test(last)) return;
|
||||
socket.off('data', onData);
|
||||
const code = Number(last.slice(0, 3));
|
||||
if (!expected.includes(code)) reject(new Error(`SMTP ${command || 'connect'} failed: ${buffer}`));
|
||||
else resolve(buffer);
|
||||
};
|
||||
socket.on('data', onData);
|
||||
if (command) socket.write(command + '\r\n');
|
||||
});
|
||||
}
|
||||
|
||||
async function sendMail({ subject, text }) {
|
||||
const host = process.env.SMTP_HOST;
|
||||
const port = Number(process.env.SMTP_PORT || 587);
|
||||
const user = process.env.SMTP_USER;
|
||||
const pass = process.env.SMTP_PASS;
|
||||
const from = process.env.SMTP_FROM || user;
|
||||
const secure = String(process.env.SMTP_SECURE || '').toLowerCase() === 'true' || port === 465;
|
||||
|
||||
if (!host || !user || !pass || !from) {
|
||||
throw new Error('缺少 SMTP 配置：请设置 SMTP_HOST、SMTP_PORT、SMTP_USER、SMTP_PASS、SMTP_FROM');
|
||||
}
|
||||
|
||||
let socket = secure ? tls.connect(port, host, { servername: host }) : net.connect(port, host);
|
||||
await smtpCommand(socket, '', [220]);
|
||||
await smtpCommand(socket, `EHLO ${host}`, [250]);
|
||||
if (!secure) {
|
||||
await smtpCommand(socket, 'STARTTLS', [220]);
|
||||
socket = tls.connect({ socket, servername: host });
|
||||
await smtpCommand(socket, `EHLO ${host}`, [250]);
|
||||
}
|
||||
await smtpCommand(socket, 'AUTH LOGIN', [334]);
|
||||
await smtpCommand(socket, Buffer.from(user).toString('base64'), [334]);
|
||||
await smtpCommand(socket, Buffer.from(pass).toString('base64'), [235]);
|
||||
await smtpCommand(socket, `MAIL FROM:<${from}>`, [250]);
|
||||
await smtpCommand(socket, `RCPT TO:<${RECIPIENT}>`, [250, 251]);
|
||||
await smtpCommand(socket, 'DATA', [354]);
|
||||
|
||||
const body = [
|
||||
`From: ${from}`,
|
||||
`To: ${RECIPIENT}`,
|
||||
`Subject: ${encodeHeader(subject)}`,
|
||||
'MIME-Version: 1.0',
|
||||
'Content-Type: text/plain; charset=UTF-8',
|
||||
'Content-Transfer-Encoding: 8bit',
|
||||
'',
|
||||
text
|
||||
].join('\r\n');
|
||||
|
||||
await smtpCommand(socket, `${body}\r\n.`, [250]);
|
||||
await smtpCommand(socket, 'QUIT', [221]);
|
||||
socket.end();
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const messages = readMessages();
|
||||
const pending = messages.filter(item => !item.notified);
|
||||
if (!pending.length) {
|
||||
console.log('没有新的联系消息。');
|
||||
return;
|
||||
}
|
||||
|
||||
const subject = `【海古纪-联系我们】新消息+${pending.length}`;
|
||||
const text = pending.map(formatLine).join('\n');
|
||||
await sendMail({ subject, text });
|
||||
|
||||
const now = new Date().toISOString();
|
||||
const pendingIds = new Set(pending.map(item => item.id));
|
||||
const updated = messages.map(item => pendingIds.has(item.id) ? { ...item, notified: true, notifiedAt: now } : item);
|
||||
writeMessages(updated);
|
||||
console.log(`已发送 ${pending.length} 条联系消息提醒到 ${RECIPIENT}`);
|
||||
}
|
||||
|
||||
main().catch(error => {
|
||||
console.error(error.message || error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,182 @@
|
||||
const http = require('http');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
|
||||
const ROOT = __dirname;
|
||||
const DATA_DIR = path.join(ROOT, 'data');
|
||||
const MESSAGE_FILE = path.join(DATA_DIR, 'contact-messages.json');
|
||||
const PORT = Number(process.env.PORT || 8080);
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'application/javascript; charset=utf-8',
|
||||
'.json': 'application/json; charset=utf-8',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.gif': 'image/gif',
|
||||
'.svg': 'image/svg+xml; charset=utf-8',
|
||||
'.pdf': 'application/pdf',
|
||||
'.md': 'text/markdown; charset=utf-8'
|
||||
};
|
||||
|
||||
function ensureStore() {
|
||||
fs.mkdirSync(DATA_DIR, { recursive: true });
|
||||
if (!fs.existsSync(MESSAGE_FILE)) fs.writeFileSync(MESSAGE_FILE, '[]\n', 'utf8');
|
||||
}
|
||||
|
||||
function readMessages() {
|
||||
ensureStore();
|
||||
try {
|
||||
const data = JSON.parse(fs.readFileSync(MESSAGE_FILE, 'utf8'));
|
||||
return Array.isArray(data) ? data : [];
|
||||
} catch (_) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function writeMessages(messages) {
|
||||
ensureStore();
|
||||
fs.writeFileSync(MESSAGE_FILE, JSON.stringify(messages, null, 2) + '\n', 'utf8');
|
||||
}
|
||||
|
||||
function sendJson(res, status, payload) {
|
||||
const body = JSON.stringify(payload);
|
||||
res.writeHead(status, {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
'Content-Length': Buffer.byteLength(body)
|
||||
});
|
||||
res.end(body);
|
||||
}
|
||||
|
||||
function collectBody(req, limit = 1024 * 1024) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let body = '';
|
||||
req.on('data', chunk => {
|
||||
body += chunk;
|
||||
if (Buffer.byteLength(body) > limit) {
|
||||
reject(new Error('请求内容过大'));
|
||||
req.destroy();
|
||||
}
|
||||
});
|
||||
req.on('end', () => resolve(body));
|
||||
req.on('error', reject);
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeText(value, max = 2000) {
|
||||
return String(value || '').trim().slice(0, max);
|
||||
}
|
||||
|
||||
function validEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
function validPhone(countryCode, phone) {
|
||||
const raw = String(phone || '').trim();
|
||||
if (!raw) return true;
|
||||
const normalized = raw.replace(/[\s()-]/g, '');
|
||||
const rules = {
|
||||
'+86': /^1[3-9]\d{9}$/,
|
||||
'+1': /^[2-9]\d{2}[2-9]\d{6}$/,
|
||||
'+44': /^7\d{9}$/,
|
||||
'+81': /^0?\d{9,10}$/,
|
||||
'+65': /^[689]\d{7}$/,
|
||||
other: /^\d{6,15}$/
|
||||
};
|
||||
return (rules[countryCode] || rules.other).test(normalized);
|
||||
}
|
||||
|
||||
function validCountryCode(countryCode) {
|
||||
return /^\+[1-9]\d{0,3}$/.test(countryCode);
|
||||
}
|
||||
|
||||
function validateContact(input) {
|
||||
const name = normalizeText(input.name, 100);
|
||||
const email = normalizeText(input.email, 200);
|
||||
const rawCountryCode = normalizeText(input.countryCode || '+86', 20);
|
||||
const customCountryCode = normalizeText(input.customCountryCode || '', 20);
|
||||
const countryCode = rawCountryCode === 'other' ? customCountryCode : rawCountryCode;
|
||||
const phone = normalizeText(input.phone, 80);
|
||||
const inquiryTypeValue = normalizeText(input.inquiryType, 100);
|
||||
const customInquiryType = normalizeText(input.customInquiryType || input.otherInquiryType, 100);
|
||||
const message = normalizeText(input.message, 4000);
|
||||
const inquiryType = inquiryTypeValue === 'other' ? customInquiryType : inquiryTypeValue;
|
||||
|
||||
const errors = [];
|
||||
if (!name) errors.push('姓名必须填写');
|
||||
if (!email && !phone) errors.push('邮箱和手机至少填写一项');
|
||||
if (email && !validEmail(email)) errors.push('邮箱格式不正确');
|
||||
if (phone && rawCountryCode === 'other' && !validCountryCode(countryCode)) errors.push('国家/地区代码格式不正确');
|
||||
if (phone && !validPhone(rawCountryCode, phone)) errors.push('手机格式不正确');
|
||||
if (!inquiryType) errors.push('咨询类型必须填写');
|
||||
if (!message) errors.push('消息内容必须填写');
|
||||
|
||||
return {
|
||||
errors,
|
||||
data: { name, email, countryCode, phone, inquiryType, message }
|
||||
};
|
||||
}
|
||||
|
||||
async function handleContact(req, res) {
|
||||
try {
|
||||
const body = await collectBody(req);
|
||||
const input = JSON.parse(body || '{}');
|
||||
const result = validateContact(input);
|
||||
if (result.errors.length) return sendJson(res, 400, { ok: false, errors: result.errors });
|
||||
|
||||
const messages = readMessages();
|
||||
const now = new Date().toISOString();
|
||||
const item = {
|
||||
id: crypto.randomUUID(),
|
||||
createdAt: now,
|
||||
notified: false,
|
||||
notifiedAt: null,
|
||||
...result.data
|
||||
};
|
||||
messages.push(item);
|
||||
writeMessages(messages);
|
||||
sendJson(res, 201, { ok: true, id: item.id });
|
||||
} catch (error) {
|
||||
sendJson(res, 500, { ok: false, errors: [error.message || '提交失败'] });
|
||||
}
|
||||
}
|
||||
|
||||
function safePath(urlPath) {
|
||||
let pathname;
|
||||
try {
|
||||
pathname = decodeURIComponent(new URL(urlPath, 'http://local').pathname);
|
||||
} catch (_) {
|
||||
pathname = '/';
|
||||
}
|
||||
if (pathname === '/') pathname = '/index.html';
|
||||
const full = path.normalize(path.join(ROOT, pathname));
|
||||
if (!full.startsWith(ROOT)) return null;
|
||||
return full;
|
||||
}
|
||||
|
||||
function serveStatic(req, res) {
|
||||
const file = safePath(req.url);
|
||||
if (!file || !fs.existsSync(file) || fs.statSync(file).isDirectory()) {
|
||||
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
|
||||
res.end('Not found');
|
||||
return;
|
||||
}
|
||||
const ext = path.extname(file).toLowerCase();
|
||||
res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream' });
|
||||
fs.createReadStream(file).pipe(res);
|
||||
}
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
if (req.method === 'POST' && req.url === '/api/contact') return handleContact(req, res);
|
||||
if (req.method === 'GET' || req.method === 'HEAD') return serveStatic(req, res);
|
||||
res.writeHead(405, { 'Content-Type': 'text/plain; charset=utf-8' });
|
||||
res.end('Method not allowed');
|
||||
});
|
||||
|
||||
ensureStore();
|
||||
server.listen(PORT, () => {
|
||||
console.log(`海古纪网站服务已启动：http://localhost:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
# 人工智能生物信息学科学家
|
||||
**全自动、自规划的多组学分析智能体**
|
||||
智能规划分析全流程
|
||||
- 上传数据后，AI智能体自动识别项目类型，规划并执行最优分析路径
|
||||
- 覆盖基因组、转录组、重测序、表观组等多组学整合分析
|
||||
- 支持自定义分析策略，灵活适配基础研究、育种开发等场景，灵活适配各类科研与工业场景
|
||||
智能解读与报告自动生成
|
||||
- AI驱动深度数据挖掘:变异影响、基因功能、通路网络
|
||||
- 自动生成出版级图表与结构化分析报告
|
||||
- 持续整合最新公共数据与算法，提升解读深度
|
||||
平台技术特色
|
||||
- 全流程自动化--从原始数据到生物洞见，全程无人值守运行
|
||||
- 环境自适配--自动配置计算环境，告别手动安装与调试
|
||||
- 透明可重复--提供完整分析日志与可复现脚本，支持结果追溯
|
||||
- 模块化扩展--轻松集成用户自有工具与流程，构建专属分析生态
|
||||
您提供数据 AI规划一切让生信分析像使用智能手机一样简单
|
||||
核心业务流程：supervisors → planners → workers → reviewers → evidence → delivery
|
||||
- supervisors 监管层：总控项目需求、权限、资源配额；
|
||||
- planners 规划层：RAG 知识库读取参考基因组、测序流程、实验方案，自动生成生信分析脚本计划；
|
||||
- workers 执行层：调度服务器、运行比对 / 组装 / 重测序等生物信息流程任务；
|
||||
- reviewers 审核层：校验测序数据质控、比对结果、统计指标是否合规；
|
||||
- evidence 存证层：保存中间文件、日志、参数、分析证据，满足育种 / 测序溯源；
|
||||
- delivery 交付层：输出整理好的结果图表、报告、标准化数据集给研究员。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 880 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 533 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 973 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 839 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1015 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
@@ -0,0 +1,125 @@
|
||||
育种4.0的开启，高通量技术、智能制造与人工智能赋能现代农业，预示着人类对物种的精准改造将迎来一次壮丽的飞跃。
|
||||
# HSmaster：全自动文库制备系统
|
||||
高通量样品处理 全自动无人值守
|
||||
核酸提取、pcr扩增、文库质检全流程
|
||||
兼容KASP标记，模块化更灵活
|
||||
Hyper-seq技术加持，低成本建库
|
||||
自动化基因文库设备说明：
|
||||
整套自动化设备分为四个模块：
|
||||
1. 植物样本制备模块：细胞匀浆机
|
||||
采用深孔板+配套动植物裂解液+高速匀浆机机头，完成样本的破壁匀浆，经过离心完成提取上清液；
|
||||
2. 核酸提取和 PCR 模块
|
||||
含功能模块：核酸提取系统（磁珠法、负压膜法）、凝胶电泳系统、低温模块，振荡模块、移液操作系统、封膜机、PCR仪，完成核酸提取和PCR检测；
|
||||
3. 文库制备模块
|
||||
含功能模块：自动化定位离心机、凝胶电泳系统、低温模块，振荡模块、移液操作系统、耗材堆栈等；
|
||||
4. DNA 浓度检测模块
|
||||
通过全波长光吸收酶标仪检测DNA浓度；
|
||||
# Hyper-seq技术介绍
|
||||
Hyper-seq 是一种极低成本、高效、灵活、高通量的 DNA 测序文库制备和基因分型方法（海南大学Hyper-seq试剂盒 ）。该技术具有广泛的适用性和可扩展性，同时具有一定的基因区域富集效应。可以根据不同的物种和项目的需求，通过使用不同的 Hyper-seq 引物，灵活地调节标记密度，通过特殊的 PCR 方式，不需要额外酶切和连接接头等，即可实现大量样品同时建库，产出海量基因型大数据，以低成本满足不同物种大规模分型测序的需求，助力实现高效率大数据育种和群体研究。
|
||||
| 对比项 | 芯片技术 | 常规简化测序（GBS） | Hyper-seq测序 |
|
||||
| --------------- | ---------------- | -------------------------- | ------------------ |
|
||||
| **DNA质量要求** | 一般 | 极高，需要酶切 | 低，甚至叶片建库 |
|
||||
| **前期设计** | 需要前期设计芯片 | 不用 | 不用 |
|
||||
| **建库时间** | 半天 | 2天 | 3小时 |
|
||||
| **复杂基因组** | 成本极高 | 成本极高 | 任意调节，超低成本 |
|
||||
| **SNP变异位点** | 6K-100K | 20万 | 20万以上任意调节 |
|
||||
| **应用范围** | 少数模式物种 | 大部分物种 | 所有物种 |
|
||||
| **成本** | 20美元以上/样 | 前期定制较贵，25-60美元/样 | 3-20美元/样 |
|
||||
# SNP分型-KASP法
|
||||
竞争性等位基因特异性聚合酶链式反应(kompetitive allele specific PCR，KASP) 是一种基于单核苷酸多态性(SNP) 的新型基因分型技术，可从基因组水平对SNP和插入缺失多态性(Indel) 进行精准分型，被广泛应用于生命科学研究以及医学领域。其技术原理如下：
|
||||
第一步：设计好对应的探针与引物，引物一共是三条，两条带有荧光接头的分型上游及一条通用下游。探针一共是四条，两条荧光探针和两条淬灭探针，荧光探针与淬灭探针是互补的，且荧光探针是与特异性上游引物的接头部分序列(tag sequence)一致。
|
||||
第二步：普通PCR扩增。在第一轮PCR扩增中，等位基因特异引物(3'末端能配对的)就可识别特定等位基因模板，完成等位基因识别，反向通用引物也会结合并完成整个PCR过程，在此阶段，荧光标记的探针仍与其互补的淬灭探针结合，并且不会产生荧光信号。从第2轮PCR扩增开始，产物中出现携带通用标签序列(tag sequence)的模板，这步完成把通用标签序列引入与SNP对应的PCR产物中。随后携带荧光的探针通过与tag互补的DNA链结合而添加到PCR产物中，因此不再与其互补的淬灭探针结合，从而产生荧光信号而被检测到。
|
||||
第三步：荧光检测和分析。利用荧光信号检测仪或荧光定量PCR仪(配有相应荧光探针的检测通道)进行信号读取，并用软件采集信号判别等位基因类型（如果进行聚类分析，要用到KlusterCaller或SNPviewer软件）。
|
||||
# 应用-GS育种
|
||||
基于Hyper-seq自动化实验室的深度学习GS育种。
|
||||
全基因组选择（GS）的过程主要分为两个部分，一方面，需要对参考群体的基因型进行测序；另一方面，需要构建GS预测模型，根据参考群体的表型和基因型来估计预测群体的育种值。针对当前全基因组选择技术发展所面临的技术难题，运用自主研究开发的新型基因测序技术与深度学习算法模型，将低成本基因测序技术（Hyper-seq测序技术）与高精度预测模型（LSTM）相结合，实现了利用覆盖全基因组的高密度分子标记进行生物个体性状预测，在节约大量成本的同时提升预测的准确率，达到利用全基因组选择技术进行早代选择的目的。
|
||||
现有技术问题：
|
||||
- 基因测序成本高、限制多、实现难度大：传统基因测序技术在设备投入、试剂消耗、操作流程等方面成本较高，且受样本处理、数据产出效率等因素限制，大规模应用存在困难。
|
||||
- GS模型预测准确率低：基因组选择（Genomic Selection）模型在利用基因标记预测生物体表型时，因标记信息挖掘不充分、模型算法局限等原因，导致预测精度未能满足实际需求。
|
||||
研究内容与目标：
|
||||
- 研发成本效益高、灵活自动化测序技术：旨在开发新型测序方法，通过优化流程、提升自动化程度，降低测序成本并增强技术的灵活性，以适应不同场景的应用需求。
|
||||
- 设计基因组预测误差小、表型组预测精度高的GS模型：针对现有GS模型的不足，优化模型算法或整合多组学数据，提高基因组层面的预测准确性，同时提升对表型组（生物体可观测性状集合）的预测精度。
|
||||
- 涉及关键要素：
|
||||
- SNP标记：单核苷酸多态性（Single Nucleotide Polymorphism）是基因组中常见的遗传变异标记，是GS模型构建的核心数据基础。
|
||||
- 表型文件：记录生物体表型性状数据的文件，是GS模型训练和验证的关键输入，其质量直接影响预测效果。
|
||||
# 应用-回交育种
|
||||
低成本和自动化的高通量测序文库制备方法、易于操作的 SNP 发现平台以及用于基因分型的下游数据分析以及用于促进非模式作物基因改良的标记辅助选择——Hyper-seq基因分型技术应用场景广阔。较于其他技术，Hyper-seq基因分型技术具有成本效益最高，物种适应性最强等特点，同时最大限度地减少基于群体的研究的数据浪费。
|
||||
# 应用-诱变育种
|
||||
通过Hyper-seq高通量技术，我们致力于检测诱变引起的植物基因组变异热区。在不同剂量下对植物器官的诱变机理，通过深入研究探索这一过程中基因表达和基因组变异的动态变化。这综合研究不仅有助于揭示诱变对植物遗传特性的影响，同时为开发具有抗逆性的新植物品种提供了关键信息，推动了诱变育种在植物学和遗传学领域的应用前景。
|
||||
# 应用-DNA水平溯源检验
|
||||
1. 兼顾"发现"和"检测"全基因组序列碎片的特点，全球物种多态性基因型数据。
|
||||
2. 动植物的全基因组扫描测序体系，建立超高速及其精确快速检测系统。
|
||||
3. 快速比对有害生物DNA数据，达到有害生物快速和最高精度的检测。
|
||||
4. 在引进链中为农业动植物的进行引进鉴定，危害物种预警等价值保护提供SNP核心的指纹数据。
|
||||
5. 去中心化的指纹价值算法来定义单个作物唯一识别身份，对链中任意物种进行快速验证，对所有引进动植物和有害动植物进行来源追溯。
|
||||
# GS育种策略介绍
|
||||
当今处于育种4.0时代背景下，借助信息化和大数据的优势做更深的分析，让表型数据与基因型数据，甚至其他的数据结合起来，对育种的增益才会更大。全基因组选择作为育种4.0时代的新技术，通过构建预测模型，根据基因组估计育种值进行早期个体的预测和选择，从而缩短育种世代间隔，加快育种进程，节约成本，推动现代育种向精准化和高效化方向发展。
|
||||
## 全基因组选择（GS）的研究策略
|
||||
### 01 样本选择
|
||||
GS流程包含两个群体，一个是训练群体，需要同时具有表型和基因型信息，估计标记效应值来构建参考模型；另一个是预测群体，只需要基因型信息，通过构建的参考模型得到估计育种值，从而达到预测表型，进行个体选择的目的。训练群体和预测群体的选择有一定的要求，如下：
|
||||
|
||||
### 02 生信分析流程
|
||||
|
||||
# HSmaster全自动建库系统
|
||||
HSmaster全自动建库工作站
|
||||
中析HSmaster是一款基于Hyper-seq技术打造的全自动高通量的测序文库制备系统。系统整合了4个高精度移液模块，并集成了4台PCR模块、酶标仪、抓手模块、堆栈模块、温控模块、振荡模块、离心模块等，打造了无人值守全自动化平台，真正实现从样本核算提取到建库的一步到位。
|
||||
系统由三台独立的机器串联而成，分别完成核酸提取、PCR体系构建、文库纯化。系统先通过磁珠提取技术来快速、简单、高效的提取DNA。在提取完DNA后进行下游的PCR体系构建以及建库纯化与文库构建。全自动高通量实现核酸提取、PCR体系构建以及建库纯化，是一台全能产品。自主开发可视化软件界面和图形化程序列表，详细的分步骤操作指引，拖拽式实验流程搭建，无需编程，自行设置参数，极大提升用户使用友好度。
|
||||
| 序号 | 模块名称 | 数量 |
|
||||
| ---- | -------------------- | ---- |
|
||||
| 1 | X轴 | 3 |
|
||||
| 2 | Y轴 | 3 |
|
||||
| 3 | 单通道1000μL移液模块 | 1 |
|
||||
| 4 | 8通道200μL移液模块 | 2 |
|
||||
| 5 | 8通道1000μL移液模块 | 1 |
|
||||
| 6 | 8通道50μL移液模块 | 2 |
|
||||
| 7 | 搬运夹爪 | 5 |
|
||||
| 8 | 堆栈模块 | 2 |
|
||||
| 9 | 堆栈搬运模块 | 2 |
|
||||
| 10 | 离心机 | 1 |
|
||||
| 11 | 金属浴 | 2 |
|
||||
| 12 | 封膜仪 | 1 |
|
||||
| 13 | 96通道PCR | 4 |
|
||||
| 14 | 振荡 | 3 |
|
||||
| 15 | 升降磁力架 | 2 |
|
||||
| 16 | 标仪 | 1 |
|
||||
# 产品特点
|
||||
- 精准高效
|
||||
多个 SBS 标准版位，上下分层，配合堆栈和夹爪，可支持高达 400 个样品的 DNA 提取以及建库所需的全部耗材，无需手动频繁更换耗材。4 个不同量程的 8 通道移液模块可以快速、精准地进行液体处理工作，有效提升效率。
|
||||
- 配置灵活
|
||||
核酸提取、PCR 扩增以及 poolling 纯化分别由三台独立的工作站完成。独立的工作站通过机械臂夹爪以及传送带串联成一个系统。整个系统的扩展性非常强，既可以通过在每台独立的工作站上增加模块的方式提升通量，也可以通过增加工作站的方式提升系统的功能。
|
||||
- 操作简易
|
||||
自研可视化软件界面和丰富多样图形化程序列表，详细的分步骤操作指引，轻松完成拖拽式实验流程搭建，无需编程，自行设置参数，极大提升用户使用友好度。
|
||||
- 安全可靠
|
||||
集成式全自动化样本制备，减少手工参与，可内置过滤系统和紫外消毒系统，建库实验中有效避免扩增过程中带来的气溶胶污染。软件数据收集和警报系统，大大提升实验的安全性和可靠性。
|
||||
# HSmaster建库流程
|
||||
|
||||
# 参数规格
|
||||
1. 基本参数
|
||||
| 参数 | 规格 |
|
||||
| -------- | ------------------------------------- |
|
||||
| 尺寸 | (长宽高) 3400x890x2140mm |
|
||||
| 净重 | 2.5T |
|
||||
| 电源 | 输入：100V~120V/200V~240V AC，50/60Hz |
|
||||
| 版位数 | 60 |
|
||||
| 通信接口 | 3个USB，1个以太网口 |
|
||||
| 显示方式 | 20寸触摸屏 |
|
||||
2. 移液精度
|
||||
| 加样量(μL) | 变异系数(CV) | 允许误差(E) | 使用针规格 |
|
||||
| ---------- | ------------ | ----------- | ---------- |
|
||||
| 1000 | ≤0.3% | ≤1% | 1000μL |
|
||||
| 150 | ≤0.5% | ≤1.5% | 200μL |
|
||||
| 25 | ≤2% | ≤4% | 50μL |
|
||||
3. 温控模块
|
||||
| 模块 | 参数 |
|
||||
| ------------ | ---------------------------------------------------------------------------------- |
|
||||
| 冷藏模块 | 温度范围：室温~6℃；温度准确性：不超过±2℃；温度均匀性：不超过±2℃ |
|
||||
| 振荡孵育模块 | 温度范围：室温~95℃；温度准确性：不超过±2℃；温度均匀性：不超过±2℃，具有振荡孵育功能 |
|
||||
4. 安全防护
|
||||
| 功能 | 说明 |
|
||||
| ---------------- | ---- |
|
||||
| 紫外消毒功能 | 具备 |
|
||||
| 过滤功能负压系统 | 具备 |
|
||||
| 开门暂停报警系统 | 具备 |
|
||||
# 文章
|
||||
Hyper-seq:A novel,effective,and flexible marker-assisted election and genotyping approach IF=32.5
|
||||
Methodology and application of Hyper-seq technology (Hyper-seq-G, Hyper-seq-FD, and Hyper-seq-INC)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,21 @@
|
||||
# 三亚海古纪生物科技有限公司
|
||||
|
||||
## 企业愿景
|
||||
成为全球物种设计与智慧育种决策的创新标杆，构建AI驱动的精准物种改造生态系统，以基因组大数据与AI算法重塑农业可持续发展范式。
|
||||
|
||||
## 企业使命
|
||||
聚焦种业科技自主突破，打造高通量基因组解析、智能化分子设计及全链条AI育种技术体系，通过基因组大数据与人工智能深度融合，驱动动植物育种从传统经验模式向智能体设计范式跨越升级。
|
||||
|
||||
## 联系方式
|
||||
- 公司地址：三亚市海南大学研究院D栋204
|
||||
- 谢经理：16689001917
|
||||
- 基因文库技术：江肆肆 18605560158
|
||||
- 育种数据服务技术：何妙华 13907651197
|
||||
- 高通量基因文库设备技术：杰瑞.葛 13601063401
|
||||
|
||||
## 合作
|
||||
- [苏州中析生物信息有限公司](https://www.prcxi.com/)
|
||||
|
||||
- [海南大学](https://www.hainanu.edu.cn/)
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
Binary file not shown.
@@ -0,0 +1,131 @@
|
||||
# Hyper-seq 技术宣传册
|
||||
## 封面页
|
||||
突破极限：Hyper-seq 助力大数据育种变革
|
||||
一种极低成本、高效、灵活、高通量的DNA测序文库制备与基因分型技术
|
||||
## 引言页
|
||||
藏粮于技，种业腾飞
|
||||
粮食是社稷之本，种业是粮食之基。国家领导人强调：“只有用自己的手攥紧中国种子，才能端稳中国饭碗，才能实现粮食安全。”当前现代种业已进入常规育种、现代生物技术育种与信息化育种深度融合的“育种4.0”时代。然而，大群体测序成本居高不下，让“育种4.0”的前进步伐受阻。
|
||||
由海南大学夏志强团队原创研发的 Hyper-seq 技术，是一种极低成本、高效、灵活、高通量的 DNA 测序文库制备和基因分型方法。该技术的问世，标志着分子辅助育种与基因分型迈入了低成本、大数据、智能化的全新阶段。技术成果发表于 Cell Press 合作期刊 The Innovation，已获国际发明专利授权（专利号：No.2020/06979），并获得全国颠覆性技术大赛领域赛优秀奖、第一届“崖州湾杯”科技创新大赛一等奖等多项荣誉。
|
||||
截至目前，Hyper-seq 技术已为超过 40 家研究机构和高校提供技术服务，覆盖超过 50 个物种、50,000 份材料，成功应用于玉米、马铃薯、节节麦、木薯、水稻、小麦等主要作物，形成了成熟可靠的技术服务体系。
|
||||
## 核心优势页
|
||||
Hyper-seq 四大核心优势
|
||||
① 极低成本
|
||||
打破测序成本壁垒，让大规模群体研究不再受限。
|
||||
对于 1G 基因组样本，建库测序成本可低至 每个样本不到 10 美元
|
||||
单个样本分析成本 50–150 元人民币（根据基因组大小调整测序覆盖度）
|
||||
较世界同类简化测序技术（GBS、RAD 等）和分子育种芯片技术成本 降低 50% 以上
|
||||
② 极简高效
|
||||
一步 PCR，化繁为简，突破传统建库瓶颈。
|
||||
仅需一步 PCR，即可同时完成简化基因组、添加接头序列及扩增基因组序列
|
||||
整个建库时间 缩短至 3–5 小时，远低于常规方法的 20 小时以上
|
||||
无需酶切、无需连接接头等繁琐步骤，DNA 样品质量要求低，甚至可直接使用新鲜叶片建库
|
||||
③ 灵活调控
|
||||
一“芯”多用，按需定制，精准满足多样化科研需求。
|
||||
通过使用不同 Hyper-seq 引物，可 灵活调节标记密度，适应从小基因组到大基因组的各类物种
|
||||
内置三种核心模式：常规模式、极简模式和高密度模式，覆盖从育种筛选到性状定位的全场景
|
||||
•
|
||||
④ 高通量
|
||||
大规模并行处理，海量基因型数据快速产出。
|
||||
采用 大规模 Barcode 混合测序策略，单次可完成 96 孔或 384 孔样本混合建库测序
|
||||
1000 份水稻样品测序仅需 一天 完成
|
||||
完美匹配自动化流程，支持无人值守全自动化生产
|
||||
## 技术原理页
|
||||
Hyper-seq 技术原理
|
||||
三步合一，一步完成——重新定义测序文库构建
|
||||
Hyper-seq 技术最核心的创新在于：将基因组简化、Barcode 添加和简化基因组序列扩增融合为单次 PCR 反应，彻底颠覆了传统测序建库“分步进行、环环相扣”的复杂模式。
|
||||
引物设计的精妙智慧
|
||||
Hyper-seq 文库引物由四部分构成：
|
||||
固定碱基（CCGG/AATT） ：精准锚定目标基因组扩增区域
|
||||
摆动碱基（H/V） ：灵活调节基因组的简化程度
|
||||
随机碱基（N） ：提升引物兼容性，适配多样本类型
|
||||
Barcode 序列：赋予每份样本独立身份标识，支持后续高效拆分
|
||||
引物靶向 GC 富集区域，优先扩增外显子阅读框区段，在保证标记覆盖均一性的同时具有一定的基因区域富集效应，令测序数据更具生物学意义。
|
||||
非酶切建库——降低门槛，释放潜能
|
||||
Hyper-seq 无需限制性内切酶酶切和条形码连接步骤，成功解决了基因组 DNA 片段 非酶切直接测序 的问题，大幅降低了对 DNA 样品质量的要求，样品兼容性极强。
|
||||
## 技术路线页
|
||||
全流程解决方案
|
||||
样本接收 → 建库测序 → 数据分析 → 应用落地
|
||||
第一步：DNA 提取
|
||||
新鲜叶片或任意 DNA 样品快速提取，对 DNA 质量要求极低
|
||||
第二步：一步 PCR 建库
|
||||
单次 PCR 反应，3–5 小时同时完成简化基因组、Barcode 添加和序列扩增
|
||||
第三步：混合测序
|
||||
等量混合纯化 250–500bp PCR 产物，96 或 384 个样本混合测序，有效避免数据量较大差异问题
|
||||
第四步：数据拆分与 SNP 检测
|
||||
通过 Barcode 识别拆分混合样本，高效检测全基因组 SNP 标记，实现基因型精准鉴定
|
||||
第五步：应用分析与决策支持
|
||||
依据项目需求开展遗传图谱构建、GWAS 关联分析、指纹图谱绘制或选择育种指导
|
||||
## 应用场景页
|
||||
Hyper-seq 十大核心应用领域
|
||||
Hyper-seq 技术适用于各类物种（包括复杂大基因组）的重测序或简化测序，已广泛应用于作物遗传改良与育种研究的各个环节。
|
||||
① 作物遗传背景筛选与回交育种
|
||||
Hyper-seq 可快速、低成本地筛选回交育种中的遗传背景，精准鉴定目标材料，大幅提升育种效率。新一代 Hyper-seq 配合 SeqFD 技术，专用于作物回交育种的遗传背景筛选、基因分型和标记辅助选择检测。
|
||||
② 核心种质资源评估与构建
|
||||
从庞大的种质资源库中快速筛选核心子集，以最少的样本量最大程度地保留整个群体的遗传多样性，为遗传资源高效利用和育种研究奠定基础。
|
||||
③ DNA 指纹图谱与品种鉴定
|
||||
基于 Hyper-seq 技术构建的 DNA 指纹图谱，准确性高、位点适应性强、成本低，可大规模进行品种资源多样性评估和纯度鉴定。该技术已获国家发明专利（专利号：ZL202010102817.5）。
|
||||
④ 全基因组关联分析（GWAS）
|
||||
在玉米、马铃薯、节节麦、木薯、水稻、小麦等多种作物中，Hyper-seq 检测到的分子标记数量远超传统育种芯片，标记覆盖均一性更优，为关键性状基因定位提供坚实基础。已成功应用于马铃薯块茎肉色关联基因研究和美人蕉叶片性状 GWAS 分析。
|
||||
⑤ 遗传图谱构建与 QTL 定位
|
||||
凭借灵活可调的标记密度，Hyper-seq 可按需构建不同密度的遗传图谱，精确锁定目标 QTL 位点。
|
||||
⑥ 分子标记辅助选择育种
|
||||
海量 SNP/InDel 标记为分子标记辅助育种注入源源不断的“大数据基因燃料”。
|
||||
⑦ 基因组选择育种
|
||||
通过构建全基因组选择模型，利用数万个分子标记预测育种材料的表现，实现超越传统育种的精准智能化育种。夏志强团队已联合构建育种材料模型，完成超过一万份热带物种资源的基因型解析，逐渐形成一套完整的全基因组选择育种体系。
|
||||
⑧ 生物安全防控与分子检测
|
||||
新一代 Hyper-seq、SeqFD 技术可用于生物安全防控的快速分子检测，为检验检疫提供高效技术手段。
|
||||
⑨ 目标关键基因与新候选基因定位
|
||||
结合 GWAS 结果，快速锁定目标性状相关的关键基因或新候选基因位点。
|
||||
⑩ 物种鉴定与分类
|
||||
通过基因组水平的分子标记比对，实现不同物种、亚种或品系的精准鉴定。
|
||||
## 产品形态页
|
||||
Hyper-seq 三种核心模式
|
||||
根据科研与育种实践的需求深度，Hyper-seq 提供三款精准适配的测序模式，让每一份投入都物尽其用。
|
||||
模式 标记覆盖度 适用场景 特点
|
||||
Hyper-seq-G 约 10% 基因组 大部分物种常规育种研究 最常规模式，平衡覆盖度与成本，适用于绝大多数育种应用
|
||||
Hyper-seq-FD 0.0024%–4.2% 基因组 复杂大基因组育种 极简模式，专为小麦、马铃薯、玉米等大基因组物种开发，显著降低测序成本，让育种家负担得起
|
||||
Hyper-seq-INC 约 60% 基因组（8 对引物） 高精度性状定位 高密度模式，标记密度高，覆盖均匀，精准定位目标性状位点
|
||||
配套产品与服务
|
||||
① Hyper-seq 建库试剂盒
|
||||
标准化的试剂盒产品，开放供应，支持科研单位自主建库测序。
|
||||
② 全自动高通量测序文库制备系统
|
||||
基于 Hyper-seq 技术打造的全自动化平台，整合 4 个高精度移液模块，集成 4 台 PCR 模块、酶标仪、抓手模块、堆栈模块等，实现从样本核酸提取到建库的一步到位无人值守全自动化运行，大幅提升精准度，减少人工成本与误差。
|
||||
③ 全国独家技术服务——三亚海古纪
|
||||
三亚海古纪生物科技有限公司已获得 Hyper-seq 技术全国独家成果转化实施许可，提供从实验设计、建库测序到数据分析的全链条一站式服务。
|
||||
④ Hyper-seq 专属生物信息分析流程
|
||||
已开发配套的 Hyper-seq 专用分析软件流程，支持海量基因型数据的自动拆分、比对、SNP 检测和下游分析，搭建规模化基因型分析平台。
|
||||
## 典型成果页
|
||||
Hyper-seq 项目案例与成果
|
||||
- 宏大的项目验证
|
||||
Hyper-seq 技术首发时，研究团队对 6 个物种的 2,094 份样品 进行了建库测序及数据分析，数据证明其标记检测能力与育种芯片价值相当。
|
||||
- 合作网络辐射全国
|
||||
Hyper-seq 技术已成功应用于 超过 30 家研究机构和高校，实际应用覆盖 超过 50 个物种和 50,000 份材料，全面验证了技术的可靠性、稳健性与普适性。
|
||||
- 代表性科研文章
|
||||
1. 马铃薯同源四倍体基因组研究（Plant Biotechnology Journal, 2022, IF=13.8）：利用 Hyper-seq 对 150 份四倍体马铃薯进行 GWAS 分析，成功揭示与块茎肉色显著相关的关键基因。
|
||||
2. 美人蕉科植物基因组研究（Frontiers in Plant Science, 2022, IF=6.627）：利用 Hyper-seq 对 241 份美人蕉材料进行分析，检测到 1,565 万个 SNP 和 InDel 标记，完成群体遗传结构与叶片性状 GWAS 分析。
|
||||
3. 槟榔果实形状 GWAS 研究（International Journal of Molecular Sciences, 2023, IF=5.599）：利用 Hyper-seq 对槟榔群体进行全基因组关联分析，定位调控果实形状的关键候选基因。
|
||||
- 荣誉与认证
|
||||
国际发明专利授权（专利号：No.2020/06979）
|
||||
DNA 指纹图谱构建方法国家发明专利（ZL202010102817.5）-13
|
||||
全国颠覆性技术大赛领域赛优秀奖-16
|
||||
第一届“崖州湾杯”科技创新大赛一等奖-16
|
||||
## 自动化与未来页
|
||||
全自动化——Hyper-seq 的未来形态
|
||||
无人实验室系统：让育种进入“自动驾驶”时代
|
||||
夏志强团队已成功创建 高效、快速的基因分型无人实验室系统。基于 Hyper-seq 技术打造的全自动高通量测序文库制备系统，整合了高精度移液模块、超高速均匀热循环模块、自动化反应体系构建模块与无人值守智能控制系统等关键技术，真正实现了从样本核酸提取到建库的全流程自动化。这不仅大幅提升了样本处理精度，更显著降低了人工成本与误差。
|
||||
智能化育种：数据驱动的大数据育种体系
|
||||
与传统分子育种相比，使用 Hyper-seq 技术获取作物全基因组数据后，结合大数据技术和人工智能算法，可将成千上万的分子标记和性状建立计算机模型，实现高效、精确的智能化大数据育种。夏志强团队正在积极打造一套从育种材料接收，到 Hyper-seq 建库测序，再到数据分析反馈的全产业链闭环，为种子研究装上“智力引擎”。
|
||||
Hyper-seq 2.0 持续迭代
|
||||
夏志强团队原创研发两代超低成本基因型分型技术，新一代 Hyper-seq 和 SeqFD 技术已在基因功能挖掘及生物安全防控中发挥重要作用。未来，随着测序成本进一步降低，以及简捷、快速基因分型平台的持续开发，Hyper-seq 技术将使更多的全球非模式作物育种者受益，为全球种业发展贡献中国智慧。
|
||||
## 合作联系方式页
|
||||
联系我们，开启基因组大数据育种新篇章
|
||||
Hyper-seq 技术——极低成本、高效、灵活、高通量的 DNA 测序文库制备与基因分型解决方案，来自海南大学夏志强团队。
|
||||
- 全国独家技术服务合作
|
||||
1. 三亚海古纪生物科技有限公司（全国独家成果转化实施许可）
|
||||
2. 核心技术发明团队
|
||||
海南大学三亚南繁研究院“基因组与大数据育种”团队
|
||||
夏志强 研究员/副院长 及团队
|
||||
|
||||
## 封底页
|
||||
让育种进入大数据时代
|
||||
Hyper-seq：超低成本助力种业腾飞
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,49 @@
|
||||
**1. Hyper-seq 技术原理论文**
|
||||
- **论文**：*Hyper-seq: novel effective, flexible and great potential marker-assisted selection and genotyping approach* (2022)
|
||||
- **期刊**：**The Innovation** (IF: 32.1，一区)
|
||||
- **角色**：通讯作者
|
||||
- **亮点**：这是Hyper-seq技术的**核心方法学论文**，定义了该技术的原理与应用潜力。
|
||||
- **微信公众号推文**：https://mp.weixin.qq.com/s/wQnx3U8xaKNPT51Sb0MCbw
|
||||
- **原文链接**：https://www.cell.com/the-innovation/fulltext/S2666-6758(22)00050-9
|
||||
**2. Hyper-seq 技术重点应用论文**
|
||||
以下论文明确将Hyper-seq作为关键技术手段，用于解决重大基因组学问题。
|
||||
|
||||
- **木薯泛基因组**：*Pan-genome and Haplotype Map of Cultivars and Their Wild Ancestors Provides Insights into Adaptive Evolution of Cassava* (2025)
|
||||
- **Molecular Plant** (IF: 24，一区)，夏老师为**第一作者**。
|
||||
- 利用Hyper-seq等技术构建了木薯的泛基因组和单倍型图谱。
|
||||
- 原文链接：https://europepmc.org/article/ppr/ppr685388
|
||||
- 微信公众号推文：https://mp.weixin.qq.com/s/FdhgQAt_u-WBudSac-AU3A
|
||||
|
||||
- **马铃薯基因组**：*The autotetraploid potato genome provides insights into highly heterozygous species* (2022)
|
||||
- **Plant Biotechnology Journal** (IF: 13.263，一区)，夏老师为**共同第一作者兼通讯作者**。
|
||||
- 应用Hyper-seq技术解析高杂合同源四倍体马铃薯的基因组。
|
||||
- 原文链接：https://onlinelibrary.wiley.com/doi/full/10.1111/pbi.13883
|
||||
- 微信公众号推文：https://mp.weixin.qq.com/s/H_yj3oQ6Gyjty3MhxoGu0Q
|
||||
|
||||
- **象草基因组**：*Chromosome-Scale Genome Assembly Provides Insights into Speciation of Allotetraploid and Massive Biomass Accumulation of Elephant Grass* (2022)
|
||||
- **Molecular Ecology Resources** (IF: 8.678，一区)，夏老师为**共同第一作者**。
|
||||
- 运用Hyper-seq技术构建象草染色体水平基因组，研究异源四倍体物种形成。
|
||||
- 原文链接：https://onlinelibrary.wiley.com/doi/abs/10.1111/1755-0998.13612
|
||||
- 微信公众号推文：https://mp.weixin.qq.com/s/vVWOKw-Gq4Asi7a1GrdvIg
|
||||
|
||||
- **茶树GWAS**：*Genome-wide Association Analysis Identifies Molecular Markers Associated with Tea Flavor-related Metabolites* (2021)
|
||||
- **Horticulture Research** (IF: 7.291，一区)，夏老师为**第一作者**。
|
||||
- 基于Hyper-seq技术进行基因分型，开展全基因组关联分析，定位茶叶风味相关代谢物。
|
||||
- 原文链接：https://academic.oup.com/hr/article/doi/10.1038/s41438-021-00477-3/6446588?guestAccessKey=
|
||||
|
||||
**3. 其他相关基因组学研究**
|
||||
这些论文虽未在标题或推文中明确提及Hyper-seq，但属于夏老师团队同期的重要基因组学工作，可能使用了相关技术。
|
||||
|
||||
- **甘草比较基因组**：*Comparative genomics of three medicinal Glycyrrhiza species unveiled novel candidates for the production of important bioactive compounds* (2025)
|
||||
- **The Plant Journal** (IF: 7.2，一区)，夏老师为**通讯作者**。
|
||||
- 原文链接：https://onlinelibrary.wiley.com/doi/full/10.1111/tpj.70223
|
||||
|
||||
- **白兰单倍型基因组**：*A high-quality haplotype genome of Michelia alba DC reveals differences in methylation patterns and flower characteristics* (2024)
|
||||
- **Molecular Horticulture** (IF: 10.6，一区)，夏老师为**通讯作者**。
|
||||
- 原文链接：https://link.springer.com/article/10.1186/s43897-024-00098-z
|
||||
|
||||
- **百香果基因组**：*Chromosome-Scale Genome Assembly Provides Insights into the Evolution and Flavor Synthesis of Passion Fruit* (2021)
|
||||
- **Horticulture Research** (IF: 7.291，一区)，夏老师为**第一作者**。
|
||||
- 原文链接：https://www.maxapress.com/article/doi/10.48130/tp-0024-0021?viewType=HTML
|
||||
|
||||
简单概括，**第1篇是技术奠基之作，第2、5、6、8篇是Hyper-seq应用的直接证明**。所有论文均发表在一区高影响力期刊，体现了研究的系统性。
|
||||
@@ -0,0 +1,168 @@
|
||||
声明：
|
||||
实验室科服业务不接收人间传染的病原微生物目录.pdf中实验活动需在BSL-2及以上实验等级的样本。名录中实验活动需BSL-1实验等级的样本，在送样前需提供样本无感染性或经灭活的声明无潜在感染风险的声明 （中英文）.doc。对于高毒性动植物等样品，必须事先通过销售、客服或运营经理与技术人员联系，确定无高致病性和传染性后才能寄送样品。
|
||||
提取风险提示和注意事项：核酸提取质量与物种及组织部位、采集方法及保存状态、提取方法及操作、实验器材及环境等因素均有密不可分的联系，尤其是三代超长提取对样本的要求更高。组织提取时可能受到上下游处理操作的影响，因此较难保证单次提取满足质量要求，客户应在寄送组织样品前进行备份。为了保障获得高质量的核酸，请务必按照送样手册所规定的准备样本。对珍贵样本或者微量样本，建议自行提取。取样过程中，需要全程佩戴手套，并且使用预冷乙醇对取样器材进行擦拭消毒，以免样本污染
|
||||
1. 植物样本
|
||||
1.1 植物组织样本说明
|
||||
(1)植物主要包括禾本科植物、十字花科植物、常见作物、林木、常见蔬菜和花卉、中药、蕨类或苔藓。
|
||||
(2)样本的取材优先选择核酸含量相对较高的组织。幼嫩的组织最佳，如幼叶，幼芽。可送组培苗但不推荐冷冻保存的组织。建议优先采集新鲜组织样品送样，尽量避免送保存过久的组织样本和反复冻融的组织样本。
|
||||
1.2 样本制备运输注意事项
|
||||
(1)建议在采集样本之前，将样本置于黑暗环境24 ~ 48 h后再取材。如果需要立即取材，请尽快采集好样本后，迅速置于低温保存或运输，减少植物中化合物的氧化对核酸的影响。
|
||||
(2)对于有特殊组织部位要求的样品，客户在送样之前需做好样品分离处理，尽量避免寄送活体植物。
|
||||
(3)建议采用带有螺口的冻存管送样，管壁上标明样品名称；自封袋可以留剪刀口后折叠封存；一般不建议离心管送样，不得已用离心管时，离心管口需用封口膜封死。
|
||||
(4)组织样品大小在满足提取总量所需基本要求外，尽量使样品易于取出，具体体现为锡纸折叠整齐有条理，不要团成团；自封袋分类合理有效，不要多余分装；冻存管中样品不宜塞满，如果为多次提取提供样品，建议分装。
|
||||
1.3 样本制备方法
|
||||
1.3.1 新鲜组织样：
|
||||
(1)组织取样前准备好足够的冰袋，写好样品名称编号的合适大小的自封袋和锡纸。
|
||||
(2)取样时尽量保留叶柄，使用无菌水或75%乙醇擦拭或冲洗干净，用潮湿的吸水性较好的纸或纱布包裹，不要让材料干枯，但不能太湿，以免泡坏样品。材料珍贵的样品，请一片片叶片分开包裹，不要重叠，以防叶片烂毁浪费。
|
||||
(3)新鲜材料的运输，从-20℃取出的冰袋不要直接接触样品，以免造成保湿用纸结冰，导致样品局部冻伤。
|
||||
1.3.2 冻存组织样：
|
||||
(1)组织取样前准备好足够的液氮，写好样品名称编号的合适大小的自封袋、锡纸或者冻存管。
|
||||
(2)迅速取下合适大小的新鲜的植物组织部位，使用无菌水或75%乙醇擦拭或冲洗干净，再用吸水纸吸干样品表面后,迅速浸没于液氮中。
|
||||
(3)将组织样品从液氮取出放入准备好的自封袋、锡纸或者是预冷的冻存管中。再次将样品进行液氮冷冻后放入足量干冰箱寄送或置于-80°C保存。
|
||||
1.4 植物组织送样量建议
|
||||
由于不建议客户取样后常温称重,所以重量可参照该对照关系：0.5 g对应植物为9cm2叶片，略大于一元硬币大小。
|
||||
具体送样量建议 WGS 文库至少 0.2 g，GBS文库至少 0.5 g，RAD文库 至少1 g，总体建议送样 2 g 以上。
|
||||
2. 动物样本
|
||||
2.1 动物样本说明
|
||||
(1)动物主要包括脊椎动物、节肢动物和水产类，涵盖常规的哺乳动物、鸟类、爬行动物以及两栖动物，昆虫和虾蟹类动物等。
|
||||
(2)送样需要选择新鲜采集的样本，建议优先采集核酸含量相对较高的组织，尽量避免送保存过久的组织样本和反复冻融的组织样本，特别是动物肝脏，脾脏，肾脏，心脏，脂肪，脑，肿瘤等有较高DNA酶活性的组织。
|
||||
2.2 样本制备运输注意事项
|
||||
(1)对于有特殊组织部位要求的样品，客户在送样之前需做好样品分离、解剖等处理，严禁寄送活体动物。
|
||||
(2)样品分割和处理时应在冰上进行，防止样品降解。
|
||||
(3)组织样品大小在满足提取总量所需基本要求外，尽量使样品易于取出，具体体现为锡纸折叠整齐有条理，不要团成团；自封袋分类合理有效，不要多余分装；冻存管中样品不宜塞满，达到容量的80%即可。如果为多次提取提供样品，建议根据提取次数分装。
|
||||
2.3 样本制备方法
|
||||
(1)组织取样前准备好足够的液氮、冰袋等，写好样品名称编号的合适大小的自封袋、锡纸或者冻存管，管盖须钻孔（防止管内液氮体积膨胀爆炸），并在冻存管内加满液氮。
|
||||
(2)迅速取下适量的新鲜的动物组织，用预冷的生理盐水进行漂洗，以去除血渍和污物，并剔除结缔组织和毛发等非研究组织，将样品分割成50 mg左右的小块（约黄豆大小），立即浸入装有液氮的冻存管中彻底冷冻，再将样品放入足量干冰箱寄送或置于-80℃保存。
|
||||
(3)无法使用冻存管采集保存的样品，离体后仍需将样品立即浸入液氮彻底冷冻，再选用合适的容器包装，包装后需再浸入液氮中彻底冷冻一次，最后将样品放入足量干冰箱寄送或置于-80°C保存。
|
||||
2.4 特殊样本注意事项
|
||||
2.4.1 昆虫样本
|
||||
昆虫污染较为严重，需额外进行以下处理：
|
||||
(1)饥饿处理：根据物种饥饿耐受情况，饥饿6 ~ 48 h。
|
||||
(2)喂食抗生素：昆虫尽量使用广谱抗生素或者近缘物种报道过的无菌品系构建所使用的抗生素种类、浓度，处理天数2 ~ 5 d，可视物种情况而定。
|
||||
(3)去除肠道或整个腹部，保留胸部、头部提取。
|
||||
(4)表面消毒：75%乙醇浸泡1 ~ 2 min，无菌水漂洗1 ~ 2次，滤纸吸干后速冻。
|
||||
2.4.2 甲壳动物、软体动物和刺胞动物样本
|
||||
(1)甲壳动物（虾类和蟹类等）&软体动物（海绵和海参等）&刺胞动物（珊瑚等）送样前需额外使用75%的乙醇进行漂洗。
|
||||
(2)针对刺胞动物，可去除头部和肠道等部位，保留肌肉外壁用于提取。
|
||||
2.5 动物样本送样量
|
||||
动物组织 WGS 文库样品量应大于 0.1g；RAD-seq文库送样量大于0.5 g；GBS-seq文库送样量大于0.5 g。
|
||||
3 血液样本
|
||||
3.1 血液样本说明
|
||||
新鲜血样或是冻存血样均需要使用EDTA抗凝管进行采集并与抗凝剂充分混合，血液样本不建议保存时间过长，新鲜血液不超过24 h，冻存血液不超过1年。
|
||||
3.2 血液样本要求
|
||||
样本类型 WGS RAD-seq GBS-seq
|
||||
动物血液（哺乳类） ≥ 1 mL ≥ 1 mL ≥ 1 mL
|
||||
动物血液（红细胞有核类） ≥ 0.5 mL ≥ 0.5 mL ≥ 0.5 mL
|
||||
|
||||
(1)要求为全血样本，并加入抗凝剂，推荐使用EDTA抗凝的采血管收集样品（由于会影响实验，不能使用肝素抗凝），冷冻后，干冰运输。
|
||||
(2)血液样本一定要避免反复冻融，如果血液放置时间过长，或经历过反复冻融，请务必提前沟通，以尽量保证血液样本核酸提取质量。因放置过久或经历过反复冻融的样本经常会发生细胞核破裂，核酸游离于血浆中。加入抗凝剂后的新鲜血液一般可以在4℃放置12 ~ 24 h，但经过速冻后的样本一定要低温保存。
|
||||
(3)血液样品应使用塑料材质的采血管送样，不宜装满、达到80%容量即可。应避免使用玻璃材质采血管送样或装液太满，以至冻裂。
|
||||
(4)干冰寄送：寄送样本时需要足够的干冰，以保证全程低温运输。
|
||||
3.3 样本保存要求
|
||||
3.3.1 动物新鲜血液样本
|
||||
当新鲜血液采集后运输并可在5 d内运达时，请参照如下指导：
|
||||
(1)用EDTA管采集血液。采集后的血液可放置到采血管混匀仪室温混匀15 min，或手动轻柔缓慢颠倒混匀15次，确保无凝血现象。
|
||||
(2)采血用封口膜封口后保存在4℃，使用4℃冰袋运输（请勿使用-20 ℃冰袋）。
|
||||
3.3.2 鱼血（或水生动物血液）样本
|
||||
新鲜采取的血液，要加抗凝剂，抗凝剂可以根据客户自己平常的研究来确定。采样后，请妥善-80℃保存好，运输到实验室前不能有过冻融。取好的样品一周内送到实验室，超过一周请重新准备样本。
|
||||
3.3.3 冷冻血液采集及预处理指南
|
||||
推荐将采集后充分抗凝的血液进行分装，以便进行后续储存和运输。分装650 µL ~ 1 mL全血（针对不含有带核红细胞的血液）。一次提取仅需要一管分装血液，推荐额外送样一管作为备份。将血液抽取到EDTA管中，采集后的血液，可放置到采血管混匀仪室温混匀15 min。或手动缓慢混匀15次，保证与抗凝剂的充分混匀，确保无凝血现象。
|
||||
将血液进行分装，每个冻存管分装650 µL ~ 1 mL血液。将每份血液迅速放到-80℃冰箱冷冻。如条件不具备的话，最晚在采血后4 d内完成冷冻。
|
||||
注：如果血液已经冷冻，切勿为了分装而解冻。可将整管血液送样，如有需要可安排返样。冷冻全血样本需要保证从冷冻之日起，恒定保存在-80℃，没有经历过样本化冻。
|
||||
3.4 样本运输要求
|
||||
3.4.1 新鲜血液打包运输指南：
|
||||
(1)将采血管放入密封袋中，塑料袋内放置吸水纸（吸附意外的泄露）。切勿用纸巾包裹采血管。
|
||||
(2)使用泡泡纸松松地包裹密封袋。不要用胶带直接包裹或钉密封袋。
|
||||
(3)将打包好的采血管放入体积足够的聚苯乙烯泡沫箱中，放入足够的冰袋（4℃），保证运输过程低温。如有需要，加入缓冲材料。使用最快速的运输服务进行运输。
|
||||
注：新鲜血液必须在采血5 d内运达。如果不能够在5 d内运达，则需冷冻新鲜血液（参考如下冷冻血液运输指南），EDTA抗凝，5 ~ 10 mL。
|
||||
3.4.2 冷冻血液打包运输指南
|
||||
(1)分装后的冷冻管口需用封口膜包裹，将所有样品管放到密封袋中。
|
||||
(2)用泡泡纸松松地包裹密封袋，不要用胶带直接包裹或钉密封袋。
|
||||
(3)使用可放下合适体积的干冰和样品的聚苯乙烯泡沫箱，确保运输过程干冰量足够。使用最快速的运输服务进行运输。
|
||||
4. 细胞样本
|
||||
4.1 细胞样本要求
|
||||
a. 细胞送样量>5*106 ，优先选择生长对数期细胞，若细胞贴壁培养，需要去除培养基，使用胰酶消化；
|
||||
b. PBS悬浮消化后的细胞，转入冻存管，离心去除上清；
|
||||
c. 立刻液氮速冻15min，-80保存，干冰保存运输；
|
||||
d. 不建议寄送冻存未复苏的细胞
|
||||
5 DNA样本
|
||||
5.1 核酸样本说明
|
||||
5.1.1 核酸样本检测方法
|
||||
客户在核酸样本寄送前，需提供样本基本质控结果，常见样本质控包括Qubit®、NanoDropTM、AGE（琼脂糖凝胶电泳）或者Agilent 2100中一种或多种形式的样品分析结果。
|
||||
5.1.2 核酸样本检测项目及说明
|
||||
v：体积（Volume），样品（溶液）体积。
|
||||
m：总量（Total Mass），DNA/RNA总量。
|
||||
c：浓度（Concentration），DNA/RNA浓度。
|
||||
OD260/280：OD260/280比值，DNA检测中260与280吸光度值比，反映DNA纯度。
|
||||
OD260/230：OD260/230比值，DNA检测中260与230吸光度值比，反映DNA纯度。
|
||||
5.1.3 样品分类
|
||||
Pass：合格，质量满足二代建库要求。
|
||||
Fail：样品质量不满足建库测序要求，不建议使用。
|
||||
5.1.4 风险与建议
|
||||
总量不足或浓度过低存在以下风险：1、文库构建可能失败；2、文库产量低不能上机测序或测序数据不足；3、影响文库随机性、数据覆盖度偏低。因此对于核酸总量不足、过低或降解的样本，若仍需要建库，则请自行承担责任与风险。
|
||||
降解样品：影响文库随机性，可造成duplication偏高等。
|
||||
5.2 核酸送样浓度建议：
|
||||
(1)WGS 文库送样总量应至少大于 400ng，浓度大于 24ng/μL
|
||||
(2)GBS文库送样总量大于300ng，浓度大于10ng/μL
|
||||
因部分客户核酸含有杂质、颜色等物质导致会产生大量损失，为保证您的样本一次检测合格并节约宝贵的重送样时间，送样建议量是高于公司判定标准的，请您在核酸量足够的前提下尽量按照送样建议来送样，感谢您的大力支持与配合。
|
||||
5.3 核酸质量建议：
|
||||
提取的DNA需要无核酶和RNA的污染，DNA浓度测量建议用Qubit测定，最低浓度不低于40 ng/µL；DNA的主带需要大于40 Kb，越大越好；DNA纯度经过Nanodrop检测，A260/280需在1.8 ~ 2.0之间，A260/230在1.9 ~ 2.4之间，NC:QC（样品 NanoDrop 所测浓度与 Qubit 所测浓度比值）在0.95 ~ 3.0之间。
|
||||
5.4 样品运输：
|
||||
DNA可溶解在TE buffer或ddH2O中，样品送样前需保持在4℃，碎冰邮寄，或根据具体情况用干冰邮寄，切忌反复冻融；
|
||||
5.5 样本检测：
|
||||
对于收到的DNA样品，我公司将用1 µL的DNA去检测浓度（Nanodrop和Qubit分别检测），用200 ng的DNA去上样，用脉冲电泳检测条带大小，如样品不符合建库要求会尽快将结果反馈给客户。
|
||||
注：含乙醇的DNA样本需提前告知。
|
||||
5.6 DNA样本文库构建风险：
|
||||
(1)总量不足可能导致：
|
||||
a. 文库构建失败；
|
||||
b. 文库产量低不能上机测序或测序数据量不足；
|
||||
c. 影响文库随机性；
|
||||
d. 导致数据产量和覆盖度偏低；
|
||||
(2)样品降解（尤其基因组样品）：影响覆盖均一性和随机性；可造成duplication偏高等。
|
||||
(3)含有杂质样本：可能造成文库构建失败，建议纯化后送样。
|
||||
6. PCR产物
|
||||
6.1 组织样本
|
||||
样本类型 PCR-free文库
|
||||
350bp (基因组) PCR-free文库
|
||||
非350bp （基因组）
|
||||
植物组织 >3g >3g
|
||||
动物组织 >1.5g >1.5g
|
||||
细胞 >8*108个 >>8*108个
|
||||
动物血液(哺乳类) >5mL >5mL
|
||||
动物血液(红细胞有核类) >3mL >3mL
|
||||
唾液 >10mL >10mL
|
||||
菌液(对数生长期) >5mL >5mL
|
||||
土壤 3mL 3mL
|
||||
粪便、肠道内容物、食糜 >2mL >2mL
|
||||
瘤胃液 >2mL >2mL
|
||||
水体(滤膜) 直径4cm滤膜3张 直径4cm滤膜3张
|
||||
拭子 >10个 >10个
|
||||
|
||||
6.2 核酸样本
|
||||
|
||||
a.PCR产物要经过纯化（如胶回收纯化），确保条带单一，无降解，无引物二聚体
|
||||
b.送样时使用干冰或冰袋运送
|
||||
c.PCR产物构建pcr-free文库时，PCR产物不可以加illumina测序接头（P5、P7序列、搭桥序列）
|
||||
文库类型 浓度 体积 总量 备注
|
||||
扩增子（pcr产物单建库） - 20μl≤V≤120μl >1500ng 针对核酸有杂质、污染、粘稠、颜色等情况,需要过柱纯化后送样 或者酌情增加送样量
|
||||
PCR-free文库 350bp >24ng/μL 20μl≤V≤120μl >2μg
|
||||
PCR-free文库
|
||||
非350bp >24ng/μL 20μl≤V≤120μl >5μg
|
||||
|
||||
1. 样本打包及寄送建议
|
||||
样本的打包
|
||||
核酸样本
|
||||
(1)核酸样品建议使用质量好的1.5 mL或2 mL低吸附EP管装载样品，并用封口膜封口。为了防止样品管破裂，或者污染和混乱，请不要使用诸如PCR管、0.5 mL EP管、八联管、96孔板、深孔板等非标准管送样。非标准管不利于样品保存以及后续实验的进行。如有样品使用非标准管制备，还请在送样前自行转管处理。
|
||||
(2)为了防止样品运输途中由于干冰挤压而损坏，少于10管的样品建议将EP管放入50 mL离心管，并在50 mL离心管中用棉花或卫生纸固定；大量样品建议将EP管放置在冻存盒中，并在冻存盒外面包裹气泡垫。
|
||||
(3)用乙醇沉淀的样品由于运输中会有少量乙醇挥发出，建议将样品管盖用封口膜缠绕4 ~ 5圈。
|
||||
组织样本
|
||||
(1)建议根据送样量使用不同规格带螺纹帽的EP管、冻存管或者离心管装载组织样品，并用封口膜封口。
|
||||
(2)为防止样品管在运输过程中受到干冰挤压破裂，最好将样品管放到50 mL离心管或其他支撑物中，并在支撑物里添加棉花或卫生纸缓冲。大量样品建议将EP管放置在冻存盒中，并在冻存盒外面包裹气泡垫。
|
||||
(3)使用锡箔纸、自封袋装载的样品，为防止运输中受挤压破损，建议将锡箔纸折叠整齐装在自封袋中，在样品包装外再用气泡垫包好并固定。
|
||||
(4)对于血液样品，建议采用5 ~ 10 mL塑料抗凝采血管装载，为了防止运输过程中采血管因挤压而损坏，需要将每支采血管管身用气泡垫包好，然后放置到塑料或纸质包装盒中。
|
||||
(5)为方便处理和保存，组织样品送样量请不要超过建议送样量的5倍（特殊的得率较低的样品除外）。
|
||||
样本的名称标识
|
||||
(1)所有的样品必须具有清晰的标记，并且简洁明了。
|
||||
(2)使用锡箔纸包装的组织样品建议在锡箔纸内外均标记样品名称，并将锡箔纸放在自封袋中，自封袋外面再标记上样品名称，防止锡箔纸上样品名称模糊引起样品混乱。
|
||||
(3)使用乙醇沉淀的核酸样品，由于挥发出的乙醇会使Mark笔的标记模糊，建议用油性笔将样品名称写在标签纸上，然后用透明胶带将标签纸粘贴在样品管壁上，并缠绕2 ~ 3圈。
|
||||
(4)样品名称建议使用“字母+数字”命名方式标注在管盖。其他信息如日期、浓度、物种等可标注在管壁。所有标注内容需与《样品信息单》保持一致。
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 677 KiB |
@@ -0,0 +1,69 @@
|
||||
# 科技快讯：Hyper-seq技术实现低成本全基因组数据采集
|
||||
**原文链接**：https://mp.weixin.qq.com/s/p7izwxbE_vgt1AMg93giyg
|
||||
**来源**：成都瀚辰光翼科技有限责任公司
|
||||
**发布时间**：2025年2月12日
|
||||
**核心关联**：海南大学南繁学院、桂林市农业科学研究中心联合研究，瀚辰光翼提供自动化解决方案
|
||||
|
||||
---
|
||||
|
||||
## 研究背景：水稻品质育种新需求
|
||||
|
||||
水稻是全球半数人口的主粮，其**直链淀粉含量（AC）** 和**凝胶稠度（GC）** 是决定食味与蒸煮品质的关键指标。传统育种改良这两大性状存在周期长、效率低、易受环境影响等挑战。**全基因组选择（GS）** 作为新一代育种技术，能通过基因型与表型数据结合显著缩短世代间隔，但其推广受限于基因分型的高成本与低效率。
|
||||
|
||||
---
|
||||
|
||||
## 创新技术方案：Hyper-seq + 智能自动化
|
||||
|
||||
### 1. 核心技术：Hyper-seq基因分型方案
|
||||
- **成本革命**：1G基因组样本的文库制备+测序总成本低至**5美元/样本**，显著优于传统低覆盖度全基因组测序（LcWGS）和芯片技术。
|
||||
- **效率飞跃**：从叶片采集到文库构建全流程自动化，**3小时**内完成384个样本的DNA提取和文库构建。
|
||||
|
||||
### 2. 自动化赋能
|
||||
联合**成都瀚辰光翼科技有限责任公司**开发智慧实验室，实现全自动化的高质量DNA提取及文库构建，确保数据标准化与均一性。
|
||||
|
||||
---
|
||||
|
||||
## 水稻研究核心成果
|
||||
|
||||
**研究对象**：417份水稻种质资源
|
||||
**目标性状**：直链淀粉含量（AC）、凝胶稠度（GC）
|
||||
|
||||
### 模型构建与精度
|
||||
- 测试了**7种GS模型**（GBLUP、RRBLUP、BayesA/B/C、BayesLASSO、BayesRKHS），各模型预测精度差异不显著。
|
||||
- **最佳预测精度**：
|
||||
- AC性状：**0.8316–0.8360**
|
||||
- GC性状：**0.7075–0.7235**
|
||||
|
||||
### 关键发现
|
||||
1. **规模效应**：以GBLUP模型为例，标记数（AC>5000个，GC>3000个）或群体规模（从100增至200）增加时，预测精度显著提升，后续趋于平稳。
|
||||
2. **标记优化**：通过GWAS筛选不同程度显著相关的SNP，发现纳入更多标记（p值阈值放宽至0.1）可显著提高预测准确性。
|
||||
|
||||
### 研究意义
|
||||
为快速筛选AC和GC最优组合的水稻品系提供高效工具，加速优质品种培育进程，并为**智能育种4.0**发展提供技术支撑。
|
||||
|
||||
---
|
||||
|
||||
## 同期大豆研究验证
|
||||
|
||||
海南大学团队在《Agronomy》同期发表大豆研究，基于**420份种质资源**和**104,728个SNP**数据集：
|
||||
- **最佳模型**：Bayesian_A（对主要茎节数预测精度达57.24%），GBLUP计算效率最高。
|
||||
- **成本与效率**：同样实现**5美元/样本**、全流程自动化，约**15,000个SNP**即可稳定模型表现。
|
||||
- **结论**：Hyper-seq为大豆育种提供了低成本、高通量、可靠的基因分型方案。
|
||||
|
||||
---
|
||||
|
||||
## 研究团队与支持
|
||||
|
||||
- **水稻研究共同第一作者**：卢彦洁、夏成材、王子豪（海南大学）
|
||||
- **通讯作者**：夏志强教授、邹枚伶助理研究员（海南大学）；范大泳研究员（桂林市农科中心）
|
||||
- **大豆研究团队**：海南大学夏志强教授团队
|
||||
- **主要资助项目**：
|
||||
- 广西科技厅项目（GuikeAA23062015）
|
||||
- 三亚崖州湾科技城项目（SCKJ-JYRC-2022-57）
|
||||
- 海南崖州湾种子实验室项目（B23YQ0002）
|
||||
|
||||
---
|
||||
|
||||
## 原文链接
|
||||
- **水稻研究**：[https://doi.org/10.3390/agronomy15020336](https://doi.org/10.3390/agronomy15020336)
|
||||
- **大豆研究**：[https://doi.org/10.3390/agronomy15020264](https://doi.org/10.3390/agronomy15020264)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
@@ -0,0 +1,50 @@
|
||||
配色：以logo的主色调（蓝、紫）为主，辅以一些亮色来突出重点内容。
|
||||
这个网站包含首页、产品服务、应用领域、综合优势、资源中心、关于我们等主要功能模块。每个模块下可以有多个子页面，详细介绍相关内容。同时每个网页都具有导航栏，方便用户随时跳转。
|
||||
每个网页也都具有底部的联系信息和合作伙伴展示，增加公司的信誉度和影响力。
|
||||
除首页外的其他功能模块的首页都是类似https://www.bgitechsolutions.com/sequencing/1 这种形式的页面，顶部大图展示该功能模块的重要内容，中间的具体内容展示方式是上方导航，左侧看情况决定是否添加更具体的导航，中间导航的内容展示。在功能首页中点击导航时，无需重复进入，只需要切换中间内容展示即可。
|
||||
# 导航栏
|
||||
设计一个清晰的导航栏，应该具有响应式设计，确保在手机、平板和桌面设备上都能正常显示和使用。可以使用下拉菜单来组织子页面，使导航更加清晰。使用悬浮效果，使导航栏在用户滚动页面时保持可见。
|
||||
导航栏左侧展示公司logo，中间展示主要功能模块。右边是联系方式和客户入口。
|
||||
功能模块包括“首页”、“产品”、“服务”、“应用领域”、“综合优势”、“资源中心”、“关于我们”等。
|
||||
导航栏右边用一个图标表示微信公众号，下拉菜单展示公众号二维码和链接，方便用户关注。再用一个图标展示客户服务系统，点击可以进入客户服务页面，登录注册，提供在线咨询和帮助。最右边加一个联系我们的按钮，点击后进入“联系我们”子页面。
|
||||
点击导航栏中的任意功能模块，页面会跳转到对应的首页，同时下拉菜单会展示该模块下的子页面，用户可以点击进入具体内容。导航栏设计要简洁明了，确保用户能够快速找到所需信息。
|
||||
## 下拉菜单
|
||||
鼠标放置在对应功能模块上即可展示具体模块内容。
|
||||
首页和logo：点击即可进入首页，无下拉菜单。
|
||||
产品：下拉菜单包括公司资料下的产品子文件夹名称。
|
||||
服务：下拉菜单包括公司资料下的服务子文件夹名称。
|
||||
应用领域：下拉菜单包括疾病研究、微生物研究、动植物研究。
|
||||
综合优势：下拉菜单包括测序平台、质谱平台、合成平台、分析平台、核心实验室、客户服务系统CSS。
|
||||
资源中心：下拉菜单包括精选案例和视频中心。
|
||||
关于我们：下拉菜单包括海古纪、联系我们、最新动态、隐私协议。
|
||||
# 底部
|
||||
底部应该包含公司的联系信息、合作伙伴展示和版权信息等内容。联系信息应该包括公司的地址、电话、邮箱和社交媒体链接等，方便用户随时联系公司。合作伙伴展示可以展示公司的主要合作伙伴和客户，增加公司的信誉度和影响力。版权信息应该包含公司的名称和版权声明，保护公司的知识产权。
|
||||
# 首页
|
||||
要简洁明了，展示公司的核心产品、服务和价值主张。
|
||||
顶部使用大图或视频背景，多张滚动效果，第一张是公司理念，第二张是最新消息，第三张是最新产品展示或折扣信息，最后一张是联系信息。
|
||||
中间放产品和服务，有产品的简单介绍和图片展示。旁边就放跳转链接，跳转内容就是导航栏的下拉菜单，点击后进入对应的子页面。
|
||||
然后下面就放学术文献和公司的最新动态，展示公司的研究成果和行业动态。
|
||||
# 产品
|
||||
顶部大图展示核心产品图片，突出产品的独特卖点和优势。
|
||||
下方的具体内容是：上部导航栏（产品介绍、案例解析、结果展示），左侧导航栏导航不同的产品类别。
|
||||
产品介绍就是产品的具体信息和技术规格，案例解析是展示产品在实际应用中的案例和客户评价，结果展示是展示产品的实验结果和性能数据。
|
||||
# 服务
|
||||
设计思路同产品
|
||||
# 应用领域
|
||||
顶部大图展示应用领域的相关图片，突出公司的专业能力和技术实力。
|
||||
下方的具体内容是：上部导航栏（疾病研究、微生物研究、动植物研究）。中间就是不同的应用领域内容展示。
|
||||
# 综合优势
|
||||
设计思路同应用领域。
|
||||
# 资源中心
|
||||
设计参考：https://www.bgitechsolutions.com/case
|
||||
左侧导航栏展示检索以及分类，分类包括研究领域、产品类别、年份、影响因子，类似知网的文献检索。内容部分就是展示检索结果，点击后进入具体的案例或视频页面，展示详细内容。
|
||||
详细内容页面就是期刊或者视频或者公众号发布的文章，页面就是一页全部展示的页面，不做上下滚动效果，左半部分是文章或者视频，右半部分是内容简介和原文链接。左侧的文章以PPT的形式展示，PPT缩略图放在文章下方。
|
||||
# 关于我们
|
||||
关于我们页面应该介绍公司的背景、使命、团队和联系方式等信息。可以分为海古纪、联系我们、最新动态、隐私协议等不同的部分，每个部分展示相关的内容。
|
||||
在关于我们页面（也就是海古纪页面）中，应该包含详细的公司信息、团队介绍、联系方式和相关研究成果等内容，以帮助用户更好地了解公司的背景和实力，并提供方便的联系方式。
|
||||
在联系我们页面中，用户可以添加自己的信息并发送给公司，可以选择科研需求或者技术咨询或者商务合作。
|
||||
最新动态页面应该展示公司的最新新闻、活动和研究成果等内容，以吸引用户关注和参与。与公司的公众号相关联。
|
||||
隐私协议页面应该明确公司的隐私政策和数据保护措施，以保护用户的个人信息和隐私。
|
||||
# 其他功能
|
||||
除了上述主要功能模块外，网站还可以增加一些其他功能来提升用户体验和互动性。例如，可以添加一个在线咨询功能，允许用户直接与公司的客服人员进行沟通和咨询。还可以添加一个博客或新闻栏目，定期发布公司的最新动态、行业资讯和技术文章，吸引用户关注和参与。此外，还可以添加一个客户反馈功能，收集用户的意见和建议，以不断改进产品和服务。
|
||||
总之，设计一个清晰、简洁、易用的网站导航和功能模块，可以帮助用户更好地了解公司的产品和服务，提升用户体验和满意度，并增加公司的影响力和竞争力。
|
||||
Reference in New Issue
Block a user