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
+18 -1
View File
@@ -237,7 +237,24 @@ onBeforeUnmount(() => {
.simple-item.disabled .item-title { color: #bfbfbf; }
.simple-item.disabled:hover .item-title { color: #bfbfbf; }
.empty { padding: 16px 0; text-align: center; color: #bfbfbf; font-size: 13px; }
@media (max-width: 768px) { .cols-row { grid-template-columns: 1fr; } }
/* 移动端适配 (≤768px) */
@media (max-width: 768px) {
.doctor-home { padding: 12px !important; }
.breadcrumb { font-size: 12px !important; margin-bottom: 8px !important; }
/* cols-row: 双栏 → 单栏 */
.cols-row { grid-template-columns: 1fr !important; }
/* welcome-bar: 紧凑 padding + 字号缩小 */
.welcome-bar { padding: 14px 16px !important; flex-wrap: wrap !important; gap: 8px; margin-bottom: 12px !important; }
.welcome-text h2 { font-size: 16px !important; margin-bottom: 4px !important; }
.welcome-text p { font-size: 12px !important; }
/* section: padding 收窄 */
.section { padding: 12px 14px !important; margin-bottom: 12px !important; }
.section-title { font-size: 14px !important; margin-bottom: 10px !important; }
}
/* 二维码弹窗 */
.qrcode-wrap { text-align: center; padding: 12px 0; }