fix: 管理后台移动端表格给足最小宽左右滑动(列不再挤压)

This commit is contained in:
2026-09-13 18:40:43 +08:00
parent 3f0d0e9b70
commit c7f879a0cf
2 changed files with 11 additions and 1 deletions
+7 -1
View File
@@ -98,4 +98,10 @@ body { margin: 0; font-family: -apple-system, 'PingFang SC', sans-serif; backgro
.content { padding: 12px; min-width: 0; overflow-x: hidden; }
}
</style>
</style>
<style>
/* 全局:管理后台所有列表在窄屏给足表格最小宽,左右滑动查看 */
.el-table { width: 100%; }
.el-table__inner-wrapper { overflow-x: auto; }
.page .el-table table { min-width: 640px; }
</style>
+4
View File
@@ -67,6 +67,10 @@ onMounted(async () => {
.row { display: grid; grid-template-columns: 300px 1fr; gap: 12px; min-width: 0; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); min-width: 0; overflow-x: auto; }
/* 移动端:固定列宽表格给足最小总宽,交给 el-table 内部横向滑动,避免列被挤压 */
.panel :deep(.el-table) { width: 100%; }
.panel :deep(.el-table__inner-wrapper) { overflow-x: auto; }
.panel :deep(.el-table table) { min-width: 620px; }
.panel h3 { margin: 0 0 12px; font-size: 14px; color: #1f2333; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bar-name { width: 64px; font-size: 12px; color: #6b7080; flex-shrink: 0; }