feat: MeetingDetail 参会人表格移动端适配 (字号 12→11px/padding 紧凑/操作列竖排)

参会人表 27+ 列宽表含大量自定义 template 列 (maskPhone/maskBankCard/
maskIdCard/openPreview 等), 用 GrTable 会丢失自定义渲染.
改为轻量适配:
- 表格整体 font 12 → 11px
- th/td padding 6/4 → 4/3px
- 操作列 row-actions flex row → column (紧凑)
- el-tag 字号 12 → 10px, padding/height 缩窄
- 摘要行 el-table__footer 字号 11px
- 加 class="attendee-table" 用于 scoped 控制

桌面端无影响 (全部在 @media (max-width: 768px) 内)
This commit is contained in:
guoju0808
2026-08-26 12:09:15 +00:00
parent 8067dfd3be
commit 2fa91cf770
+32 -1
View File
@@ -78,7 +78,7 @@
让内容超出时容器内出现横向滚动条, 不影响外层 grid 布局.
-->
<div class="attendee-table-wrap">
<el-table :data="attendeeRows" v-loading="attendeeLoading" border size="small" style="width: 100%;" show-summary :summary-method="attendeeSummary" @selection-change="onAttendeeSelectionChange">
<el-table :data="attendeeRows" v-loading="attendeeLoading" border size="small" style="width: 100%;" show-summary :summary-method="attendeeSummary" @selection-change="onAttendeeSelectionChange" class="attendee-table">
<el-table-column v-if="!isSponsor && !isReadonly" type="selection" width="42" />
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="name" label="医生" min-width="90" />
@@ -2169,5 +2169,36 @@ onBeforeUnmount(stopFeePolling)
/* 表格外层 wrap: 确保手机端表格能横向滚 */
.attendee-table-wrap { -webkit-overflow-scrolling: touch; }
/* 参会人表格 mobile: 字号缩到 11px, padding 紧凑, 行高紧凑 */
.attendee-table {
font-size: 11px !important;
}
.attendee-table :deep(.el-table th.el-table__cell),
.attendee-table :deep(.el-table td.el-table__cell) {
padding: 4px 3px !important;
font-size: 11px !important;
}
.attendee-table :deep(.el-table .row-actions) {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
}
.attendee-table :deep(.el-table .row-actions .el-link) {
font-size: 11px !important;
padding: 0 2px !important;
}
/* 标签字号缩窄 */
.attendee-table :deep(.el-table .el-tag) {
font-size: 10px !important;
padding: 0 4px !important;
height: 18px !important;
line-height: 18px !important;
}
/* 摘要行 (el-table__footer) 字号缩窄 */
.attendee-table :deep(.el-table .el-table__footer-wrapper td) {
font-size: 11px !important;
padding: 6px 3px !important;
}
}
</style>