首页品牌主视觉重构：标题分层居中排布、Logo放大、删除扫描线与标签、导航栏Logo统一替换
This commit is contained in:
potasor
@@ -46,7 +46,7 @@
|
||||
|
||||
## 🎨 设计特色
|
||||
|
||||
- **主色调**：蓝（#1e3c72）、紫（#6a2c91）、亮青色（#00d4ff）
|
||||
- **主色调**：蓝（#0E48C1）、紫（#E23AFB）、亮青色（#3DF8F8）
|
||||
- **导航栏**：粘性导航，支持下拉菜单
|
||||
- **响应式设计**：完美适配桌面、平板和手机
|
||||
- **交互效果**：平滑过渡、悬停效果、轮播图
|
||||
|
||||
+1
-1
@@ -136,7 +136,7 @@ function flushPending() {
|
||||
).join('');
|
||||
const html = `<h2>海古纪网站 - 新联系消息汇总</h2><p>共有 ${pending.length} 条新消息：</p>
|
||||
<table border="1" cellpadding="8" cellspacing="0" style="border-collapse:collapse;width:100%">
|
||||
<thead><tr style="background:#1e3c72;color:#fff"><th>#</th><th>姓名</th><th>邮箱</th><th>电话</th><th>咨询类型</th><th>消息内容</th><th>提交时间</th></tr></thead>
|
||||
<thead><tr style="background:#0E48C1;color:#fff"><th>#</th><th>姓名</th><th>邮箱</th><th>电话</th><th>咨询类型</th><th>消息内容</th><th>提交时间</th></tr></thead>
|
||||
<tbody>${lines}</tbody></table>`;
|
||||
const now = new Date().toISOString();
|
||||
sendResendMail(MAIL_TO, `【海古纪-联系我们】${pending.length} 条新消息汇总`, html)
|
||||
|
||||
+41
-60
@@ -1,15 +1,15 @@
|
||||
/* 底部渐变过渡：上色与页面背景一致，下色更深，形成无缝过渡 */
|
||||
/* 底部渐变过渡：大幅缩短，与页面背景融合 */
|
||||
.footer-fade {
|
||||
height: 160px;
|
||||
background: linear-gradient(180deg, var(--rock-navy-0) 0%, #020409 100%);
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 底部样式 —— 顶部与页面背景同色，底部更深邃 */
|
||||
/* 底部样式 —— 透明背景，与页面主体融为一体 */
|
||||
.footer {
|
||||
background: linear-gradient(180deg, #020409 0%, #000103 100%);
|
||||
background: transparent;
|
||||
color: white;
|
||||
padding: 28px 0 12px;
|
||||
padding: 16px 0 10px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -18,22 +18,22 @@
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr 0.9fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 20px;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
font-size: clamp(0.85rem, 1.5vw, 1.1rem);
|
||||
margin-bottom: 8px;
|
||||
color: var(--ice-blue, #cfe8ff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-section p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.86rem;
|
||||
margin-bottom: 6px;
|
||||
font-size: clamp(0.7rem, 1.2vw, 0.85rem);
|
||||
opacity: 0.9;
|
||||
line-height: 1.8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer-phone {
|
||||
@@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
.footer-section ul li {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.footer-section ul li a {
|
||||
@@ -54,29 +54,29 @@
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
opacity: 0.9;
|
||||
font-size: 0.95rem;
|
||||
font-size: clamp(0.72rem, 1.2vw, 0.88rem);
|
||||
}
|
||||
|
||||
.qr-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 54px);
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(3, 40px);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.qr-slot {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.38);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.footer-section ul li a:hover {
|
||||
color: var(--electric-blue, #00d4ff);
|
||||
color: var(--electric-blue, #3DF8F8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -98,28 +98,28 @@
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
background: var(--electric-blue, #00d4ff);
|
||||
color: var(--rock-navy-0, #1e3c72);
|
||||
border-color: var(--electric-blue, #00d4ff);
|
||||
background: var(--electric-blue, #3DF8F8);
|
||||
color: var(--rock-navy-0, #0E48C1);
|
||||
border-color: var(--electric-blue, #3DF8F8);
|
||||
}
|
||||
|
||||
/* 底部栏 */
|
||||
/* 底部栏 —— 移除分界线，保持透明 */
|
||||
.footer-bottom {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 8px 20px;
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-size: clamp(0.68rem, 1.1vw, 0.82rem);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
margin: 8px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
color: var(--electric-blue, #00d4ff);
|
||||
color: var(--electric-blue, #3DF8F8);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
@@ -133,58 +133,39 @@
|
||||
@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;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-fade {
|
||||
height: 100px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.footer {
|
||||
padding: 26px 0 12px;
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
padding: 4px 10px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding: 15px;
|
||||
font-size: 0.8rem;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.footer-fade {
|
||||
height: 70px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+13
-12
@@ -41,8 +41,10 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
width: auto;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
@@ -70,11 +72,11 @@
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--electric-blue, #38bdf8);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--electric-blue, #38bdf8);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border-radius: 6px;
|
||||
}
|
||||
@@ -134,13 +136,13 @@
|
||||
.dropdown-menu a:hover {
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
padding-left: 25px;
|
||||
color: var(--electric-blue, #38bdf8);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu a.active,
|
||||
.submenu-trigger.active > a {
|
||||
color: var(--electric-blue, #38bdf8);
|
||||
.submenu-trigger.active>a {
|
||||
color: var(--electric-blue, #5996FF);
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
}
|
||||
|
||||
@@ -148,7 +150,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submenu-trigger > a {
|
||||
.submenu-trigger>a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -175,6 +177,7 @@
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 二维码容器 */
|
||||
.qrcode-container {
|
||||
padding: 20px;
|
||||
@@ -244,13 +247,13 @@
|
||||
}
|
||||
|
||||
.customer-service-link:hover {
|
||||
color: var(--electric-blue, #38bdf8);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-contact {
|
||||
background: linear-gradient(135deg, var(--electric-blue, #38bdf8) 0%, #6a2c91 100%);
|
||||
background: linear-gradient(135deg, var(--electric-blue, #5996FF) 0%, #E23AFB 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 25px;
|
||||
@@ -321,6 +324,4 @@
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
+12
-4
@@ -4,11 +4,11 @@
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
color: white;
|
||||
padding: 56px 20px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
min-height: 260px;
|
||||
height: 40vh;
|
||||
max-height: 380px;
|
||||
min-height: 180px;
|
||||
height: 28vh;
|
||||
max-height: 260px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -107,6 +107,14 @@
|
||||
color: var(--ice-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inline-logo {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
|
||||
+68
-61
@@ -6,10 +6,10 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-blue: #1e3c72;
|
||||
--primary-purple: #6a2c91;
|
||||
--primary-blue: #0E48C1;
|
||||
--primary-purple: #E23AFB;
|
||||
--secondary-blue: #2a5298;
|
||||
--accent-color: #00d4ff;
|
||||
--accent-color: #3DF8F8;
|
||||
--hero-overlay-color: rgba(127, 255, 212, 0.32);
|
||||
--light-bg: #f5f7fa;
|
||||
--dark-text: #333;
|
||||
@@ -22,7 +22,7 @@
|
||||
--rock-navy-3: #1b2c4a;
|
||||
--ice-blue: #cfe8ff;
|
||||
--ice-blue-dim: #9cc6ec;
|
||||
--electric-blue: #38bdf8;
|
||||
--electric-blue: #5996FF;
|
||||
--coral-accent: #ff8a5c;
|
||||
}
|
||||
|
||||
@@ -32,12 +32,12 @@ body {
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 45% at 18% 10%, rgba(148, 163, 184, 0.14), transparent 60%),
|
||||
radial-gradient(ellipse 55% 40% at 82% 6%, rgba(110, 130, 170, 0.12), transparent 60%),
|
||||
radial-gradient(ellipse 70% 55% at 85% 92%, rgba(56, 189, 248, 0.09), transparent 65%),
|
||||
repeating-linear-gradient(152deg, rgba(200, 214, 232, 0.04) 0px, rgba(200, 214, 232, 0.04) 2px, transparent 2px, transparent 26px),
|
||||
repeating-linear-gradient(64deg, rgba(9, 14, 26, 0.3) 0px, rgba(9, 14, 26, 0.3) 3px, transparent 3px, transparent 40px),
|
||||
linear-gradient(180deg, var(--rock-navy-1) 0%, var(--rock-navy-2) 45%, var(--rock-navy-1) 75%, var(--rock-navy-0) 100%);
|
||||
radial-gradient(ellipse 60% 45% at 18% 10%, rgba(148, 163, 184, 0.18), transparent 60%),
|
||||
radial-gradient(ellipse 55% 40% at 82% 6%, rgba(110, 130, 170, 0.15), transparent 60%),
|
||||
radial-gradient(ellipse 70% 55% at 85% 92%, rgba(56, 189, 248, 0.12), transparent 65%),
|
||||
repeating-linear-gradient(152deg, rgba(200, 214, 232, 0.06) 0px, rgba(200, 214, 232, 0.06) 2px, transparent 2px, transparent 26px),
|
||||
repeating-linear-gradient(64deg, rgba(9, 14, 26, 0.25) 0px, rgba(9, 14, 26, 0.25) 3px, transparent 3px, transparent 40px),
|
||||
linear-gradient(180deg, var(--rock-navy-2) 0%, var(--rock-navy-3) 45%, var(--rock-navy-2) 75%, var(--rock-navy-1) 100%);
|
||||
background-attachment: fixed, fixed, fixed, fixed, fixed, fixed;
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ body::before {
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
opacity: 0.35;
|
||||
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='bn'><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(%23bn)'/></svg>"),
|
||||
@@ -75,9 +75,9 @@ body::before {
|
||||
/* 英雄部分 —— 与全站统一的深海岩层背景（由 body 提供），此处保持透明 */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 62vh;
|
||||
min-height: 460px;
|
||||
max-height: 680px;
|
||||
height: 50vh;
|
||||
min-height: 380px;
|
||||
max-height: 550px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -111,12 +111,13 @@ body::before {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-slide > img {
|
||||
.hero-slide>img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -131,10 +132,10 @@ body::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(28, 45, 74, 0.35), rgba(5, 7, 12, 0.55) 80%);
|
||||
background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(28, 45, 74, 0.2), rgba(5, 7, 12, 0.3) 80%);
|
||||
}
|
||||
|
||||
.hero-brand-slide > img {
|
||||
.hero-brand-slide>img {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
@@ -150,6 +151,10 @@ body::before {
|
||||
max-width: 960px;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-brand-heading {
|
||||
@@ -163,24 +168,22 @@ body::before {
|
||||
}
|
||||
|
||||
.hero-brand-logo {
|
||||
height: 8.5rem;
|
||||
height: 12rem;
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
|
||||
}
|
||||
|
||||
.hero-eyebrow-line {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.28em;
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ice-blue-dim);
|
||||
margin-bottom: 20px;
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-hyphen {
|
||||
@@ -195,12 +198,12 @@ body::before {
|
||||
.hero-main-title {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 900;
|
||||
font-size: 3.2rem;
|
||||
font-size: 2.5rem;
|
||||
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;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hero-dash {
|
||||
@@ -216,6 +219,7 @@ body::before {
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 26px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
@@ -284,14 +288,28 @@ body::before {
|
||||
}
|
||||
|
||||
@keyframes scrollCueMove {
|
||||
0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
|
||||
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
|
||||
100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; }
|
||||
0% {
|
||||
transform: scaleY(0.3);
|
||||
transform-origin: top;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: top;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.3);
|
||||
transform-origin: bottom;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 关键词标记带 */
|
||||
.marquee-strip {
|
||||
background: var(--rock-navy-0);
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(156, 198, 236, 0.12);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.12);
|
||||
overflow: hidden;
|
||||
@@ -316,8 +334,13 @@ body::before {
|
||||
}
|
||||
|
||||
@keyframes marqueeScroll {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(-50%); }
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -336,19 +359,6 @@ body::before {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-scan {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--electric-blue), transparent);
|
||||
box-shadow: 0 0 16px 2px rgba(56, 189, 248, 0.6);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
max-width: 640px;
|
||||
@@ -373,12 +383,10 @@ body::before {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* 产品预览部分 —— 深色岩层卡片 */
|
||||
/* 产品预览部分 —— 透明背景，显示body背景 */
|
||||
.products-preview {
|
||||
padding: 110px 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 85% 0%, rgba(56, 189, 248, 0.06), transparent 60%),
|
||||
linear-gradient(180deg, var(--rock-navy-0) 0%, var(--rock-navy-1) 100%);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
@@ -456,10 +464,10 @@ body::before {
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
/* 学术与动态部分 —— 深色双栏 */
|
||||
/* 学术与动态部分 —— 透明背景 */
|
||||
.academic-news {
|
||||
padding: 110px 0;
|
||||
background: var(--rock-navy-1);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
@@ -539,9 +547,8 @@ body::before {
|
||||
}
|
||||
|
||||
.hero-eyebrow-line {
|
||||
font-size: 0.82rem;
|
||||
font-size: 1.54rem;
|
||||
letter-spacing: 0.2em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-main-title {
|
||||
@@ -577,7 +584,7 @@ body::before {
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
height: 400px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -601,7 +608,7 @@ body::before {
|
||||
}
|
||||
|
||||
.hero-eyebrow-line {
|
||||
font-size: 0.7rem;
|
||||
font-size: 1.31rem;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
}
|
||||
@@ -609,7 +616,7 @@ body::before {
|
||||
|
||||
|
||||
.home-video-section {
|
||||
background: var(--rock-navy-0);
|
||||
background: transparent;
|
||||
padding: 100px 20px;
|
||||
}
|
||||
|
||||
@@ -664,4 +671,4 @@ body::before {
|
||||
.home-video-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
+16
-16
@@ -7,7 +7,9 @@
|
||||
<title>海古纪生物科技 - 精准基因组学解决方案</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
@@ -19,7 +21,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#home" class="nav-link">首页</a></li>
|
||||
@@ -100,21 +102,19 @@
|
||||
<!-- 品牌主视觉 -->
|
||||
<div class="hero-slide hero-brand-slide active">
|
||||
<div class="hero-content hero-brand-content">
|
||||
<p class="hero-eyebrow-line" data-reveal-item>HYPER<span class="hero-hyphen">‑</span>GENE
|
||||
</p>
|
||||
<div class="hero-brand-heading">
|
||||
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
|
||||
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo(1).png" alt="海古纪 Logo">
|
||||
<div class="hero-brand-copy">
|
||||
<p class="hero-eyebrow-line" data-reveal-item>HYPER<span class="hero-hyphen">‑</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>
|
||||
<span class="hero-badge">灵活</span>
|
||||
<span class="hero-badge">高通量</span>
|
||||
</div>
|
||||
<h1 class="hero-main-title" data-reveal-item>生命孪生体系</h1>
|
||||
<h1 class="hero-main-title" data-reveal-item> <span
|
||||
class="hero-dash">
|
||||
——</span>生命从此被计算</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种">
|
||||
<!-- <img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
|
||||
<!-- 首页视频 -->
|
||||
<section class="home-video-section reveal-section">
|
||||
<span class="section-scan" aria-hidden="true"></span>
|
||||
|
||||
<div class="container home-video-layout">
|
||||
<div class="home-video-copy reveal-up">
|
||||
<span class="section-kicker">南繁科研现场</span>
|
||||
@@ -164,7 +164,7 @@
|
||||
</section>
|
||||
|
||||
<section class="products-preview reveal-section">
|
||||
<span class="section-scan" aria-hidden="true"></span>
|
||||
|
||||
<div class="container">
|
||||
<div class="section-heading reveal-up">
|
||||
<span class="eyebrow">产品与服务</span>
|
||||
@@ -206,7 +206,7 @@
|
||||
|
||||
<!-- 学术文献与动态 -->
|
||||
<section class="academic-news reveal-section">
|
||||
<span class="section-scan" aria-hidden="true"></span>
|
||||
|
||||
<div class="container">
|
||||
<div class="section-heading reveal-up">
|
||||
<span class="eyebrow">知识与洞见</span>
|
||||
@@ -299,4 +299,4 @@
|
||||
<script src="js/animations.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -72,23 +72,6 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (scanLine) {
|
||||
gsap.fromTo(scanLine,
|
||||
{ top: '0%', opacity: 0.9 },
|
||||
{
|
||||
top: '100%',
|
||||
opacity: 0,
|
||||
duration: 1.1,
|
||||
ease: 'power2.inOut',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 85%',
|
||||
once: true
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- 4. 产品卡片 3D 悬浮跟随 ---------- */
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
|
||||
+2
-2
@@ -17,7 +17,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
@@ -126,7 +126,7 @@
|
||||
|
||||
<!-- 产品介绍 -->
|
||||
<div id="ai-intro" class="tab-content active">
|
||||
<h2>AI生信科学家</h2>
|
||||
<h2><img src="../公司资料/产品/AI生信科学家/AI生信科学家logo.png" alt="AI生信科学家 Logo" class="inline-logo">AI生信科学家</h2>
|
||||
<p class="intro-subtitle">全自动、自规划的多组学分析智能体</p>
|
||||
|
||||
<div class="media-grid">
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
<img src="../公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
||||
<img src="../公司资料/公司简介/海古纪logo（仅logo）.png" alt="海古纪 Logo" class="logo">
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="../index.html" class="nav-link">首页</a></li>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 890 KiB |
@@ -1,50 +0,0 @@
|
||||
配色：以logo的主色调（蓝、紫）为主，辅以一些亮色来突出重点内容。
|
||||
这个网站包含首页、产品服务、应用领域、综合优势、资源中心、关于我们等主要功能模块。每个模块下可以有多个子页面，详细介绍相关内容。同时每个网页都具有导航栏，方便用户随时跳转。
|
||||
每个网页也都具有底部的联系信息和合作伙伴展示，增加公司的信誉度和影响力。
|
||||
除首页外的其他功能模块的首页都是类似https://www.bgitechsolutions.com/sequencing/1 这种形式的页面，顶部大图展示该功能模块的重要内容，中间的具体内容展示方式是上方导航，左侧看情况决定是否添加更具体的导航，中间导航的内容展示。在功能首页中点击导航时，无需重复进入，只需要切换中间内容展示即可。
|
||||
# 导航栏
|
||||
设计一个清晰的导航栏，应该具有响应式设计，确保在手机、平板和桌面设备上都能正常显示和使用。可以使用下拉菜单来组织子页面，使导航更加清晰。使用悬浮效果，使导航栏在用户滚动页面时保持可见。
|
||||
导航栏左侧展示公司logo，中间展示主要功能模块。右边是联系方式和客户入口。
|
||||
功能模块包括“首页”、“产品”、“服务”、“应用领域”、“综合优势”、“资源中心”、“关于我们”等。
|
||||
导航栏右边用一个图标表示微信公众号，下拉菜单展示公众号二维码和链接，方便用户关注。再用一个图标展示客户服务系统，点击可以进入客户服务页面，登录注册，提供在线咨询和帮助。最右边加一个联系我们的按钮，点击后进入“联系我们”子页面。
|
||||
点击导航栏中的任意功能模块，页面会跳转到对应的首页，同时下拉菜单会展示该模块下的子页面，用户可以点击进入具体内容。导航栏设计要简洁明了，确保用户能够快速找到所需信息。
|
||||
## 下拉菜单
|
||||
鼠标放置在对应功能模块上即可展示具体模块内容。
|
||||
首页和logo：点击即可进入首页，无下拉菜单。
|
||||
产品：下拉菜单包括公司资料下的产品子文件夹名称。
|
||||
服务：下拉菜单包括公司资料下的服务子文件夹名称。
|
||||
应用领域：下拉菜单包括疾病研究、微生物研究、动植物研究。
|
||||
综合优势：下拉菜单包括测序平台、分析平台、核心实验室、客户服务系统CSS。
|
||||
资源中心：下拉菜单包括精选案例和视频中心。
|
||||
关于我们：下拉菜单包括海古纪、联系我们、最新动态、隐私协议。
|
||||
# 底部
|
||||
底部应该包含公司的联系信息、合作伙伴展示和版权信息等内容。联系信息应该包括公司的地址、电话、邮箱和社交媒体链接等，方便用户随时联系公司。合作伙伴展示可以展示公司的主要合作伙伴和客户，增加公司的信誉度和影响力。版权信息应该包含公司的名称和版权声明，保护公司的知识产权。
|
||||
# 首页
|
||||
要简洁明了，展示公司的核心产品、服务和价值主张。
|
||||
顶部使用大图或视频背景，多张滚动效果，第一张是公司理念，第二张是最新消息，第三张是最新产品展示或折扣信息，最后一张是联系信息。
|
||||
中间放产品和服务，有产品的简单介绍和图片展示。旁边就放跳转链接，跳转内容就是导航栏的下拉菜单，点击后进入对应的子页面。
|
||||
然后下面就放学术文献和公司的最新动态，展示公司的研究成果和行业动态。
|
||||
# 产品
|
||||
顶部大图展示核心产品图片，突出产品的独特卖点和优势。
|
||||
下方的具体内容是：上部导航栏（产品介绍、案例解析、结果展示），左侧导航栏导航不同的产品类别。
|
||||
产品介绍就是产品的具体信息和技术规格，案例解析是展示产品在实际应用中的案例和客户评价，结果展示是展示产品的实验结果和性能数据。
|
||||
# 服务
|
||||
设计思路同产品
|
||||
# 应用领域
|
||||
顶部大图展示应用领域的相关图片，突出公司的专业能力和技术实力。
|
||||
下方的具体内容是：上部导航栏（疾病研究、微生物研究、动植物研究）。中间就是不同的应用领域内容展示。
|
||||
# 综合优势
|
||||
设计思路同应用领域。
|
||||
# 资源中心
|
||||
设计参考：https://www.bgitechsolutions.com/case
|
||||
左侧导航栏展示检索以及分类，分类包括研究领域、产品类别、年份、影响因子，类似知网的文献检索。内容部分就是展示检索结果，点击后进入具体的案例或视频页面，展示详细内容。
|
||||
详细内容页面就是期刊或者视频或者公众号发布的文章，页面就是一页全部展示的页面，不做上下滚动效果，左半部分是文章或者视频，右半部分是内容简介和原文链接。左侧的文章以PPT的形式展示，PPT缩略图放在文章下方。
|
||||
# 关于我们
|
||||
关于我们页面应该介绍公司的背景、使命、团队和联系方式等信息。可以分为海古纪、联系我们、最新动态、隐私协议等不同的部分，每个部分展示相关的内容。
|
||||
在关于我们页面（也就是海古纪页面）中，应该包含详细的公司信息、团队介绍、联系方式和相关研究成果等内容，以帮助用户更好地了解公司的背景和实力，并提供方便的联系方式。
|
||||
在联系我们页面中，用户可以添加自己的信息并发送给公司，可以选择科研需求或者技术咨询或者商务合作。
|
||||
最新动态页面应该展示公司的最新新闻、活动和研究成果等内容，以吸引用户关注和参与。与公司的公众号相关联。
|
||||
隐私协议页面应该明确公司的隐私政策和数据保护措施，以保护用户的个人信息和隐私。
|
||||
# 其他功能
|
||||
除了上述主要功能模块外，网站还可以增加一些其他功能来提升用户体验和互动性。例如，可以添加一个在线咨询功能，允许用户直接与公司的客服人员进行沟通和咨询。还可以添加一个博客或新闻栏目，定期发布公司的最新动态、行业资讯和技术文章，吸引用户关注和参与。此外，还可以添加一个客户反馈功能，收集用户的意见和建议，以不断改进产品和服务。
|
||||
总之，设计一个清晰、简洁、易用的网站导航和功能模块，可以帮助用户更好地了解公司的产品和服务，提升用户体验和满意度，并增加公司的影响力和竞争力。
|
||||
Reference in New Issue
Block a user