C端小程序
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.

cardUse.wxss 5.7 KiB

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