.container-H2sRZG { box-sizing: border-box; /* padding-inline: 24px; */ border-radius: 12px; flex-direction: column; width: 100%; max-width: 1200px; height: calc(100vh - 120px); max-height: 800px; min-height: 600px; display: flex; overflow: hidden; } /* 小屏幕适配 */ @media (max-width: 768px) { .container-H2sRZG { padding-inline: 10px; max-width: 100%; height: calc(100vh - 80px); min-height: 500px; } .splashContainer-otuV_A { gap: 8px; } .media-Ocdu1O { gap: 8px; } .videoContainer-qteKNi { min-height: 200px; } .imageGrid-ymZV9z { flex-shrink: 0; height: 110px; gap: 8px; display: flex; overflow-x: auto; } .title-JtMejk { font-size: 1.1rem; line-height: 28px; } .subtitle-had8uE { font-size: 13px; line-height: 18px; } .info-UUGkPJ { gap: 4px; } } /* 超小屏幕适配 (手机竖屏) */ @media (max-width: 480px) { .container-H2sRZG { padding-inline: 8px; height: calc(100vh - 60px); min-height: 450px; } .splashContainer-otuV_A { gap: 5px; } .videoContainer-qteKNi { min-height: 160px; } .title-JtMejk { font-size: 1rem; line-height: 24px; } .subtitle-had8uE { font-size: 12px; line-height: 16px; } .imageGrid-ymZV9z { height: 90px; gap: 6px; } .info-UUGkPJ { gap: 3px; } } /* 默认小屏幕布局 */ .splashContainer-otuV_A { box-sizing: border-box; flex-direction: column; gap: 8px; height: 100%; display: flex; min-height: 0; } /* 大屏幕布局 */ @media (width >= 1024px) { .splashContainer-otuV_A { box-sizing: border-box; grid-template-rows: auto 1fr; gap: 10px; height: 100%; display: grid; } } .content-vPGYx8 { box-sizing: border-box; position: relative; flex-shrink: 0; } .info-UUGkPJ { box-sizing: border-box; flex-direction: column; gap: 5px; display: flex; ; } .title-JtMejk { box-sizing: border-box; color: var(--text-primary); text-align: center; letter-spacing: -.32px; font-size: 1.25rem; font-weight: 600; line-height: 36px; } .subtitle-had8uE { color: var(--text-secondary); text-align: center; } .normalS400 { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .media-Ocdu1O { flex-direction: column; gap: 12px; height: 100%; flex: 1; display: flex; overflow: hidden; min-height: 0; } .videoContainer-qteKNi { /* flex: 1; */ min-height: 0; display: flex; position: relative; } .heroVideo-FIzuK1 { object-fit: cover; object-position: center; background-color: #0003; border-radius: 8px; width: 100%; height: 100%; } .container-kIPoeH { box-sizing: border-box; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; border: none; flex-direction: row; justify-content: center; align-items: center; gap: 8px; min-width: 0; padding: 0; display: flex ; overflow: hidden; } .secondary-_HxO1W { color: #fff; background: #1d1e23; } .large-_aHMgD { letter-spacing: .01em; border-radius: 8px; height: 40px; padding-inline: 12px; font-size: 16px; font-weight: 600; line-height: 24px; } .videoPlaybackButton-uFNO1b { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: #ffffff80; border-radius: 50%; width: 32px; height: 32px; position: absolute; bottom: 12px; right: 12px; } .imageGrid-ymZV9z { flex-shrink: 0; height: 140px; gap: 12px; display: flex; overflow-x: auto; } @media (height >= 880px) { .imageGrid-ymZV9z { flex: 1; height: auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(25%, 1fr); overflow-x: unset; } } .image-x5Y2Sg { object-fit: cover; object-position: center; background-color: #0003; border-radius: 8px; width: 100%; height: 100%; }