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:
@@ -2072,5 +2072,102 @@ onBeforeUnmount(stopFeePolling)
|
|||||||
|
|
||||||
/* 表格字号收紧 */
|
/* 表格字号收紧 */
|
||||||
:deep(.el-table) { font-size: 12px !important; }
|
: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>
|
</style>
|
||||||
Reference in New Issue
Block a user