index.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. @charset "utf-8";
  2. /*通用样式ͨ*/
  3. body,html,.main{
  4. height: 100%;
  5. width: 100%;
  6. }
  7. body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol{
  8. margin:0;
  9. padding:0;
  10. }
  11. ul, li,ol{
  12. list-style: none;
  13. }
  14. a:link,
  15. a:visited,
  16. a:active {
  17. text-decoration: none;
  18. }
  19. body{
  20. background: #040f3c;
  21. }
  22. .main-left,
  23. .main-right{
  24. float: left;
  25. width: 28%;
  26. height: 100%;
  27. padding: 0 5px;
  28. }
  29. .main-middle{
  30. float: left;
  31. width: 44%;
  32. height: 100%;
  33. padding: 0 5px;
  34. }
  35. .border-container {
  36. position: relative;
  37. margin-top: 10px;
  38. /* padding: 10px;*/
  39. border: 1px solid #24214e;
  40. }
  41. .main-middle .borderno-container{
  42. border-top: none;
  43. border-bottom: none;
  44. }
  45. .name-title{
  46. background: #4545e3;
  47. padding: 8px 14px;
  48. border-bottom-right-radius:6px;
  49. border-bottom-left-radius:6px;
  50. position: absolute;
  51. left: 5%;
  52. }
  53. .tile-size-color{
  54. font-size:12px ;
  55. color: #fff;
  56. }
  57. .containertop{
  58. height: 50%;
  59. }
  60. .containerbottom{
  61. height: 47%;
  62. }
  63. #radar,.graduateyear,.bar-chart,#courserate,.line-chart,.bars-chart,.radar-chart,.progress1-chart,#mapadd,
  64. .progress2-chart{
  65. height: 100%;
  66. }
  67. #mapadd{
  68. position:relative;
  69. }
  70. #radar .radarkong{
  71. height: 17%;
  72. position: relative;
  73. }
  74. .Totalequipment{
  75. margin-right: 18px;
  76. }
  77. #radar .radarkong p{
  78. position: absolute;
  79. bottom: 0;
  80. text-align: center;
  81. width: 100%;
  82. }
  83. .SiteStatusList{
  84. position: absolute;
  85. bottom: 10%;
  86. color: #fff;
  87. font-size: 12px;
  88. width: 100%;
  89. display: flex;
  90. justify-content: center;
  91. flex-direction: row;
  92. align-items: center;
  93. }
  94. .SiteStatusList li:first-child{
  95. margin-left: 22px;
  96. }
  97. .SiteStatusList li{
  98. margin-right: 20px;
  99. }
  100. .SiteStatusList .Statussame{
  101. float: left;
  102. padding: 5px;
  103. margin-top: 2px;
  104. margin-right: 5px;
  105. }
  106. .SiteStatusList .Statusnormal{
  107. background: #4f8bf9;
  108. }
  109. .SiteStatusList .Statusemergency{
  110. background: #fea31e;
  111. }
  112. .SiteStatusList .StatusOffline{
  113. background: #959595;
  114. }
  115. .SiteStatusList .ThisweekData,.SiteStatusList .ThisweekData{
  116. padding: 7px;
  117. border-radius: 50%;
  118. float: left;
  119. cursor: pointer;
  120. }
  121. .SiteStatusList .Datasame{
  122. background: #39c1f5;
  123. }
  124. .SiteStatusList .Defaultgray{
  125. color: #959595;
  126. }
  127. .SiteStatusList .DataSwitch{
  128. background: #555474;
  129. border-radius: 10px;
  130. }
  131. .teacher-pie,.teacher-pie .teacherList{
  132. height: 100%;
  133. }
  134. .teacher-pie .teacherList{
  135. border: 1px solid #24214e;
  136. position: relative;
  137. }
  138. .teacher-pie .teacherList:first-child{
  139. width: 50%;
  140. border-left: none;
  141. float: left;
  142. }
  143. .teacher-pie .teacherList .name-title{
  144. padding-left:10px ;
  145. }
  146. .teacher-pie .teacherList:last-child{
  147. width: 49%;
  148. border-right: none;
  149. float: right;
  150. }
  151. .number-show{
  152. position: absolute;
  153. top: 20%;
  154. right: 5%;
  155. }
  156. #mapadd .mapleft{
  157. width: 33%;
  158. height: 100%;
  159. float: left;
  160. position: relative;
  161. /*background: #009688;*/
  162. }
  163. #mapadd .progressMore{
  164. color: #fff;
  165. font-size: 12px;
  166. position: absolute;
  167. right: 7%;
  168. top: 60%;
  169. text-decoration: underline;
  170. }
  171. #mapadd .map-chart{
  172. width: 65%;
  173. height: 100%;
  174. float: left;
  175. }
  176. #mapadd .Devicestatus-List{
  177. width: 50%;
  178. position: absolute;
  179. bottom: 12%;
  180. left: 4%;
  181. color: #fff;
  182. }
  183. #mapadd .Devicestatus-List li{
  184. float: left;
  185. height: 35px;
  186. margin-right: 1%;
  187. line-height: 35px;
  188. position: relative;
  189. }
  190. #mapadd .Devicestatus-List li:nth-of-type(1){
  191. width: 65.5%;
  192. border: 1px solid #3ae034;
  193. background: rgba(58,224,52,0.5);
  194. }
  195. #mapadd .Devicestatus-List li:nth-of-type(2){
  196. width: 10.5%;
  197. border: 1px solid #778699;
  198. background: rgba(199,134,153,0.5);
  199. }
  200. #mapadd .Devicestatus-List li:nth-of-type(3){
  201. width: 10.5%;
  202. border: 1px solid #1b9fff;
  203. background: rgba(27,159,255,0.5);
  204. }
  205. #mapadd .Devicestatus-List li:nth-of-type(4){
  206. width: 9.5%;
  207. border: 1px solid #e77407;
  208. background: rgba(213,116,7,0.5);
  209. }
  210. .Devicestatus-List .DevicestatusName{
  211. position: absolute;
  212. top: -35px;
  213. left: 0;
  214. }
  215. .pie-chart{
  216. width: 100%;
  217. height: 82%;
  218. }