Merge pull request #1 from potaser/feature/hero-dark-rock-redesign
Feature/hero dark rock redesign
This commit is contained in:
Scarlett Huang
@@ -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)
|
||||
|
||||
+24
-24
@@ -15,7 +15,7 @@
|
||||
.about-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
@@ -23,19 +23,19 @@
|
||||
.about-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin: 25px 0 15px 0;
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
}
|
||||
|
||||
/* 鍏徃浠嬬粛 */
|
||||
.company-intro {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.company-intro p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -60,19 +60,19 @@
|
||||
}
|
||||
|
||||
.highlight-item h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.highlight-item p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 鍥㈤槦淇℃伅 */
|
||||
.team-section {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
border-top: 4px solid var(--primary-purple);
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
.team-info p {
|
||||
margin-bottom: 10px;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@@ -103,25 +103,25 @@
|
||||
}
|
||||
|
||||
.info-block {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.info-block h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-block p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 鑱旂郴琛ㄥ崟 */
|
||||
.contact-form {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
@@ -129,7 +129,7 @@
|
||||
|
||||
.contact-form h3 {
|
||||
margin-top: 0;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -139,7 +139,7 @@
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--dark-text);
|
||||
color: var(--ice-blue);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -149,7 +149,7 @@
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid rgba(156, 198, 236, 0.22);
|
||||
border-radius: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
@@ -160,7 +160,7 @@
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-purple);
|
||||
border-color: var(--electric-blue);
|
||||
box-shadow: 0 0 0 3px rgba(106, 44, 145, 0.1);
|
||||
}
|
||||
|
||||
@@ -204,27 +204,27 @@
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 闅愮鏀跨瓥鍐呭 */
|
||||
.privacy-content {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
line-height: 1.8;
|
||||
@@ -232,12 +232,12 @@
|
||||
|
||||
.privacy-content h3 {
|
||||
margin: 25px 0 15px 0;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.privacy-content p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@@ -306,13 +306,13 @@
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
color: #6b7280;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.88rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: #b91c1c;
|
||||
color: #fca5a5;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
+56
-106
@@ -1,9 +1,15 @@
|
||||
/* 底部样式 */
|
||||
/* 底部渐变过渡：大幅缩短，与页面背景融合 */
|
||||
.footer-fade {
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 底部样式 —— 透明背景，与页面主体融为一体 */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a4a8a 100%);
|
||||
background: transparent;
|
||||
color: white;
|
||||
padding: 28px 0 12px;
|
||||
margin-top: 50px;
|
||||
padding: 16px 0 10px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -11,23 +17,28 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.9fr 1.35fr 0.9fr;
|
||||
gap: 22px;
|
||||
margin-bottom: 20px;
|
||||
grid-template-columns: 1.1fr 1fr 0.9fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
color: #00d4ff;
|
||||
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 {
|
||||
color: var(--ice-blue, #cfe8ff);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
@@ -35,7 +46,7 @@
|
||||
}
|
||||
|
||||
.footer-section ul li {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.footer-section ul li a {
|
||||
@@ -43,79 +54,29 @@
|
||||
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 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;
|
||||
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: #00d4ff;
|
||||
color: var(--electric-blue, #3DF8F8);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -137,28 +98,28 @@
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
background: #00d4ff;
|
||||
color: #1e3c72;
|
||||
border-color: #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: #00d4ff;
|
||||
color: var(--electric-blue, #3DF8F8);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
@@ -172,50 +133,39 @@
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-section p,
|
||||
.footer-section ul li a {
|
||||
font-size: 0.9rem;
|
||||
.footer-fade {
|
||||
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: 20px;
|
||||
}
|
||||
}
|
||||
+54
-37
@@ -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(10, 17, 32, 0.7);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
box-shadow: 0 8px 26px rgba(2, 6, 14, 0.3);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.12);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@@ -29,8 +41,10 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
height: 70px;
|
||||
width: auto;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
@@ -49,7 +63,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 +72,12 @@
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #6a2c91;
|
||||
color: var(--electric-blue, #5996FF);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #6a2c91;
|
||||
background: rgba(106, 44, 145, 0.08);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@@ -82,10 +96,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,38 +119,38 @@
|
||||
.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, #5996FF);
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu a.active,
|
||||
.submenu-trigger.active > a {
|
||||
color: #6a2c91;
|
||||
background: #f3eef8;
|
||||
.submenu-trigger.active>a {
|
||||
color: var(--electric-blue, #5996FF);
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
}
|
||||
|
||||
.submenu-trigger {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submenu-trigger > a {
|
||||
.submenu-trigger>a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -145,9 +161,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);
|
||||
@@ -159,6 +177,7 @@
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 二维码容器 */
|
||||
.qrcode-container {
|
||||
padding: 20px;
|
||||
@@ -169,7 +188,7 @@
|
||||
.qrcode-container p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: #333;
|
||||
color: var(--ice-blue, #cfe8ff);
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
@@ -182,9 +201,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 +223,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 +239,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 +247,13 @@
|
||||
}
|
||||
|
||||
.customer-service-link:hover {
|
||||
color: #6a2c91;
|
||||
background: rgba(106, 44, 145, 0.08);
|
||||
color: var(--electric-blue, #5996FF);
|
||||
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, #5996FF) 0%, #E23AFB 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 25px;
|
||||
@@ -248,7 +267,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);
|
||||
}
|
||||
|
||||
/* 响应式导航 */
|
||||
@@ -305,6 +324,4 @@
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
+77
-62
@@ -1,17 +1,24 @@
|
||||
/* 页面样式 */
|
||||
.page-hero {
|
||||
background: linear-gradient(135deg, #10294f 0%, #355a88 58%, #5c3d8c 100%);
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
.page-hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page-hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 15px;
|
||||
@@ -41,7 +48,7 @@
|
||||
}
|
||||
|
||||
.product-nav {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
@@ -50,7 +57,7 @@
|
||||
.nav-section h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.nav-section ul {
|
||||
@@ -64,7 +71,7 @@
|
||||
.nav-section .nav-item {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: #333;
|
||||
color: var(--ice-blue);
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
@@ -73,9 +80,9 @@
|
||||
|
||||
.nav-section .nav-item:hover,
|
||||
.nav-section .nav-item.active {
|
||||
background: white;
|
||||
color: var(--primary-purple);
|
||||
border-left-color: var(--primary-purple);
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
color: var(--electric-blue);
|
||||
border-left-color: var(--electric-blue);
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@@ -97,14 +104,22 @@
|
||||
.product-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary-blue);
|
||||
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 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
margin-bottom: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -114,7 +129,7 @@
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 30px 0;
|
||||
border-bottom: 2px solid #eee;
|
||||
border-bottom: 2px solid rgba(156, 198, 236, 0.16);
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
@@ -123,18 +138,18 @@
|
||||
padding: 12px 20px;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--primary-purple);
|
||||
border-bottom-color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
border-bottom-color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@@ -173,8 +188,8 @@
|
||||
}
|
||||
|
||||
.media-card {
|
||||
background: white;
|
||||
border: 1px solid #edf0f5;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
@@ -184,32 +199,32 @@
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.media-card h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-size: 0.98rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.media-card p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
}
|
||||
|
||||
.feature-item h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
@@ -223,7 +238,7 @@
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -245,7 +260,7 @@
|
||||
}
|
||||
|
||||
.highlight-box h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@@ -272,7 +287,7 @@
|
||||
}
|
||||
|
||||
.workflow-section h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -284,7 +299,7 @@
|
||||
gap: 15px;
|
||||
overflow-x: auto;
|
||||
padding: 20px;
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@@ -311,13 +326,13 @@
|
||||
|
||||
.step-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.workflow-step p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
@@ -335,7 +350,7 @@
|
||||
}
|
||||
|
||||
.case-item {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
padding: 25px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(16, 41, 79, 0.08);
|
||||
@@ -349,12 +364,12 @@
|
||||
}
|
||||
|
||||
.case-item h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.case-item p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -364,14 +379,14 @@
|
||||
}
|
||||
|
||||
.table-section h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.service-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(16, 41, 79, 0.08);
|
||||
@@ -390,12 +405,12 @@
|
||||
|
||||
.service-table td {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: var(--light-text);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.16);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
}
|
||||
|
||||
.service-table tbody tr:hover {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
}
|
||||
|
||||
.service-table tbody tr:last-child td {
|
||||
@@ -411,7 +426,7 @@
|
||||
}
|
||||
|
||||
.app-item {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--accent-color);
|
||||
@@ -419,18 +434,18 @@
|
||||
}
|
||||
|
||||
.app-item:hover {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
border-left-color: var(--primary-purple);
|
||||
border-left-color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.app-item h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.app-item p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -450,12 +465,12 @@
|
||||
}
|
||||
|
||||
.result-item h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-item p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
}
|
||||
|
||||
/* 占位符和提示框 */
|
||||
@@ -472,7 +487,7 @@
|
||||
.placeholder-section h4,
|
||||
.contact-prompt h4,
|
||||
.info-box h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@@ -487,7 +502,7 @@
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
}
|
||||
|
||||
.placeholder-section ul li:before,
|
||||
@@ -505,7 +520,7 @@
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
color: #00a8cc;
|
||||
color: var(--ice-blue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -582,7 +597,7 @@
|
||||
/* 专业学术版式增强 */
|
||||
.product-content {
|
||||
max-width: 980px;
|
||||
background: #fff;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
}
|
||||
|
||||
.product-section h2,
|
||||
@@ -593,7 +608,7 @@
|
||||
|
||||
.prose-block {
|
||||
margin: 24px 0;
|
||||
color: #34405a;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.9;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
@@ -604,9 +619,9 @@
|
||||
|
||||
.inline-figure {
|
||||
margin: 18px 0 26px;
|
||||
border: 1px solid #e6ebf2;
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -621,13 +636,13 @@
|
||||
width: 100%;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.inline-figure figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.86rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -651,7 +666,7 @@
|
||||
max-width: 92vw;
|
||||
max-height: 88vh;
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
@@ -664,8 +679,8 @@
|
||||
height: 40px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #10294f;
|
||||
background: rgba(18, 29, 52, 0.7);
|
||||
color: var(--ice-blue);
|
||||
font-size: 1.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -678,9 +693,9 @@
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
}
|
||||
|
||||
.service-video-block video {
|
||||
@@ -692,12 +707,12 @@
|
||||
}
|
||||
|
||||
.service-video-block h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.service-video-block p {
|
||||
color: #34405a;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
|
||||
+44
-44
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
background: var(--light-bg);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
@@ -24,7 +24,7 @@
|
||||
.filter-section h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
@@ -36,17 +36,17 @@
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--dark-text);
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
.filter-group select,
|
||||
.filter-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid rgba(156, 198, 236, 0.22);
|
||||
border-radius: 5px;
|
||||
font-size: 0.85rem;
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
@@ -55,7 +55,7 @@
|
||||
.filter-group select:focus,
|
||||
.filter-group input:hover,
|
||||
.filter-group input:focus {
|
||||
border-color: var(--primary-purple);
|
||||
border-color: var(--electric-blue);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
margin: 10px auto 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
cursor: pointer;
|
||||
font-size: 0.86rem;
|
||||
text-decoration: underline;
|
||||
@@ -89,8 +89,8 @@
|
||||
|
||||
.empty-result {
|
||||
display: none;
|
||||
color: var(--light-text);
|
||||
background: var(--light-bg);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
border-left: 4px solid var(--primary-purple);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
@@ -109,7 +109,7 @@
|
||||
.resource-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
@@ -122,7 +122,7 @@
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
@@ -139,7 +139,7 @@
|
||||
.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;
|
||||
border-bottom: 2px solid rgba(156, 198, 236, 0.16);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
@@ -147,7 +147,7 @@
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-size: 1.05rem;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
@@ -164,7 +164,7 @@
|
||||
|
||||
.card-meta {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.16);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -173,7 +173,7 @@
|
||||
}
|
||||
|
||||
.journal {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -190,10 +190,10 @@
|
||||
.card-desc {
|
||||
padding: 15px 20px;
|
||||
flex: 1;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.16);
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
@@ -201,12 +201,12 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.16);
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--light-bg);
|
||||
color: var(--primary-blue);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
color: var(--ice-blue);
|
||||
padding: 4px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.75rem;
|
||||
@@ -223,8 +223,8 @@
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: #00a8cc;
|
||||
background: var(--light-bg);
|
||||
color: var(--ice-blue);
|
||||
background: rgba(18, 29, 52, 0.42);
|
||||
}
|
||||
|
||||
/* 瑙嗛缃戞牸 */
|
||||
@@ -235,7 +235,7 @@
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background: white;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
@@ -289,14 +289,14 @@
|
||||
.video-card h4 {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.video-card p {
|
||||
padding: 0 15px;
|
||||
margin: 0 0 10px 0;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -352,8 +352,8 @@
|
||||
}
|
||||
|
||||
.news-feature-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 24px rgba(16, 41, 79, 0.08);
|
||||
@@ -365,8 +365,8 @@
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.18);
|
||||
}
|
||||
|
||||
.news-feature-hero img,
|
||||
@@ -374,7 +374,7 @@
|
||||
.news-image-grid img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
@@ -392,7 +392,7 @@
|
||||
}
|
||||
|
||||
.news-feature-hero h3 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 12px;
|
||||
@@ -401,7 +401,7 @@
|
||||
.news-feature-hero p,
|
||||
.news-prose p,
|
||||
.news-prose li {
|
||||
color: #34405a;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
@@ -410,7 +410,7 @@
|
||||
}
|
||||
|
||||
.news-prose h4 {
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
margin: 10px 0 12px;
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
@@ -423,9 +423,9 @@
|
||||
.news-inline-figure {
|
||||
margin: 20px 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
}
|
||||
|
||||
.news-inline-figure img {
|
||||
@@ -436,7 +436,7 @@
|
||||
.news-inline-figure figcaption,
|
||||
.news-image-grid figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
@@ -452,9 +452,9 @@
|
||||
.news-image-grid figure {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5ebf3;
|
||||
border: 1px solid rgba(156, 198, 236, 0.18);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
background: rgba(18, 29, 52, 0.55);
|
||||
}
|
||||
|
||||
.news-image-grid img {
|
||||
@@ -504,7 +504,7 @@
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 0 0 28px;
|
||||
border-bottom: 2px solid #e5ebf3;
|
||||
border-bottom: 2px solid rgba(156, 198, 236, 0.18);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -512,7 +512,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
color: #5f6b7a;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 3px solid transparent;
|
||||
@@ -521,8 +521,8 @@
|
||||
|
||||
.resource-tab:hover,
|
||||
.resource-tab.active {
|
||||
color: var(--primary-purple);
|
||||
border-bottom-color: var(--primary-purple);
|
||||
color: var(--electric-blue);
|
||||
border-bottom-color: var(--electric-blue);
|
||||
}
|
||||
|
||||
.resource-section {
|
||||
@@ -541,8 +541,8 @@
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
background: rgba(10, 17, 32, 0.5);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.18);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
|
||||
+353
-129
@@ -6,21 +6,64 @@
|
||||
}
|
||||
|
||||
: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;
|
||||
--light-text: #666;
|
||||
|
||||
/* 深海岩层配色（参考 Hyper-seq 宣传册） */
|
||||
--rock-navy-0: #05070c;
|
||||
--rock-navy-1: #0a1120;
|
||||
--rock-navy-2: #121d34;
|
||||
--rock-navy-3: #1b2c4a;
|
||||
--ice-blue: #cfe8ff;
|
||||
--ice-blue-dim: #9cc6ec;
|
||||
--electric-blue: #5996FF;
|
||||
--coral-accent: #ff8a5c;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: var(--dark-text);
|
||||
color: var(--ice-blue);
|
||||
line-height: 1.6;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
background:
|
||||
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;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
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>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='bm'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23bm)'/></svg>");
|
||||
background-size: 620px 620px, 180px 180px;
|
||||
background-attachment: fixed, fixed;
|
||||
}
|
||||
|
||||
/* 全站跟随鼠标的粒子背景（固定在视口，任意页面、任意滚动位置都可见） */
|
||||
.site-particles {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -29,14 +72,14 @@ body {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 英雄部分 */
|
||||
/* 英雄部分 —— 与全站统一的深海岩层背景（由 body 提供），此处保持透明 */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 40vh;
|
||||
min-height: 320px;
|
||||
max-height: 460px;
|
||||
height: 50vh;
|
||||
min-height: 380px;
|
||||
max-height: 550px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hero-carousel {
|
||||
@@ -68,18 +111,20 @@ body {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-slide > img {
|
||||
.hero-slide>img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.26;
|
||||
opacity: 0.16;
|
||||
z-index: 0;
|
||||
filter: grayscale(0.3) brightness(0.7);
|
||||
}
|
||||
|
||||
.hero-brand-slide::before {
|
||||
@@ -87,11 +132,11 @@ body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background: var(--hero-overlay-color);
|
||||
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 {
|
||||
opacity: 0.18;
|
||||
.hero-brand-slide>img {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -102,23 +147,14 @@ body {
|
||||
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;
|
||||
}
|
||||
|
||||
.hero-brand-content {
|
||||
max-width: 920px;
|
||||
max-width: 960px;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-brand-heading {
|
||||
@@ -132,26 +168,73 @@ body {
|
||||
}
|
||||
|
||||
.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-brand-heading h1 {
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
text-shadow: none;
|
||||
.hero-eyebrow-line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ice-blue);
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.hero-line-1,
|
||||
.hero-line-2 {
|
||||
display: block;
|
||||
.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;
|
||||
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: 12px;
|
||||
}
|
||||
|
||||
.hero-line-2 {
|
||||
margin-left: 5.5rem;
|
||||
.hero-dash {
|
||||
display: inline-block;
|
||||
color: var(--electric-blue);
|
||||
font-weight: 500;
|
||||
margin-right: 0.15em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.hero-badge-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 26px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid rgba(156, 198, 236, 0.5);
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--ice-blue);
|
||||
background: rgba(56, 189, 248, 0.06);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.hero-brand-btn {
|
||||
@@ -180,102 +263,211 @@ body {
|
||||
box-shadow: 0 8px 16px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 轮播控件 */
|
||||
.carousel-controls {
|
||||
/* 向下滚动提示 */
|
||||
.scroll-cue {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
left: 60px;
|
||||
bottom: 26px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: rgba(207, 232, 255, 0.65);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.scroll-cue-line {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 34px;
|
||||
background: linear-gradient(to bottom, rgba(207, 232, 255, 0.75), transparent);
|
||||
animation: scrollCueMove 2.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.carousel-dot.active {
|
||||
background: white;
|
||||
width: 30px;
|
||||
border-radius: 6px;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 产品预览部分 */
|
||||
.products-preview {
|
||||
padding: 80px 0;
|
||||
background-color: var(--light-bg);
|
||||
/* 关键词标记带 */
|
||||
.marquee-strip {
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(156, 198, 236, 0.12);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.12);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.products-preview h2 {
|
||||
.marquee-track {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
animation: marqueeScroll 26s linear infinite;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ice-blue-dim);
|
||||
}
|
||||
|
||||
.marquee-track .dot {
|
||||
color: var(--electric-blue);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@keyframes marqueeScroll {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.scroll-cue-line {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 分区通用：扫描线签名效果 + 深色岩层底色 */
|
||||
.reveal-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 50px;
|
||||
color: var(--primary-blue);
|
||||
max-width: 640px;
|
||||
margin: 0 auto 56px;
|
||||
}
|
||||
|
||||
.section-heading .eyebrow {
|
||||
display: inline-block;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: var(--electric-blue);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 900;
|
||||
font-size: 2.3rem;
|
||||
color: var(--ice-blue);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* 产品预览部分 —— 透明背景，显示body背景 */
|
||||
.products-preview {
|
||||
padding: 110px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
background: white;
|
||||
padding: 22px;
|
||||
position: relative;
|
||||
background: linear-gradient(160deg, rgba(27, 44, 74, 0.55) 0%, rgba(10, 17, 32, 0.75) 100%);
|
||||
padding: 30px 26px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(156, 198, 236, 0.14);
|
||||
backdrop-filter: blur(6px);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.preview-card.is-tilting,
|
||||
.preview-card:hover {
|
||||
border-color: rgba(56, 189, 248, 0.45);
|
||||
box-shadow: 0 20px 40px rgba(2, 6, 14, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.08);
|
||||
}
|
||||
|
||||
.card-index {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 26px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(156, 198, 236, 0.45);
|
||||
}
|
||||
|
||||
.preview-image-wrap {
|
||||
background: rgba(5, 7, 12, 0.6);
|
||||
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);
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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);
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.preview-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-blue);
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 12px;
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
.preview-card p {
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
color: var(--accent-color);
|
||||
color: var(--electric-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
color: #00a8cc;
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
/* 学术与动态部分 */
|
||||
/* 学术与动态部分 —— 透明背景 */
|
||||
.academic-news {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
padding: 110px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
@@ -284,59 +476,66 @@ body {
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.section-col h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-purple);
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
.section-col h3 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 26px;
|
||||
color: var(--ice-blue);
|
||||
border-bottom: 1px solid rgba(156, 198, 236, 0.25);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
padding: 20px;
|
||||
border-left: 4px solid var(--primary-blue);
|
||||
background: var(--light-bg);
|
||||
border-left: 2px solid var(--electric-blue);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.news-item:hover {
|
||||
background: #e8f1ff;
|
||||
transform: translateX(10px);
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.news-item h4 {
|
||||
margin-bottom: 8px;
|
||||
color: var(--primary-blue);
|
||||
color: var(--ice-blue);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.news-item p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--light-text);
|
||||
color: rgba(207, 232, 255, 0.55);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.news-item a,
|
||||
.read-more {
|
||||
color: var(--accent-color);
|
||||
color: var(--electric-blue);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.news-item a:hover,
|
||||
.read-more:hover {
|
||||
color: #00a8cc;
|
||||
color: var(--ice-blue);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-brand-heading {
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-brand-logo {
|
||||
@@ -347,16 +546,22 @@ body {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
.hero-eyebrow-line {
|
||||
font-size: 1.54rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.hero-main-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1rem;
|
||||
.hero-badge-row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.products-preview h2 {
|
||||
font-size: 2rem;
|
||||
.products-preview h2,
|
||||
.section-heading h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
@@ -367,11 +572,19 @@ body {
|
||||
.preview-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scroll-cue {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.marquee-track {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero {
|
||||
height: 400px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -390,61 +603,72 @@ 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: 1.31rem;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.home-video-section {
|
||||
background: #f8fafc;
|
||||
padding: 42px 20px;
|
||||
border-bottom: 1px solid #e5ebf3;
|
||||
background: transparent;
|
||||
padding: 100px 20px;
|
||||
}
|
||||
|
||||
.home-video-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.75fr) 1.25fr;
|
||||
gap: 28px;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-video-copy h2 {
|
||||
color: var(--primary-blue);
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 700;
|
||||
color: var(--ice-blue);
|
||||
font-size: 1.9rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.home-video-copy p {
|
||||
color: #34405a;
|
||||
color: rgba(207, 232, 255, 0.62);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
display: inline-block;
|
||||
color: var(--accent-color);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--electric-blue);
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.14em;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.home-video-media {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(156, 198, 236, 0.08));
|
||||
}
|
||||
|
||||
.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);
|
||||
background: #05070c;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 20px 45px rgba(2, 6, 14, 0.55);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-video-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
+94
-91
@@ -5,17 +5,23 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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 rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -68,6 +74,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>
|
||||
@@ -92,111 +99,122 @@
|
||||
<!-- 首页 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-carousel">
|
||||
<!-- 第一张：公司理念 -->
|
||||
<!-- 品牌主视觉 -->
|
||||
<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">
|
||||
<h1>
|
||||
<span class="hero-line-1">海古纪 · 生命孪生体系</span>
|
||||
<span class="hero-line-2">——生命从此被计算</span>
|
||||
</h1>
|
||||
<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="从人工选择到智能育种">
|
||||
</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="文库流水线">
|
||||
<!-- <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 class="scroll-cue" aria-hidden="true">
|
||||
<span>向下滚动 · 探索更多</span>
|
||||
<i class="scroll-cue-line"></i>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 产品与服务预览 -->
|
||||
<!-- 关键词标记带 -->
|
||||
<div class="marquee-strip" aria-hidden="true">
|
||||
<div class="marquee-track">
|
||||
<span>极低成本</span><span class="dot">·</span>
|
||||
<span>高效</span><span class="dot">·</span>
|
||||
<span>灵活</span><span class="dot">·</span>
|
||||
<span>高通量</span><span class="dot">·</span>
|
||||
<span>HYPER‑SEQ</span><span class="dot">·</span>
|
||||
<span>生命孪生体系</span><span class="dot">·</span>
|
||||
<span>精准基因组学</span><span class="dot">·</span>
|
||||
<span>极低成本</span><span class="dot">·</span>
|
||||
<span>高效</span><span class="dot">·</span>
|
||||
<span>灵活</span><span class="dot">·</span>
|
||||
<span>高通量</span><span class="dot">·</span>
|
||||
<span>HYPER‑SEQ</span><span class="dot">·</span>
|
||||
<span>生命孪生体系</span><span class="dot">·</span>
|
||||
<span>精准基因组学</span><span class="dot">·</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 首页视频 -->
|
||||
<section class="home-video-section">
|
||||
<section class="home-video-section reveal-section">
|
||||
|
||||
<div class="container home-video-layout">
|
||||
<div class="home-video-copy">
|
||||
<div class="home-video-copy reveal-up">
|
||||
<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 class="home-video-media reveal-up">
|
||||
<video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
|
||||
<source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
|
||||
您的浏览器暂不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="products-preview">
|
||||
|
||||
<section class="products-preview reveal-section">
|
||||
|
||||
<div class="container">
|
||||
<h2>我们的产品与服务</h2>
|
||||
<div class="section-heading reveal-up">
|
||||
<span class="eyebrow">产品与服务</span>
|
||||
<h2>我们的产品与服务</h2>
|
||||
</div>
|
||||
<div class="preview-grid">
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
|
||||
<article class="preview-card tilt-card reveal-up">
|
||||
<span class="card-index">01</span>
|
||||
<div class="preview-image-wrap">
|
||||
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
|
||||
</div>
|
||||
<h3>AI生信科学家</h3>
|
||||
<p>全自动、自规划的多组学分析智能体</p>
|
||||
<a href="pages/products.html#ai-scientist" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
|
||||
<article class="preview-card tilt-card reveal-up">
|
||||
<span class="card-index">02</span>
|
||||
<div class="preview-image-wrap">
|
||||
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
|
||||
</div>
|
||||
<h3>Hyper-seq测序</h3>
|
||||
<p>极低成本、高效、灵活的DNA测序文库制备</p>
|
||||
<a href="pages/services.html#hyper-seq" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="preview-card">
|
||||
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
|
||||
<article class="preview-card tilt-card reveal-up">
|
||||
<span class="card-index">03</span>
|
||||
<div class="preview-image-wrap">
|
||||
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
|
||||
</div>
|
||||
<h3>全基因组重测序</h3>
|
||||
<p>高精度全基因组测序与分析服务</p>
|
||||
<a href="pages/services.html#wgs" class="card-link">了解更多 →</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 学术文献与动态 -->
|
||||
<section class="academic-news">
|
||||
<section class="academic-news reveal-section">
|
||||
|
||||
<div class="container">
|
||||
<div class="section-heading reveal-up">
|
||||
<span class="eyebrow">知识与洞见</span>
|
||||
<h2>学术文献与最新动态</h2>
|
||||
</div>
|
||||
<div class="section-row">
|
||||
<div class="section-col">
|
||||
<h2>学术文献</h2>
|
||||
<div class="section-col reveal-up">
|
||||
<h3>学术文献</h3>
|
||||
<div class="news-list">
|
||||
<div class="news-item">
|
||||
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
||||
@@ -215,8 +233,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-col">
|
||||
<h2>最新动态</h2>
|
||||
<div class="section-col reveal-up">
|
||||
<h3>最新动态</h3>
|
||||
<div class="news-list">
|
||||
<div class="news-item">
|
||||
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
||||
@@ -239,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">
|
||||
@@ -255,27 +271,10 @@
|
||||
<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>
|
||||
<li><a href="pages/about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -288,12 +287,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="#">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
<p><a href="pages/about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/carousel.js"></script>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 首页动效编排
|
||||
* - Lenis 平滑滚动
|
||||
* - GSAP ScrollTrigger 驱动的分区揭示、扫描线签名效果
|
||||
* - 首屏加载时的标题错落浮现
|
||||
* - 产品卡片的 3D 悬浮跟随
|
||||
*/
|
||||
(function () {
|
||||
var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
/* ---------- 1. Lenis 平滑滚动 ---------- */
|
||||
var lenis = null;
|
||||
if (window.Lenis && !prefersReducedMotion) {
|
||||
lenis = new Lenis({
|
||||
duration: 1.15,
|
||||
easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); },
|
||||
smoothWheel: true,
|
||||
wheelMultiplier: 1
|
||||
});
|
||||
|
||||
if (window.gsap && window.ScrollTrigger) {
|
||||
lenis.on('scroll', ScrollTrigger.update);
|
||||
gsap.ticker.add(function (time) {
|
||||
lenis.raf(time * 1000);
|
||||
});
|
||||
gsap.ticker.lagSmoothing(0);
|
||||
} else {
|
||||
requestAnimationFrame(function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 2. 首屏标题错落浮现 ---------- */
|
||||
var revealItems = document.querySelectorAll('[data-reveal-item]');
|
||||
if (window.gsap && revealItems.length) {
|
||||
gsap.set(revealItems, { opacity: 0, y: 26 });
|
||||
gsap.to(revealItems, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.9,
|
||||
ease: 'power3.out',
|
||||
stagger: 0.16,
|
||||
delay: 0.3
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.gsap || !window.ScrollTrigger) {
|
||||
return; // 没有 GSAP 时，直接跳过滚动动效，保留静态可读的页面
|
||||
}
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
/* ---------- 3. 分区揭示 + 扫描线签名效果 ---------- */
|
||||
document.querySelectorAll('.reveal-section').forEach(function (section) {
|
||||
var revealTargets = section.querySelectorAll('.reveal-up');
|
||||
var scanLine = section.querySelector('.section-scan');
|
||||
|
||||
if (revealTargets.length) {
|
||||
gsap.set(revealTargets, { opacity: 0, y: 40 });
|
||||
gsap.to(revealTargets, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.9,
|
||||
ease: 'power3.out',
|
||||
stagger: 0.14,
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 78%',
|
||||
once: true
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- 4. 产品卡片 3D 悬浮跟随 ---------- */
|
||||
document.querySelectorAll('.tilt-card').forEach(function (card) {
|
||||
var bounds;
|
||||
|
||||
card.addEventListener('mouseenter', function () {
|
||||
bounds = card.getBoundingClientRect();
|
||||
card.classList.add('is-tilting');
|
||||
});
|
||||
|
||||
card.addEventListener('mousemove', function (e) {
|
||||
if (!bounds) bounds = card.getBoundingClientRect();
|
||||
var px = (e.clientX - bounds.left) / bounds.width - 0.5;
|
||||
var py = (e.clientY - bounds.top) / bounds.height - 0.5;
|
||||
gsap.to(card, {
|
||||
rotateX: py * -8,
|
||||
rotateY: px * 10,
|
||||
duration: 0.4,
|
||||
ease: 'power2.out',
|
||||
transformPerspective: 700
|
||||
});
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function () {
|
||||
card.classList.remove('is-tilting');
|
||||
gsap.to(card, { rotateX: 0, rotateY: 0, duration: 0.6, ease: 'power3.out' });
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- 5. Hero logo 视差微动 ---------- */
|
||||
var heroLogo = document.querySelector('.hero-brand-logo');
|
||||
var hero = document.querySelector('.hero');
|
||||
if (heroLogo && hero && !prefersReducedMotion) {
|
||||
hero.addEventListener('mousemove', function (e) {
|
||||
var rect = hero.getBoundingClientRect();
|
||||
var px = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
var py = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
gsap.to(heroLogo, {
|
||||
x: px * 14,
|
||||
y: py * 10,
|
||||
duration: 0.6,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -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() {
|
||||
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* 全站深色岩层背景上的粒子网络效果
|
||||
* 固定在视口内（position: fixed），任意页面、任意滚动位置都可见，跟随鼠标移动。
|
||||
*/
|
||||
(function () {
|
||||
var canvas = document.querySelector('.site-particles');
|
||||
if (!canvas) return;
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
var DPR = window.devicePixelRatio || 1;
|
||||
var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
var width = 0;
|
||||
var height = 0;
|
||||
var particles = [];
|
||||
var mouse = { x: null, y: null, active: false };
|
||||
|
||||
var config = {
|
||||
density: 9000,
|
||||
maxParticles: 130,
|
||||
linkDistance: 150,
|
||||
mouseLinkDistance: 220,
|
||||
mouseForce: 1.1,
|
||||
dotRadiusMin: 1.6,
|
||||
dotRadiusMax: 3.4,
|
||||
dotColor: '124, 211, 252',
|
||||
lineColor: '56, 189, 248'
|
||||
};
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
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();
|
||||
}
|
||||
|
||||
function createParticles() {
|
||||
var count = Math.min(config.maxParticles, Math.floor((width * height) / config.density));
|
||||
particles = new Array(Math.max(count, 30)).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
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
mouse.x = e.clientX;
|
||||
mouse.y = e.clientY;
|
||||
mouse.active = true;
|
||||
});
|
||||
document.addEventListener('mouseleave', function () { mouse.active = false; });
|
||||
|
||||
function step() {
|
||||
particles.forEach(function (p) {
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
|
||||
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 render() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
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.45) + ')';
|
||||
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.65) + ')';
|
||||
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.85)';
|
||||
ctx.shadowColor = 'rgba(56, 189, 248, 0.8)';
|
||||
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.85)';
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, 0.85)';
|
||||
ctx.shadowBlur = 12;
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function loop() {
|
||||
step();
|
||||
render();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
if (!prefersReducedMotion) {
|
||||
loop();
|
||||
} else {
|
||||
render();
|
||||
}
|
||||
})();
|
||||
+48
-23
@@ -13,11 +13,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -70,6 +71,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>
|
||||
@@ -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">
|
||||
@@ -361,27 +396,10 @@
|
||||
<ul>
|
||||
<li><a href="#haiguji">公司简介</a></li>
|
||||
<li><a href="#contact">联系我们</a></li>
|
||||
<li><a href="#privacy">隐私协议</a></li>
|
||||
<li><a href="#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -394,9 +412,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
+13
-23
@@ -12,11 +12,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -69,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>
|
||||
@@ -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">
|
||||
@@ -272,27 +272,10 @@
|
||||
<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>
|
||||
<li><a href="about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -305,9 +288,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
+13
-23
@@ -12,11 +12,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -69,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>
|
||||
@@ -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">
|
||||
@@ -219,27 +219,10 @@
|
||||
<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>
|
||||
<li><a href="about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -252,9 +235,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo-section">
|
||||
@@ -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>
|
||||
|
||||
|
||||
+14
-24
@@ -12,11 +12,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -69,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>
|
||||
@@ -124,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">
|
||||
@@ -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">
|
||||
@@ -414,27 +414,10 @@
|
||||
<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>
|
||||
<li><a href="about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -447,9 +430,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
+13
-23
@@ -13,11 +13,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -70,6 +71,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>
|
||||
@@ -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">
|
||||
@@ -436,27 +436,10 @@
|
||||
<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>
|
||||
<li><a href="about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -469,9 +452,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
+13
-23
@@ -12,11 +12,12 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="site-particles" aria-hidden="true"></canvas>
|
||||
<!-- 导航栏 -->
|
||||
<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>
|
||||
@@ -69,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>
|
||||
@@ -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">
|
||||
@@ -688,27 +688,10 @@
|
||||
<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>
|
||||
<li><a href="about.html#partners">合作伙伴</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>关注我们</h3>
|
||||
<div class="qr-grid">
|
||||
@@ -721,9 +704,16 @@
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
||||
<p><a href="about.html#privacy">隐私政策</a> | <a href="#">用户协议</a></p>
|
||||
</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>
|
||||
|
||||
|
||||
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