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.

348 line
5.0 KiB

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