bigdata.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. @charset "utf-8";
  2. /* 系统样式 */
  3. * {
  4. -webkit-box-sizing: border-box;
  5. -moz-box-sizing: border-box;
  6. box-sizing: border-box
  7. }
  8. *,
  9. body {
  10. padding: 0px;
  11. margin: 0px;
  12. color: #fff;
  13. font-family: "微软雅黑";
  14. font-size: 12px;
  15. }
  16. .no-bg{
  17. background: none;
  18. }
  19. @font-face {
  20. font-family: electronicFont;
  21. src: url(../font/DS-DIGIT.TTF)
  22. }
  23. body {
  24. background: #000d4a url(../img/bgimg.jpg) fixed center top;
  25. background-size: cover;
  26. color: #666;
  27. font-size: .1rem;
  28. }
  29. li {
  30. list-style-type: none;
  31. }
  32. table {}
  33. i {
  34. margin: 0px;
  35. padding: 0px;
  36. text-indent: 0px;
  37. }
  38. img {
  39. border: none;
  40. max-width: 100%;
  41. }
  42. a {
  43. text-decoration: none;
  44. color: #fff;
  45. }
  46. a.active,
  47. a:focus {
  48. outline: none !important;
  49. text-decoration: none;
  50. }
  51. ol,
  52. ul,
  53. p,
  54. h1,
  55. h2,
  56. h3,
  57. h4,
  58. h5,
  59. h6 {
  60. padding: 0;
  61. margin: 0
  62. }
  63. a:hover {
  64. color: #1efcdf;
  65. text-decoration: none !important
  66. }
  67. .f_left {
  68. float: left;
  69. }
  70. .f_right {
  71. float: right;
  72. }
  73. .m-l-15 {
  74. margin-left: 1.1875rem;
  75. }
  76. .flex-r{
  77. display: flex;
  78. flex-direction:row;
  79. }
  80. /*谷哥滚动条样式*/
  81. ::-webkit-scrollbar {
  82. width: 5px;
  83. height: 5px;
  84. position: absolute
  85. }
  86. ::-webkit-scrollbar-thumb {
  87. background-color: #5bc0de
  88. }
  89. ::-webkit-scrollbar-track {
  90. background-color: #ddd
  91. }
  92. /* 公共样式 */
  93. .m-t-20 {
  94. margin-top: 1.25rem
  95. }
  96. .container {
  97. width: 100%;
  98. height: 100%
  99. }
  100. .height-21{
  101. height: 21rem!important;
  102. }
  103. .height-40{
  104. height: 40.6rem!important;
  105. }
  106. /* 头部 */
  107. .header {
  108. width: 100%;
  109. height: 3.4375rem;
  110. background: rgba(0, 80, 154, .3);
  111. }
  112. .nav {
  113. position: absolute;
  114. top: 0.4375rem;
  115. left: 0.6875rem;
  116. z-index: 5;
  117. text-align: left;
  118. height: 2.5rem
  119. }
  120. .nav ul li {
  121. display: inline-block;
  122. float: left;
  123. height: 2.5rem;
  124. line-height: 2.2rem;
  125. padding: 0 0.625rem;
  126. border: 1px solid #1f50b3;
  127. cursor: pointer;
  128. margin-right: 0.875rem;
  129. background: rgba(31, 73, 135, .6);
  130. }
  131. .block-small {
  132. width: 0.375rem;
  133. height: 0.3125rem;
  134. background-color: #1efcdf;
  135. opacity: 0.5
  136. }
  137. .b-s-l-t {
  138. position: absolute;
  139. top: 0.25rem;
  140. left: 0.0625rem;
  141. }
  142. .b-s-l-b {
  143. position: absolute;
  144. bottom: 0.25rem;
  145. left: 0.0625rem;
  146. }
  147. .nav ul li:hover {
  148. border: 1px solid #1efcdf;
  149. color: #1efcdf;
  150. background: rgba(26, 87, 177, .8);
  151. }
  152. .nav ul li:hover a {
  153. color: #1efcdf;
  154. }
  155. .logo-title {
  156. width: 509px;
  157. height: 4rem;
  158. text-align: center;
  159. margin: 0 auto;
  160. font-size: 22px;
  161. font-weight: bolder;
  162. background: url(../img/tit.png) no-repeat 100% center;
  163. }
  164. .logo-title h6 {
  165. display: block;
  166. font-size: 22px;
  167. height: 3.4375rem;
  168. line-height: 3.4375rem;
  169. background-image: -webkit-linear-gradient(top, #ffffff, #77aae9);
  170. -webkit-background-clip: text;
  171. -webkit-text-fill-color: transparent;
  172. }
  173. .fast-menu {
  174. position: absolute;
  175. top: 0;
  176. right: 0;
  177. }
  178. .fast-menu a {
  179. margin-top: 0.375rem;
  180. display: inline-block;
  181. margin-right: 0.3125rem;
  182. height: 2.5rem;
  183. line-height: 2.5rem;
  184. border-bottom: 2px solid #1F50B3;
  185. margin-right: 1.25rem;
  186. }
  187. .fast-menu a:hover {
  188. border-bottom: 3px solid #1efcdf
  189. }
  190. /* 主体 */
  191. .main {
  192. width: 100%;
  193. height: auto;
  194. display: flex;
  195. flex-direction: column;
  196. padding: 0.6875rem;
  197. margin-top: 0.833333rem;
  198. }
  199. .main-top,
  200. .main-btm {
  201. width: 100%;
  202. height: auto;
  203. display: flex;
  204. position: relative;
  205. }
  206. /* echart容器box */
  207. .chart-box {
  208. background-color: rgba(20, 31, 59, 0.5);
  209. position: relative;
  210. box-shadow: rgb(49, 169, 255) 0px 0px 18px inset;
  211. border: #1a9edc 1px solid;
  212. }
  213. /* box四周装饰 */
  214. .chart-block-normal {
  215. width: 1rem;
  216. height: 1rem;
  217. background: url(../img/block.png) no-repeat;
  218. position: absolute;
  219. display: block;
  220. }
  221. .chart-block-normal:nth-child(1) {
  222. left: 0;
  223. top: 0;
  224. }
  225. .chart-block-normal:nth-child(2) {
  226. right: 0;
  227. top: 0;
  228. background-position: -0.3125rem 0
  229. }
  230. .chart-block-normal:nth-child(3) {
  231. bottom: 0;
  232. background-position: 0 -0.3125rem
  233. }
  234. .chart-block-normal:nth-child(4) {
  235. bottom: 0;
  236. right: 0;
  237. background-position: -0.3125rem -0.3125rem
  238. }
  239. /* echart 容器大小规格 */
  240. .chart-small {
  241. width: 48%;
  242. height: 18.4rem;
  243. }
  244. .chart-normal {
  245. width: 25%;
  246. height: 38rem;
  247. }
  248. .chart-medium {
  249. width: 48%;
  250. height: 38rem;
  251. }
  252. .chart-flat {
  253. width: 100% ;
  254. height: 18.4rem;
  255. }
  256. .chart-title{
  257. float: left;
  258. padding: 5px 10px;
  259. color: #23cefd;
  260. font-weight: bolder;
  261. }
  262. .chart-title-level-2{
  263. display: inline-block;
  264. color: #23cefd;
  265. text-indent: 4em;
  266. font-size: 10px;
  267. }
  268. .charts-con{
  269. width: 100%;
  270. display: flex;
  271. flex-direction: column;
  272. }
  273. .row1{
  274. display: flex;
  275. width: 100%;
  276. }
  277. .row2{
  278. width: 50%;
  279. }
  280. .row3{
  281. width: 40%;
  282. }
  283. .row4{
  284. width: 60%;
  285. }
  286. .row5{
  287. width: 30%;
  288. }
  289. .row6{
  290. width: 70%;
  291. }
  292. .chart-big {}
  293. .chart-tall {}
  294. .main-btm-left {}
  295. /*总人数*/
  296. .chart-first{
  297. width: 100%;
  298. display: flex;
  299. flex-direction: column;
  300. }
  301. .people-count{
  302. width: 100%;
  303. display: flex;
  304. align-items:center;/*垂直居中*/
  305. justify-content: center;
  306. padding:2rem;
  307. background: url("../img/count-bg.png") no-repeat bottom;
  308. }
  309. .count{
  310. font-size: 3rem;
  311. padding: .5rem;
  312. border: 1px solid #30bef5;
  313. border-radius: 1rem;
  314. margin: 0 1rem;
  315. font-weight: bolder;
  316. }
  317. .p-t , .p-n{
  318. font-size: 2rem;
  319. }
  320. /*辅助决策-------->绩效考核*/