feat: manager/workbench 移动端精细适配 (KPI 2列/单列/role-grid/快捷入口单列)

之前 Workbench 已有基础 media (1200px 5→3列, 768px 5→2列), 但:
- KPI 卡 padding 没缩, 字号没缩
- 双栏内容没堆叠
- 角色卡 padding 没缩
- 快捷入口 8 项还是 2 列, 手机端拥挤
- 超窄屏 (≤480px) 无适配

新增:
≤768px:
- 容器 padding 0 4px
- 面包屑 12px
- KPI 2 列, 数字 30→22px, padding 12px
- content-grid 强制单列
- content-card padding 14/16
- 角色卡 2 列, padding 10/12, 数字 22→18px
- 快捷入口 1 列 (8 项单列更易点)

≤480px:
- KPI 单列, role-grid 单列
- stat-value 20px
- content-card padding 12/14

不影响桌面: 所有规则都在 @media 内
This commit is contained in:
guoju0808
2026-08-26 11:57:13 +00:00
parent d318e4383f
commit 61303a822b
+45 -3
View File
@@ -290,13 +290,55 @@ onMounted(load)
}
.quick-text { font-weight: 500; }
/* —— 响应式: 5 卡变 2 列 —— */
/* —— 响应式: 5 卡变 3/2/1 列 —— */
@media (max-width: 1200px) {
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.role-grid { grid-template-columns: repeat(2, 1fr); }
/* 容器内边距收窄 (不影响 admin-layout 的 main padding) */
.admin-workbench { padding: 0 4px; }
/* 面包屑字号 */
.breadcrumb { font-size: 12px !important; margin-bottom: 12px !important; }
/* KPI 卡: 2 列, padding 收窄, 数字缩小 */
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.stat-card > .stat-label,
.stat-card > .stat-value,
.stat-card > .stat-extra { padding-left: 12px; padding-right: 12px; }
.stat-label { font-size: 12px !important; padding-top: 14px; padding-bottom: 4px; }
.stat-value { font-size: 22px !important; padding-bottom: 10px; }
.stat-extra { font-size: 11px !important; padding: 8px 12px; }
/* 双栏内容: 单列堆叠 */
.content-grid { grid-template-columns: 1fr; gap: 12px; }
/* 内容卡: padding 收窄 */
.content-card { padding: 14px 16px !important; border-radius: 4px !important; }
.section-title { font-size: 14px !important; margin-bottom: 12px !important; }
/* 角色卡: 2 列 */
.role-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.role-card { padding: 10px 12px !important; }
.role-name { font-size: 11px !important; margin-bottom: 4px; }
.role-count { font-size: 18px !important; margin-bottom: 6px; }
/* 快捷入口: 1 列紧凑 (8 项太多, 1 列更易点) */
.quick-grid { grid-template-columns: 1fr; gap: 6px; }
.quick-item { padding: 10px 12px !important; font-size: 13px; }
.quick-icon { font-size: 16px !important; }
}
/* —— 超窄屏 (≤480px): KPI 单列 —— */
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr; }
.role-grid { grid-template-columns: 1fr; }
.stat-value { font-size: 20px !important; }
.content-card { padding: 12px 14px !important; }
}
</style>