app.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. @charset "utf-8";
  2. /* global */
  3. * {margin:0;padding:0;box-sizing:border-box;}
  4. html, body {
  5. width:100%;
  6. height:100%;
  7. min-width:1200px;
  8. min-height:600px;
  9. overflow:hidden;
  10. }
  11. body {
  12. position:relative;
  13. font-family:"Microsoft Yahei", Arial, sans-serif;
  14. background:rgb(40, 30, 47) url("../img/bg.png") 0 0 / 100% 100% no-repeat;
  15. }
  16. /* layout */
  17. #header {
  18. position:relative;
  19. height:72px;
  20. background:url("../img/header.png") 0 0 / 100% 100% no-repeat;
  21. overflow:hidden;
  22. }
  23. .header-title {line-height:64px;text-align:center;font-size:34px;font-weight:400;color:#fff;}
  24. .header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;}
  25. .header-info-l {left:20px;}
  26. .header-info-r {right:20px;}
  27. #footer {
  28. position:absolute;
  29. bottom:0;
  30. left:0;
  31. right:0;
  32. height:28px;
  33. background:url("../img/footer.png") 0 0 / 100% 100% no-repeat;
  34. }
  35. #container {position:absolute;top:72px;bottom:22px;left:0;right:0;}
  36. #flexCon {
  37. height:100%;
  38. display:-webkit-flex;
  39. display:-ms-flexbox;
  40. display:flex;
  41. -webkit-flex-direction:column;
  42. -ms-flex-direction:column;
  43. flex-direction:column;
  44. }
  45. .flex-row {
  46. -webkit-flex:1;
  47. -ms-flex:1;
  48. flex:1;
  49. display:-webkit-flex;
  50. display:-ms-flexbox;
  51. display:flex;
  52. }
  53. .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;}
  54. .flex-cell-l,
  55. .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;}
  56. .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
  57. .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;}
  58. .chart-wrapper {position:relative;height:100%;}
  59. .chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;}
  60. .chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;}
  61. .data-t {table-layout:fixed;width:100%;height:100%;border-collapse:collapse;}
  62. .data-t th,
  63. .data-t td {min-height:48px;}
  64. .data-t th {width:50px;text-align:center;background:url("../img/icon-bg.png") center / 100% no-repeat;}
  65. .data-t th img {width:30px;height:30px;}
  66. .data-t td {padding-left:15px;}
  67. .data-t p {margin:5px 0;line-height:1;font-size:14px;color:#b0c2f9;}
  68. .data-t p span {font-size:32px;font-weight:bold;color:#fff;}
  69. /* media query */
  70. @media (max-width:1900px) {
  71. #header {height:48px;}
  72. .header-title {line-height:42px;font-size:24px;}
  73. .header-info {top:17px;font-size:14px;}
  74. .header-info-l {left:15px;}
  75. .header-info-r {right:15px;}
  76. .flex-cell {padding:10px;}
  77. .chart-title {height:24px;font-size:18px;}
  78. .chart-div {top:24px;}
  79. .data-t p span {font-size:24px;}
  80. #footer {height:16px;}
  81. #container {top:48px;bottom:12px;}
  82. }
  83. /* chart-loader */
  84. .chart-loader {
  85. position:absolute;
  86. top:0;
  87. left:0;
  88. z-index:99;
  89. width:100%;
  90. height:100%;
  91. background:rgba(255, 255, 255, 0);
  92. transition:all .8s;
  93. }
  94. .chart-loader .loader {
  95. position:absolute;
  96. left:50%;
  97. top:50%;
  98. width:60px;
  99. height:60px;
  100. margin:-30px 0 0 -30px;
  101. border:3px solid transparent;
  102. border-top-color:#3498db;
  103. border-radius:50% !important;
  104. -webkit-animation:spin 2s linear infinite;
  105. animation:spin 2s linear infinite;
  106. }
  107. .chart-loader .loader:before {
  108. content:"";
  109. position:absolute;
  110. top:3px;
  111. left:5px;
  112. right:5px;
  113. bottom:5px;
  114. border:3px solid transparent;
  115. border-top-color:#e74c3c;
  116. border-radius:50% !important;
  117. -webkit-animation:spin 3s linear infinite;
  118. animation:spin 3s linear infinite;
  119. }
  120. .chart-loader .loader:after {
  121. content:"";
  122. position:absolute;
  123. top:9px;
  124. left:10px;
  125. right:10px;
  126. bottom:10px;
  127. border:3px solid transparent;
  128. border-top-color:#f9c922;
  129. border-radius:50% !important;
  130. -webkit-animation:spin 1.5s linear infinite;
  131. animation:spin 1.5s linear infinite;
  132. }
  133. .chart-done .chart-loader {display:none;}
  134. @-webkit-keyframes spin {
  135. 0% {
  136. -webkit-transform: rotate(0deg);
  137. -ms-transform: rotate(0deg);
  138. transform: rotate(0deg)
  139. }
  140. 100% {
  141. -webkit-transform: rotate(360deg);
  142. -ms-transform: rotate(360deg);
  143. transform: rotate(360deg)
  144. }
  145. }
  146. @keyframes spin {
  147. 0% {
  148. -webkit-transform: rotate(0deg);
  149. -ms-transform: rotate(0deg);
  150. transform: rotate(0deg)
  151. }
  152. 100% {
  153. -webkit-transform: rotate(360deg);
  154. -ms-transform: rotate(360deg);
  155. transform: rotate(360deg)
  156. }
  157. }