pay_lottery.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. @charset "UTF-8";
  2. /* 颜色变量 */
  3. /* 行为相关颜色 */
  4. /* 文字基本颜色 */
  5. /* 背景颜色 */
  6. /* 边框颜色 */
  7. /* 尺寸变量 */
  8. /* 文字尺寸 */
  9. /* 图片尺寸 */
  10. /* Border Radius */
  11. /* 水平间距 */
  12. /* 垂直间距 */
  13. /* 透明度 */
  14. /* 文章场景相关 */
  15. li {
  16. list-style: none;
  17. }
  18. ul,
  19. li {
  20. margin: 0;
  21. padding: 0;
  22. }
  23. .lottery_container {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .grid_wrap {
  28. width: 100%;
  29. height: 100%;
  30. position: relative;
  31. }
  32. .grid_wrap .lottery_wrap_border {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. width: 100%;
  37. height: 100%;
  38. }
  39. .grid_wrap .lottery_wrap_border ul {
  40. position: absolute;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. }
  45. .grid_wrap .lottery_wrap_border ul li {
  46. border-radius: 50%;
  47. width: 17upx;
  48. height: 17upx;
  49. background-color: #bce0e9;
  50. }
  51. .grid_wrap .lottery_wrap_border ul li:nth-child(even) {
  52. width: 24upx;
  53. height: 24upx;
  54. background-color: #f5fbc8;
  55. }
  56. .grid_wrap .lottery_wrap_border ul:nth-child(odd) {
  57. width: 100%;
  58. height: 35upx;
  59. left: 0;
  60. right: 0;
  61. flex-direction: row;
  62. }
  63. .grid_wrap .lottery_wrap_border ul:nth-child(odd) li {
  64. margin: 0 10upx;
  65. }
  66. .grid_wrap .lottery_wrap_border ul:nth-child(even) {
  67. width: 35upx;
  68. height: 100%;
  69. top: 0;
  70. bottom: 0;
  71. flex-direction: column;
  72. }
  73. .grid_wrap .lottery_wrap_border ul:nth-child(even) li {
  74. margin: 10upx 0;
  75. }
  76. .grid_wrap .lottery_wrap_border ul:nth-child(3) {
  77. bottom: 0;
  78. }
  79. .grid_wrap .lottery_wrap_border ul:nth-child(4) {
  80. right: 0;
  81. }
  82. .grid_wrap .lottery_wrap_border ul:nth-child(1) li:nth-child(odd),
  83. .grid_wrap .lottery_wrap_border ul:nth-child(4) li:nth-child(odd) {
  84. animation: blink_large 1s linear infinite;
  85. }
  86. .grid_wrap .lottery_wrap_border ul:nth-child(1) li:nth-child(even),
  87. .grid_wrap .lottery_wrap_border ul:nth-child(4) li:nth-child(even) {
  88. animation: blink_small 1s linear infinite;
  89. }
  90. .grid_wrap .lottery_wrap_border ul:nth-child(3) li:nth-child(even),
  91. .grid_wrap .lottery_wrap_border ul:nth-child(2) li:nth-child(even) {
  92. width: 17upx;
  93. height: 17upx;
  94. background-color: #bce0e9;
  95. animation: blink_large 1s linear infinite;
  96. }
  97. .grid_wrap .lottery_wrap_border ul:nth-child(3) li:nth-child(odd),
  98. .grid_wrap .lottery_wrap_border ul:nth-child(2) li:nth-child(odd) {
  99. width: 24upx;
  100. height: 24upx;
  101. background-color: #f5fbc8;
  102. animation: blink_small 1s linear infinite;
  103. }
  104. .grid_wrap .lottery_wrap {
  105. width: 100%;
  106. height: 100%;
  107. font-size: 14upx;
  108. position: absolute;
  109. top: 50%;
  110. left: 50%;
  111. transform: translate(-50%, -50%);
  112. z-index: 1;
  113. }
  114. .grid_wrap .lottery_wrap .lottery_grid {
  115. width: 100%;
  116. height: 424rpx;
  117. position: relative;
  118. }
  119. .grid_wrap .lottery_wrap .lottery_grid li {
  120. width: 32%;
  121. height: 130rpx;
  122. display: flex;
  123. flex-direction: column;
  124. align-items: center;
  125. justify-content: center;
  126. float: left;
  127. position: absolute;
  128. border-radius: 16rpx;
  129. color: #E74435;
  130. white-space: nowrap;
  131. overflow: hidden;
  132. text-overflow: ellipsis;
  133. font-size: 20upx;
  134. /* margin: 4px; */
  135. padding: 4px;
  136. background: #FEF6E7;
  137. }
  138. .grid_wrap .lottery_wrap .lottery_grid li .in_line {
  139. border-radius: 12rpx;
  140. width: 100%;
  141. height: 130rpx;
  142. display: flex;
  143. flex-direction: column;
  144. justify-content: center;
  145. align-items: center;
  146. text-overflow: ellipsis;
  147. white-space: nowrap;
  148. overflow: hidden;
  149. padding: 0 4rpx;
  150. }
  151. .grid_wrap .lottery_wrap .lottery_grid li .grid_img {
  152. width: 72rpx;
  153. height: 72rpx;
  154. }
  155. .grid_wrap .lottery_wrap .lottery_grid .active {
  156. background: rgba(255,125,0,0.2) !important;
  157. color: #E93323;
  158. }
  159. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(1) {
  160. left: 1%;
  161. top: 1%;
  162. }
  163. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(2) {
  164. left: 34%;
  165. top: 1%;
  166. }
  167. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(3) {
  168. left: 67%;
  169. top: 1%;
  170. }
  171. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(4) {
  172. left: 67%;
  173. top: 34%;
  174. }
  175. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(5) {
  176. left: 67%;
  177. top: 67%;
  178. }
  179. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(6) {
  180. left: 34%;
  181. top: 67%;
  182. }
  183. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(7) {
  184. left: 1%;
  185. top: 67%;
  186. }
  187. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(8) {
  188. left: 1%;
  189. top: 34%;
  190. }
  191. .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9) {
  192. left: 34%;
  193. top: 34%;
  194. cursor: pointer;
  195. color: #ffffff;
  196. background: linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%);
  197. }
  198. @keyframes blink_large {
  199. to {
  200. width: 24upx;
  201. height: 24upx;
  202. background-color: #f5fbc8;
  203. }
  204. }
  205. @keyframes blink_small {
  206. to {
  207. width: 17upx;
  208. height: 17upx;
  209. background-color: #bce0e9;
  210. }
  211. }
  212. /*# sourceMappingURL=SJ-LotteryDraw.css.map */