/* 批量调价页面样式 */ #app { padding: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; height: 100vh; display: flex; flex-direction: column; } .page-container { display: flex; flex-direction: column; height: 100%; } /* 工具栏样式 */ .toolbar { margin-bottom: 15px; padding: 15px; background: #f5f7fa; border-radius: 4px; border: 1px solid #ebeef5; display: flex; align-items: center; gap: 10px; } .toolbar .el-button { margin-right: 10px; } .close-btn { margin-left: auto !important; font-weight: bold !important; } .close-btn:hover { background-color: #f56c6c !important; border-color: #f56c6c !important; color: #fff !important; } /* 表格容器 */ .table-container { flex: 1; overflow: auto; border: 1px solid #ebeef5; border-radius: 4px; background: #fff; min-height: 0; position: relative; width: 100%; min-width: 0; } /* 确保表格不会被压缩 */ .table-container .el-table { flex-shrink: 0 !important; min-width: max-content !important; } /* Element Plus 表格样式 */ .table-container .el-table { font-size: 14px; } /* 禁用表格内部的滚动,让容器控制滚动 */ .table-container .el-table__body-wrapper { overflow: visible !important; max-height: none !important; } .table-container .el-table__header-wrapper { overflow: visible !important; } /* 禁用Element Plus内部的滚动条组件,但确保内容可见 */ /* 不隐藏el-scrollbar,而是让它显示内容但禁用滚动 */ .table-container .el-table__body-wrapper .el-scrollbar { display: block !important; height: auto !important; } .table-container .el-table__body-wrapper .el-scrollbar__wrap { overflow: visible !important; display: block !important; height: auto !important; max-height: none !important; } .table-container .el-table__body-wrapper .el-scrollbar__view { display: block !important; overflow: visible !important; width: 100% !important; height: auto !important; } /* 隐藏滚动条,但保留内容显示 */ .table-container .el-table__body-wrapper .el-scrollbar__bar { display: none !important; } /* 确保表格body直接显示,不通过scrollbar包装 */ .table-container .el-table__body-wrapper > .el-scrollbar { display: block !important; height: auto !important; } .table-container .el-table__body-wrapper > .el-scrollbar__wrap { overflow: visible !important; height: auto !important; max-height: none !important; } /* 确保表格body table直接可见 */ .table-container .el-table__body-wrapper table { display: table !important; visibility: visible !important; width: 100% !important; } /* 确保表格行可见 */ .table-container .el-table__body-wrapper tbody { display: table-row-group !important; visibility: visible !important; } .table-container .el-table__body-wrapper tr { display: table-row !important; visibility: visible !important; } .table-container .el-table__body-wrapper td { display: table-cell !important; visibility: visible !important; } /* 确保表格body区域可见 */ .table-container .el-table__body { display: block !important; height: auto !important; } .table-container .el-table__body table { display: table !important; width: 100% !important; } /* 确保表格body-wrapper有高度和可见性,但不设置最小高度,让行高自适应 */ .table-container .el-table__body-wrapper { height: auto !important; overflow: visible !important; } /* 确保表格行完全可见,行高自适应内容 */ .table-container .el-table__row { display: table-row !important; visibility: visible !important; height: auto !important; } /* 确保表格单元格行高正常 */ .table-container .el-table__cell { height: auto !important; line-height: normal !important; } /* 确保表头和表体宽度一致,一起滚动 */ .table-container .el-table__body { width: max-content !important; min-width: 100%; } .table-container .el-table__header { width: max-content !important; min-width: 100%; } /* 确保表格内容区域不限制高度和宽度 */ .table-container .el-table__inner-wrapper { overflow: visible !important; } /* 确保表格列能够正确计算宽度 */ .table-container .el-table__header-wrapper .el-table__header, .table-container .el-table__body-wrapper .el-table__body { table-layout: auto !important; } /* 确保表格单元格宽度正确 */ .table-container .el-table th, .table-container .el-table td { white-space: nowrap; } /* 确保每列之间有边框 */ .table-container .el-table th, .table-container .el-table td { border-right: 1px solid #ebeef5 !important; } .table-container .el-table th:last-child, .table-container .el-table td:last-child { border-right: none !important; } /* 确保表头文字居中 */ .table-container .el-table th { text-align: center !important; } .table-container .el-table th .cell { text-align: center !important; justify-content: center !important; } /* 确保表头和表体都有边框 */ .table-container .el-table--border th, .table-container .el-table--border td { border-right: 1px solid #ebeef5 !important; } .table-container .el-table--border th:last-child, .table-container .el-table--border td:last-child { border-right: none !important; } /* 确保带边框的表头文字居中 */ .table-container .el-table--border th { text-align: center !important; } .table-container .el-table--border th .cell { text-align: center !important; justify-content: center !important; } /* 确保表格能够根据内容自动扩展 */ .table-container .el-table { width: max-content !important; min-width: max-content !important; flex-shrink: 0 !important; } /* 滚动条样式 */ .table-container::-webkit-scrollbar { width: 8px; height: 8px; } .table-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .table-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .table-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 确保表头文字居中,参考TBBJKSLR样式 */ .el-table th { background-color: #f8f9fa !important; font-weight: 600 !important; color: #303133 !important; text-align: center !important; height: 40px !important; /* 表头高度 */ line-height: 40px !important; /* 垂直居中 */ } .el-table th .cell { text-align: center !important; justify-content: center !important; line-height: 40px !important; /* 垂直居中 */ } /* 表头底部边框,参考TBBJKSLR */ .el-table__header-wrapper { border-bottom: 2px solid #409eff !important; } /* 序号列表头特殊样式,参考TBBJKSLR */ .table-container .el-table th.serial-column, .el-table th.serial-column { background-color: #f0f2f5 !important; font-weight: 600 !important; text-align: center !important; border-right: 2px solid #d0d0d0 !important; } /* 序号列数据单元格样式 */ .table-container .el-table td.serial-column, .el-table td.serial-column { background-color: #f8f9fa !important; font-weight: bold !important; text-align: center !important; border-right: 2px solid #d0d0d0 !important; color: #303133 !important; user-select: none !important; } .el-table td, .el-table th { padding: 8px 0; } .el-table--border { border: 1px solid #ebeef5; } .el-table--border::after, .el-table--border::before { background-color: #ebeef5; } /* 确保每列之间有清晰的边框 */ .el-table--border th, .el-table--border td { border-right: 1px solid #ebeef5 !important; } .el-table--border th:last-child, .el-table--border td:last-child { border-right: none !important; } /* 确保表头单元格有边框 */ .el-table__header th { border-right: 1px solid #ebeef5 !important; text-align: center !important; } .el-table__header th:last-child { border-right: none !important; } /* 启用列宽调整功能,参考TBBJKSLR */ .el-table__column-resize-proxy { display: block !important; background-color: #409eff; width: 2px; z-index: 10; } /* 启用列分隔线的拖拽功能 */ .el-table th.is-resizing { cursor: ew-resize !important; } /* 列边框可拖拽调整,参考TBBJKSLR */ .table-container .el-table th, .el-table th { position: relative; } /* 序号列不可调整列宽,参考TBBJKSLR */ .table-container .el-table th.serial-column, .table-container .el-table th.el-table-column--selection, .el-table th.serial-column, .el-table th.el-table-column--selection { /* 选择列也禁用调整 */ position: relative; } .table-container .el-table th.serial-column .column-resize-handle, .table-container .el-table th.el-table-column--selection .column-resize-handle, .el-table th.serial-column .column-resize-handle, .el-table th.el-table-column--selection .column-resize-handle { display: none !important; } /* 可调整列宽的列,鼠标悬停在边框时显示调整光标 */ .table-container .el-table th:not(.serial-column):not(.el-table-column--selection) .column-resize-handle, .el-table th:not(.serial-column):not(.el-table-column--selection) .column-resize-handle { position: absolute; right: -2px; /* 调整到列边框上 */ top: 0; bottom: 0; width: 4px; cursor: ew-resize; z-index: 5; background: transparent; } .table-container .el-table th:not(.serial-column):not(.el-table-column--selection) .column-resize-handle:hover, .el-table th:not(.serial-column):not(.el-table-column--selection) .column-resize-handle:hover { background-color: #409eff; opacity: 0.3; } /* 列标题内容区域不显示调整光标,禁用点击效果 */ .table-container .el-table th, .el-table th { cursor: default !important; } .table-container .el-table th .cell, .el-table th .cell { cursor: default !important; user-select: none; /* 禁止文本选择 */ } /* 隐藏排序图标,因为不允许排序 */ .table-container .el-table th .caret-wrapper, .el-table th .caret-wrapper { display: none !important; } /* 确保列宽调整手柄可以正常工作 */ .table-container .el-table th .column-resize-handle, .el-table th .column-resize-handle { pointer-events: auto !important; cursor: ew-resize !important; } /* 确保表头单元格内容居中 */ .el-table__header th .cell { text-align: center !important; justify-content: center !important; } /* 确保表体单元格有边框 */ .el-table__body td { border-right: 1px solid #ebeef5 !important; } .el-table__body td:last-child { border-right: none !important; } .el-table--striped .el-table__body tr.el-table__row--striped td { background-color: #fafafa; } .el-table__row:hover > td { background-color: #f5f7fa !important; } /* 数据统计样式 */ .data-count-footer { margin-top: 15px; text-align: center; font-size: 14px; color: #606266; font-weight: bold; padding: 10px; background: #f5f7fa; border-radius: 4px; border: 1px solid #ebeef5; } /* 对话框样式 */ .el-dialog { border-radius: 4px; } .el-dialog__header { padding: 20px 20px 10px; border-bottom: 1px solid #ebeef5; background: #f5f7fa; } .el-dialog__title { font-size: 16px; font-weight: 600; color: #303133; } .el-dialog__body { padding: 20px; } .el-form-item { margin-bottom: 20px; } .el-form-item__label { font-weight: 500; color: #606266; } /* 加载状态 */ .el-loading-mask { background-color: rgba(255, 255, 255, 0.9); } /* 响应式设计 */ @media (max-width: 768px) { .toolbar { flex-direction: column; align-items: flex-start; } .toolbar .el-button { margin-bottom: 10px; margin-right: 0; width: 100%; } .close-btn { margin-left: 0 !important; } .table-container { height: 400px !important; } } /* 序号列样式 */ .el-table .el-table__cell:first-child { background-color: #f8f9fa !important; font-weight: bold; } /* 数字列右对齐 */ .el-table .el-table__cell[class*="is-right"] { text-align: right; } /* 选择列样式 */ .el-table .el-table__cell[class*="selection"] { text-align: center; }