148 lines
2.7 KiB
CSS
148 lines
2.7 KiB
CSS
/**
|
|
* 表格组件样式
|
|
*/
|
|
|
|
/* 表格容器 */
|
|
.ant-table-wrapper {
|
|
@apply w-full overflow-x-auto relative;
|
|
}
|
|
|
|
/* 表格 */
|
|
.ant-table {
|
|
@apply w-full border-collapse text-sm;
|
|
}
|
|
|
|
/* 表头 */
|
|
.ant-table thead th {
|
|
@apply bg-gray-50 font-medium py-3 px-4 text-left text-gray-700 border-b border-gray-200;
|
|
}
|
|
|
|
/* 表格内容 */
|
|
.ant-table tbody td {
|
|
@apply py-3 px-4 border-b border-gray-100;
|
|
}
|
|
|
|
/* 表格行 */
|
|
.ant-table tbody tr {
|
|
@apply bg-white hover:bg-gray-50 transition-colors duration-150;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.ant-table-empty {
|
|
@apply py-12 text-center text-gray-500;
|
|
}
|
|
|
|
/* 带边框的表格 */
|
|
.ant-table-bordered,
|
|
.ant-table-bordered .ant-table thead th,
|
|
.ant-table-bordered .ant-table tbody td {
|
|
@apply border border-gray-200;
|
|
}
|
|
|
|
/* 表格加载状态 */
|
|
.ant-table-loading {
|
|
@apply relative opacity-60;
|
|
}
|
|
|
|
.ant-table-loading-indicator {
|
|
@apply absolute inset-0 flex items-center justify-center bg-white bg-opacity-70;
|
|
}
|
|
|
|
/* 表格行选中状态 */
|
|
.ant-table tr.selected {
|
|
@apply bg-[rgba(0,104,74,0.05)];
|
|
}
|
|
|
|
/* 表格排序图标 */
|
|
.ant-table-column-sorter {
|
|
@apply ml-1 text-gray-400 inline-flex flex-col;
|
|
}
|
|
|
|
.ant-table-column-sorter-up.active,
|
|
.ant-table-column-sorter-down.active {
|
|
@apply text-[#00684a];
|
|
}
|
|
|
|
@layer components {
|
|
/* 基础表格 */
|
|
.table-container {
|
|
@apply w-full overflow-x-auto;
|
|
}
|
|
|
|
.table {
|
|
@apply min-w-full divide-y divide-gray-200;
|
|
}
|
|
|
|
.table thead {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
.table th {
|
|
@apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
}
|
|
|
|
.table tbody {
|
|
@apply bg-white divide-y divide-gray-200;
|
|
}
|
|
|
|
.table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
|
}
|
|
|
|
.table tr:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* 紧凑表格 */
|
|
.table-compact th {
|
|
@apply px-4 py-2 text-xs;
|
|
}
|
|
|
|
.table-compact td {
|
|
@apply px-4 py-2 text-xs;
|
|
}
|
|
|
|
/* 边框表格 */
|
|
.table-bordered {
|
|
@apply border border-gray-200;
|
|
}
|
|
|
|
.table-bordered th,
|
|
.table-bordered td {
|
|
@apply border border-gray-200;
|
|
}
|
|
|
|
/* 条纹表格 */
|
|
.table-striped tbody tr:nth-child(odd) {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* 可选择行表格 */
|
|
.table-selectable tbody tr {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.table-selectable tbody tr.selected {
|
|
@apply bg-[rgba(0,104,74,0.05)];
|
|
}
|
|
|
|
/* 表格分页 */
|
|
.table-pagination {
|
|
@apply flex items-center justify-between py-3 px-4 bg-white border-t border-gray-200;
|
|
}
|
|
|
|
.table-pagination-info {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
.table-pagination-actions {
|
|
@apply flex items-center space-x-2;
|
|
}
|
|
|
|
/* 响应式处理 */
|
|
@screen md {
|
|
.table-responsive {
|
|
@apply overflow-x-visible;
|
|
}
|
|
}
|
|
} |