You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

522 lines
13 KiB

  1. @charset "UTF-8";
  2. /* CSS Document */
  3. html {
  4. height:100%;
  5. }
  6. body {
  7. height:100%;
  8. width:100%;
  9. }
  10. .bg{
  11. margin:0 auto;
  12. width:100%;
  13. height:100%;
  14. /*min-height:100vh;*/
  15. background:url(../images/bg2.jpg) ;
  16. /*background-size: cover;*/
  17. background-repeat: no-repeat;
  18. background-size: 100% 100%;
  19. padding-top:0rem;
  20. padding:0.1rem 0.2rem;
  21. }
  22. .title{
  23. width:100%;
  24. font-size:0.12rem;
  25. /*line-height:0.4rem;*/
  26. color:rgba(14,253,255,1);
  27. text-align:center;
  28. font-weight:bold;
  29. height: 6.2%;
  30. vertical-align:middle;
  31. }
  32. .border_bg_leftTop{
  33. position:absolute;
  34. left:-0.008rem;
  35. top:-0.04rem;
  36. width:0.37rem;
  37. height:0.05rem;
  38. display:block;
  39. background:#01279d url(../images/title_left_bg.png) no-repeat;
  40. background-size:cover;}
  41. .border_bg_rightTop{
  42. position:absolute;
  43. right:-0.01rem;
  44. top:-0.01rem;
  45. width:0.1rem;
  46. height:0.1rem;
  47. display:block;
  48. background:url(../images/border_bg.jpg) no-repeat;
  49. background-size:cover;}
  50. .border_bg_leftBottom{
  51. position:absolute;
  52. left:-0.008rem;
  53. bottom:-0.008rem;
  54. width:0.1rem;
  55. height:0.1rem;
  56. display:block;
  57. background:url(../images/border_bg.jpg) no-repeat;
  58. background-size:cover;}
  59. .border_bg_rightBottom{
  60. position:absolute;
  61. right:-0.01rem;
  62. bottom:-0.01rem;
  63. width:0.08rem;
  64. height:0.08rem;
  65. display:block;
  66. background:url(../images/title_right_bg.png) no-repeat;
  67. background-size:cover;}
  68. .leftMain_top{
  69. width:100%;
  70. padding-bottom:0.05rem;}
  71. .leftMain_top ul{
  72. display:block;
  73. /*display: -webkit-flex;*/
  74. }
  75. .leftMain_top ul li:nth-child(1){
  76. float:left;
  77. width:28%;
  78. padding-right:0.05rem;}
  79. .leftMain_top ul li:nth-child(2){
  80. float:left;
  81. width:44%;
  82. padding-right:0.05rem;}
  83. .leftMain_top ul li:nth-child(3){
  84. float:right;
  85. width:28%;
  86. }
  87. .leftMain_top ul li:last-child{
  88. padding:0;}
  89. .leftMain_top ul li .liIn{
  90. border:0.008rem solid rgba(14,253,255,0.5);
  91. width:100%;
  92. /*min-height:60px;*/
  93. position:relative;
  94. padding:0.08rem 0.05rem;
  95. }
  96. .leftMain_top ul li .liIn h3{
  97. font-size:0.08rem;
  98. color:#fff;
  99. margin-bottom:0.05rem;
  100. }
  101. .leftMain_top ul li .liIn .shu{
  102. font-size:0.12rem;
  103. color:rgba(14,253,255,1);
  104. font-family:dig;
  105. margin-bottom:0.02rem;}
  106. .leftMain_top ul li .liIn .shu i{
  107. font-size:0.04rem;
  108. margin-left:0.06rem;
  109. font-style:normal;}
  110. .leftMain_top ul li .liIn .zi{
  111. font-size:0.04rem;
  112. color:#fff;
  113. position:relative;
  114. z-index:10;}
  115. .leftMain_top ul li .liIn .zi .span1{
  116. margin-right:0.1rem;}
  117. .leftMain_bottom{
  118. width:100%;
  119. padding-bottom:0.1rem;}
  120. .leftMain_bottom ul{
  121. display:block;
  122. /*display: -webkit-flex;*/
  123. }
  124. /*.leftMain_bottom ul li{
  125. float:left;
  126. width:33.33%;
  127. padding-right:0.05rem;}*/
  128. .leftMain_bottom ul li:nth-child(1){
  129. float:left;
  130. width:28%;
  131. padding-right:0.05rem;}
  132. .leftMain_bottom li:nth-child(2){
  133. float:left;
  134. width:44%;
  135. padding-right:0.05rem;}
  136. .leftMain_bottom li:nth-child(3){
  137. float:right;
  138. width:28%;
  139. }
  140. .leftMain_bottom ul li:last-child{
  141. padding-right:0;}
  142. .leftMain_bottom ul li .liIn{
  143. border:0.008rem solid rgba(14,253,255,0.5);
  144. width:100%;
  145. /*min-height:60px;*/
  146. position:relative;
  147. padding:0.08rem 0.05rem;
  148. }
  149. .leftMain_bottom ul li .liIn h3{
  150. font-size:0.08rem;
  151. color:#fff;
  152. margin-bottom:0.05rem;
  153. }
  154. .leftMain_bottom ul li .liIn .shu{
  155. font-size:0.12rem;
  156. color:rgba(14,253,255,1);
  157. font-family:dig;
  158. margin-bottom:0.02rem;}
  159. .leftMain_bottom ul li .liIn .shu i{
  160. font-size:0.04rem;
  161. margin-left:0.06rem;
  162. font-style:normal;}
  163. .leftMain_bottom ul li .liIn .zi{
  164. font-size:0.04rem;
  165. color:#fff;
  166. position:relative;
  167. z-index:10;}
  168. .leftMain_bottom ul li .liIn .zi .span1{
  169. margin-right:0.1rem;}
  170. .leftMain_middle{
  171. width:100%;
  172. padding-bottom:0.1rem;
  173. display:block;
  174. /*display: -webkit-flex;*/
  175. }
  176. .leftMain_middle .leftMain_middle_left{
  177. width:60%;
  178. padding-right:0.02rem;}
  179. .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn{
  180. border:0.008rem solid rgba(14,253,255,0.5);
  181. width:100%;
  182. /*min-height:60px;*/
  183. position:relative;
  184. padding:0.08rem 0.05rem;
  185. }
  186. .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3{
  187. font-size:0.08rem;
  188. color:#fff;
  189. margin-bottom:0.05rem;
  190. }
  191. .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge{
  192. /*min-height:200px;*/
  193. }
  194. .leftMain_middle .leftMain_middle_right{
  195. width:40%;
  196. }
  197. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn{
  198. border:0.008rem solid rgba(14,253,255,0.5);
  199. width:100%;
  200. /*min-height:60px;*/
  201. position:relative;
  202. padding:0.08rem 0.05rem;
  203. }
  204. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3{
  205. font-size:0.08rem;
  206. color:#fff;
  207. margin-bottom:0.05rem;
  208. }
  209. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge{
  210. /*min-height:200px;*/
  211. }
  212. /*左边中间部分排行榜*/
  213. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai{
  214. width:100%;
  215. overflow:hidden;
  216. }
  217. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn{
  218. display:block;
  219. /*display: -webkit-flex;*/
  220. align-items:center;
  221. color:#fff;
  222. font-size:0.06rem;
  223. height:0.18rem;
  224. }
  225. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left{
  226. width:25%;
  227. position:relative;
  228. padding-left:0.14rem;
  229. }
  230. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot{
  231. width:0.08rem;
  232. height:0.08rem;
  233. background:#f78cf3;
  234. border-radius:1000px;
  235. display:block;
  236. position:absolute;
  237. left:0.02rem;
  238. top:0;
  239. bottom:0;
  240. margin:auto 0;
  241. }
  242. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot{
  243. background:#e7feb8;}
  244. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot{
  245. background:#fdea8a;}
  246. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot{
  247. background:#8ff9f8;}
  248. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot{
  249. background:#d890fa;}
  250. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot{
  251. background:#05d1fc;}
  252. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi{
  253. }
  254. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line{
  255. width:58%;
  256. height:0.08rem;
  257. background:rgba(255,255,255,0.5);
  258. border-radius:2000px;}
  259. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn{
  260. width:100%;
  261. height:0.08rem;
  262. background:#f78cf3;
  263. border-radius:100px;
  264. -webkit-animation: widthMove1 2s ease-in-out ;}
  265. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn{
  266. background:#e7feb8;
  267. -webkit-animation: widthMove2 2s ease-in-out ;}
  268. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn{
  269. background:#fdea8a;
  270. -webkit-animation: widthMove3 2s ease-in-out ;
  271. }
  272. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn{
  273. background:#8ff9f8;
  274. -webkit-animation: widthMove4 2s ease-in-out ;}
  275. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn{
  276. background:#d890fa;
  277. -webkit-animation: widthMove5 2s ease-in-out ;}
  278. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn{
  279. background:#05d1fc;
  280. -webkit-animation: widthMove6 2s ease-in-out ;}
  281. @-webkit-keyframes widthMove1 {
  282. 0% {width:0%; }
  283. 100% { width:98.5%; }
  284. }
  285. @-webkit-keyframes widthMove2 {
  286. 0% {width:0%; }
  287. 100% { width:88.5%; }
  288. }
  289. @-webkit-keyframes widthMove3 {
  290. 0% {width:0%; }
  291. 100% { width:68.5%; }
  292. }
  293. @-webkit-keyframes widthMove4 {
  294. 0% {width:0%; }
  295. 100% { width:40.5%; }
  296. }
  297. @-webkit-keyframes widthMove5 {
  298. 0% {width:0%; }
  299. 100% { width:22.5%; }
  300. }
  301. @-webkit-keyframes widthMove6 {
  302. 0% {width:0%; }
  303. 100% { width:10.5%; }
  304. }
  305. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num{
  306. width:17%;
  307. font-family:dig;
  308. padding-left:0.02rem;}
  309. /*左边底部*/
  310. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul{
  311. display:block;
  312. /*display: -webkit-flex;*/
  313. flex-wrap:wrap;
  314. width:100%;
  315. }
  316. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li{
  317. width:33.3%;
  318. text-align:center;
  319. margin-bottom:0.05rem;}
  320. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu{
  321. font-size:0.14rem;
  322. color:rgba(14,253,255,1);
  323. font-family:dig;
  324. padding:0.12rem 0 0.02rem;
  325. font-weight:normal;}
  326. .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi{
  327. font-size:0.06rem;
  328. color:#fff;}
  329. /*右边部分*/
  330. .rightMain .rightMain_top{
  331. width:100%;
  332. padding-bottom:0.1rem;
  333. }
  334. .rightMain .rightMain_topIn{
  335. border:0.008rem solid rgba(14,253,255,0.5);
  336. width:100%;
  337. /*min-height:60px;*/
  338. position:relative;
  339. padding:0.08rem 0.05rem;
  340. }
  341. .rightMain .rightMain_topIn h3{
  342. font-size:0.08rem;
  343. color:#fff;
  344. margin-bottom:0.05rem;
  345. }
  346. .rightMain .rightMain_topIn .biaoge{
  347. /*min-height:200px;*/
  348. }
  349. .rightMain .rightMain_bottom{
  350. width:100%;
  351. }
  352. .rightMain .rightMain_bottomIn{
  353. border:0.008rem solid rgba(14,253,255,0.5);
  354. width:100%;
  355. /*min-height:60px;*/
  356. position:relative;
  357. padding:0.08rem 0.05rem;
  358. }
  359. .rightMain .rightMain_bottomIn h3{
  360. font-size:0.08rem;
  361. color:#fff;
  362. margin-bottom:0.05rem;
  363. }
  364. /*右下角表格*/
  365. .rightMain .rightMain_bottomIn .biaoge{
  366. /*min-height:200px;*/
  367. }
  368. .rightMain .rightMain_bottomIn .biaoge_list{
  369. overflow:hidden;
  370. position: relative;}
  371. .rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list{
  372. overflow:hidden;
  373. position: relative;}
  374. .rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn{
  375. -webkit-animation: 14s gundong linear infinite normal;
  376. animation: 14s gundong linear infinite normal;
  377. position: relative;}
  378. @keyframes gundong {
  379. 0% {
  380. -webkit-transform: translate3d(0, 0, 0);
  381. transform: translate3d(0, 0, 0);
  382. }
  383. 100% {
  384. -webkit-transform: translate3d(0, -30vh, 0);
  385. transform: translate3d(0, -30vh, 0);
  386. }
  387. }
  388. .rightMain .rightMain_bottomIn .biaoge_list ul{
  389. display:flex;
  390. display: -webkit-flex;
  391. width:100%;
  392. }
  393. .rightMain .rightMain_bottomIn .biaoge_list .ul_title{
  394. background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  395. background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  396. background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  397. background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  398. }
  399. .rightMain .rightMain_bottomIn .biaoge_list .ul_con{
  400. border-bottom:0.008rem solid rgba(14,253,255,0.5);}
  401. .rightMain .rightMain_bottomIn .biaoge_list ul li{
  402. width:20%;
  403. text-align:center;
  404. color:#fff;
  405. font-size:0.06rem;
  406. height:0.2rem;
  407. line-height:0.2rem;}
  408. .rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child{
  409. text-align:left;}
  410. .rightMain_topIn{
  411. border:0.008rem solid rgba(14,253,255,0.5);
  412. width:100%;
  413. min-height:60px;
  414. position:relative;
  415. padding:0.08rem 0.05rem;
  416. }
  417. .rightMain_topIn h3{
  418. font-size:0.08rem;
  419. color:#fff;
  420. margin-bottom:0.05rem;
  421. }
  422. .rightMain_topIn .biaoge{
  423. /*min-height:200px;*/
  424. }
  425. .rightMain_bottom{
  426. width:100%;
  427. }
  428. .rightMain_bottomIn{
  429. border:0.008rem solid rgba(14,253,255,0.5);
  430. width:100%;
  431. /*min-height:60px;*/
  432. position:relative;
  433. padding:0.08rem 0.05rem;
  434. }
  435. .rightMain_bottomIn h3{
  436. font-size:0.08rem;
  437. color:#fff;
  438. margin-bottom:0.05rem;
  439. }
  440. /*右下角表格*/
  441. .rightMain_bottomIn .biaoge{
  442. /*min-height:200px;*/
  443. height: calc(100% - 0.1rem);
  444. }
  445. .rightMain_bottomIn .biaoge_list{
  446. overflow:hidden;
  447. position: relative;}
  448. .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list{
  449. overflow:hidden;
  450. position: relative;}
  451. .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn{
  452. -webkit-animation: 14s gundong linear infinite normal;
  453. animation: 14s gundong linear infinite normal;
  454. position: relative;}
  455. .rightMain_bottomIn .biaoge_list ul{
  456. display:flex;
  457. display: -webkit-flex;
  458. width:100%;
  459. }
  460. .rightMain_bottomIn .biaoge_list .ul_title{
  461. background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  462. background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  463. background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  464. background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
  465. }
  466. .rightMain_bottomIn .biaoge_list .ul_con{
  467. border-bottom:0.008rem solid rgba(14,253,255,0.5);}
  468. .rightMain_bottomIn .biaoge_list ul li{
  469. width:20%;
  470. text-align:center;
  471. color:#fff;
  472. font-size:0.06rem;
  473. height:0.2rem;
  474. line-height:0.2rem;}
  475. .rightMain_bottomIn .biaoge_list ul li:frist-child{
  476. text-align:left;}
  477. .ul_title {
  478. padding-right:0.02rem;
  479. }
  480. .LineLi {
  481. height:100%;
  482. }