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

396 lines
6.4KB

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