feat: MeetingDetail 移动端精细适配 (双栏→单栏/工具栏横滚/时间轴缩窄)

路由 /manager/meetings/view/:meetingId → MeetingDetail.vue (readonly)

之前已有基础 media query (卡片/工具栏/filter-form/表格),
但未针对此页特有结构:
- .cols-row 8fr/2fr 双栏 → 1fr 单栏堆叠
- .info-grid 1fr/1fr 双栏 → 1fr 单栏
- .info-row flex 横排 → 纵向 (label 上, value 下)
- .info-label 110px flex 0 0 → 自适应
- .card padding 20/24 → 14/16
- .page-title 22px → 18px
- .section-title 16px → 15px
- .attendee-toolbar (5 按钮) 横滚
- .attendee-form-2col 双栏 → 单栏
- .file-row 110px 1fr → 单栏 (label 上 value 下)
- .file-label text-align right → left
- .file-hint grid-column 2 → 1
- .fee-summary padding-left 110px → 0
- .tab-actions 横滚 (按钮多)
- .timeline / .audit-sub-timeline 缩窄
- .page-title flex-wrap (返回/操作按钮组)
- .attendee-table-wrap iOS 横滚优化

桌面端无变化 (全部在 @media (max-width: 768px) 内)
This commit is contained in:
guoju0808
2026-08-26 12:03:50 +00:00
parent d7107436a6
commit 8067dfd3be
@@ -2072,5 +2072,102 @@ onBeforeUnmount(stopFeePolling)
/* 表格字号收紧 */
:deep(.el-table) { font-size: 12px !important; }
/* —— MeetingDetail 特有: 双栏 → 单栏堆叠 —— */
/* cols-row: 8fr/2fr 双栏 → 单栏堆叠 */
.cols-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* info-grid: 1fr/1fr 双栏 → 单栏 (label+value 上下) */
.info-grid {
grid-template-columns: 1fr !important;
gap: 8px 0 !important;
}
/* info-row: label flex 0 0 110px 改为纵向 (label 上, value 下) */
.info-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
.info-label {
flex: none !important;
width: auto !important;
text-align: left !important;
padding-right: 0 !important;
font-size: 12px !important;
color: var(--el-text-color-secondary) !important;
}
.info-value { font-size: 13px !important; }
/* 卡片 padding 缩窄 */
.card { padding: 14px 16px !important; margin-bottom: 12px !important; }
.section-title { font-size: 15px !important; margin-bottom: 12px !important; }
.page-title { font-size: 18px !important; margin-bottom: 12px !important; }
/* attendee-toolbar 横向滚动 (5 个按钮) */
.attendee-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
gap: 8px !important;
}
.attendee-toolbar::-webkit-scrollbar { height: 3px; }
.attendee-toolbar::-webkit-scrollbar-thumb { background: var(--brand-slate-200); border-radius: 2px; }
.attendee-toolbar :deep(.el-button) {
flex-shrink: 0;
font-size: 12px !important;
padding: 0 10px !important;
height: 28px !important;
}
/* attendee-form-2col: 双栏 → 单栏 */
.attendee-form-2col {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* file-row: 110px 1fr → label 上 value 下 */
.file-row {
grid-template-columns: 1fr !important;
gap: 4px 0 !important;
padding: 6px 0 !important;
}
.file-label {
text-align: left !important;
font-size: 12px !important;
line-height: 1.4 !important;
color: var(--el-text-color-secondary) !important;
}
.file-hint { grid-column: 1 !important; padding-left: 0 !important; }
/* fee-summary: 去掉 110px 左 padding */
.fee-summary {
padding-left: 0 !important;
flex-wrap: wrap !important;
}
/* tab-actions 横滚 (操作按钮多) */
.tab-actions {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.tab-actions::-webkit-scrollbar { height: 3px; }
/* 时间轴缩窄 */
.timeline { padding-left: 18px !important; }
.timeline-item::before { left: -23px !important; }
.audit-sub-timeline { padding-left: 12px !important; }
.sub-timeline-item::before { left: -18px !important; }
/* 顶部"返回/操作"按钮组横滚 */
.page-title { flex-wrap: wrap !important; gap: 8px !important; }
/* 表格外层 wrap: 确保手机端表格能横向滚 */
.attendee-table-wrap { -webkit-overflow-scrolling: touch; }
}
</style>