From 41554ee60ce51a2f466f1f92a4da467fa1f3013a Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 01:56:24 +0000 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E7=AB=99=E6=94=B9=E7=89=88=EF=BC=9A?= =?UTF-8?q?=E5=AD=90=E9=A1=B5=E9=9D=A2=E5=90=8C=E6=AD=A5=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E3=80=81=E5=AF=BC=E8=88=AA/=E5=BA=95=E9=83=A8=E9=87=8D?= =?UTF-8?q?=E5=81=9A=E3=80=81=E5=B2=A9=E7=9F=B3=E7=BA=B9=E7=90=86=E4=B8=8E?= =?UTF-8?q?=E7=B2=92=E5=AD=90=E5=A2=9E=E5=BC=BA=E3=80=81=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E7=B2=BE=E7=AE=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 全部子页面(about/advantages/applications/products/resources/services/customer-service)顶部大图统一改为深色岩层纹理，并加入跟随鼠标的粒子网络 - 全部子页面引入 Lenis + GSAP/ScrollTrigger，与首页动效体系保持一致 - 顶部导航改为默认透明、滚动后转为深色玻璃底色，不再是纯白底色条 - 底部导航：整体改为更深邃的岩层蓝，页面内容到底部之间新增渐变过渡(footer-fade) - 底部导航合作伙伴模块精简为单一跳转入口，实际内容迁移至【关于我们】新增的合作伙伴子页(about.html#partners)，并同步到顶部导航与侧边快速导航 - 联系方式精简为单一电话 16689661917，去除所有联系人姓名 - 首页去除轮播，只保留品牌主视觉一屏；标题改为「HYPER-GENE · 生命孪生体系——生命从此被计算」的错落艺术排版，保留极低成本/高效/灵活/高通量徽标 - 岩石纹理升级：新增分层分形噪声 + 斜向岩层条带，观感更接近真实岩石 - 粒子效果增大：画布铺满整个hero/page-hero区域，粒子半径与连线距离均增加 --- css/footer.css | 97 ++++++------ css/nav.css | 78 ++++++---- css/pages.css | 37 ++++- css/style.css | 163 ++++++++------------ index.html | 72 ++------- js/nav.js | 14 ++ js/particles.js | 298 ++++++++++++++++++------------------ pages/about.html | 65 +++++--- pages/advantages.html | 30 ++-- pages/applications.html | 30 ++-- pages/customer-service.html | 7 + pages/products.html | 30 ++-- pages/resources.html | 30 ++-- pages/services.html | 30 ++-- 14 files changed, 480 insertions(+), 501 deletions(-) diff --git a/css/footer.css b/css/footer.css index f93ca10..194337e 100644 --- a/css/footer.css +++ b/css/footer.css @@ -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; + } } diff --git a/css/nav.css b/css/nav.css index 0b6b623..4531dd5 100644 --- a/css/nav.css +++ b/css/nav.css @@ -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); } /* 响应式导航 */ diff --git a/css/pages.css b/css/pages.css index 9b4b68c..f23ab39 100644 --- a/css/pages.css +++ b/css/pages.css @@ -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,"), + url("data:image/svg+xml;utf8,"); + 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; diff --git a/css/style.css b/css/style.css index 22a6916..d209666 100644 --- a/css/style.css +++ b/css/style.css @@ -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,"); - background-size: 240px 240px; + background-image: + url("data:image/svg+xml;utf8,"), + url("data:image/svg+xml;utf8,"); + 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; } } diff --git a/index.html b/index.html index 0787d7c..4a9f64e 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,7 @@ 海古纪 联系我们 最新动态 + 合作伙伴 隐私协议 @@ -94,19 +95,16 @@
- +
- +
- HYPER‑GENE · 生命孪生体系 -

- 突破极限 - 生命从此被计算 -

+

HYPER‑GENE · 生命孪生体系

+

——生命从此被计算

极低成本 高效 @@ -118,43 +116,6 @@
从人工选择到智能育种
- - -
-
-

HSmaster 全自动文库制备系统

-

核酸提取、PCR扩增、文库质检全流程无人值守

- 查看产品 -
- HSmaster全自动文库制备系统 -
- - -
-
-

AI 生信科学家

-

上传数据后自动识别项目类型，规划并执行多组学分析路径

- 浏览产品 -
- AI生信科学家 -
- - -
-
-

立即联系我们

-

获取专业的基因组学解决方案

- 咨询服务 -
- 文库流水线 -
-
- -
- - - -
+