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.
 
 
 

301 lines
6.0 KiB

  1. @charset "utf-8";
  2. @rem:75rem;
  3. body{
  4. background-color: #feefab;
  5. }
  6. #wrap {
  7. margin-top: -1/@rem;
  8. height: 1335/@rem;
  9. background-image: url("../image/bg.png");
  10. }
  11. .rule, .my {
  12. position: relative;
  13. z-index: 3;
  14. margin-top: 36/@rem;
  15. width: 82/@rem;
  16. height: 56/@rem;
  17. background-color: #ff9d1b;
  18. text-align: center;
  19. line-height: 56/@rem;
  20. font-size: 24/@rem;
  21. color: #fff;
  22. }
  23. .rule {
  24. border-top-right-radius: 10/@rem;
  25. border-bottom-right-radius: 10/@rem;
  26. }
  27. .my {
  28. background-color: #fe5362;
  29. border-top-left-radius: 10/@rem;
  30. border-bottom-left-radius: 10/@rem;
  31. }
  32. /*游戏区域*/
  33. .main{
  34. position: relative;
  35. width: 100%;
  36. height: 974/@rem;
  37. }
  38. .main .caidai{
  39. position: absolute;
  40. left: 50%;
  41. top: 0;
  42. z-index: 3;
  43. margin-left: -322/@rem;
  44. width: 644/@rem;
  45. height: 873/@rem;
  46. background-image: url("../image/caidai.png");
  47. }
  48. .main .title{
  49. position: relative;
  50. z-index: 2;
  51. width: 100%;
  52. height: 314/@rem;
  53. background-image: url("../image/title.png");
  54. }
  55. .main .box{
  56. position: relative;
  57. margin-top: -120/@rem;
  58. width: 100%;
  59. height: 782/@rem;
  60. background-image: url("../image/box.png");
  61. }
  62. /*钩子*/
  63. .main .box #hook{
  64. position: absolute;
  65. left: 50%;
  66. top: -220/@rem;
  67. z-index: 1;
  68. margin-left: -65/@rem;
  69. width: 130/@rem;
  70. height: 430/@rem;
  71. }
  72. #hook .line{
  73. margin: auto;
  74. width: 44/@rem;
  75. height: 342/@rem;
  76. background-image: url("../image/line.png");
  77. }
  78. #hook .left,#hook .right{
  79. position: absolute;
  80. bottom: 0;
  81. width: 56/@rem;
  82. height: 101/@rem;
  83. }
  84. #hook .left{
  85. left: 0;
  86. background-image: url("../image/left.png");
  87. -o-transform-origin: right top;
  88. -ms-transform-origin: right top;
  89. -moz-transform-origin: right top;
  90. -webkit-transform-origin: right top;
  91. transform-origin: right top;
  92. transform: rotate(-20deg);
  93. }
  94. #hook .right{
  95. right: 0;
  96. background-image: url("../image/right.png");
  97. -o-transform-origin: left top;
  98. -ms-transform-origin: left top;
  99. -moz-transform-origin: left top;
  100. -webkit-transform-origin: left top;
  101. transform-origin: left top;
  102. -o-transform: rotate(20deg);
  103. -ms-transform: rotate(20deg);
  104. -moz-transform: rotate(20deg);
  105. -webkit-transform: rotate(20deg);
  106. transform: rotate(20deg);
  107. }
  108. #hook .up{
  109. -o-animation: up .5s linear forwards;
  110. -ms-animation: up .5s linear forwards;
  111. -moz-animation: up .5s linear forwards;
  112. -webkit-animation: up .5s linear forwards;
  113. animation: up .5s linear forwards;
  114. }
  115. @keyframes up{
  116. 100%{
  117. -o-transform: rotate(0deg);
  118. -ms-transform: rotate(0deg);
  119. -moz-transform: rotate(0deg);
  120. -webkit-transform: rotate(0deg);
  121. transform: rotate(0deg);
  122. }
  123. }
  124. /*传送带*/
  125. .behind,.front{
  126. overflow-x: hidden;
  127. position: relative;
  128. left: 50%;
  129. top: 32%;
  130. margin: -86/@rem 0 0 -310/@rem;
  131. width: 620/@rem;
  132. height: 150/@rem;
  133. background-image: url("../image/behind.png");
  134. background-position: left bottom;
  135. }
  136. .front{
  137. top: 43%;
  138. width: 620/@rem;
  139. height: 215/@rem;
  140. background-image: url("../image/front.png");
  141. }
  142. .behind ul,.front ul{
  143. width: 14rem;
  144. }
  145. .front ul{
  146. position: absolute;
  147. right: 0;
  148. }
  149. .behind li{
  150. position: relative;
  151. float: left;
  152. height: 105/@rem;
  153. }
  154. .front li{
  155. position: relative;
  156. float: right;
  157. height: 156/@rem;
  158. }
  159. .behind img{
  160. position: absolute;
  161. width: 91/@rem;
  162. height: 102/@rem;
  163. }
  164. .front img{
  165. position: absolute;
  166. right: 0;
  167. width: 139/@rem;
  168. height: 156/@rem;
  169. }
  170. .box h3{
  171. margin: 355/@rem auto 18/@rem;
  172. width: 286/@rem;
  173. height: 52/@rem;
  174. background-color: #ff9d1b;
  175. text-align: center;
  176. line-height: 52/@rem;
  177. font-size: 20/@rem;
  178. font-weight: normal;
  179. color: #bc5700;
  180. border-radius: 26/@rem;
  181. }
  182. /*按钮区域*/
  183. .box-btn{
  184. width: 100%;
  185. height: 139/@rem;
  186. }
  187. .box-btn li{
  188. float: left;
  189. }
  190. .box-btn li:nth-child(1){
  191. width: 157/@rem;
  192. height: 139/@rem;
  193. background-image: url("../image/coin1.png");
  194. -o-transform-origin: center bottom;
  195. -ms-transform-origin: center bottom;
  196. -moz-transform-origin: center bottom;
  197. -webkit-transform-origin: center bottom;
  198. transform-origin: center bottom;
  199. -o-animation: shak 3s ease-in-out infinite alternate;
  200. -ms-animation: shak 3s ease-in-out infinite alternate;
  201. -moz-animation: shak 3s ease-in-out infinite alternate;
  202. -webkit-animation: shak 3s ease-in-out infinite alternate;
  203. animation: shak 3s ease-in-out infinite alternate;
  204. }
  205. @keyframes shak{
  206. 0%,100%{
  207. -o-transform: rotate(0deg);
  208. -ms-transform: rotate(0deg);
  209. -moz-transform: rotate(0deg);
  210. -webkit-transform: rotate(0deg);
  211. transform: rotate(0deg);
  212. }
  213. 20%,60%{
  214. -o-transform: rotate(-5deg);
  215. -ms-transform: rotate(-5deg);
  216. -moz-transform: rotate(-5deg);
  217. -webkit-transform: rotate(-5deg);
  218. transform: rotate(-5deg);
  219. }
  220. 40%,80%{
  221. -o-transform: rotate(5deg);
  222. -ms-transform: rotate(5deg);
  223. -moz-transform: rotate(5deg);
  224. -webkit-transform: rotate(5deg);
  225. transform: rotate(5deg);
  226. }
  227. }
  228. .box-btn li:nth-child(2){
  229. margin: 0 60/@rem;
  230. width: 306/@rem;
  231. height: 103/@rem;
  232. background-image: url("../image/start.png");
  233. }
  234. .box-btn li:nth-child(3){
  235. width: 165/@rem;
  236. height: 125/@rem;
  237. background-image: url("../image/coin2.png");
  238. }
  239. /*奖品展示*/
  240. .awards {
  241. position: static;
  242. margin: 96/@rem auto;
  243. width: 690/@rem;
  244. height: 222/@rem;
  245. background-image: url("../image/rect.png");
  246. }
  247. .awards .swiper-container{
  248. overflow: hidden;
  249. margin: 16/@rem auto;
  250. padding: 22/@rem 0;
  251. width: 658/@rem;
  252. height: 146/@rem;
  253. background-color: #f5ae4f;
  254. box-shadow: 0 20/@rem 20/@rem rgba(248, 131, 23, .7) inset;
  255. border-radius: 16/@rem;
  256. }
  257. /*规则弹窗背景色*/
  258. #mask-rule .box-rule{
  259. background-color: #fe5c51;
  260. }
  261. #mask-rule .box-rule .star{
  262. background-image: url("../../common/image/rule/star2.png");
  263. }