admin/haiguji-website-export
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

全站改版：子页面同步效果、导航/底部重做、岩石纹理与粒子增强、首页精简

Browse Source 
- 全部子页面(about/advantages/applications/products/resources/services/customer-service)顶部大图统一改为深色岩层纹理，并加入跟随鼠标的粒子网络
- 全部子页面引入 Lenis + GSAP/ScrollTrigger，与首页动效体系保持一致
- 顶部导航改为默认透明、滚动后转为深色玻璃底色，不再是纯白底色条
- 底部导航：整体改为更深邃的岩层蓝，页面内容到底部之间新增渐变过渡(footer-fade)
- 底部导航合作伙伴模块精简为单一跳转入口，实际内容迁移至【关于我们】新增的合作伙伴子页(about.html#partners)，并同步到顶部导航与侧边快速导航
- 联系方式精简为单一电话 16689661917，去除所有联系人姓名
- 首页去除轮播，只保留品牌主视觉一屏；标题改为「HYPER-GENE · 生命孪生体系——生命从此被计算」的错落艺术排版，保留极低成本/高效/灵活/高通量徽标
- 岩石纹理升级：新增分层分形噪声 + 斜向岩层条带，观感更接近真实岩石
- 粒子效果增大：画布铺满整个hero/page-hero区域，粒子半径与连线距离均增加
This commit is contained in:
Claude
2026-07-15 01:56:24 +00:00
parent 75d8970e9a
commit 41554ee60c
14 changed files with 480 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/footer.css
+47 -50
View File
@@ -1,9 +1,15 @@
/* 底部样式 */
/* 底部渐变过渡：从页面内容过渡到深蓝底部 */
.footer-fade {
height: 160px;
background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 12, 0.75) 65%, var(--rock-navy-0) 100%);
pointer-events: none;
}
/* 底部样式 —— 深邃岩层蓝 */
.footer {
background: linear-gradient(135deg, #1e3c72 0%, #2a4a8a 100%);
background: linear-gradient(180deg, var(--rock-navy-0) 0%, #020409 100%);
color: white;
padding: 28px 0 12px;
margin-top: 50px;
}
.footer-content {
@@ -19,7 +25,7 @@
.footer-section h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #00d4ff;
color: var(--electric-blue, #00d4ff);
font-weight: 600;
}
@@ -30,6 +36,13 @@
line-height: 1.8;
}
.footer-phone {
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
color: var(--ice-blue, #cfe8ff);
opacity: 1 !important;
}
.footer-section ul {
list-style: none;
}
@@ -46,54 +59,30 @@
font-size: 0.95rem;
}
.footer-partners {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
.footer-section-partners {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.partner-link {
display: flex;
.footer-partners-link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px;
color: white;
gap: 6px;
padding: 10px 18px;
color: var(--ice-blue, #cfe8ff);
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(156, 198, 236, 0.35);
border-radius: 999px;
font-size: 0.9rem;
background: rgba(56, 189, 248, 0.06);
transition: all 0.3s;
}
.partner-link span {
min-width: 0;
line-height: 1.35;
font-size: 0.88rem;
}
.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;
.footer-partners-link:hover {
border-color: var(--electric-blue, #38bdf8);
background: rgba(56, 189, 248, 0.14);
color: white;
}
.qr-grid {
@@ -115,7 +104,7 @@
}
.footer-section ul li a:hover {
color: #00d4ff;
color: var(--electric-blue, #00d4ff);
opacity: 1;
}
@@ -137,9 +126,9 @@
}
.social-links a:hover {
background: #00d4ff;
color: #1e3c72;
border-color: #00d4ff;
background: var(--electric-blue, #00d4ff);
color: var(--rock-navy-0, #1e3c72);
border-color: var(--electric-blue, #00d4ff);
}
/* 底部栏 */
@@ -158,7 +147,7 @@
}
.footer-bottom a {
color: #00d4ff;
color: var(--electric-blue, #00d4ff);
text-decoration: none;
transition: color 0.3s;
}
@@ -183,6 +172,10 @@
.footer-section ul li a {
font-size: 0.9rem;
}
.footer-fade {
height: 100px;
}
}
@media (max-width: 480px) {
@@ -218,4 +211,8 @@
padding: 15px;
font-size: 0.8rem;
}
.footer-fade {
height: 70px;
}
}
css/nav.css
+47 -31
View File
@@ -1,10 +1,22 @@
/* 导航栏样式 */
/* 导航栏样式 —— 默认透明，随页面滚动切换为深色玻璃质感 */
.navbar {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
background: rgba(5, 7, 12, 0);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
box-shadow: none;
position: sticky;
top: 0;
z-index: 100;
transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
border-bottom: 1px solid transparent;
}
.navbar.is-scrolled {
background: rgba(5, 7, 14, 0.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 8px 26px rgba(2, 6, 14, 0.35);
border-bottom: 1px solid rgba(156, 198, 236, 0.14);
}
.nav-container {
@@ -49,7 +61,7 @@
display: flex;
align-items: center;
padding: 10px 15px;
color: #333;
color: var(--ice-blue, #cfe8ff);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
@@ -58,12 +70,12 @@
}
.nav-link:hover {
color: #6a2c91;
color: var(--electric-blue, #38bdf8);
}
.nav-link.active {
color: #6a2c91;
background: rgba(106, 44, 145, 0.08);
color: var(--electric-blue, #38bdf8);
background: rgba(56, 189, 248, 0.12);
border-radius: 6px;
}
@@ -82,10 +94,12 @@
position: absolute;
top: 100%;
left: 0;
background: white;
background: rgba(10, 17, 32, 0.96);
backdrop-filter: blur(10px);
min-width: 200px;
border-radius: 5px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border-radius: 8px;
border: 1px solid rgba(156, 198, 236, 0.14);
box-shadow: 0 14px 30px rgba(2, 6, 14, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
@@ -103,31 +117,31 @@
.dropdown-menu a {
display: block;
padding: 12px 20px;
color: #333;
color: var(--ice-blue, #cfe8ff);
text-decoration: none;
transition: all 0.3s;
font-size: 0.9rem;
}
.dropdown-menu a:first-child {
border-radius: 5px 5px 0 0;
border-radius: 8px 8px 0 0;
}
.dropdown-menu a:last-child {
border-radius: 0 0 5px 5px;
border-radius: 0 0 8px 8px;
}
.dropdown-menu a:hover {
background: #f5f5f5;
background: rgba(56, 189, 248, 0.12);
padding-left: 25px;
color: #6a2c91;
color: var(--electric-blue, #38bdf8);
}
.dropdown-menu a.active,
.submenu-trigger.active > a {
color: #6a2c91;
background: #f3eef8;
color: var(--electric-blue, #38bdf8);
background: rgba(56, 189, 248, 0.1);
}
.submenu-trigger {
@@ -145,9 +159,11 @@
left: 100%;
top: 0;
min-width: 230px;
background: white;
border-radius: 5px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
background: rgba(10, 17, 32, 0.96);
backdrop-filter: blur(10px);
border-radius: 8px;
border: 1px solid rgba(156, 198, 236, 0.14);
box-shadow: 0 14px 30px rgba(2, 6, 14, 0.5);
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
@@ -169,7 +185,7 @@
.qrcode-container p {
margin-bottom: 10px;
font-size: 0.9rem;
color: #333;
color: var(--ice-blue, #cfe8ff);
}
.qrcode {
@@ -182,9 +198,9 @@
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #bbb;
background: #f8fafc;
color: #777;
border: 1px dashed rgba(156, 198, 236, 0.4);
background: rgba(255, 255, 255, 0.04);
color: rgba(207, 232, 255, 0.6);
font-size: 0.85rem;
}
@@ -204,14 +220,14 @@
font-size: 1.2rem;
cursor: pointer;
transition: transform 0.3s;
color: #1e3c72;
color: var(--ice-blue, #cfe8ff);
text-decoration: none;
border-radius: 50%;
}
.nav-icon:hover {
transform: scale(1.1);
background: rgba(106, 44, 145, 0.08);
background: rgba(56, 189, 248, 0.14);
}
.customer-service-link {
@@ -220,7 +236,7 @@
justify-content: center;
width: 35px;
height: 35px;
color: #1e3c72;
color: var(--ice-blue, #cfe8ff);
text-decoration: none;
border-radius: 50%;
font-size: 1rem;
@@ -228,13 +244,13 @@
}
.customer-service-link:hover {
color: #6a2c91;
background: rgba(106, 44, 145, 0.08);
color: var(--electric-blue, #38bdf8);
background: rgba(56, 189, 248, 0.14);
transform: translateY(-1px);
}
.btn-contact {
background: linear-gradient(135deg, #1e3c72 0%, #6a2c91 100%);
background: linear-gradient(135deg, var(--electric-blue, #38bdf8) 0%, #6a2c91 100%);
color: white;
border: none;
padding: 10px 25px;
@@ -248,7 +264,7 @@
.btn-contact:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(106, 44, 145, 0.3);
box-shadow: 0 6px 15px rgba(56, 189, 248, 0.35);
}
/* 响应式导航 */
css/pages.css
+36 -1
View File
@@ -1,6 +1,13 @@
/* 页面样式 */
.page-hero {
background: linear-gradient(135deg, #10294f 0%, #355a88 58%, #5c3d8c 100%);
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 60% 50% at 20% 20%, rgba(148, 163, 184, 0.16), transparent 60%),
radial-gradient(ellipse 55% 45% at 85% 15%, rgba(56, 189, 248, 0.10), transparent 60%),
repeating-linear-gradient(150deg, rgba(200, 214, 232, 0.045) 0px, rgba(200, 214, 232, 0.045) 2px, transparent 2px, transparent 24px),
repeating-linear-gradient(66deg, rgba(9, 14, 26, 0.32) 0px, rgba(9, 14, 26, 0.32) 3px, transparent 3px, transparent 38px),
linear-gradient(150deg, var(--rock-navy-0) 0%, var(--rock-navy-1) 45%, var(--rock-navy-2) 78%, var(--rock-navy-3) 100%);
color: white;
padding: 56px 20px;
text-align: center;
@@ -12,6 +19,34 @@
justify-content: center;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.6;
mix-blend-mode: overlay;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='pn'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.06' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='gamma' amplitude='1' exponent='2.2' offset='0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23pn)'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='pm'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23pm)'/></svg>");
background-size: 620px 620px, 180px 180px;
}
.page-hero-content {
position: relative;
z-index: 2;
}
.page-hero-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.page-hero-content h1 {
font-size: 2.5rem;
margin-bottom: 15px;
css/style.css
+60 -103
View File
@@ -47,23 +47,27 @@ body {
max-height: 680px;
overflow: hidden;
background:
radial-gradient(ellipse 60% 45% at 18% 15%, rgba(148, 163, 184, 0.16), transparent 60%),
radial-gradient(ellipse 55% 40% at 78% 10%, rgba(110, 130, 170, 0.14), transparent 60%),
radial-gradient(ellipse 70% 55% at 82% 88%, rgba(56, 189, 248, 0.10), transparent 65%),
radial-gradient(ellipse 60% 45% at 18% 15%, rgba(148, 163, 184, 0.18), transparent 60%),
radial-gradient(ellipse 55% 40% at 78% 10%, rgba(110, 130, 170, 0.16), transparent 60%),
radial-gradient(ellipse 70% 55% at 82% 88%, rgba(56, 189, 248, 0.11), transparent 65%),
repeating-linear-gradient(152deg, rgba(200, 214, 232, 0.05) 0px, rgba(200, 214, 232, 0.05) 2px, transparent 2px, transparent 26px),
repeating-linear-gradient(64deg, rgba(9, 14, 26, 0.35) 0px, rgba(9, 14, 26, 0.35) 3px, transparent 3px, transparent 40px),
linear-gradient(160deg, var(--rock-navy-0) 0%, var(--rock-navy-1) 40%, var(--rock-navy-2) 72%, var(--rock-navy-3) 100%);
}
/* 岩石颗粒质感叠加层 */
/* 岩石颗粒质感叠加层（更明显的岩石纹理） */
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
opacity: 0.65;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
background-size: 240px 240px;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.06' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='gamma' amplitude='1' exponent='2.2' offset='0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
background-size: 620px 620px, 180px 180px;
}
/* 岩壁棱线光影 */
@@ -74,17 +78,17 @@ body {
z-index: 0;
pointer-events: none;
background:
linear-gradient(105deg, transparent 30%, rgba(180, 196, 220, 0.05) 42%, transparent 54%),
linear-gradient(72deg, transparent 55%, rgba(180, 196, 220, 0.04) 63%, transparent 74%);
linear-gradient(105deg, transparent 30%, rgba(180, 196, 220, 0.06) 42%, transparent 54%),
linear-gradient(72deg, transparent 55%, rgba(180, 196, 220, 0.05) 63%, transparent 74%),
linear-gradient(18deg, transparent 60%, rgba(56, 189, 248, 0.05) 68%, transparent 78%);
}
/* 右下角跟随鼠标的粒子网络 */
/* 右下角跟随鼠标的粒子网络画布 */
.hero-particles {
position: absolute;
right: 0;
bottom: 0;
width: 60%;
height: 75%;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
@@ -153,21 +157,6 @@ body {
max-width: 600px;
}
.hero-content h1 {
font-family: 'Noto Serif SC', 'Fraunces', serif;
font-size: 2.45rem;
font-weight: 700;
letter-spacing: 0.01em;
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;
}
.hero-brand-content {
max-width: 960px;
padding: 0 20px;
@@ -191,40 +180,46 @@ body {
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}
.hero-kicker {
display: inline-block;
.hero-eyebrow-line {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.3em;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.3em;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ice-blue-dim);
margin-bottom: 14px;
margin-bottom: 20px;
}
.hero-brand-heading h1 {
color: var(--ice-blue);
margin-bottom: 0;
text-shadow: 0 0 30px rgba(56, 189, 248, 0.25);
.hero-hyphen {
color: var(--electric-blue);
}
.hero-mid-dot {
color: var(--electric-blue);
opacity: 0.85;
}
.hero-main-title {
font-family: 'Noto Serif SC', serif;
font-weight: 900;
letter-spacing: 0.02em;
font-size: 3.2rem;
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--ice-blue);
text-shadow: 0 0 34px rgba(56, 189, 248, 0.28);
margin-bottom: 0;
}
.hero-line-1 {
display: block;
line-height: 1.35;
font-size: 3.1rem;
}
.hero-line-2 {
display: block;
line-height: 1.6;
font-size: 1.4rem;
font-weight: 700;
color: rgba(207, 232, 255, 0.75);
letter-spacing: 0.15em;
margin-left: 0.2rem;
.hero-dash {
display: inline-block;
color: var(--electric-blue);
font-weight: 500;
margin-right: 0.15em;
opacity: 0.75;
}
.hero-badge-row {
@@ -275,33 +270,6 @@ body {
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;
}
/* 向下滚动提示 */
.scroll-cue {
position: absolute;
@@ -581,32 +549,20 @@ body {
margin-top: 12px;
}
.hero-content h1 {
.hero-eyebrow-line {
font-size: 0.82rem;
letter-spacing: 0.2em;
justify-content: center;
}
.hero-main-title {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.hero-line-1 {
font-size: 2.1rem;
}
.hero-line-2 {
font-size: 1.1rem;
margin-left: 0;
}
.hero-badge-row {
justify-content: center;
}
.hero-particles {
width: 100%;
height: 55%;
}
.products-preview h2,
.section-heading h2 {
font-size: 1.9rem;
@@ -651,12 +607,13 @@ body {
margin-top: 12px;
}
.hero-content h1 {
font-size: 1.5rem;
.hero-main-title {
font-size: 1.6rem;
}
.hero-content p {
font-size: 0.9rem;
.hero-eyebrow-line {
font-size: 0.7rem;
letter-spacing: 0.14em;
}
}
index.html
+9 -63
View File
@@ -71,6 +71,7 @@
<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#partners">合作伙伴</a>
<a href="pages/about.html#privacy">隐私协议</a>
</div>
</li>
@@ -94,19 +95,16 @@
<!-- 首页 -->
<section id="home" class="hero">
<canvas id="hero-particle-canvas" class="hero-particles" aria-hidden="true"></canvas>
<canvas class="hero-particles" aria-hidden="true"></canvas>
<div class="hero-carousel">
<!-- 第一张：公司理念 -->
<!-- 品牌主视觉 -->
<div class="hero-slide hero-brand-slide active">
<div class="hero-content hero-brand-content">
<div class="hero-brand-heading">
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
<div class="hero-brand-copy">
<span class="hero-kicker" data-reveal-item>HYPER&#8209;GENE · 生命孪生体系</span>
<h1>
<span class="hero-line-1" data-reveal-item>突破极限</span>
<span class="hero-line-2" data-reveal-item>生命从此被计算</span>
</h1>
<p class="hero-eyebrow-line" data-reveal-item>HYPER<span class="hero-hyphen">&#8209;</span>GENE <span class="hero-mid-dot">·</span> 生命孪生体系</p>
<h1 class="hero-main-title" data-reveal-item><span class="hero-dash">——</span>生命从此被计算</h1>
<div class="hero-badge-row" data-reveal-item>
<span class="hero-badge">极低成本</span>
<span class="hero-badge">高效</span>
@@ -118,43 +116,6 @@
</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" data-slide="1" aria-label="查看第 1 张轮播"></button>
<button class="carousel-dot" data-slide="2" aria-label="查看第 2 张轮播"></button>
<button class="carousel-dot" data-slide="3" aria-label="查看第 3 张轮播"></button>
<button class="carousel-dot" data-slide="4" aria-label="查看第 4 张轮播"></button>
</div>
<div class="scroll-cue" aria-hidden="true">
@@ -296,15 +257,13 @@
</section>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -316,21 +275,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="pages/about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -352,7 +299,6 @@
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/nav.js"></script>
<script src="js/particles.js"></script>
<script src="js/animations.js"></script>
js/nav.js
+14
View File
@@ -45,6 +45,20 @@ document.addEventListener('DOMContentLoaded', function() {
(href.includes('about') && path.includes('about'));
if (isCurrent) link.classList.add('active');
});
// 顶部导航：滚动后切换为深色玻璃底色，保证在浅色内容区域上依然清晰可读
const navbarEl = document.querySelector('.navbar');
if (navbarEl) {
const toggleNavbarState = () => {
if (window.scrollY > 40) {
navbarEl.classList.add('is-scrolled');
} else {
navbarEl.classList.remove('is-scrolled');
}
};
toggleNavbarState();
window.addEventListener('scroll', toggleNavbarState, { passive: true });
}
});
function adjustMobileNav() {
js/particles.js
+153 -145
View File
@@ -1,172 +1,180 @@
/**
* 右下角粒子网络效果
* 在英雄区右下角绘制一片跟随鼠标移动的粒子网络，呼应科技/基因数据感。
* 深色岩层背景上的粒子网络效果
* 在首页 hero 与各子页面 page-hero 的右下角绘制一片跟随鼠标移动的粒子网络。
* 支持页面中同时存在多个粒子画布（每个画布独立运行，共享全局鼠标位置）。
*/
(function () {
const canvas = document.getElementById('hero-particle-canvas');
if (!canvas) return;
var canvases = document.querySelectorAll('.hero-particles, .page-hero-particles');
if (!canvases.length) return;
const ctx = canvas.getContext('2d');
const DPR = window.devicePixelRatio || 1;
var DPR = window.devicePixelRatio || 1;
var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let width = 0;
let height = 0;
let particles = [];
let animationId = null;
var globalMouse = { clientX: null, clientY: null, active: false };
const mouse = { x: null, y: null, active: false };
document.addEventListener('mousemove', function (e) {
globalMouse.clientX = e.clientX;
globalMouse.clientY = e.clientY;
globalMouse.active = true;
});
document.addEventListener('mouseleave', function () { globalMouse.active = false; });
const config = {
density: 9000, // 每 9000 平方像素一个粒子
maxParticles: 90,
linkDistance: 120,
mouseLinkDistance: 170,
mouseForce: 0.9,
var config = {
density: 7000, // 每 7000 平方像素一个粒子（比之前更密一些）
maxParticles: 110,
linkDistance: 150,
mouseLinkDistance: 210,
mouseForce: 1.1,
dotRadiusMin: 1.6,
dotRadiusMax: 3.4,
dotColor: '124, 211, 252',
lineColor: '56, 189, 248'
};
function resize() {
const rect = canvas.getBoundingClientRect();
width = rect.width;
height = rect.height;
canvas.width = Math.max(1, Math.round(width * DPR));
canvas.height = Math.max(1, Math.round(height * DPR));
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
createParticles();
}
canvases.forEach(function (canvas) {
initCanvas(canvas);
});
function createParticles() {
const count = Math.min(config.maxParticles, Math.floor((width * height) / config.density));
particles = new Array(Math.max(count, 20)).fill(null).map(() => ({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.35,
vy: (Math.random() - 0.5) * 0.35,
r: Math.random() * 1.4 + 0.8
}));
}
function initCanvas(canvas) {
var ctx = canvas.getContext('2d');
var width = 0;
var height = 0;
var particles = [];
var mouse = { x: null, y: null, active: false };
function step() {
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
function resize() {
var rect = canvas.getBoundingClientRect();
width = rect.width;
height = rect.height;
canvas.width = Math.max(1, Math.round(width * DPR));
canvas.height = Math.max(1, Math.round(height * DPR));
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
createParticles();
}
if (p.x <= 0 || p.x >= width) p.vx *= -1;
if (p.y <= 0 || p.y >= height) p.vy *= -1;
function createParticles() {
var count = Math.min(config.maxParticles, Math.floor((width * height) / config.density));
particles = new Array(Math.max(count, 24)).fill(null).map(function () {
return {
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.4,
vy: (Math.random() - 0.5) * 0.4,
r: Math.random() * (config.dotRadiusMax - config.dotRadiusMin) + config.dotRadiusMin
};
});
}
p.x = Math.max(0, Math.min(width, p.x));
p.y = Math.max(0, Math.min(height, p.y));
if (mouse.active) {
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.hypot(dx, dy);
if (dist < config.mouseLinkDistance && dist > 0.001) {
const pull = (1 - dist / config.mouseLinkDistance) * config.mouseForce;
p.x -= (dx / dist) * pull;
p.y -= (dy / dist) * pull;
}
function updateLocalMouse() {
if (!globalMouse.active || globalMouse.clientX === null) {
mouse.active = false;
return;
}
});
}
function render() {
ctx.clearRect(0, 0, width, height);
// 粒子间连线
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.hypot(dx, dy);
if (dist < config.linkDistance) {
ctx.strokeStyle = `rgba(${config.lineColor}, ${(1 - dist / config.linkDistance) * 0.5})`;
ctx.lineWidth = 0.6;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
// 粒子与鼠标的连线
if (mouse.active) {
const dx = particles[i].x - mouse.x;
const dy = particles[i].y - mouse.y;
const dist = Math.hypot(dx, dy);
if (dist < config.mouseLinkDistance) {
ctx.strokeStyle = `rgba(${config.lineColor}, ${(1 - dist / config.mouseLinkDistance) * 0.7})`;
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
var rect = canvas.getBoundingClientRect();
var x = globalMouse.clientX - rect.left;
var y = globalMouse.clientY - rect.top;
var margin = 200;
if (x > -margin && x < width + margin && y > -margin && y < height + margin) {
mouse.x = Math.max(0, Math.min(width, x));
mouse.y = Math.max(0, Math.min(height, y));
mouse.active = true;
} else {
mouse.active = false;
}
}
// 粒子本体
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${config.dotColor}, 0.85)`;
ctx.shadowColor = 'rgba(56, 189, 248, 0.8)';
ctx.shadowBlur = 5;
ctx.fill();
ctx.shadowBlur = 0;
});
function step() {
particles.forEach(function (p) {
p.x += p.vx;
p.y += p.vy;
// 鼠标光点
if (mouse.active) {
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 2.2, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.shadowColor = 'rgba(255, 255, 255, 0.9)';
ctx.shadowBlur = 10;
ctx.fill();
ctx.shadowBlur = 0;
if (p.x <= 0 || p.x >= width) p.vx *= -1;
if (p.y <= 0 || p.y >= height) p.vy *= -1;
p.x = Math.max(0, Math.min(width, p.x));
p.y = Math.max(0, Math.min(height, p.y));
if (mouse.active) {
var dx = mouse.x - p.x;
var dy = mouse.y - p.y;
var dist = Math.hypot(dx, dy);
if (dist < config.mouseLinkDistance && dist > 0.001) {
var pull = (1 - dist / config.mouseLinkDistance) * config.mouseForce;
p.x -= (dx / dist) * pull;
p.y -= (dy / dist) * pull;
}
}
});
}
}
function loop() {
step();
render();
animationId = requestAnimationFrame(loop);
}
function render() {
ctx.clearRect(0, 0, width, height);
function updateMouseFromEvent(clientX, clientY) {
const rect = canvas.getBoundingClientRect();
const x = clientX - rect.left;
const y = clientY - rect.top;
// 允许鼠标在画布周边一定范围内也能产生吸引效果
const margin = 160;
if (x > -margin && x < width + margin && y > -margin && y < height + margin) {
mouse.x = Math.max(0, Math.min(width, x));
mouse.y = Math.max(0, Math.min(height, y));
mouse.active = true;
for (var i = 0; i < particles.length; i++) {
for (var j = i + 1; j < particles.length; j++) {
var dx = particles[i].x - particles[j].x;
var dy = particles[i].y - particles[j].y;
var dist = Math.hypot(dx, dy);
if (dist < config.linkDistance) {
ctx.strokeStyle = 'rgba(' + config.lineColor + ', ' + ((1 - dist / config.linkDistance) * 0.5) + ')';
ctx.lineWidth = 0.7;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
if (mouse.active) {
var mdx = particles[i].x - mouse.x;
var mdy = particles[i].y - mouse.y;
var mdist = Math.hypot(mdx, mdy);
if (mdist < config.mouseLinkDistance) {
ctx.strokeStyle = 'rgba(' + config.lineColor + ', ' + ((1 - mdist / config.mouseLinkDistance) * 0.7) + ')';
ctx.lineWidth = 0.9;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
}
}
particles.forEach(function (p) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(' + config.dotColor + ', 0.9)';
ctx.shadowColor = 'rgba(56, 189, 248, 0.85)';
ctx.shadowBlur = 7;
ctx.fill();
ctx.shadowBlur = 0;
});
if (mouse.active) {
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 2.6, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.shadowColor = 'rgba(255, 255, 255, 0.9)';
ctx.shadowBlur = 12;
ctx.fill();
ctx.shadowBlur = 0;
}
}
function loop() {
updateLocalMouse();
step();
render();
requestAnimationFrame(loop);
}
window.addEventListener('resize', resize);
resize();
if (!prefersReducedMotion) {
loop();
} else {
mouse.active = false;
render();
}
}
document.addEventListener('mousemove', e => updateMouseFromEvent(e.clientX, e.clientY));
document.addEventListener('mouseleave', () => { mouse.active = false; });
canvas.addEventListener('touchmove', e => {
if (e.touches && e.touches[0]) {
updateMouseFromEvent(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: true });
window.addEventListener('resize', resize);
const prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
resize();
if (!prefersReducedMotion) {
loop();
} else {
render();
}
})();
pages/about.html
+47 -18
View File
@@ -70,6 +70,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -92,6 +93,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>关于我们</h1>
<p>精准基因组学，引领生物技术未来</p>
@@ -109,6 +111,7 @@
<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="#partners" class="nav-item">合作伙伴</a></li>
<li><a href="#privacy" class="nav-item">隐私协议</a></li>
</ul>
</div>
@@ -183,6 +186,40 @@
</div>
</section>
<!-- 合作伙伴 -->
<section id="partners" class="about-section">
<h2>合作伙伴</h2>
<p class="intro-subtitle">与领先的科研机构、高校与产业伙伴共同推进基因组学技术转化</p>
<div class="media-grid">
<div class="media-card">
<img src="../公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司">
<h4>苏州中析生物信息有限公司</h4>
<p><a href="https://www.prcxi.com/" target="_blank" class="doc-link">访问官网 →</a></p>
</div>
<div class="media-card">
<img src="../公司资料/公司简介/海南大学logo.png" alt="海南大学">
<h4>海南大学</h4>
<p><a href="https://www.hainanu.edu.cn/" target="_blank" class="doc-link">访问官网 →</a></p>
</div>
<div class="media-card">
<img src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼">
<h4>成都瀚辰光翼</h4>
<p><a href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank" class="doc-link">访问官网 →</a></p>
</div>
<div class="media-card">
<img src="../公司资料/公司简介/华大智造logo.png" alt="华大智造">
<h4>华大智造</h4>
<p><a href="https://www.mgi-tech.com/" target="_blank" class="doc-link">访问官网 →</a></p>
</div>
<div class="media-card">
<img src="../公司资料/公司简介/深圳华大生命科学研究院logo.png" alt="深圳华大生命科学研究院">
<h4>深圳华大生命科学研究院</h4>
<p><a href="https://www.chinagut.cn/box/organizations/1403" target="_blank" class="doc-link">访问官网 →</a></p>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="about-section">
<h2>联系我们</h2>
@@ -345,15 +382,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -365,21 +400,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -397,6 +420,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/about.js"></script>
</body>
pages/advantages.html
+12 -18
View File
@@ -69,6 +69,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -91,6 +92,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>综合优势</h1>
<p>业界领先的多平台集成解决方案</p>
@@ -256,15 +258,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -276,21 +276,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -308,6 +296,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/pages.js"></script>
</body>
pages/applications.html
+12 -18
View File
@@ -69,6 +69,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -91,6 +92,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>应用领域</h1>
<p>基因组学技术在多个领域的创新应用</p>
@@ -203,15 +205,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -223,21 +223,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -255,6 +243,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/pages.js"></script>
</body>
pages/customer-service.html
+7
View File
@@ -43,6 +43,7 @@
</nav>
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>瀹㈡埛鏈嶅姟绯荤粺</h1>
<p>绯荤粺姝ｅ湪瑙勫垝涓紝褰撳墠椤甸潰淇濈暀璺宠浆鍏ュ彛</p>
@@ -56,6 +57,12 @@
</div>
</main>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/pages.js"></script>
</body>
pages/products.html
+12 -18
View File
@@ -69,6 +69,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -91,6 +92,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>创新产品</h1>
<p>为全球研究者提供先进的基因组学解决方案</p>
@@ -398,15 +400,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -418,21 +418,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -450,6 +438,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/pages.js"></script>
</body>
pages/resources.html
+12 -18
View File
@@ -70,6 +70,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -92,6 +93,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>资源中心</h1>
<p>学术成果、案例精选、视频教程</p>
@@ -420,15 +422,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -440,21 +440,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -472,6 +460,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/resources.js"></script>
</body>
pages/services.html
+12 -18
View File
@@ -69,6 +69,7 @@
<a href="about.html#haiguji">海古纪</a>
<a href="about.html#contact">联系我们</a>
<a href="about.html#news">最新动态</a>
<a href="about.html#partners">合作伙伴</a>
<a href="about.html#privacy">隐私协议</a>
</div>
</li>
@@ -91,6 +92,7 @@
<!-- 顶部大图 -->
<section class="page-hero">
<canvas class="page-hero-particles" aria-hidden="true"></canvas>
<div class="page-hero-content">
<h1>测序与分析服务</h1>
<p>从样品到数据，提供一站式基因组学解决方案</p>
@@ -672,15 +674,13 @@
</div>
<!-- 底部 -->
<div class="footer-fade" aria-hidden="true"></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>
<p class="footer-phone">电话：16689661917</p>
</div>
<div class="footer-section">
@@ -692,21 +692,9 @@
</ul>
</div>
<div class="footer-section">
<div class="footer-section footer-section-partners">
<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>
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
src="../公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
class="partner-logo" src="../公司资料/公司简介/深圳华大生命科学研究院logo.png"
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
</div>
<a class="footer-partners-link" href="about.html#partners">查看全部合作伙伴 →</a>
</div>
<div class="footer-section">
@@ -724,6 +712,12 @@
</div>
</footer>
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
<script src="../js/pages.js"></script>
</body>