feat: add scroll-snap section-by-section for mobile
This commit is contained in:
parent
624bb422bb
commit
e38cfed764
31
index.html
31
index.html
|
|
@ -446,10 +446,19 @@
|
|||
|
||||
/* 移动端痛点沉浸式布局 */
|
||||
@media (max-width: 900px) {
|
||||
/* 逐屏吸附:整个页面每次滚动就是一屏 */
|
||||
body {
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.hero, #solutions, #approach, #geo, #contact, footer {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
/* 痛点半块单列全屏 */
|
||||
#pain-points {
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
#pain-points .section-label {
|
||||
margin-bottom: 40px;
|
||||
|
|
@ -507,6 +516,8 @@
|
|||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
.pain-item::before { display: none; }
|
||||
.pain-item:hover { background: transparent; }
|
||||
|
|
@ -631,6 +642,26 @@
|
|||
.project-img { width: 100%; height: 300px; }
|
||||
h1 { font-size: 42px; letter-spacing: -1px; }
|
||||
.nav-links { display: none; }
|
||||
|
||||
/* 其他板块也至少一屏 */
|
||||
#solutions, #approach, #geo, #contact {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
#solutions .project-row {
|
||||
margin-bottom: 0;
|
||||
padding: 60px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
#approach .approach-item {
|
||||
padding: 60px 0;
|
||||
}
|
||||
#geo .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue