Merge pull request #2 from potaser/feature/hero-dark-rock-redesign

Feature/hero dark rock redesign
This commit is contained in:
Scarlett Huang
2026-07-15 17:50:54 +08:00
committed by GitHub
14 changed files with 66 additions and 42 deletions
+3 -3
View File
@@ -59,13 +59,13 @@
.qr-grid {
display: grid;
grid-template-columns: repeat(3, 40px);
grid-template-columns: repeat(3, 80px);
gap: 6px;
}
.qr-slot {
width: 40px;
height: 40px;
width: 80px;
height: 80px;
border: 1px dashed rgba(255, 255, 255, 0.38);
border-radius: 4px;
display: flex;
+5 -5
View File
@@ -32,11 +32,11 @@ body {
line-height: 1.6;
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),
radial-gradient(ellipse 60% 45% at 18% 10%, rgba(29, 63, 111, 0.571), transparent 60%),
radial-gradient(ellipse 55% 40% at 82% 6%, rgba(38, 78, 156, 0.76), transparent 60%),
radial-gradient(ellipse 70% 55% at 85% 92%, rgba(14, 71, 95, 0.058), transparent 65%),
repeating-linear-gradient(152deg, rgba(96, 136, 188, 0.06) 0px, rgba(33, 83, 148, 0.06) 2px, transparent 2px, transparent 26px),
repeating-linear-gradient(64deg, rgba(31, 55, 110, 0.25) 0px, rgba(15, 30, 66, 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;
}
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

+7 -7
View File
@@ -5,10 +5,10 @@
<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 rel="preconnect" href="https://fonts.loli.net">
<link rel="preconnect" href="https://gstatic.loli.net" 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"
href="https://fonts.loli.net/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">
@@ -278,7 +278,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -291,9 +291,9 @@
</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="lib/lenis.min.js"></script>
<script src="lib/gsap.min.js"></script>
<script src="lib/ScrollTrigger.min.js"></script>
<script src="js/nav.js"></script>
<script src="js/particles.js"></script>
<script src="js/animations.js"></script>
+11
View File
File diff suppressed because one or more lines are too long
+11
View File
File diff suppressed because one or more lines are too long
+2
View File
File diff suppressed because one or more lines are too long
+4 -4
View File
@@ -403,7 +403,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -416,9 +416,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+4 -4
View File
@@ -279,7 +279,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -292,9 +292,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+4 -4
View File
@@ -226,7 +226,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -239,9 +239,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+3 -3
View File
@@ -57,9 +57,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+4 -4
View File
@@ -421,7 +421,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -434,9 +434,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+4 -4
View File
@@ -443,7 +443,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -456,9 +456,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>
+4 -4
View File
@@ -695,7 +695,7 @@
<div class="footer-section">
<h3>关注我们</h3>
<div class="qr-grid">
<div class="qr-slot">微信</div>
<div class="qr-slot"><img src="../images/wechat.jpg" alt="微信" style="width:100%;height:100%;object-fit:cover;border-radius:4px;"></div>
<div class="qr-slot">微博</div>
<div class="qr-slot">公众号</div>
</div>
@@ -708,9 +708,9 @@
</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="../lib/lenis.min.js"></script>
<script src="../lib/gsap.min.js"></script>
<script src="../lib/ScrollTrigger.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/animations.js"></script>