style.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. // 导入全局样式变量
  2. @import '@/styles/variables.scss';';
  3. // 知识库列表页面样式
  4. // 说明:优先使用全局样式,本文件只定义必要的表格优化样式
  5. // ===== 表格样式优化 =====
  6. .content-section {
  7. .ant-table {
  8. // 使用 Ant Design 默认字体大小,不覆盖
  9. // 让全局 .ant-typography 样式控制
  10. // 表头样式
  11. .ant-table-thead {
  12. .ant-table-cell {
  13. font-weight: @font-weight-semibold;
  14. background: @bg-tertiary;
  15. }
  16. }
  17. // 表体样式
  18. .ant-table-tbody {
  19. .ant-table-row {
  20. &:hover {
  21. background: $bg-hover;
  22. }
  23. }
  24. }
  25. }
  26. }
  27. // ===== 操作栏图标样式 =====
  28. .action-btn {
  29. // 方形可交互区域
  30. width: 40px;
  31. height: 40px;
  32. padding: 0;
  33. display: flex;
  34. align-items: center;
  35. justify-content: center;
  36. color: $text-secondary;
  37. transition: all 0.2s ease;
  38. border-radius: $radius-md; // 8px 圆角
  39. // iconify 图标样式
  40. .iconify {
  41. font-size: 24px; // 放大图标
  42. line-height: 1;
  43. transition: all 0.2s ease;
  44. }
  45. // 悬停效果
  46. &:hover {
  47. background: fade($primary-color, 10%);
  48. color: $primary-color;
  49. .iconify {
  50. transform: scale(1.15); // 图标放大
  51. }
  52. }
  53. // 危险操作(删除)
  54. &[danger] {
  55. &:hover {
  56. background: fade($error-color, 10%);
  57. color: $error-color;
  58. }
  59. }
  60. // 激活/点击效果
  61. &:active {
  62. transform: scale(0.95);
  63. }
  64. }
  65. // ===== 下载下拉菜单样式 =====
  66. .ant-dropdown-menu-item {
  67. display: flex;
  68. align-items: center;
  69. gap: $spacing-2;
  70. .anticon {
  71. font-size: 16px;
  72. }
  73. }