luckywheel.wxss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. page {
  2. background: #fa1d48;
  3. }
  4. .wrapper{
  5. background-image: url('http://e.eqbidding.com/web-cp-all/img_pm/img/1087633247090905088');
  6. background-size: 100%;
  7. background-repeat: no-repeat;
  8. }
  9. .header{
  10. padding: 1rem 0;
  11. text-align: center;
  12. }
  13. .header-title{
  14. display: block;
  15. padding: .4rem 0;
  16. font-size: 2rem;
  17. color: #fff;
  18. font-weight: 600;
  19. }
  20. .header-subtitle{
  21. color: #fff;
  22. font-size: 32rpx;
  23. }
  24. /* 转盘 */
  25. .canvas-container ul,
  26. .canvas-container li{
  27. margin: 0 ;
  28. padding: 0;
  29. list-style: none;
  30. }
  31. .canvas-container{
  32. margin: 0 auto;
  33. position: relative;
  34. width: 300px;
  35. height: 300px;
  36. border-radius: 50%;
  37. border: 2px solid #E44025;
  38. box-shadow: 0 2px 3px #333, 0 0 2px #000;
  39. }
  40. .canvas-content{
  41. position: absolute;
  42. left: 0;
  43. top: 0;
  44. z-index: 1;
  45. display: block;
  46. width: inherit;
  47. height: inherit;
  48. border-radius: inherit;
  49. background-clip: padding-box;
  50. background-color: #ffcb3f;
  51. background-image: url('http://e.eqbidding.com/web-cp-all/img_pm/img/1087631585571901440');
  52. background-size: 100%;
  53. }
  54. .canvas-element{
  55. width: inherit;
  56. height: inherit;
  57. border-radius: 50%;
  58. }
  59. .canvas-list{
  60. position: absolute;
  61. left: 0;
  62. top: 0;
  63. width: inherit;
  64. height: inherit;
  65. z-index: 2;
  66. }
  67. .canvas-item{
  68. position: absolute;
  69. left: 0;
  70. top: 0;
  71. width: 100%;
  72. height: 100%;
  73. color: #e4370e;
  74. font-weight: bold;
  75. text-shadow: 0 1px 1px rgba(255,255,255,.6);
  76. }
  77. .canvas-item-text{
  78. position: relative;
  79. display: block;
  80. padding-top: 35px;
  81. /* width: 50px; */
  82. margin: 0 auto;
  83. text-align: center;
  84. z-index: 999999;
  85. -webkit-transform-origin: 50% 150px;
  86. transform-origin: 50% 150px;
  87. }
  88. .canvas-btn{
  89. position: absolute;
  90. left: 110px;
  91. top: 110px;
  92. z-index: 999999;
  93. width: 80px;
  94. height: 80px;
  95. border-radius: 50%;
  96. color: #F4E9CC;
  97. background-color: #E44025;
  98. line-height: 80px;
  99. text-align: center;
  100. font-size: 20px;
  101. text-shadow: 0 -1px 1px rgba(0,0,0,.6);
  102. box-shadow: 0 3px 5px rgba(0,0,0,.6);
  103. text-decoration: none;
  104. }
  105. .canvas-btn::after{
  106. position: absolute;
  107. display: block;
  108. content: ' ';
  109. left: 10px;
  110. top: -46px;
  111. width: 0;
  112. height: 0;
  113. overflow: hidden;
  114. border-width: 30px;
  115. border-style: solid;
  116. border-color: transparent;
  117. border-bottom-color: #E44025;
  118. }
  119. .canvas-btn.disabled{
  120. pointer-events: none;
  121. background: #B07A7B;
  122. color: #ccc;
  123. }
  124. .canvas-btn.disabled::after{
  125. border-bottom-color: #B07A7B;
  126. }
  127. .gb-run{
  128. -webkit-transition: all 6s ease;
  129. transition: all 6s ease;
  130. }
  131. /* 查看中奖 */
  132. .main-container{
  133. margin: 1rem 2rem;
  134. }
  135. .main-container-rule{
  136. padding: 1rem 0;
  137. color: #fff;
  138. font-size: 30rpx;
  139. }
  140. .main-container-btn text {
  141. color: #fdf573;
  142. }
  143. .main-rule-title{
  144. display: block;
  145. padding: 4px 0;
  146. font-size: 16px;
  147. font-weight: bold;
  148. }
  149. .main-rule-item{
  150. display: block;
  151. padding: 2px 0;
  152. }
  153. .tip{
  154. color: #fff;
  155. font-size: 32rpx;
  156. text-align: center;
  157. }
  158. .phone{
  159. text-align: center;
  160. color: #fff;
  161. font-size: 30rpx;
  162. margin-bottom: 40rpx;
  163. }