80 lines
1.7 KiB
CSS
80 lines
1.7 KiB
CSS
/* 现代化数据表格样式 */
|
|
.data-table {
|
|
@apply w-full bg-white shadow-sm rounded-lg overflow-hidden;
|
|
}
|
|
|
|
.data-table thead {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
.data-table th {
|
|
@apply px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider text-left;
|
|
}
|
|
|
|
.data-table th.sortable {
|
|
@apply cursor-pointer hover:bg-gray-100 transition-colors duration-150;
|
|
}
|
|
|
|
.data-table th.sortable::after {
|
|
content: "\f0dc"; /* fa-sort */
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
@apply ml-1 text-gray-400;
|
|
}
|
|
|
|
.data-table th.sortable.sort-asc::after {
|
|
content: "\f0de"; /* fa-sort-up */
|
|
@apply text-indigo-500;
|
|
}
|
|
|
|
.data-table th.sortable.sort-desc::after {
|
|
content: "\f0dd"; /* fa-sort-down */
|
|
@apply text-indigo-500;
|
|
}
|
|
|
|
.data-table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
|
}
|
|
|
|
.data-table tbody tr {
|
|
@apply border-b border-gray-200 transition-colors duration-150;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
.data-table tbody tr:last-child {
|
|
@apply border-b-0;
|
|
}
|
|
|
|
/* 空数据状态 */
|
|
.data-table-empty {
|
|
@apply py-12 text-center;
|
|
}
|
|
|
|
/* 表格分页控件 */
|
|
.table-pagination {
|
|
@apply flex items-center justify-between py-3 px-4 bg-white border-t border-gray-200 text-sm text-gray-700;
|
|
}
|
|
|
|
.table-pagination-info {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
.table-pagination-controls {
|
|
@apply flex space-x-1;
|
|
}
|
|
|
|
.pagination-button {
|
|
@apply px-3 py-1 rounded-md border border-gray-300 bg-white hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors;
|
|
}
|
|
|
|
.pagination-button.active {
|
|
@apply bg-indigo-50 text-indigo-700 border-indigo-300;
|
|
}
|
|
|
|
.pagination-button.disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|