main.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. * {
  2. box-sizing: border-box;
  3. }
  4. html,
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  9. background: #f3f4f6;
  10. }
  11. .web-app {
  12. display: flex;
  13. min-height: 100vh;
  14. }
  15. /* 业务布局外壳:顶部导航 + 主体(侧边栏 + 内容区) */
  16. .app-shell {
  17. display: grid;
  18. grid-template-rows: 56px 1fr;
  19. width: 100%;
  20. height: 100vh;
  21. overflow: hidden;
  22. }
  23. .app-body {
  24. display: grid;
  25. grid-template-columns: 208px 1fr;
  26. min-height: 0;
  27. overflow: hidden;
  28. }
  29. .app-body.no-sidebar {
  30. grid-template-columns: 0 1fr;
  31. }
  32. .app-body.no-sidebar > .sidebar {
  33. display: none;
  34. }
  35. .layout-app .content {
  36. flex: 1;
  37. min-width: 0;
  38. overflow-y: auto;
  39. background: #f2f5fa;
  40. padding: 18px 24px 32px;
  41. }
  42. /* blank 布局(登录页):避免作为 flex item 收缩到内容宽度,
  43. 否则页面只占视口一部分、右侧露出背景空白 */
  44. .layout-blank {
  45. display: block;
  46. width: 100%;
  47. }
  48. .demo-table {
  49. width: 100%;
  50. border-collapse: collapse;
  51. margin-top: 12px;
  52. }
  53. .demo-table th,
  54. .demo-table td {
  55. border: 1px solid #e5e7eb;
  56. padding: 10px 12px;
  57. text-align: left;
  58. }
  59. .demo-table th {
  60. background: #f9fafb;
  61. }
  62. .demo-table .ok {
  63. color: #15803d;
  64. }