index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. header {
  2. position: relative;
  3. height: 1.113rem;
  4. background: linear-gradient(#0a0634 0, #204a9e 100%)
  5. }
  6. header h1 {
  7. font-size: .575rem;
  8. color: #fff;
  9. text-align: center;
  10. line-height: 1.113rem;
  11. font-weight: 400
  12. }
  13. header .showTime {
  14. position: absolute;
  15. top: 0;
  16. right: .375rem;
  17. line-height: .9375rem;
  18. font-size: .25rem;
  19. color: rgba(255, 255, 255, .7)
  20. }
  21. .mainbox {
  22. min-width: 1024px;
  23. max-width: 1920px;
  24. padding: .287rem .287rem 0;
  25. display: flex;
  26. height: 100%;
  27. min-height: 600px;
  28. }
  29. .mainbox .column {
  30. flex: 3;
  31. height: 100%;
  32. }
  33. .mainbox .column:nth-child(2) {
  34. flex: 6;
  35. margin: 0 .575rem 0;
  36. overflow: hidden
  37. }
  38. .panel {
  39. position: relative;
  40. /* // background: rgba(255, 255, 255, .01) url(../images/line\(1\) .png);
  41. background: rgba(255, 255, 255, .01) url(../images/line\(1\) .png);*/
  42. background-repeat: no-repeat;
  43. padding: 0 .1875rem .5rem;
  44. margin-bottom: .287rem;
  45. background-size: 100% 100%
  46. }
  47. .no h2,
  48. .panel h2 {
  49. height: .7rem;
  50. line-height: .7rem;
  51. text-align: center;
  52. font-size: .275rem;
  53. background-image: -webkit-linear-gradient(bottom, #00adce, #fff);
  54. -webkit-background-clip: text;
  55. -webkit-text-fill-color: transparent
  56. }
  57. .panel h2 a {
  58. margin: 0 .1875rem;
  59. color: #fff;
  60. text-decoration: underline
  61. }
  62. .panel .chart {
  63. /* height: 90%; */
  64. display: flex;
  65. justify-content: center;
  66. align-items: center
  67. }
  68. .no {
  69. height: calc(40% - 0.574rem);
  70. /* height: 4.05rem; */
  71. overflow: hidden;
  72. background-image: url(../images/no-bg.png)
  73. }
  74. table {
  75. width: 10.262rem;
  76. margin: 0 auto;
  77. color: #fff;
  78. font-weight: 400;
  79. font-size: .2rem;
  80. /* line-height: .5rem; */
  81. text-align: center
  82. }
  83. thead th {
  84. font-size: 0.2125rem;
  85. line-height: 0.5rem;
  86. font-weight: 400
  87. }
  88. table tr th {
  89. background: rgba(3, 64, 128, .4);
  90. /* padding: .0625rem; */
  91. }
  92. table tr td {
  93. padding: .0625rem;
  94. line-height: 1.5
  95. }
  96. table tr:first-child th:first-child {
  97. border-top-left-radius: 12px;
  98. border-bottom-left-radius: 12px
  99. }
  100. table tr:first-child th:last-child {
  101. border-top-right-radius: 12px;
  102. border-bottom-right-radius: 12px
  103. }
  104. .map {
  105. position: relative;
  106. /* height: 7.55rem; */
  107. height: 60%;
  108. margin-bottom: .287rem;
  109. background-size: 90% 90%;
  110. background-position: bottom center;
  111. /*background-image: url(../images/store.png);*/
  112. background-repeat: no-repeat;
  113. opacity: .5
  114. }
  115. .map .chart {
  116. position: absolute;
  117. top: 0;
  118. left: 0;
  119. z-index: 5;
  120. height: 10.125rem;
  121. width: 100%
  122. }
  123. /* .map .map1,
  124. .map .map2,
  125. .map .map3 {
  126. position: absolute;
  127. top: 50%;
  128. left: 50%;
  129. transform: translate(-50%, -50%);
  130. width: 6.475rem;
  131. height: 6.475rem;
  132. background: url(../images/map.png) no-repeat;
  133. background-size: 100% 100%;
  134. opacity: .3
  135. }
  136. .map .map2 {
  137. width: 8.0375rem;
  138. height: 8.0375rem;
  139. background-image: url(../images/lbx.png);
  140. opacity: .6;
  141. animation: rotate 15s linear infinite;
  142. z-index: 2
  143. }
  144. .map .map3 {
  145. width: 7.075rem;
  146. height: 7.075rem;
  147. background-image: url(../images/jt.png);
  148. animation: rotate1 10s linear infinite
  149. } */
  150. @keyframes rotate {
  151. from {
  152. transform: translate(-50%, -50%) rotate(0)
  153. }
  154. to {
  155. transform: translate(-50%, -50%) rotate(360deg)
  156. }
  157. }
  158. @keyframes rotate1 {
  159. from {
  160. transform: translate(-50%, -50%) rotate(0)
  161. }
  162. to {
  163. transform: translate(-50%, -50%) rotate(-360deg)
  164. }
  165. }
  166. .panel.pie-bar {
  167. /* height: 7.55rem; */
  168. height: 60%;
  169. background-image: url(../images/pie-bar-bg.png)
  170. }
  171. .panel.line {
  172. /* height: 4.05rem; */
  173. height: calc(40% - 0.574rem);
  174. background-image: url(../images/line-bg.png)
  175. }
  176. .panel.right-top {
  177. height: 43%;
  178. /* height: 5.425rem; */
  179. background-image: url(../images/right-top-bg.png)
  180. }
  181. .panel.right-top .chart {
  182. /* height: 3.4rem; */
  183. height: calc(100% - 1.85rem)
  184. }
  185. .pie-bar-container {
  186. height: calc(100% - 0.7rem)
  187. }
  188. .pie-bar-bottom,
  189. .pie-bar-top {
  190. /* height: 3.438rem; */
  191. height: 50%;
  192. width: 100%;
  193. position: relative
  194. }
  195. .pie-bar-top .chart {
  196. height: 100%
  197. }
  198. .pie-bar-bottom .chart {
  199. height: 90%
  200. }
  201. .line .chart {
  202. /* height: 90% */
  203. height: calc(100% - 0.7rem)
  204. }
  205. .title-btn {
  206. color: #fff;
  207. width: 1.75rem;
  208. line-height: .4rem;
  209. background: rgba(0, 130, 255, .4);
  210. border: 2px solid #0082ff;
  211. border-radius: 10px;
  212. text-align: center;
  213. font-size: .25rem;
  214. margin: .1rem auto 0.2rem
  215. }
  216. .total-squares {
  217. margin: .175rem auto;
  218. text-align: center
  219. }
  220. .total-square {
  221. display: inline-block;
  222. width: .55rem;
  223. height: .55rem;
  224. line-height: .55rem;
  225. border: 1px solid rgba(0, 212, 233, .4);
  226. font-size: .375rem;
  227. color: #F6FF00
  228. }
  229. .yq-total {
  230. font-size: .25rem;
  231. color: #00D4E9;
  232. text-align: center
  233. }
  234. .huan {
  235. /* height: 6.175rem; */
  236. height: calc(57% - 0.574rem);
  237. background-image: url(../images/right-bottom-bg.png);
  238. /* min-width:380px; */
  239. }
  240. .huan table {
  241. width: 100%;
  242. }
  243. .huan>table {
  244. margin-top: 0.25rem;
  245. }
  246. .huan ul {
  247. margin: 0 0 0 .7rem
  248. }
  249. .huan li {
  250. width: 35%;
  251. text-align: center;
  252. border: 1px solid rgba(0, 212, 233, .4);
  253. display: inline-block;
  254. }
  255. .huan li {
  256. display: flex;
  257. float: left;
  258. justify-content: center;
  259. align-items: center;
  260. margin-right: .35rem;
  261. margin-bottom: 0.125rem;
  262. margin-top: 0.1rem;
  263. height: calc(50% - 0.225rem);
  264. }
  265. .num-huan {
  266. font-size: 0.325rem
  267. }
  268. .des-huan {
  269. max-width: 100%;
  270. font-size: 0.225rem;
  271. color: #02DDF2;
  272. display: inline-block;
  273. white-space: nowrap;
  274. overflow: hidden;
  275. text-overflow: ellipsis;
  276. text-align: left;
  277. }
  278. .no table {
  279. width: 100%
  280. }
  281. .no table th,
  282. .no table td {
  283. border-bottom: 1px solid rgba(0, 212, 233, .1);
  284. display: inline-block;
  285. white-space: nowrap;
  286. overflow: hidden;
  287. text-overflow: ellipsis;
  288. position: relative
  289. }
  290. /* .no table th:hover,
  291. .no table td:hover {
  292. overflow: auto;
  293. text-overflow: clip;
  294. } */
  295. .no tr td:first-child,
  296. .no tr th:first-child {
  297. width: 8%
  298. }
  299. .no tr td:nth-child(2),
  300. .no tr th:nth-child(2) {
  301. width: 25%
  302. }
  303. .no tr td:nth-child(3),
  304. .no tr th:nth-child(3) {
  305. width: 15%;
  306. }
  307. .no tr td:nth-child(4),
  308. .no tr th:nth-child(4) {
  309. width: 32%;
  310. }
  311. .no tr td:nth-child(5),
  312. .no tr th:nth-child(5) {
  313. width: 1.9rem
  314. }
  315. .huan tr td:first-child,
  316. .huan tr th:first-child {
  317. width: 10%
  318. }
  319. .huan tr td:nth-child(2),
  320. .huan tr th:nth-child(2) {
  321. width: 30%
  322. }
  323. .huan tr td:nth-child(3),
  324. .huan tr th:nth-child(3) {
  325. width: 20%
  326. }
  327. .huan tr td:nth-child(4),
  328. .huan tr th:nth-child(4) {
  329. width: 40%
  330. }
  331. /* 溢出滚动样式 */
  332. /* 兼容火狐浏览器美化无效 */
  333. .scroll {
  334. scrollbar-color: transparent transparent;
  335. scrollbar-track-color: transparent;
  336. -ms-scrollbar-track-color: transparent;
  337. }
  338. .scroll::-webkit-scrollbar {
  339. height: 7px !important;
  340. width: 7px !important;
  341. }
  342. /*定义了滚动条滑块的样式*/
  343. .scroll::-webkit-scrollbar-thumb {
  344. border-radius: 5px;
  345. border-style: dashed;
  346. background-color: rgba(40, 190, 252, .6);
  347. border-color: #e2242400;
  348. border-width: 1.5px;
  349. background-clip: padding-box;
  350. }
  351. /*定义了轨道的样式*/
  352. td::-webkit-scrollbar-track {
  353. /*滚动条里面轨道*/
  354. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  355. border-radius: 5px;
  356. background: rgba(0, 0, 0, 0.2);
  357. }
  358. /* 溢出滚动样式 */
  359. td::-webkit-scrollbar {
  360. height: 5px !important;
  361. width: 5px !important;
  362. }
  363. /*定义了滚动条滑块的样式*/
  364. td::-webkit-scrollbar-thumb {
  365. border-radius: 5px;
  366. border-style: dashed;
  367. background-color: rgba(40, 190, 252, .6);
  368. border-color: #e2242400;
  369. border-width: 1.5px;
  370. background-clip: padding-box;
  371. }
  372. /*定义了轨道的样式*/
  373. td::-webkit-scrollbar-track {
  374. /*滚动条里面轨道*/
  375. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  376. border-radius: 5px;
  377. background: rgba(0, 0, 0, 0.2);
  378. }
  379. /* 火狐 */
  380. @-moz-document url-prefix() {
  381. .title {
  382. font-size: 200px;
  383. }
  384. }