fix: 管理后台移动端表格给足最小宽左右滑动(列不再挤压)
This commit is contained in:
+7
-1
@@ -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>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user