index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box; }
  5. a:hover, a:visited, a:link, a:active {
  6. text-decoration: none; }
  7. .btn {
  8. width: 0.62rem;
  9. height: 0.31rem;
  10. border: none;
  11. background-color: rgba(0, 0, 0, 0);
  12. outline-style: none;
  13. -webkit-border-radius: 100px;
  14. -moz-border-radius: 100px;
  15. border-radius: 100px;
  16. font-size: 0.13rem;
  17. color: #FFFFFF;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center; }
  21. .btn-primary {
  22. background: #547BFF;
  23. border: 1px solid #547BFF; }
  24. .btn-primary-border {
  25. border: 1px solid #547BFF;
  26. background-color: #FFFFFF;
  27. color: #3597FF; }
  28. .btn-round {
  29. color: #3597FF;
  30. border: 1px solid #3597FF;
  31. width: 0.48rem;
  32. height: 0.48rem;
  33. -webkit-border-radius: 50%;
  34. -moz-border-radius: 50%;
  35. border-radius: 50%; }
  36. .nav {
  37. width: 100%;
  38. padding: 0 0.15rem; }
  39. .nav_wrap {
  40. width: 100%;
  41. border-bottom: 1px solid #D8D8D8;
  42. display: flex;
  43. align-items: center; }
  44. .nav_cell {
  45. flex: 1;
  46. line-height: 0.47rem;
  47. text-align: center;
  48. font-size: 0.16rem;
  49. color: #999999; }
  50. .nav_cell a {
  51. font-size: 0.16rem;
  52. color: #999999;
  53. display: block;
  54. text-decoration: none;
  55. width: 100%;
  56. height: 100%; }
  57. .nav .active {
  58. position: relative;
  59. color: #3597FF; }
  60. .nav .active a {
  61. color: #3597FF; }
  62. .nav .active:before {
  63. content: '';
  64. width: 0.56rem;
  65. height: 0.03rem;
  66. position: absolute;
  67. background-color: #3597FF;
  68. bottom: 0;
  69. left: 50%;
  70. margin-left: -0.28rem; }
  71. .banner {
  72. width: 100%;
  73. display: block;
  74. overflow: hidden; }
  75. .banner_inner {
  76. width: 100%; }
  77. .banner_cell {
  78. padding: 0.12rem 0.15rem; }
  79. .banner_cnt {
  80. height: 1.27rem;
  81. width: 100%;
  82. background-color: #3597FF; }
  83. .income {
  84. background-color: #FFF6F6;
  85. height: 0.53rem;
  86. padding: 0 0.15rem;
  87. overflow: hidden;
  88. display: flex;
  89. align-items: center; }
  90. .income_slide {
  91. width: 2.5rem;
  92. height: 0.53rem;
  93. overflow: hidden; }
  94. .income_item {
  95. display: flex;
  96. align-items: center;
  97. width: 2.5rem; }
  98. .income_avatar {
  99. width: 0.3rem;
  100. height: 0.3rem;
  101. -webkit-border-radius: 50%;
  102. -moz-border-radius: 50%;
  103. border-radius: 50%;
  104. background-color: #3597FF;
  105. margin-right: 0.1rem;
  106. overflow: hidden; }
  107. .income_avatar img {
  108. display: block;
  109. width: 100%;
  110. height: 100%;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. display: -webkit-box;
  114. -webkit-box-orient: vertical;
  115. -webkit-line-clamp: 1;}
  116. .income_info {
  117. flex: 1;
  118. font-size: 0.14rem;
  119. color: #666;
  120. /*overflow: hidden;*/
  121. /*text-overflow: ellipsis;*/
  122. /*display: -webkit-box;*/
  123. /*-webkit-box-orient: vertical;*/
  124. /*-webkit-line-clamp: 1;*/
  125. }
  126. .income_info .name {
  127. color: #333;
  128. margin-right: 0.05rem; }
  129. .income_info .gold {
  130. color: #EA1B26; }
  131. .income_rank {
  132. margin-left: auto;
  133. margin-right: 0.05rem;
  134. font-size: 0.12rem;
  135. width: 0.76rem;
  136. height: 0.3rem;
  137. background: #FF6B3F;
  138. border: 1px solid #FF6B3F;
  139. position: relative; }
  140. .income_rank:before {
  141. content: '';
  142. width: 1px;
  143. height: 0.22rem;
  144. background: #E3E3E3;
  145. left: -0.1rem;
  146. top: calc(50% - 0.11rem);
  147. position: absolute; }
  148. .article {
  149. padding: 0 0.15rem; }
  150. .article_title {
  151. display: flex;
  152. align-items: center;
  153. height: 0.54rem;
  154. font-weight: 600;
  155. font-size: 0.18rem;
  156. line-height: 0.25rem;
  157. color: #333333; }
  158. .article_title span {
  159. font-size: 0.14rem;
  160. color: #E22020;
  161. margin-top: 0.04rem;
  162. margin-left: 0.05rem;
  163. line-height: 0.2rem; }
  164. .article_item {
  165. height: 0.75rem;
  166. width: 100%;
  167. border-bottom: 1px solid #E6E6E6;
  168. display: flex;
  169. align-items: center; }
  170. .article_icon {
  171. margin-right: 0.1rem;
  172. width: 0.46rem;
  173. height: 0.46rem; }
  174. .article_icon img {
  175. width: 100%;
  176. height: 100%; }
  177. .article_info {
  178. height: 0.46rem;
  179. max-width: 1.8rem;
  180. display: flex;
  181. align-items: flex-start;
  182. justify-content: space-between;
  183. flex-direction: column; }
  184. .article_info .title {
  185. line-height: 0.21rem;
  186. font-size: 0.15rem;
  187. color: #333333;
  188. font-weight: 600; }
  189. .article_info .des {
  190. font-size: 0.12rem;
  191. color: #999999;
  192. line-height: 0.2rem;
  193. overflow:hidden;
  194. text-overflow:ellipsis;
  195. display:-webkit-box;
  196. -webkit-box-orient:vertical;
  197. -webkit-line-clamp:1;}
  198. .article_btn {
  199. margin-left: auto;
  200. margin-right: 0.05rem; }
  201. .article-game .article_item {
  202. height: 1rem; }
  203. .article-game .article_icon {
  204. width: 0.62rem;
  205. height: 0.62rem; }
  206. .article-game .article_info {
  207. height: 0.62rem; }
  208. .article-game .des {
  209. font-size: 0.12rem;
  210. color: #FF8B30;
  211. line-height: 0.17rem;
  212. overflow:hidden;
  213. text-overflow:ellipsis;
  214. display:-webkit-box;
  215. -webkit-box-orient:vertical;
  216. -webkit-line-clamp:2;
  217. height: 0.34rem;}
  218. .list_title {
  219. width: 100%;
  220. height: 0.45rem;
  221. padding: 0 0.15rem;
  222. display: flex;
  223. align-items: center; }
  224. .list_title img {
  225. width: 0.2rem;
  226. height: 0.2rem;
  227. margin-right: 0.1rem; }
  228. .list_title span {
  229. font-size: 0.18rem;
  230. font-weight: 600;
  231. color: #333333; }
  232. .list_wrap {
  233. padding: 0 0.15rem; }
  234. .list_cell {
  235. padding: 0.17rem 0;
  236. position: relative;
  237. display: flex;
  238. align-items: flex-start;}
  239. .list_cell:before {
  240. content: '';
  241. width: 2.74rem;
  242. height: 1px;
  243. background-color: #E6E6E6;
  244. position: absolute;
  245. bottom: 0;
  246. right: 0.02rem; }
  247. .list_icon {
  248. width: 0.66rem;
  249. height: 0.66rem;
  250. margin-right: 0.12rem; }
  251. .list_info {
  252. flex: 1;
  253. display: flex;
  254. align-items: flex-start;
  255. justify-content: space-between;
  256. flex-direction: column; }
  257. .list_info .title {
  258. font-size: 0.14rem;
  259. color: #333333; }
  260. .list_info .msg {
  261. font-size: 0.12rem;
  262. color: #8B8B8B;
  263. line-height: 0.2rem;
  264. margin: 0.015rem 0;}
  265. .list_info .labels {
  266. overflow: hidden;}
  267. .list_info .labels span {
  268. transform-origin: left;
  269. letter-spacing: 0.021rem;
  270. padding: 0.03rem;
  271. float: left;
  272. display: inline-block;
  273. font-size: 0.1rem;
  274. margin-right: 0.05rem;
  275. margin-bottom: 0.05rem;
  276. color: #FFFFFF;
  277. background: #FF5A5A;
  278. border-radius: 0.03rem; }
  279. .list_btn {
  280. margin-left: auto;
  281. height:0.66rem;
  282. display: flex;
  283. align-items: center;
  284. margin-right: 0.05rem; }
  285. .rank {
  286. width: 100%; }
  287. .rank_wrap {
  288. width: 100%;
  289. padding: 0 0.15rem; }
  290. .rank_cell {
  291. width: 100%;
  292. display: flex;
  293. align-items: center;
  294. height: 0.76rem;
  295. border-bottom: 1px solid #D8D8D8; }
  296. .rank_cell:nth-child(1) .rank_index {
  297. background-color: #FE663C; }
  298. .rank_cell:nth-child(2) .rank_index {
  299. background-color: #EFCA14; }
  300. .rank_cell:nth-child(3) .rank_index {
  301. background-color: #C19C6E; }
  302. .rank_index {
  303. width: 0.18rem;
  304. height: 0.18rem;
  305. font-style: normal;
  306. margin-right: 0.1rem;
  307. display: flex;
  308. align-items: center;
  309. justify-content: center;
  310. -webkit-border-radius: 50%;
  311. -moz-border-radius: 50%;
  312. border-radius: 50%;
  313. color: #FFFFFF;
  314. background-color: #B0B0B0;
  315. font-size: 0.12rem; }
  316. .rank_avatar {
  317. width: 0.46rem;
  318. background-color: #3597FF;
  319. height: 0.46rem;
  320. -webkit-border-radius: 50%;
  321. -moz-border-radius: 50%;
  322. border-radius: 50%;
  323. margin-right: 0.15rem; }
  324. .rank_name {
  325. font-size: 0.14rem;
  326. line-height: 0.2rem;
  327. color: #333333; }
  328. .rank_income {
  329. margin-left: auto;
  330. font-size: 0.18rem;
  331. line-height: 0.25rem;
  332. font-weight: 400;
  333. color: #FE663C; }
  334. .article {
  335. padding: 0 0.15rem; }
  336. .article_title {
  337. padding-top: 0.2rem;
  338. font-size: 0.2rem;
  339. color: #333333;
  340. font-weight: 600; }
  341. .article_time {
  342. margin-top: 0.06rem;
  343. font-size: 0.14rem;
  344. padding-bottom: 0.18rem;
  345. color: #999999; }
  346. .azTop {
  347. padding: 0 0.15rem 0.08rem 0.15rem;
  348. border-bottom: 0.1rem solid #F0F0F0; }
  349. .azTop_game_cell {
  350. padding: 0.17rem 0;
  351. position: relative;
  352. display: flex;
  353. align-items: flex-start; }
  354. .azTop_game_icon {
  355. width: 0.66rem;
  356. height: 0.66rem;
  357. margin-right: 0.12rem; }
  358. .azTop_game_info {
  359. flex: 1;
  360. display: flex;
  361. align-items: flex-start;
  362. justify-content: space-between;
  363. flex-direction: column; }
  364. .azTop_game_info .title {
  365. font-size: 0.14rem;
  366. color: #333333; }
  367. .azTop_game_info .msg {
  368. font-size: 0.12rem;
  369. color: #8B8B8B;
  370. line-height: 0.2rem;
  371. margin: 0.015rem 0;}
  372. .azTop_game_info .labels {
  373. overflow: hidden; }
  374. .azTop_game_info .labels span {
  375. transform-origin: left;
  376. letter-spacing: 0.021rem;
  377. padding: 0.03rem;
  378. float: left;
  379. display: inline-block;
  380. font-size: 0.1rem;
  381. margin-right: 0.05rem;
  382. margin-bottom: 0.05rem;
  383. color: #FFFFFF;
  384. background: #FF5A5A;
  385. border-radius: 0.03rem;}
  386. .azTop_game_btn {
  387. margin-left: auto;
  388. height:0.66rem;
  389. display: flex;
  390. align-items: center;
  391. margin-right: 0.05rem; }
  392. .azTop_label {
  393. margin-top: -0.05rem;
  394. overflow: hidden;}
  395. .azTop_label span {
  396. float: left;
  397. padding: 0.05rem 0.1rem;
  398. margin-right: 0.07rem;
  399. background: #ECECEC;
  400. font-size: 0.14rem;
  401. color: #666666;
  402. border-radius: 0.07rem; }
  403. .azBody_page {
  404. border-bottom: 0.1rem solid #F0F0F0;
  405. padding-bottom: 0.6rem;
  406. font-size: 0.16rem; }
  407. .azBody_page:last-child {
  408. border: none; }
  409. .azBody_title {
  410. padding: 0.12rem 0.15rem 0.15rem 0.15rem; }
  411. .azBody_title b {
  412. display: block;
  413. font-size: 0.18rem;
  414. color: #333333;
  415. padding-left: 0.08rem;
  416. line-height: 0.18rem;
  417. border-left: 0.06rem solid #547BFF; }
  418. .azBody_text {
  419. padding: 0 0.15rem; }
  420. .slidePreview {
  421. max-width: 999px;
  422. overflow-x: scroll;
  423. white-space: nowrap; }
  424. .slidePreview_item {
  425. width: 1.09rem;
  426. height: 1.79rem;
  427. margin-left: 0.08rem;
  428. display: inline-block;
  429. background-color: #EEEEEE; }
  430. .slidePreview_item:first-child {
  431. margin-left: 0.15rem; }
  432. .slidePreview_item:last-child {
  433. margin-right: 0.15rem; }
  434. .slidePreview_item img {
  435. display: block;
  436. width: 100%;
  437. height: 100%; }
  438. .footer {
  439. position: fixed;
  440. bottom: 0;
  441. left: 0;
  442. width: 100%;
  443. height: 0.5rem;
  444. background: #FFFFFF;
  445. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  446. display: flex;
  447. align-items: center;
  448. justify-content: center;
  449. -webkit-transform: translateY(100%);
  450. -moz-transform: translateY(100%);
  451. -ms-transform: translateY(100%);
  452. -o-transform: translateY(100%);
  453. transform: translateY(100%);
  454. -webkit-transition: all 0.4s ease-out;
  455. -moz-transition: all 0.4s ease-out;
  456. -ms-transition: all 0.4s ease-out;
  457. -o-transition: all 0.4s ease-out;
  458. transition: all 0.4s ease-out; }
  459. .footer a {
  460. display: flex;
  461. align-items: center;
  462. justify-content: center;
  463. width: 3.46rem;
  464. height: 0.38rem;
  465. font-size: 0.16rem;
  466. color: #FFFFFF;
  467. background: #23B0CB;
  468. text-decoration: none;
  469. border-radius: 0.04rem; }
  470. .footer-show {
  471. -webkit-transform: translateY(0%);
  472. -moz-transform: translateY(0%);
  473. -ms-transform: translateY(0%);
  474. -o-transform: translateY(0%);
  475. transform: translateY(0%); }
  476. .wxDown {
  477. width: 100%;
  478. height: 100%;
  479. position: fixed;
  480. z-index: 10;
  481. top: 0;
  482. left: 0;
  483. background-color: rgba(0, 0, 0, 0.6); }
  484. .wxDown_cnt {
  485. background: #FFFFFF;
  486. position: absolute;
  487. right: 0.14rem;
  488. top: 0.16rem;
  489. width: 2.1rem;
  490. padding-left: 0.2rem; }
  491. .wxDown_cnt .topicon {
  492. width: 0.13rem;
  493. height: 0.08rem;
  494. display: block;
  495. position: absolute;
  496. right: 0.04rem;
  497. top: -0.08rem; }
  498. .wxDown_cnt .ids {
  499. font-style: normal;
  500. display: flex;
  501. align-items: center;
  502. justify-content: center;
  503. margin-right: 0.16rem;
  504. width: 0.2rem;
  505. height: 0.2rem;
  506. -webkit-border-radius: 50%;
  507. -moz-border-radius: 50%;
  508. border-radius: 50%;
  509. background: #000000;
  510. font-size: 0.14rem;
  511. color: #FFFFFF; }
  512. .wxDown_cnt .text {
  513. display: flex;
  514. align-items: center; }
  515. .wxDown_cnt .item {
  516. height: 0.5rem;
  517. font-size: 0.12rem;
  518. color: #333333;
  519. display: flex;
  520. align-items: center; }
  521. .wxDown_cnt .img2 {
  522. width: 0.38rem;
  523. height: 0.38rem;
  524. margin: 0 0.04rem; }
  525. .wxDown_cnt .img1 {
  526. width: 0.2rem;
  527. margin: 0 0.06rem; }
  528. .article_body img {
  529. width: 100% !important;
  530. }
  531. /*# sourceMappingURL=index.css.map */