C端小程序
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

368 líneas
5.3 KiB

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