global.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. /* 全局样式 */
  2. body {
  3. font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  4. background-color: #f5f7f9;
  5. color: #333;
  6. margin: 0;
  7. padding: 0;
  8. height: auto;
  9. min-height: 100%;
  10. width: 100%;
  11. max-width: 100%;
  12. overflow-x: hidden;
  13. }
  14. html {
  15. height: 100%;
  16. overflow: auto;
  17. }
  18. /* Iframe内容样式 */
  19. html.iframe-content {
  20. overflow: auto;
  21. height: 100%;
  22. }
  23. html.iframe-content body {
  24. min-height: 100%;
  25. height: auto;
  26. overflow: visible;
  27. }
  28. .page-container {
  29. padding: 20px;
  30. position: relative;
  31. min-height: 100vh;
  32. width: 100%;
  33. box-sizing: border-box;
  34. overflow-x: hidden;
  35. }
  36. /* 响应式容器 */
  37. .responsive-container {
  38. width: 100%;
  39. overflow-x: auto;
  40. }
  41. /* 滚动条美化 */
  42. ::-webkit-scrollbar {
  43. width: 8px;
  44. height: 8px;
  45. }
  46. ::-webkit-scrollbar-track {
  47. background-color: #f1f1f1;
  48. border-radius: 4px;
  49. }
  50. ::-webkit-scrollbar-thumb {
  51. background-color: #c1c1c1;
  52. border-radius: 4px;
  53. }
  54. ::-webkit-scrollbar-thumb:hover {
  55. background-color: #a8a8a8;
  56. }
  57. /* 卡片样式 */
  58. .card {
  59. background-color: white;
  60. border-radius: 8px;
  61. box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  62. }
  63. /* 表格样式 */
  64. .table-container {
  65. overflow-x: auto;
  66. }
  67. table {
  68. width: 100%;
  69. border-collapse: collapse;
  70. }
  71. th {
  72. background-color: #f9fafb;
  73. padding: 12px 16px;
  74. text-align: left;
  75. font-weight: 500;
  76. color: #6b7280;
  77. border-bottom: 1px solid #e5e7eb;
  78. }
  79. td {
  80. padding: 12px 16px;
  81. border-bottom: 1px solid #e5e7eb;
  82. }
  83. tr:hover {
  84. background-color: #f9fafb;
  85. }
  86. /* 按钮样式 */
  87. .btn {
  88. display: inline-flex;
  89. align-items: center;
  90. justify-content: center;
  91. padding: 8px 16px;
  92. border-radius: 4px;
  93. font-weight: 500;
  94. cursor: pointer;
  95. transition: all 0.2s;
  96. }
  97. .btn-primary {
  98. background-color: #4CAF50;
  99. color: white;
  100. }
  101. .btn-primary:hover {
  102. background-color: #388E3C;
  103. }
  104. .btn-default {
  105. background-color: white;
  106. border: 1px solid #d1d5db;
  107. color: #374151;
  108. }
  109. .btn-default:hover {
  110. background-color: #f9fafb;
  111. }
  112. .btn-danger {
  113. background-color: #ef4444;
  114. color: white;
  115. }
  116. .btn-danger:hover {
  117. background-color: #dc2626;
  118. }
  119. .btn-sm {
  120. padding: 4px 8px;
  121. font-size: 12px;
  122. }
  123. .btn-icon {
  124. margin-right: 4px;
  125. }
  126. /* 响应式布局支持 */
  127. @media (max-width: 768px) {
  128. .page-container {
  129. padding: 10px;
  130. }
  131. }