statistics.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. .statistics-card {
  2. padding: 20px;
  3. line-height: 30px;
  4. color: #5e6c84;
  5. font-size: 16px;
  6. word-break: break-all;
  7. border-radius: 6px;
  8. background-color: white;
  9. box-sizing: border-box;
  10. background-position: center;
  11. background-repeat: no-repeat;
  12. background-size: cover;
  13. }
  14. .statistics-card_border {
  15. border: 1px solid #eaeaea;
  16. }
  17. .statistics-card_border:hover {
  18. border-color: #ffa264;
  19. }
  20. .statistics-card_shadow {
  21. box-shadow: 0px 3px 27px 0px rgba(218, 218, 218, 0.43);
  22. }
  23. .statistics-card_colourfull {
  24. display: flex;
  25. flex-direction: column;
  26. justify-content: space-between;
  27. height: 180px;
  28. }
  29. .statistics-card_colourfull .statistics-card_count {
  30. align-self: flex-end;
  31. text-align: right;
  32. }
  33. .statistics-card_colourfull .statistics-card_title {
  34. color: #353535;
  35. }
  36. .statistics-card_title {
  37. margin-bottom: 16px;
  38. /* color: #aeaeb2; */
  39. }
  40. .statistics-card_title i {
  41. margin-left: 8px;
  42. }
  43. .statistics-card_count {
  44. font-size: 30px;
  45. }
  46. .member-rank {
  47. display: inline-block;
  48. width: 40px;
  49. height: 40px;
  50. line-height: 40px;
  51. color: #333333;
  52. font-size: 14px;
  53. text-align: center;
  54. border-radius: 2px;
  55. }
  56. /* .member-rank[round] {
  57. border-radius: 50%;
  58. }
  59. .member-rank[mini] {
  60. width: 30px;
  61. height: 30px;
  62. line-height: 30px;
  63. font-size: 12px;
  64. border-radius: 50%;
  65. } */
  66. .member-rank[data-rank="1"],
  67. .member-rank[data-rank="2"],
  68. .member-rank[data-rank="3"] {
  69. color: transparent;
  70. background-size: 24px 29px;
  71. background-repeat: no-repeat;
  72. background-position: center;
  73. }
  74. .member-rank[data-rank="1"] {
  75. background-image: url("images/first.png");
  76. }
  77. .member-rank[data-rank="2"] {
  78. background-image: url("images/second.png");
  79. }
  80. .member-rank[data-rank="3"] {
  81. background-image: url("images/third.png");
  82. }
  83. /* .member-rank[plain] {
  84. font-style: italic;
  85. color: #333;
  86. background-color: transparent;
  87. } */
  88. .panel {
  89. margin-bottom: 10px !important;
  90. border-radius: 10px;
  91. padding-left: 20px;
  92. }
  93. .panel .active a {
  94. background-color: #29ba9c !important;
  95. border-radius: 18px !important;
  96. color: #fff;
  97. }
  98. .panel a {
  99. border: none !important;
  100. background-color: #fff !important;
  101. }
  102. .content {
  103. background: #eff3f6;
  104. padding: 10px !important;
  105. }
  106. .con {
  107. padding-bottom: 40px;
  108. position: relative;
  109. border-radius: 8px;
  110. }
  111. .con .setting .block {
  112. padding: 10px;
  113. background-color: #fff;
  114. border-radius: 8px;
  115. }
  116. .con .setting .block .title {
  117. font-size: 18px;
  118. margin-bottom: 15px;
  119. display: flex;
  120. align-items: center;
  121. }
  122. .confirm-btn {
  123. width: calc(100% - 266px);
  124. position: fixed;
  125. bottom: 0;
  126. right: 0;
  127. margin-right: 10px;
  128. line-height: 63px;
  129. background-color: #ffffff;
  130. box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
  131. background-color: #fff;
  132. text-align: center;
  133. }
  134. b {
  135. font-size: 14px;
  136. }
  137. .el-checkbox__inner {
  138. border: solid 1px #56be69 !important;
  139. }
  140. .upload-boxed .el-icon-close {
  141. position: absolute;
  142. top: -5px;
  143. right: -5px;
  144. color: #fff;
  145. background: #333;
  146. border-radius: 50%;
  147. cursor: pointer;
  148. }
  149. .component-statistics-card_title {
  150. display: flex;
  151. align-items: center;
  152. justify-content: space-between;
  153. margin-bottom: 30px;
  154. font-size: 24px;
  155. font-weight: bold;
  156. color: #333;
  157. }
  158. .component-statistics-card_title .el-form {
  159. margin: 0;
  160. }
  161. .component-statistics-card_title .el-form--inline .el-form-item {
  162. margin-bottom: 0;
  163. }
  164. .statistics-overall {
  165. display: flex;
  166. flex-wrap:wrap;
  167. column-gap:20px;
  168. row-gap:20px;
  169. }
  170. .statistics-overall li {
  171. min-width: 196px;
  172. }