diff --git a/ry-vue3/src/views/doctor/Home.vue b/ry-vue3/src/views/doctor/Home.vue index 264a31d..6c905b7 100644 --- a/ry-vue3/src/views/doctor/Home.vue +++ b/ry-vue3/src/views/doctor/Home.vue @@ -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; } diff --git a/ry-vue3/src/views/executor/Overview.vue b/ry-vue3/src/views/executor/Overview.vue index 9dc5f7a..1434117 100644 --- a/ry-vue3/src/views/executor/Overview.vue +++ b/ry-vue3/src/views/executor/Overview.vue @@ -203,5 +203,29 @@ onMounted(() => { loadStats() }) /* 表格字号收紧 */ :deep(.el-table) { font-size: 12px !important; } + + /* 5 个 KPI 卡: 桌面 5 列 → mobile 2 列 + 字号缩小 */ + .stats-grid { + grid-template-columns: repeat(2, 1fr) !important; + gap: 10px !important; + } + .stat-card { + padding: 16px 12px !important; + min-height: 90px !important; + } + .stat-label { + font-size: 12px !important; + margin-bottom: 8px !important; + } + .stat-value { font-size: 24px !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 { grid-template-columns: 1fr !important; } } \ No newline at end of file diff --git a/ry-vue3/src/views/sponsor/Home.vue b/ry-vue3/src/views/sponsor/Home.vue index 019be0e..9732343 100644 --- a/ry-vue3/src/views/sponsor/Home.vue +++ b/ry-vue3/src/views/sponsor/Home.vue @@ -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; } } \ No newline at end of file