refactor: 首页第一屏标语分两行错排,logo居中调高,删除了解更多按钮

This commit is contained in:
potaser
2026-06-27 13:16:44 +08:00
parent bfaa1d5ed5
commit 1331c4dd8b
2 changed files with 24 additions and 19 deletions
+20 -17
View File
@@ -60,6 +60,10 @@ body {
animation: slideIn 0.5s ease-in;
}
.hero-brand-slide.active {
justify-content: center;
}
@keyframes slideIn {
from {
opacity: 0;
@@ -113,8 +117,8 @@ body {
.hero-brand-content {
max-width: 920px;
padding-left: 82px;
transform: translateY(24px);
padding: 0 20px;
margin: 0 auto;
}
.hero-brand-heading {
@@ -128,9 +132,8 @@ body {
}
.hero-brand-logo {
width: 180px;
max-width: 32vw;
height: auto;
height: 8.5rem;
width: auto;
flex: 0 0 auto;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}
@@ -141,6 +144,16 @@ body {
text-shadow: none;
}
.hero-line-1,
.hero-line-2 {
display: block;
line-height: 1.4;
}
.hero-line-2 {
margin-left: 5.5rem;
}
.hero-brand-btn {
display: block;
margin-top: 12px;
@@ -322,17 +335,12 @@ body {
/* 响应式设计 */
@media (max-width: 768px) {
.hero-brand-content {
padding-left: 32px;
padding-right: 20px;
}
.hero-brand-heading {
gap: 20px;
}
.hero-brand-logo {
width: 128px;
height: 6.8rem;
}
.hero-brand-btn {
@@ -370,17 +378,12 @@ body {
padding-left: 20px;
}
.hero-brand-content {
padding-left: 20px;
}
.hero-brand-heading {
gap: 14px;
}
.hero-brand-logo {
width: 94px;
max-width: 28vw;
height: 5rem;
}
.hero-brand-btn {
+4 -2
View File
@@ -98,8 +98,10 @@
<div class="hero-brand-heading">
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
<div class="hero-brand-copy">
<h1>海古纪 · 生命孪生体系——生命从此被计算</h1>
<button class="btn-primary hero-brand-btn">了解更多</button>
<h1>
<span class="hero-line-1">海古纪 · 生命孪生体系</span>
<span class="hero-line-2">——生命从此被计算</span>
</h1>
</div>
</div>
</div>