C端小程序
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

353 строки
5.4 KiB

  1. .box{
  2. height: 100%;
  3. background: linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  4. }
  5. .container {
  6. background: #fff;
  7. width: 92%;
  8. margin: 8% auto 6%;
  9. border-radius: 16rpx;
  10. }
  11. .coedTiem{
  12. text-align: center;
  13. color: rgba(253,131,45,1);
  14. margin-bottom: 10rpx;
  15. }
  16. page {
  17. background: linear-gradient(180deg,rgba(253,131,45,1) 0%,rgba(254,74,22,1) 100%);
  18. height: auto !important;
  19. }
  20. .zhuangtai{
  21. margin-bottom: 20rpx;
  22. }
  23. .panel, .zhuangtai image {
  24. position: relative;
  25. width: 600rpx;
  26. display: block;
  27. border-radius: 10rpx;
  28. margin: 0 auto;
  29. padding: 0;
  30. z-index: 10000;
  31. }
  32. .panel{
  33. position: relative;
  34. }
  35. .pane2 {
  36. background: #fff;
  37. opacity: 0.6;
  38. }
  39. .pane2 image {
  40. width: 500rpx;
  41. display: block;
  42. margin: 40rpx auto 0;
  43. }
  44. .buy {
  45. background: #fff;
  46. height: 88rpx;
  47. width: 98%;
  48. color: #7e7e7e;
  49. line-height: 88rpx;
  50. border-radius: 16rpx;
  51. border: 1px solid #eee;
  52. }
  53. .barcode {
  54. height: 100rpx;
  55. width: 510rpx;
  56. margin: 0 auto;
  57. }
  58. .barnum{
  59. background: #fff;
  60. height: 88rpx;
  61. width: 600rpx;
  62. margin: 0 auto;
  63. line-height: 88rpx;
  64. border: 2rpx solid #ccc;
  65. border-radius: 10px;
  66. font-size: 36rpx;
  67. color: #333;
  68. letter-spacing: 0;
  69. text-align: center;
  70. overflow: hidden;
  71. }
  72. .barnumtext{
  73. float: left;
  74. margin-left: 20rpx;
  75. font-size: 30rpx;
  76. }
  77. .barnumImg{
  78. float: left;
  79. height: 40rpx;
  80. width: 40rpx !important;
  81. margin: 24rpx 20rpx !important;
  82. }
  83. .barnumtext::before{
  84. content: "优惠券码:";
  85. font-size: 24rpx;
  86. color: #999;
  87. }
  88. .barcode > canvas {
  89. width: 510rpx;
  90. height: 100rpx;
  91. }
  92. .qrcode {
  93. position: relative;
  94. height: 350rpx;
  95. width: 350rpx;
  96. display: flex;
  97. flex-direction: column;
  98. justify-content: flex-end;
  99. align-items: center;
  100. margin: 0 auto;
  101. }
  102. .qrcode > canvas {
  103. width: 350rpx;
  104. height: 350rpx;
  105. }
  106. .coupon_detail {
  107. position: relative;
  108. }
  109. .coupon_detail .wmfl {
  110. position: absolute;
  111. width: 120rpx;
  112. height: 120rpx;
  113. left: 0;
  114. right: 0;
  115. margin: auto;
  116. top: -50rpx;
  117. border-radius: 50%;
  118. overflow: hidden;
  119. }
  120. .coupon_detail image {
  121. display: block;
  122. width: 100%;
  123. height: 100%;
  124. }
  125. .coupon_detail .fr {
  126. width: 100%;
  127. text-align: center;
  128. }
  129. .coupon_detail .title {
  130. font-size: 32rpx;
  131. color: #1f2d3d;
  132. letter-spacing: 0;
  133. text-align: center;
  134. display: block;
  135. padding-top: 92rpx;
  136. line-height: 45rpx;
  137. }
  138. .line {
  139. height: 10rpx;
  140. display: block;
  141. width: 100%;
  142. margin-top: 20rpx;
  143. }
  144. .time {
  145. font-size: 26rpx;
  146. color: #999;
  147. letter-spacing: 0;
  148. text-align: center;
  149. line-height: 37rpx;
  150. padding: 0 10rpx;
  151. }
  152. .time text {
  153. font-size: 26rpx;
  154. color: red;
  155. }
  156. .money text {
  157. color: red;
  158. }
  159. .money del {
  160. color: #999;
  161. font-size: 26rpx;
  162. text-decoration: line-through;
  163. margin-left: 20rpx;
  164. }
  165. .clearfix:after {
  166. content: ".";
  167. display: block;
  168. height: 0;
  169. clear: both;
  170. visibility: hidden;
  171. }
  172. .timevalidity {
  173. text-align: center;
  174. }
  175. .timevalidity text:nth-of-type(1) {
  176. font-size: 22rpx;
  177. color: #999;
  178. letter-spacing: 0;
  179. text-align: left;
  180. }
  181. .timevalidity text:nth-of-type(2) {
  182. font-size: 22rpx;
  183. color: #999;
  184. letter-spacing: 0;
  185. text-align: left;
  186. }
  187. .timevalidity text:nth-of-type(3) {
  188. font-size: 22rpx;
  189. color: #999;
  190. letter-spacing: 0;
  191. text-align: left;
  192. }
  193. .tit {
  194. padding: 53rpx 0 0;
  195. text-indent: 30rpx;
  196. font-size: 24rpx;
  197. color: #919191;
  198. letter-spacing: 0;
  199. }
  200. .notes view:nth-child(1) {
  201. width: 92%;
  202. height: 87rpx;
  203. padding: 0 4%;
  204. line-height: 87rpx;
  205. background: #fff;
  206. }
  207. .notes view:nth-child(1) text {
  208. font-size: 30rpx;
  209. color: #333;
  210. letter-spacing: 0;
  211. }
  212. .notes view:nth-child(2) {
  213. width: 92%;
  214. padding: 0 4%;
  215. background: #fff;
  216. display: flex;
  217. flex-direction: column;
  218. }
  219. .notes view:nth-child(2) > text {
  220. font-size: 24rpx;
  221. color: #333;
  222. letter-spacing: 0;
  223. line-height: 42rpx;
  224. }
  225. .notes {
  226. border-bottom-left-radius: 16rpx;
  227. border-bottom-right-radius: 16rpx;
  228. padding-bottom: 30rpx;
  229. }
  230. .note view {
  231. height: 48rpx;
  232. line-height: 48rpx;
  233. }
  234. .note view text {
  235. display: inline-block;
  236. }
  237. .note text:nth-of-type(1) {
  238. width: 22%;
  239. text-indent: 30rpx;
  240. text-align: left;
  241. font-size: 24rpx;
  242. color: #333;
  243. letter-spacing: 1.16rpx;
  244. }
  245. .note text:nth-of-type(2) {
  246. width: 67%;
  247. font-size: 24rpx;
  248. color: #333;
  249. letter-spacing: 1.16rpx;
  250. }
  251. .manjian {
  252. margin-left: 26rpx;
  253. color: #999!important;
  254. font-size: 26rpx !important;
  255. text-align: center;
  256. }
  257. .moneys {
  258. font-size: 40rpx !important;
  259. color: #ff4949 !important;
  260. letter-spacing: 0;
  261. text-align: right;
  262. }
  263. .game-entry{
  264. width: 690rpx;
  265. height: 140rpx;
  266. margin: 10rpx auto 0;
  267. }
  268. .gameimg{
  269. display: block;
  270. width: 100%;
  271. height: 140rpx;
  272. }
  273. .refund{
  274. display: inline-block;
  275. font-size: 26rpx!important;
  276. color: red!important;
  277. border: 1px solid red;
  278. padding: 3rpx;
  279. }
  280. .closeRq{
  281. position: absolute;
  282. width: 420rpx;
  283. height: 420rpx;
  284. line-height: 420rpx;
  285. text-align: center;
  286. background-color: rgba(0, 0, 0, 0.8);
  287. left: 50%; top: 42%;
  288. transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  289. z-index: 10000000;
  290. color: #fff;
  291. font-size: 38rpx;
  292. }
  293. .updataRqCode{
  294. width: 80rpx !important;
  295. height: 80rpx;
  296. margin-top: calc(50%-80rpx) !important;
  297. margin-left: calc(50%-80rpx) !important;
  298. display: inline-block !important;
  299. }
  300. .upDataRq{
  301. position: absolute;
  302. width: 100%;
  303. text-align: center;
  304. height: 80rpx;
  305. color: #fff ;
  306. top: 20%;
  307. left: 0;
  308. }
  309. /* .upDataRqImg{
  310. width: 40rpx !important;
  311. height: 40rpx;
  312. float: left;
  313. margin: 20rpx 0 0 20rpx !important;
  314. } */