fix(mobile): 窄屏主内容被挤出视口,侧栏与页头适配手机/平板

- ≤1100 时滚动容器不换行、aside/main 不再锁 100% 高(之前 main 被排到视口右侧,完全看不见)
- 平板:资料卡 + 导航卡两列并排;手机:只留导航卡(资料/服务卡隐藏)
- 手机页头:隐藏跑马灯,改两列(品牌 + 操作图标),高度 56
- 删掉一直没生效的 .sidebar 网格规则(被更高优先级的 flex 规则盖住)
This commit is contained in:
2026-11-05 19:50:21 +08:00
parent 960ea1c5eb
commit 6e17169ac4
+57 -7
View File
@@ -837,15 +837,13 @@
/* ---------- 响应式 ---------- */ /* ---------- 响应式 ---------- */
@media (max-width: 1100px) { @media (max-width: 1100px) {
.sidebar { /* 单列堆叠:滚动容器不能换行,否则侧栏占满高度后主内容会被排到视口右侧(看不见) */
display: grid; #page-scroll {
grid-template-columns: repeat(2, minmax(0, 1fr)); flex-wrap: nowrap;
gap: var(--su-space-3);
padding: 0 var(--su-space-4) var(--su-space-4);
} }
.profile-card { .profile-card {
grid-row: span 2; grid-row: auto;
} }
.service-panel { .service-panel {
@@ -862,12 +860,26 @@
} }
@media (max-width: 820px) { @media (max-width: 820px) {
.sidebar { /* 手机上只留分组导航:资料卡 / 本地服务卡太占地,导航还留着方便进分组 */
#page-scroll > aside .profile-card,
#page-scroll > aside .service-panel {
display: none;
}
/* 手机上页头只留品牌 + 操作图标:跑马灯放不下,会盖到下面的搜索条上 */
.header-ticker-slot {
display: none; display: none;
} }
.site-header-inner { .site-header-inner {
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--su-space-2);
height: 56px; 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); 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;
}
}