diff --git a/stash-web/src/App.css b/stash-web/src/App.css index b984252..8a2a8bc 100644 --- a/stash-web/src/App.css +++ b/stash-web/src/App.css @@ -837,15 +837,13 @@ /* ---------- 响应式 ---------- */ @media (max-width: 1100px) { - .sidebar { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--su-space-3); - padding: 0 var(--su-space-4) var(--su-space-4); + /* 单列堆叠:滚动容器不能换行,否则侧栏占满高度后主内容会被排到视口右侧(看不见) */ + #page-scroll { + flex-wrap: nowrap; } .profile-card { - grid-row: span 2; + grid-row: auto; } .service-panel { @@ -862,12 +860,26 @@ } @media (max-width: 820px) { - .sidebar { + /* 手机上只留分组导航:资料卡 / 本地服务卡太占地,导航还留着方便进分组 */ + #page-scroll > aside .profile-card, + #page-scroll > aside .service-panel { + display: none; + } + + /* 手机上页头只留品牌 + 操作图标:跑马灯放不下,会盖到下面的搜索条上 */ + .header-ticker-slot { display: none; } .site-header-inner { + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--su-space-2); height: 56px; + padding: 0 var(--su-space-3); + } + + .header-actions { + gap: var(--su-space-1); } } @@ -1607,3 +1619,41 @@ html.theme-transition .site-background { grid-template-columns: minmax(0, 1fr); } } + +/* ---------- 窄屏覆盖(放文件末尾:要盖过上面的侧栏基础规则) ---------- */ + +@media (max-width: 1100px) { + /* 侧栏 / 主内容在窄屏都不锁 100% 高、不吸顶;放在文件末尾才压得过上面的基础规则 */ + #page-scroll > aside { + position: static; + align-self: stretch; + height: auto; + max-height: none; + overflow: visible; + } + + #page-scroll > main { + height: auto; + max-height: none; + } + + #page-scroll > aside .sidebar-wrap { + height: auto; + padding: 0 var(--su-space-4) var(--su-space-4); + } + + /* 资料卡 + 导航卡并排,少占一屏 */ + #page-scroll > aside .sidebar-home { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--su-space-3); + height: auto; + } +} + +@media (max-width: 820px) { + /* 手机上只留导航卡,单列铺开 */ + #page-scroll > aside .sidebar-home { + display: block; + } +}