dashboard.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. .brief-item {
  2. width: calc(25% - 16px);
  3. height: 120px;
  4. cursor: pointer;
  5. border-radius: 3px;
  6. -webkit-box-shadow: rgb(9 30 66 / 25%) 0 1px 1px, rgb(9 30 66 / 31%) 0 0 1px;
  7. box-shadow: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
  8. margin: 8px 8px 16px 8px;
  9. }
  10. .brief-item .chart_box {
  11. position: absolute;
  12. left: 0px;
  13. top: 20px;
  14. width: 101px;
  15. height: 80px;
  16. user-select: none;
  17. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  18. padding: 0px;
  19. margin: 0px;
  20. border-width: 0px;
  21. }
  22. .brief-item .title {
  23. color: #5e6c84;
  24. }
  25. .brief-item .number {
  26. margin-top: 16px;
  27. margin-right: 5px;
  28. overflow: hidden;
  29. font-size: 24px;
  30. line-height: 1;
  31. white-space: nowrap;
  32. }
  33. .brief-item .col-xs-6 {
  34. padding: 0;
  35. padding-top: 10px;
  36. }
  37. .brief-item .number .unit {
  38. margin-left: 4px;
  39. font-size: 14px;
  40. }
  41. .brief-item .des {
  42. margin-top: 16px;
  43. color: #5e6c84;
  44. }
  45. .brief-item .panel {
  46. border: 0;
  47. }
  48. .brief-item .des .rate {
  49. margin-left: 8px;
  50. font-size: 14px;
  51. }
  52. .brief-item .des .rate.top {
  53. color: #ff5630;
  54. }
  55. .brief-item .des .rate.bottom {
  56. color: #36b37e;
  57. }
  58. .brief-item.is-current, .brief-item.is-current .title, .brief-item.is-current .des {
  59. background-color: #0052cc !important;
  60. color: #fff !important;
  61. font-weight: 500;
  62. }
  63. .brief-dig-box {
  64. margin-top: 20px;
  65. }
  66. .brief-box {
  67. position: relative;
  68. background-color: #fff;
  69. border: 1px solid #dfe1e6;
  70. border-radius: 3px;
  71. }
  72. .brief-item:hover {
  73. box-shadow: rgba(9, 30, 66, 0.25) 0px 2px 4px, rgba(9, 30, 66, 0.31) 0px 0px 1px;
  74. }
  75. .brief-box:before {
  76. position: absolute;
  77. top: 0;
  78. right: 0;
  79. left: 0;
  80. height: 4px;
  81. content: " ";
  82. background-color: #0052cc;
  83. border-radius: 2px;
  84. }
  85. .brief-box .brief-title {
  86. padding: 16px 16px 0;
  87. }
  88. .brief-box .brief-title .fa {
  89. padding: 3px;
  90. margin-right: 8px;
  91. font-size: 12px;
  92. color: #fff;
  93. background-color: #0052cc;
  94. border-radius: 3px;
  95. }
  96. body {
  97. background-color: #fff;
  98. }
  99. .brief-wrap {
  100. -webkit-box-flex: 0;
  101. -ms-flex: 0 0 33%;
  102. flex: 0 0 33%;
  103. }
  104. .brief-wrap .brief {
  105. -ms-flex-negative: 0;
  106. flex-shrink: 0;
  107. padding: 16px;
  108. margin-bottom: 16px;
  109. cursor: pointer;
  110. background-color: #ebecf0;
  111. border-radius: 3px;
  112. }
  113. .brief .title {
  114. overflow: hidden;
  115. line-height: 20px;
  116. color: #5e6c84;
  117. white-space: nowrap;
  118. }
  119. .brief .value {
  120. min-height: 20px;
  121. margin-top: 8px;
  122. overflow: hidden;
  123. font-size: 20px;
  124. font-weight: 700;
  125. line-height: 1;
  126. white-space: nowrap;
  127. }
  128. .brief .value .value-unit {
  129. font-size: 20px;
  130. }
  131. .section__hd {
  132. padding: 10px 0;
  133. }
  134. .el-divider--horizontal {
  135. position: relative;
  136. height: 2px;
  137. margin: 12px 0;
  138. display: block;
  139. width: 100%;
  140. background-color: #dfe1e6;
  141. }
  142. .el-divider--horizontal .el-divider__text.is-left {
  143. top: -10px;
  144. padding-right: 8px;
  145. padding-left: 0;
  146. font-size: 16px;
  147. position: absolute;
  148. background-color: #fff;
  149. color: #172b4d;
  150. }
  151. .wk-toggle-button__bd {
  152. position: relative;
  153. display: -webkit-box;
  154. display: -ms-flexbox;
  155. display: flex;
  156. -ms-flex-wrap: wrap;
  157. flex-wrap: wrap;
  158. width: -webkit-max-content;
  159. width: -moz-max-content;
  160. width: max-content;
  161. max-width: 100%;
  162. padding: 4px;
  163. font-size: 12px;
  164. font-weight: 600;
  165. line-height: 1.3333;
  166. text-transform: uppercase;
  167. background-color: #ebecf0;
  168. border-radius: 3px;
  169. }
  170. .wk-toggle-item.selected {
  171. background-color: #fff;
  172. border-radius: 3px;
  173. -webkit-box-shadow: rgba(13, 20, 36, .18) 0 3px 5px, rgba(13, 20, 36, .29) 0 0 1px !important;
  174. box-shadow: 0 3px 5px rgba(13, 20, 36, .18), 0 0 1px rgba(13, 20, 36, .29) !important;
  175. }
  176. .wk-toggle-item {
  177. display: block;
  178. padding: 0 5px;
  179. line-height: 24px;
  180. cursor: pointer;
  181. border-radius: 3px;
  182. }
  183. .form-control {
  184. padding-right: 20px;
  185. display: inline-block;
  186. }
  187. [disabled] {
  188. border-radius: 3px;
  189. border: 0 !important;
  190. background-image: none !important;
  191. color: #a5adba !important;
  192. }
  193. .tooltip-inner {
  194. margin: 0;
  195. padding: 8px 14px;
  196. font-size: 13px;
  197. background-color: #f7f7f7;
  198. border: 1px solid #ebebeb;
  199. border-bottom: 1px solid #ebebeb;
  200. border-radius: 4px 4px 0 0;
  201. color: #000;
  202. text-align: left;
  203. }
  204. .dashboard-title {
  205. font-size: 24px;
  206. }