东风启辰小程序端
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.

436 lines
6.9KB

  1. /* pages/luckyStar/luckyStar.wxss */
  2. image{
  3. display: block;
  4. }
  5. view{
  6. -webkit-overflow-scrolling: touch;
  7. }
  8. .main{
  9. height: calc(100vh - 150rpx);
  10. overflow: auto;
  11. }
  12. .gameRuleBtn{
  13. width:81rpx;
  14. height:81rpx;
  15. position: fixed;
  16. right: 17rpx;
  17. top: 216rpx;
  18. }
  19. .gameRuleBtn2{
  20. background-color: #28568B;
  21. }
  22. .gameTip{
  23. width:81rpx;
  24. height:81rpx;
  25. position: fixed;
  26. right: 17rpx;
  27. top: 331rpx;
  28. }
  29. .gameRuleDesc{
  30. position: fixed;
  31. left: 0;
  32. top: 0;
  33. width: 100%;
  34. height: calc(100vh - 150rpx);
  35. background-color: rgba( 000, 000, 000, 0.3);
  36. display: flex;
  37. align-items: center;
  38. justify-content: center;
  39. z-index: 99;
  40. }
  41. .ruleGroup{
  42. position: relative;
  43. width: 487rpx;
  44. height: 459rpx;
  45. }
  46. .gameRuleIcon{
  47. width: 100%;
  48. height: 100%;
  49. }
  50. .gameRuleClose{
  51. position: absolute;
  52. top: -10rpx;
  53. right: -10rpx;
  54. height: 40rpx;
  55. width: 40rpx;
  56. z-index: 9;
  57. }
  58. .gameStrat{
  59. width:277rpx;
  60. height:50rpx;
  61. position: absolute;
  62. bottom: 50rpx;
  63. left: 50%;
  64. transform: translateX(-50%);
  65. }
  66. .gameMain{
  67. position: relative;
  68. width: 750rpx;
  69. }
  70. .gameStarBg{
  71. width: 750rpx;
  72. height: 1038rpx;
  73. }
  74. .gameTitle{
  75. position: absolute;
  76. left: 49%;
  77. top: 0;
  78. transform: translateX(-50%);
  79. width: 343rpx;
  80. height: 97rpx;
  81. z-index: 10;
  82. }
  83. .downTime{
  84. position: absolute;
  85. top: 20rpx;
  86. right: 80rpx;
  87. font-size:34rpx;
  88. line-height: 34rpx;
  89. font-family:NissanBrand;
  90. color:rgba(35,33,34,1);
  91. font-weight: 500;
  92. }
  93. .gameClaw{
  94. position: absolute;
  95. left: 268rpx;
  96. top: -440rpx;
  97. width: 224rpx;
  98. height: 800rpx;
  99. transition: top 0.8s linear;
  100. transform: scale(2);
  101. transform-origin:50% 0 0;
  102. }
  103. .gameClaw2{
  104. transition: all 0.8s linear;
  105. }
  106. .prizeIcon2{
  107. position: absolute;
  108. left: 74rpx;
  109. top: 558rpx;
  110. width: 561rpx;
  111. height: 187rpx;
  112. }
  113. .prizeIcon1{
  114. position: absolute;
  115. left: 77rpx;
  116. top: 571rpx;
  117. width: 673rpx;
  118. height: 287rpx;
  119. }
  120. .gameGetBtn{
  121. position: absolute;
  122. right: 70rpx;
  123. top: 920rpx;
  124. width: 304rpx;
  125. height: 80rpx;
  126. }
  127. .gameControlFrame{
  128. position: absolute;
  129. left: 120rpx;
  130. top: 915rpx;
  131. width: 174rpx;
  132. height: 106rpx;
  133. }
  134. .gameControlGroup{
  135. widows: 100%;
  136. height: 100%;
  137. position: relative;
  138. }
  139. .btnControlL{
  140. position: absolute;
  141. left: 0;
  142. top: 38rpx;
  143. width: 60rpx;
  144. height: 30rpx;
  145. /* background-color: rgba( 000, 000, 000, 0.3); */
  146. }
  147. .btnControlR{
  148. position: absolute;
  149. right: 0;
  150. top: 38rpx;
  151. width: 64rpx;
  152. height: 30rpx;
  153. /* background-color: rgba(228, 15, 15, 0.849); */
  154. }
  155. .btnControlT{
  156. position: absolute;
  157. left: 65rpx;
  158. top: 0;
  159. width: 48rpx;
  160. height: 44rpx;
  161. /* background-color: rgba(209, 135, 45, 0.5); */
  162. }
  163. .btnControlB{
  164. position: absolute;
  165. left: 60rpx;
  166. bottom: 0;
  167. width: 50rpx;
  168. height: 47rpx;
  169. /* background-color: rgba(233, 222, 111, 0.5); */
  170. }
  171. .successPop{
  172. position: fixed;
  173. top: 0;
  174. left: 0;
  175. width: 100%;
  176. height: calc(100vh - 150rpx);
  177. background-color: rgba( 000, 000, 000, 0.3);
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. z-index: 99;
  182. }
  183. .successGroup{
  184. position: relative;
  185. width:488rpx;
  186. height:475rpx;
  187. display: flex;
  188. flex-direction: column;
  189. align-items: center;
  190. }
  191. .successIcon{
  192. position: absolute;
  193. top: -33rpx;
  194. left: 50%;
  195. transform: translateX(-50%);
  196. width: 114rpx;
  197. height: 114rpx;
  198. }
  199. .titleGroup{
  200. width: 100%;
  201. height: 63rpx;
  202. background-color: #355485;
  203. border-top-left-radius: 20rpx;
  204. border-top-right-radius: 20rpx;
  205. }
  206. .startRegister{
  207. width:296rpx;
  208. height:50rpx;
  209. position: relative;
  210. }
  211. .prizePic{
  212. width: 310rpx;
  213. height: 116rpx;
  214. margin-bottom: 10rpx;
  215. }
  216. .successTip{
  217. font-size:28rpx;
  218. font-family:PingFangSC;
  219. font-weight:bold;
  220. color:rgba(52,84,132,1);
  221. line-height: 28rpx;
  222. text-align: center;
  223. margin-top: 50rpx;
  224. margin-bottom: 13rpx;
  225. }
  226. .prizeName{
  227. font-size:21rpx;
  228. font-family:PingFangSC;
  229. font-weight:400;
  230. color:rgba(0,0,0,1);
  231. line-height:21rpx;
  232. text-align: center;
  233. margin-bottom: 30rpx;
  234. }
  235. .failText{
  236. font-size:28rpx;
  237. font-family:PingFangSC;
  238. font-weight:bold;
  239. color:rgba(52,84,132,1);
  240. line-height:28rpx;
  241. text-align: center;
  242. }
  243. .getPrizeTip{
  244. display: flex;
  245. align-items: center;
  246. justify-content: center;
  247. margin-top: 50rpx;
  248. margin-bottom: 16rpx;
  249. }
  250. .prizeTipLine{
  251. width:80rpx;
  252. height:5rpx;
  253. background-color: #1F4C76;
  254. }
  255. .prizeTipLine:first-child{
  256. margin-right: 20rpx;
  257. }
  258. .prizeTipLine:last-child{
  259. margin-left: 20rpx;
  260. }
  261. .prizeTipText{
  262. font-size:24rpx;
  263. font-family:PingFangSC;
  264. font-weight:600;
  265. color:rgba(21,83,136,1);
  266. line-height:24rpx;
  267. }
  268. .tipContentGroup{
  269. width:712rpx;
  270. height:72rpx;
  271. margin: 0 auto;
  272. box-sizing: border-box;
  273. border: 1rpx solid #4B6782;
  274. padding: 0 20rpx;
  275. border-radius: 20rpx;
  276. overflow: hidden;
  277. position: relative;
  278. }
  279. .tipContentGroup>view::-webkit-scrollbar {
  280. display:none;
  281. width:0;
  282. height:0;
  283. color:transparent;
  284. }
  285. .tipContent{
  286. position: absolute;
  287. top:0;
  288. left: 100%;
  289. font-size:21rpx;
  290. font-family:PingFangSC;
  291. font-weight:400;
  292. color:rgba(21,83,136,1);
  293. line-height:72rpx;
  294. white-space: nowrap;
  295. }
  296. .prizeLookGroup{
  297. padding-top:40rpx;
  298. padding-bottom: 45rpx;
  299. display: flex;
  300. align-items: center;
  301. justify-content: center;
  302. }
  303. .prizeLook{
  304. width:710rpx;
  305. height:70rpx;
  306. }
  307. .shareBtn{
  308. position: absolute;
  309. left: 0;
  310. top: 0;
  311. z-index: 2;
  312. opacity: 0;
  313. }
  314. .getUserMsgBtn{
  315. position: absolute;
  316. left: 0;
  317. top: 0;
  318. width: 100%;
  319. height: 100%;
  320. opacity: 0;
  321. margin: 0;
  322. padding:0;
  323. }
  324. .scrollSty{
  325. margin-top: 10rpx;
  326. width:672rpx;
  327. height:72rpx;
  328. white-space: nowrap;
  329. }
  330. .tipContent{
  331. display:inline-block;
  332. }
  333. .scrollMask{
  334. position: absolute;
  335. left: 0;
  336. top: 0;
  337. width: 100%;
  338. height: 100%;
  339. opacity: 0;
  340. }
  341. .scrollFirstView{
  342. width:712rpx;
  343. height:72rpx;
  344. }
  345. .luckyClaw{
  346. width: 304rpx;
  347. height: 80rpx;
  348. margin-left: -2rpx;
  349. }
  350. .luckyLeft{
  351. width: 83rpx;
  352. height: 40rpx;
  353. margin-left: -4rpx;
  354. margin-top: -1rpx;
  355. }
  356. .luckyRight{
  357. width: 83rpx;
  358. height: 40rpx;
  359. margin-left: -5rpx;
  360. margin-top: -2rpx;
  361. }
  362. .luckyTop{
  363. width: 72rpx;
  364. height: 47rpx;
  365. }
  366. .luckyBottom{
  367. width: 73rpx;
  368. height: 47rpx;
  369. margin-left: -14rpx;
  370. margin-top: 6rpx;
  371. }
  372. .downTimeGroup{
  373. position: fixed;
  374. left: 0;
  375. top: 0;
  376. width: 100%;
  377. height: calc(100vh - 150rpx);
  378. background-color: rgba( 000, 000, 000, 0.3);
  379. display: flex;
  380. align-items: center;
  381. justify-content: center;
  382. z-index: 99;
  383. }
  384. .luckyNum{
  385. width: 221rpx;
  386. height: 131rpx;
  387. }
  388. .luckyPizeType{
  389. width: 100%;
  390. height: 100%;
  391. position: absolute;
  392. top: 0;
  393. left: 0;
  394. }
  395. .textFrame{
  396. width:100%;
  397. height:100%;
  398. overflow: auto;
  399. position:relative;
  400. }
  401. .btnsGroup{
  402. height: 110rpx;
  403. position: absolute;
  404. top: 301rpx;
  405. display: flex;
  406. align-items: center;
  407. justify-content: space-between;
  408. flex-direction: column;
  409. z-index: 9;
  410. }
  411. .luckyBtns{
  412. width: 296rpx;
  413. height: 50rpx;
  414. }
  415. .luckyBtnsGap{
  416. height: 13rpx;
  417. }
  418. .prizeContent{
  419. position: absolute;
  420. top: 200rpx;
  421. z-index: 9;
  422. }
  423. .gameOpen{
  424. position: absolute;
  425. left: 370rpx;
  426. top: 939rpx;
  427. width: 139rpx;
  428. height: 61rpx;
  429. }
  430. .newImages24{
  431. position: absolute;
  432. left: 533rpx;
  433. top: 920rpx;
  434. width: 147rpx;
  435. height: 105rpx;
  436. }