feat: 其他角色首页移动端适配 (doctor/sponsor/executor)

doctor/Home.vue: 完善移动端适配
- 原只有 .cols-row → 1fr 一行规则
- 加 welcome-bar 紧凑 padding (20/24 → 14/16) + flex-wrap
- 加 welcome-text h2 字号 20 → 16, p 13 → 12
- 加 section padding 16/20 → 12/14, section-title 15 → 14
- 加 breadcrumb 字号 13 → 12, .doctor-home padding 16/20 → 12

sponsor/Home.vue: 补 stats-grid-5 媒体规则
- 原只有 stats-grid-3/2 媒体规则, 漏 stats-grid-5
- 加 stats-grid-5 → 2 列 + ≤480px → 1 列
- 加整页 padding 16 → 12, breadcrumb 13 → 12
- 加 stat-card padding 24 → 16/12 + min-height 120 → 90
- 加 stat-label/Value/Desc 字号缩小
- 加 .section padding 20/24 → 14/16

executor/Overview.vue: 补 stats-grid 5 列媒体规则
- 原 5 个 KPI 卡 5 列布局在 mobile 完全挤爆, 但媒体查询里没改 grid-template-columns
- 加 .stats-grid → 2 列 + ≤480px → 1 列
- 加 stat-card padding/min-height 调整
- 加 stat-label/Value 字号缩小
- 加 .section padding 20/24 → 14/16

admin/Workbench.vue: 已三档断点 (1200/768/480), 无需调整
manager/Workbench.vue: 已加 5 → 2 列布局, 无需调整
This commit is contained in:
guoju0808
2026-08-26 12:24:55 +00:00
parent 54bcff9e06
commit 18f7e93d5b
3 changed files with 63 additions and 1 deletions
+21
View File
@@ -137,7 +137,28 @@ onMounted(() => {
.more:hover { text-decoration: underline; }
@media (max-width: 768px) {
/* 5/3/2 列面板: 全部 ≤768px 改为 2 列布局 */
.stats-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
.stats-grid-3 { grid-template-columns: repeat(2, 1fr); }
.stats-grid-2 { grid-template-columns: 1fr; }
/* 整页 padding 收窄 */
.sponsor-home { padding: 12px !important; }
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
/* 卡片 padding 收窄 + 字号缩小 */
.stat-card { padding: 16px 12px !important; min-height: 90px; }
.stat-label { font-size: 12px !important; margin-bottom: 8px !important; }
.stat-value { font-size: 24px !important; margin-bottom: 4px !important; }
.stat-desc { font-size: 11px !important; }
/* 消息通知 */
.section { padding: 14px 16px !important; }
.section-title { font-size: 14px !important; margin-bottom: 12px !important; }
}
/* ≤480px 极窄屏: 5 卡 → 1 列 */
@media (max-width: 480px) {
.stats-grid-5 { grid-template-columns: 1fr !important; }
}
</style>