index.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. html, body, #root {
  2. height: 100%;
  3. }
  4. body {
  5. margin: 0;
  6. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
  7. Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  8. background-color: #f5f5f5;
  9. color: rgba(0, 0, 0, 0.88);
  10. }
  11. * {
  12. box-sizing: border-box;
  13. }
  14. /* === 主 tabs: 横向均匀分布 + 更大字体 === */
  15. .recall-main-tabs > .ant-tabs-nav {
  16. margin-bottom: 20px;
  17. }
  18. .recall-main-tabs > .ant-tabs-nav::before {
  19. border-bottom: 2px solid #f0f0f0;
  20. }
  21. .recall-main-tabs > .ant-tabs-nav .ant-tabs-nav-list {
  22. width: 100%;
  23. display: flex;
  24. }
  25. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab {
  26. flex: 1;
  27. justify-content: center;
  28. padding: 14px 16px !important;
  29. margin: 0 !important;
  30. font-size: 18px !important;
  31. font-weight: 600;
  32. background: #fff;
  33. border-radius: 8px 8px 0 0;
  34. transition: all 0.18s ease;
  35. }
  36. /* 未选中: 灰色文字 + 白底 */
  37. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn {
  38. color: rgba(0, 0, 0, 0.55);
  39. font-weight: 500;
  40. }
  41. /* 悬停 (仅未选中态): 浅绿背景 + 中绿字 */
  42. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab:not(.ant-tabs-tab-active):not(.ant-tabs-tab-disabled):hover {
  43. background: #f6ffed;
  44. }
  45. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab:not(.ant-tabs-tab-active):not(.ant-tabs-tab-disabled):hover .ant-tabs-tab-btn {
  46. color: #389e0d !important;
  47. }
  48. /* 选中: 实色绿底 + 白字, 悬停时白字保持 */
  49. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active,
  50. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active:hover {
  51. background: #52c41a;
  52. box-shadow: 0 2px 6px rgba(82, 196, 26, 0.35);
  53. }
  54. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
  55. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active:hover .ant-tabs-tab-btn {
  56. color: #fff !important;
  57. font-weight: 700;
  58. }
  59. .recall-main-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-disabled .ant-tabs-tab-btn {
  60. color: rgba(0, 0, 0, 0.3) !important;
  61. }
  62. .recall-main-tabs > .ant-tabs-nav .ant-tabs-ink-bar {
  63. height: 4px !important;
  64. background: #389e0d;
  65. border-radius: 2px 2px 0 0;
  66. }