diff --git a/index.html b/index.html index e44ec46..25c12a7 100644 --- a/index.html +++ b/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; + } }