game.wxss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522
  1. .main {
  2. padding-bottom: 20rpx;
  3. }
  4. .auth_enter {
  5. position: fixed;
  6. }
  7. .storeUp {
  8. position: fixed;
  9. top: 178rpx;
  10. left: 24rpx;
  11. transition: left 0.4s;
  12. z-index: 99;
  13. }
  14. .slide-left {
  15. left: -50rpx;
  16. transition: left 0.2s;
  17. }
  18. .storeUp image {
  19. width: 88rpx;
  20. height: 92rpx;
  21. }
  22. /* 收藏弹框 */
  23. .storeUpMask {
  24. width: 100vw;
  25. position: fixed;
  26. top: 0;
  27. z-index: 100;
  28. height: 100vh;
  29. background-color: rgba(0, 0, 0, 0.6);
  30. }
  31. .storeUpMask image {
  32. width:550rpx;
  33. height:386rpx;
  34. position:absolute;
  35. top:16rpx;
  36. right:114rpx;
  37. }
  38. .storeUpMask .text {
  39. width:532rpx;
  40. height:254rpx;
  41. position:absolute;
  42. right:125rpx;
  43. top:135rpx;
  44. }
  45. .storeUpMask .text .title {
  46. font-size: 28rpx;
  47. color: #333;
  48. width: 100%;
  49. line-height: 40rpx;
  50. padding-top: 15rpx;
  51. padding-bottom: 33rpx;
  52. text-align: center;
  53. }
  54. .storeUpMask .text .step {
  55. color: #333;
  56. font-size: 28rpx;
  57. line-height: 40rpx;
  58. display: flex;
  59. align-items: center;
  60. padding-left: 41rpx;
  61. margin-bottom: 12rpx;
  62. }
  63. .storeUpMask .text .step::before {
  64. content: '';
  65. width: 12rpx;
  66. height: 12rpx;
  67. display: inline-block;
  68. border-radius: 50%;
  69. background: #fd0808;
  70. margin-right: 12rpx;
  71. }
  72. .storeUpMask .text .step text {
  73. color: #fd0808;
  74. }
  75. /* 红包弹框 */
  76. .redPackMask {
  77. width: 100vw;
  78. position: fixed;
  79. top: 0;
  80. z-index: 100;
  81. height: 100vh;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. background-color: rgba(0, 0, 0, 0.6);
  86. }
  87. .redPackMask .content {
  88. width: 521rpx;
  89. height: 694rpx;
  90. opacity: 0;
  91. transition: all 300ms;
  92. transform: scale(0.6);
  93. }
  94. .redPackMask .packAnimation {
  95. opacity: 1;
  96. height: 634rpx;
  97. transform: scale(1);
  98. }
  99. .redPackMask .bg {
  100. width: 100%;
  101. height: 100%;
  102. }
  103. .redPackMask .info {
  104. position: absolute;
  105. width: 100%;
  106. height: 100%;
  107. top: 0;
  108. left: 0;
  109. }
  110. .info2 {
  111. display: flex;
  112. flex-direction: column;
  113. align-items: center;
  114. }
  115. .info2 text {
  116. color: #EBCD9A;
  117. }
  118. .info2_avatar {
  119. width: 98rpx;
  120. height: 98rpx;
  121. border-radius: 16rpx;
  122. margin-top: 38rpx;
  123. margin-bottom: 18rpx;
  124. }
  125. .info2_title {
  126. font-size: 36rpx;
  127. line-height: 50rpx;
  128. margin-bottom: 27rpx;
  129. }
  130. .info2_des {
  131. font-size: 26rpx;
  132. line-height: 37rpx;
  133. margin-bottom: 17rpx;
  134. }
  135. .info2_text {
  136. line-height: 62rpx;
  137. font-size: 44rpx;
  138. margin-bottom: 36rpx;
  139. }
  140. .info2_open {
  141. width: 166rpx;
  142. height: 166rpx;
  143. border-radius: 50%;
  144. overflow: hidden;
  145. }
  146. .info2_open image {
  147. width: 100%;
  148. height: 100%;
  149. }
  150. .info1 {
  151. padding-top: 248rpx;
  152. display: flex;
  153. flex-direction: column;
  154. align-items: center;
  155. }
  156. .info1 text {
  157. color: #EBCD9A;
  158. }
  159. .info1_top {
  160. line-height: 67rpx;
  161. font-size: 48rpx;
  162. }
  163. .info1_des {
  164. color: #EBCD9A;
  165. margin-top: 20rpx;
  166. margin-bottom: 77rpx;
  167. line-height: 45rpx;
  168. font-size: 32rpx;
  169. }
  170. .info1_des text {
  171. font-size: 40rpx;
  172. }
  173. .info1_tips {
  174. line-height: 30rpx;
  175. font-size: 22rpx;
  176. }
  177. .info1_save {
  178. background: #EBCD9A;
  179. border-radius: 8rpx;
  180. position: absolute;
  181. bottom: 42rpx;
  182. width: 404rpx;
  183. height: 84rpx;
  184. font-size: 30rpx;
  185. color: #333333;
  186. font-weight: 700;
  187. letter-spacing: 1.07px;
  188. display: flex;
  189. align-items: center;
  190. justify-content: center;
  191. }
  192. /* 分享 */
  193. .shareMask {
  194. width: 100vw;
  195. position: fixed;
  196. top: 0;
  197. z-index: 100;
  198. height: 100vh;
  199. background-color: rgba(0, 0, 0, 0.6);
  200. }
  201. .shareMask .menu {
  202. position: absolute;
  203. bottom: 0;
  204. left: 0;
  205. width: 100%;
  206. background-color: #fff;
  207. height: 228rpx;
  208. display: flex;
  209. align-items: center;
  210. justify-content: space-between;
  211. }
  212. .shareMask .menu_item {
  213. flex: 1;
  214. height: 100%;
  215. background: #fff;
  216. display: flex;
  217. align-items: center;
  218. justify-content: center;
  219. flex-direction: column;
  220. }
  221. .shareMask .menu_item image {
  222. width: 100rpx;
  223. height: 100rpx;
  224. }
  225. .shareMask .menu_item text {
  226. color: #333;
  227. font-size: 24rpx;
  228. font-weight: bold;
  229. margin-top: 12rpx;
  230. }
  231. /* 分享朋友圈 */
  232. .shareCircles {
  233. width: 100vw;
  234. position: fixed;
  235. top: 0;
  236. z-index: 100;
  237. height: 100%;
  238. }
  239. .shareCircles .task {
  240. background-color: rgba(0, 0, 0, 0.6);
  241. position: absolute;
  242. top: 0;
  243. left: 0;
  244. width: 100%;
  245. height: 100%;
  246. }
  247. .shareCircles .content {
  248. width: 466rpx;
  249. display: flex;
  250. align-items: center;
  251. flex-direction: column;
  252. height: 1005rpx;
  253. position: absolute;
  254. left: 50%;
  255. top: 50%;
  256. transform: translate(-50%, -50%);
  257. z-index: 999;
  258. }
  259. .shareCircles .main_img {
  260. width: 466rpx;
  261. height: 828rpx;
  262. }
  263. .shareCircles .main_img image {
  264. width: 100%;
  265. height: 100%;
  266. }
  267. .shareCircles .prompt {
  268. font-size: 28rpx;
  269. line-height: 40rpx;
  270. color: #fff;
  271. margin-top: 17rpx;
  272. margin-bottom: 32rpx;
  273. white-space: nowrap;
  274. }
  275. .shareCircles .btn {
  276. width: 395rpx;
  277. height: 88rpx;
  278. border-radius: 100px;
  279. font-size: 36rpx;
  280. color: #fff;
  281. display: flex;
  282. align-items: center;
  283. justify-content: center;
  284. background: #557cff;
  285. }
  286. .share_close {
  287. height: 40rpx;
  288. position: absolute;
  289. right: 27rpx;
  290. top: -61rpx;
  291. width: 40rpx;
  292. }
  293. .listtitle {
  294. height: 86rpx;
  295. padding: 0 28rpx;
  296. display: flex;
  297. align-items: center;
  298. }
  299. .listtitle .icon {
  300. width: 46rpx;
  301. height: 46rpx;
  302. margin-right: 13rpx;
  303. }
  304. .listtitle .name {
  305. font-size: 32rpx;
  306. font-weight: 700;
  307. color: #333;
  308. line-height: 32rpx;
  309. }
  310. .listtitle .more {
  311. font-size: 24rpx;
  312. color: #666;
  313. margin-left: auto;
  314. }
  315. swiper {
  316. height: 272rpx;
  317. }
  318. .banner {
  319. width: 100%;
  320. margin-bottom: -10rpx;
  321. padding: 22rpx 0 10rpx 0;
  322. }
  323. .banner_item {
  324. margin: 0 auto;
  325. width: 702rpx;
  326. height: 260rpx;
  327. overflow: hidden;
  328. border-radius: 15rpx;
  329. box-shadow: 0 3rpx 20rpx 0 rgba(0, 0, 0, 0.50);
  330. }
  331. .banner_item navigator {
  332. width: 100%;
  333. height: 100%;
  334. }
  335. .banner_item image {
  336. height: 100%;
  337. width: 100%;
  338. display: block;
  339. }
  340. /* 广告 */
  341. .advertising {
  342. padding-top: 20rpx;
  343. }
  344. .advertising image {
  345. margin: 0 auto;
  346. display: block;
  347. width: 702rpx;
  348. height: 260rpx;
  349. overflow: hidden;
  350. border-radius: 15rpx;
  351. box-shadow: 0 3rpx 20rpx 0 rgba(0, 0, 0, 0.50);
  352. }
  353. /* 游戏列表2 */
  354. .gameCard {
  355. border-bottom: 1px solid #e8e8e8;
  356. overflow: hidden;
  357. padding: 0 26rpx;
  358. }
  359. .gameCard .gameCard_item {
  360. width: 50%;
  361. height: 190rpx;
  362. float: left;
  363. margin-bottom: 20rpx;
  364. text-align: left;
  365. }
  366. .gameCard .gameCard_item:nth-child(even) {
  367. text-align: right;
  368. }
  369. .gameCard .gameCard_item image {
  370. border-radius: 24rpx;
  371. width: 336rpx;
  372. height: 100%;
  373. }
  374. /* 游戏列表4 */
  375. .gameWrap {
  376. padding: 0 14rpx;
  377. border-bottom: 1px solid #e8e8e8;
  378. overflow: hidden;
  379. }
  380. .gameWrap .gameWrap_item {
  381. float: left;
  382. margin-bottom: 20rpx;
  383. width: 25%;
  384. }
  385. .gameWrap navigator,
  386. .gameWrap .entrance {
  387. width: 100%;
  388. height: 100%;
  389. display: flex;
  390. align-items: center;
  391. justify-content: center;
  392. flex-direction: column;
  393. }
  394. .gameWrap_item .name {
  395. font-size: 26rpx;
  396. color: #333;
  397. text-align: center;
  398. line-height: 37rpx;
  399. width: 152rpx;
  400. overflow: hidden;
  401. text-overflow: ellipsis;
  402. white-space: nowrap;
  403. margin-top: 15rpx;
  404. margin-bottom: 7rpx;
  405. font-weight: 700;
  406. }
  407. .gameWrap_item .icon {
  408. width: 152rpx;
  409. height: 152rpx;
  410. border-radius: 24rpx;
  411. position: relative;
  412. }
  413. .gameWrap_item .icon image {
  414. width: 100%;
  415. height: 100%;
  416. border-radius: 24rpx;
  417. }
  418. .gameWrap_item .icon text {
  419. position: absolute;
  420. right: -5rpx;
  421. bottom: 0;
  422. padding: 0 12rpx;
  423. height: 36rpx;
  424. background: #ff1a19;
  425. border-radius: 18rpx 18rpx 18rpx 0;
  426. font-size: 18rpx;
  427. font-weight: 400;
  428. color: #fff;
  429. display: flex;
  430. align-items: center;
  431. justify-content: center;
  432. }
  433. .gameWrap_item .num {
  434. font-size: 22rpx;
  435. color: #999;
  436. text-align: center;
  437. width: 152rpx;
  438. overflow: hidden;
  439. text-overflow: ellipsis;
  440. white-space: nowrap;
  441. }
  442. .share {
  443. position: fixed;
  444. top: auto;
  445. right: 30rpx;
  446. bottom: 54rpx;
  447. z-index: 99;
  448. }
  449. .share button {
  450. background-color: transparent;
  451. height: 80rpx;
  452. width: 80rpx;
  453. padding-left: 0;
  454. display: flex;
  455. align-items: center;
  456. }
  457. .share button image {
  458. width: 80rpx;
  459. height: 80rpx;
  460. }