/* 添加卡片占满容器的样式 */ .tcs-card-full { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; } /* 让卡片体占满剩余空间并允许滚动 */ .tcs-card-full .card-body { flex: 1; overflow: hidden; padding: 0; position: relative; /* 添加相对定位 */ } /* 修改表格响应式容器样式 */ .tcs-card-full .table-responsive { position: absolute; /* 使用绝对定位 */ top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: auto; } /* 固定表头 */ .tcs-card-full .table thead { position: sticky; top: 0; z-index: 1; background-color: var(--tblr-bg-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } /* 确保表格占满容器宽度 */ .tcs-card-full .table { margin-bottom: 0; width: 100%; border-collapse: separate; /* 确保边框正确显示 */ border-spacing: 0; } /* 确保表格行有边框 */ .tcs-card-full .table tbody tr { border-bottom: 1px solid var(--tblr-border-color); } /* 设置表格行悬停效果 */ .tcs-card-full .table tbody tr:hover { background-color: rgba(var(--tblr-primary-rgb), 0.05); } /* 添加表格头和内容居中的样式 */ .tcs-card-full .table th, .tcs-card-full .table td { text-align: center; vertical-align: middle; } /* 添加卡片头部和底部紧凑样式 */ .tcs-card-header-compact { padding-top: 0.5rem; padding-bottom: 0.5rem; } .tcs-card-footer-compact { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* 添加表格行紧凑样式 */ .tcs-table-compact th, .tcs-table-compact td { padding-top: 0.4rem; padding-bottom: 0.4rem; } /* 调整表格内进度条的大小 */ .tcs-table-compact .progress-xs { margin-top: 0.2rem; margin-bottom: 0.2rem; } /* 调整表格内文字间距 */ .tcs-table-compact .clearfix { margin-bottom: 0.1rem; } /* 确保取消按钮样式正确 */ .btn.tcs-table-oper-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* 添加时间列宽度样式 */ .tcs-table-time-column { width: 9.375rem; /* 150px / 16 = 9.375rem */ min-width: 9.375rem; /* 150px / 16 = 9.375rem */ white-space: nowrap; } /* 确保时间列内容不会换行 */ .tcs-table-time-column span { display: block; overflow: hidden; text-overflow: ellipsis; } /* 添加操作列宽度样式 */ .tcs-table-action-column { width: 12.5rem; /* 200px / 16 = 12.5rem */ min-width: 12.5rem; /* 200px / 16 = 12.5rem */ text-align: center; } /* 调整操作按钮样式 */ .tcs-table-action-column .btn { display: inline-block; margin: 0 auto; } /* ID列宽度 */ .tcs-table-id-column { width: 6.25rem; /* 100px / 16 = 6.25rem */ min-width: 6.25rem; /* 100px / 16 = 6.25rem */ } /* 状态列宽度 */ .tcs-table-status-column { width: 6.25rem; /* 100px / 16 = 6.25rem */ min-width: 6.25rem; /* 100px / 16 = 6.25rem */ text-align: center; } /* order 从、到、货物列宽度 */ .tcs-table-from-column, .tcs-table-to-column, .tcs-table-goods-column { /* 120px / 16 = 7.5rem */ min-width: 7.5rem; /* 120px / 16 = 7.5rem */ } /* 报警列宽度 */ /* 来源列宽度 */ .tcs-table-source-column { min-width: 6.875rem; /* 110px / 16 = 6.875rem */ } /* 级别列宽度 */ .tcs-table-level-column { min-width: 5rem; /* 80px / 16 = 5rem */ text-align: center; } /* 事件列宽度 */ .tcs-table-event-column { min-width: 7.5rem; /* 120px / 16 = 7.5rem */ } /* 地图列宽度 */ .tcs-table-map-column { min-width: 6.25rem; /* 100px / 16 = 6.25rem */ } /* 区域列宽度 */ .tcs-table-area-column { min-width: 5.625rem; /* 90px / 16 = 5.625rem */ } /* 名称列宽度 */ .tcs-table-name-column { min-width: 5.625rem; /* 90px / 16 = 5.625rem */ } /* 描述列宽度 */ .tcs-table-desc-column { min-width: 5rem; /* 80px / 16 = 5rem */ } /* 类型列宽度 */ .tcs-table-type-column { min-width: 5rem; /* 80px / 16 = 5rem */ } /* 版本列宽度 */ .tcs-table-version-column { min-width: 6.25rem; /* 100px / 16 = 6.25rem */ } .tcs-table-battery-column { min-width: 9.375rem; /* 150px / 16 = 9.375rem */ } /* 类型列最小宽度 */ .tcs-table-type-column { min-width: 7.5rem; /* 120px / 16 = 7.5rem */ } /* 用户名列最小宽度 */ .tcs-table-username-column { min-width: 7.5rem; /* 120px / 16 = 7.5rem */ } /* 说明列最小宽度 */ .tcs-table-desc-column { min-width: 15.5rem; /* 200px / 16 = 12.5rem */ }