diff --git a/src/components/ListLayout/index.vue b/src/components/ListLayout/index.vue index fb4f9c8..9fcd71a 100644 --- a/src/components/ListLayout/index.vue +++ b/src/components/ListLayout/index.vue @@ -39,13 +39,16 @@ export default { overflow: hidden; } -/* 搜索区域 - 固定在顶部 */ +/* 搜索区域 - 固定在顶部;限制高度避免矮窗口下占满视口、表格不可见 */ .search-section { flex-shrink: 0; background: #fff; padding: 20px; border-bottom: 1px solid #e4e7ed; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + max-height: min(520px, calc(100vh - 84px - 200px)); + overflow-y: auto; + overflow-x: hidden; } /* 表格区域 - 可滚动 */ @@ -71,6 +74,25 @@ export default { z-index: 10; } +.search-section::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.search-section::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 3px; +} + +.search-section::-webkit-scrollbar-thumb { + background: #c0c0c0; + border-radius: 3px; +} + +.search-section::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; +} + /* 表格区域滚动条样式 */ .table-section::-webkit-scrollbar { width: 6px; @@ -106,6 +128,14 @@ export default { padding: 10px 0; } +/* 窗口高度较矮时:为表格多留垂直空间、收紧搜索区内边距 */ +@media (max-height: 720px) { + .list-layout .search-section { + padding: 12px 16px; + max-height: min(420px, calc(100vh - 84px - 160px)); + } +} + /* 响应式设计 */ @media (max-width: 768px) { .list-layout { diff --git a/src/views/system/jdorder/orderList.vue b/src/views/system/jdorder/orderList.vue index 59f0c71..c302341 100644 --- a/src/views/system/jdorder/orderList.vue +++ b/src/views/system/jdorder/orderList.vue @@ -63,7 +63,17 @@ -