feat: 主页移动端

This commit is contained in:
2026-06-03 16:42:55 +08:00
parent 45742f7095
commit 2a1ed3d9e5
6 changed files with 131 additions and 34 deletions

View File

@@ -407,6 +407,7 @@
transform: translateX(100%);
transition: transform 0.28s ease;
will-change: transform;
z-index: 9;
}
.carousel-pagination-button {
position: relative;
@@ -469,31 +470,54 @@
}
@media (max-width: 768px) {
.carousel-slide {
min-height: 320px;
}
.home-carousel {
.carousel-slide {
aspect-ratio: auto;
height: 365px;
min-height: 365px;
.carousel-banner {
height: 263px;
}
.banner-title {
top: 86px;
right: auto;
left: 30px;
width: min(220px, calc(100% - 60px));
font-size: 28px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 2px;
transform: none;
}
.desc {
width: 100%;
min-width: 0;
height: auto;
min-height: 92px;
padding: 16px 20px;
height: 102px;
min-height: 102px;
padding: 16px 15px;
gap: 18px;
}
.desc-line {
top: -28px;
height: 42px;
top: -70px;
height: 45px;
}
.desc-index {
font-size: 40px;
font-size: 32px;
}
.desc-copy {
max-width: none;
font-size: 12px;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
}
}
.carousel-pagination {
display: none;
}
}
.carousel-pagination-arrow {

View File

@@ -191,7 +191,7 @@
@media (max-width: 980px) {
.product-feature,
.product-feature-reversed {
grid-template-columns: 1fr;
flex-direction: column-reverse;
gap: 24px;
width: min(680px, calc(100% - 40px));
min-height: 0;
@@ -227,11 +227,12 @@
.product-feature,
.product-feature-reversed {
width: calc(100% - 32px);
padding: 52px 0;
gap: 28px;
padding: 0 0 64px;
}
.product-feature-art {
min-height: clamp(300px, 82vw, 430px);
min-height: clamp(280px, 82vw, 360px);
}
.product-feature-copy,
@@ -242,28 +243,54 @@
}
.product-feature-bg {
width: 78%;
width: 72%;
margin-left: 38px;
border-radius: 10px;
}
.product-feature-panel,
.product-feature-reversed .product-feature-panel {
left: auto;
right: 0;
bottom: 42px;
width: 68%;
right: 12px;
bottom: 22px;
width: 72%;
}
.product-feature-reversed .product-feature-bg {
width: 70%;
margin-right: 16px;
margin-left: auto;
}
.product-feature-reversed .product-feature-panel {
right: auto;
left: 18px;
bottom: 16px;
width: 72%;
}
.product-feature-name {
margin-bottom: 16px;
font-size: 18px;
letter-spacing: 1.5px;
}
.product-feature-title {
width: 100%;
max-width: 100%;
font-size: clamp(26px, 7.2vw, 30px);
line-height: 1.2;
margin-bottom: 26px;
font-size: clamp(22px, 6.1vw, 26px);
line-height: 1.35;
letter-spacing: 1.2px;
overflow-wrap: anywhere;
}
.product-feature-link {
min-width: 100px;
min-height: 40px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
}
}
</style>

View File

@@ -77,7 +77,26 @@
@media (max-width: 640px) {
.project-cta {
min-height: 340px;
min-height: 288px;
padding: 64px 20px;
}
.project-cta-inner {
gap: 28px;
}
.project-cta-title {
font-size: 22px;
line-height: 1.4;
letter-spacing: 1.2px;
}
.project-cta-link {
min-width: 100px;
min-height: 40px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
}
}
</style>