analysis-split-table-shell.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. .analysis-split-table-shell() {
  2. @panel-gap: 8px;
  3. @summary-ratio: 0.56;
  4. @trend-ratio: 0.44;
  5. .content-panel {
  6. margin-top: @panel-gap;
  7. flex: 1 1 auto;
  8. min-height: 0;
  9. display: flex;
  10. flex-direction: column;
  11. gap: @panel-gap;
  12. overflow: hidden;
  13. }
  14. .summary-panel,
  15. .trend-panel {
  16. min-height: 0;
  17. box-sizing: border-box;
  18. overflow: hidden;
  19. display: flex;
  20. flex-direction: column;
  21. }
  22. .summary-panel {
  23. flex: 0 0 calc((100% - @panel-gap) * @summary-ratio);
  24. max-height: calc((100% - @panel-gap) * @summary-ratio);
  25. }
  26. .trend-panel {
  27. flex: 1 1 calc((100% - @panel-gap) * @trend-ratio);
  28. max-height: calc((100% - @panel-gap) * @trend-ratio);
  29. }
  30. .panel-header {
  31. flex: 0 0 auto;
  32. }
  33. .table-panel {
  34. flex: 1 1 auto;
  35. min-height: 0;
  36. display: flex;
  37. flex-direction: column;
  38. overflow: hidden;
  39. }
  40. .table-wrapper {
  41. flex: 1 1 auto;
  42. height: 100%;
  43. min-height: 0;
  44. border: 0;
  45. border-radius: 0;
  46. background: transparent;
  47. box-shadow: none;
  48. overflow: hidden;
  49. }
  50. .table-wrapper .jeesite-basic-table {
  51. height: 100%;
  52. display: flex;
  53. flex-direction: column;
  54. }
  55. .table-wrapper .ant-table-wrapper {
  56. height: 100%;
  57. min-height: 0;
  58. }
  59. .table-wrapper .ant-spin-nested-loading,
  60. .table-wrapper .ant-spin-container,
  61. .table-wrapper .ant-table,
  62. .table-wrapper .ant-table-container {
  63. height: 100%;
  64. min-height: 0;
  65. }
  66. .table-wrapper .ant-spin-container,
  67. .table-wrapper .ant-table,
  68. .table-wrapper .ant-table-container {
  69. display: flex;
  70. flex-direction: column;
  71. }
  72. .table-wrapper .ant-table-body {
  73. max-height: 100% !important;
  74. }
  75. .pagination-bar {
  76. display: flex;
  77. align-items: center;
  78. justify-content: flex-end;
  79. gap: 8px;
  80. flex: 0 0 auto;
  81. flex-wrap: wrap;
  82. }
  83. .pagination-total {
  84. margin-right: 0;
  85. white-space: nowrap;
  86. }
  87. .pagination-size,
  88. .pagination-actions,
  89. .pagination-jump {
  90. display: flex;
  91. align-items: center;
  92. gap: 6px;
  93. white-space: nowrap;
  94. }
  95. .pagination-input {
  96. width: 48px;
  97. }
  98. @media screen and (max-width: 992px) {
  99. .summary-panel,
  100. .trend-panel {
  101. flex: 1 1 auto;
  102. max-height: none;
  103. }
  104. .pagination-bar {
  105. justify-content: flex-start;
  106. }
  107. }
  108. }