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:
@@ -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>
|
||||
Reference in New Issue
Block a user