/* 自定义分页组件样式 */ .custom-pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid #f0f0f0; background: #fafafa; border-radius: 0 0 6px 6px; margin: 0 -24px -24px -24px; padding-left: 24px; padding-right: 24px; } .pagination-info { display: flex; align-items: center; gap: 16px; color: #666; font-size: 14px; } .pagination-controls { display: flex; align-items: center; gap: 4px; } .pagination-page-item { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; margin: 0 2px; font-size: 14px; transition: all 0.2s ease; background-color: #ffffff; color: #333; } .pagination-page-item:hover { background-color: #e6f7ff; border-color: #1890ff; color: #1890ff; } .pagination-page-item.active { background-color: #1890ff; color: #ffffff; border-color: #1890ff; } .pagination-page-item.active:hover { background-color: #40a9ff; border-color: #40a9ff; } .pagination-page-item.disabled { cursor: not-allowed; color: #d9d9d9; background-color: #f5f5f5; border-color: #d9d9d9; } .pagination-page-item.disabled:hover { color: #d9d9d9; background-color: #f5f5f5; border-color: #d9d9d9; } .pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: default; border: none; color: #999; } .pagination-jumper { display: flex; align-items: center; gap: 8px; color: #666; font-size: 14px; } .pagination-page-info { min-width: 80px; text-align: right; color: #666; font-size: 14px; } /* 响应式设计 */ @media (max-width: 768px) { .custom-pagination { flex-direction: column; gap: 16px; align-items: stretch; } .pagination-info { justify-content: center; } .pagination-controls { justify-content: center; } .pagination-jumper { justify-content: center; } }