C端小程序
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

355 rader
5.1 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: 38rpx auto 0;
  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. /* .fl {
  84. float: left;
  85. }
  86. .fr {
  87. float: right;
  88. } */
  89. ..coupon_detail {
  90. position: relative;
  91. }
  92. .coupon_detail .wmfl {
  93. position: absolute;
  94. width: 120rpx;
  95. height: 120rpx;
  96. left: 0;
  97. right: 0;
  98. margin: auto;
  99. top: 5rpx;
  100. border-radius: 50%;
  101. overflow: hidden;
  102. }
  103. .coupon_detail image {
  104. display: block;
  105. width: 100%;
  106. height: 100%;
  107. }
  108. .coupon_detail .fr {
  109. width: 100%;
  110. text-align: center;
  111. }
  112. .coupon_detail .title {
  113. font-size: 32rpx;
  114. color: #1f2d3d;
  115. letter-spacing: 0;
  116. text-align: center;
  117. display: block;
  118. padding-top: 92rpx;
  119. line-height: 45rpx;
  120. }
  121. .line {
  122. height: 10rpx;
  123. display: block;
  124. width: 100%;
  125. margin-top: 20rpx;
  126. }
  127. .time {
  128. font-size: 26rpx;
  129. color: #999;
  130. letter-spacing: 0;
  131. text-align: center;
  132. line-height: 37rpx;
  133. padding: 0 10rpx;
  134. }
  135. .time text {
  136. font-size: 26rpx;
  137. color: red;
  138. }
  139. .money text {
  140. color: red;
  141. font-size: 36rpx;
  142. }
  143. .money del {
  144. color: #999;
  145. font-size: 26rpx;
  146. text-decoration: line-through;
  147. margin-left: 20rpx;
  148. }
  149. .clearfix:after {
  150. content: ".";
  151. display: block;
  152. height: 0;
  153. clear: both;
  154. visibility: hidden;
  155. }
  156. .timevalidity {
  157. text-align: center;
  158. }
  159. .timevalidity text:nth-of-type(1) {
  160. font-size: 22rpx;
  161. color: #999;
  162. letter-spacing: 0;
  163. text-align: left;
  164. }
  165. .timevalidity text:nth-of-type(2) {
  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. z-index: 100;
  184. }
  185. .shiji {
  186. font-size: 24rpx !important;
  187. color: #919191 !important;
  188. letter-spacing: 0;
  189. }
  190. .posi_logo view:nth-child(1) {
  191. width: 126rpx;
  192. height: 126rpx;
  193. overflow: hidden;
  194. flex: 2;
  195. border: 2rpx solid #e7e7e7;
  196. border-radius: 16rpx;
  197. }
  198. .posi_logo view:nth-child(1) image {
  199. width: 100%;
  200. height: 100%;
  201. }
  202. .posi_logo view:nth-child(2) {
  203. position: relative;
  204. z-index: 100;
  205. display: flex;
  206. flex-direction: column;
  207. flex: 8;
  208. padding-left: 30rpx;
  209. }
  210. .posi_logo view:nth-child(2) text:nth-child(1) {
  211. font-size: 30rpx;
  212. width: 320rpx;
  213. white-space: nowrap;
  214. text-overflow: ellipsis;
  215. overflow: hidden;
  216. }
  217. .posi_logo view:nth-child(2) text:nth-child(2) {
  218. font-size: 24rpx;
  219. color: #b8b8b8;
  220. padding-top: 10rpx;
  221. width: 386rpx;
  222. white-space: wrap;
  223. text-overflow: ellipsis;
  224. overflow: hidden;
  225. height: 78rpx;
  226. }
  227. .tit {
  228. padding: 53rpx 0 0;
  229. text-indent: 30rpx;
  230. font-size: 24rpx;
  231. color: #919191;
  232. letter-spacing: 0;
  233. }
  234. .tel {
  235. position: absolute;
  236. right: 30rpx;
  237. top: 0;
  238. bottom: 0;
  239. margin: auto;
  240. width: 50rpx;
  241. height: 50rpx;
  242. z-index: 1000000;
  243. }
  244. .notes view:nth-child(1) {
  245. width: 92%;
  246. height: 87rpx;
  247. padding: 0 4%;
  248. line-height: 87rpx;
  249. background: #fff;
  250. }
  251. .notes view:nth-child(1) text {
  252. font-size: 24rpx;
  253. color: #919191;
  254. letter-spacing: 0;
  255. }
  256. .notes view:nth-child(2) {
  257. width: 92%;
  258. padding: 0 4%;
  259. background: #fff;
  260. display: flex;
  261. flex-direction: column;
  262. padding-top: 2%;
  263. }
  264. .notes view:nth-child(2) > text {
  265. font-size: 24rpx;
  266. color: #333;
  267. letter-spacing: 0;
  268. line-height: 42rpx;
  269. }
  270. .notes {
  271. border-bottom-left-radius: 16rpx;
  272. border-bottom-right-radius: 16rpx;
  273. padding-bottom: 30rpx;
  274. }
  275. .note view {
  276. height: 48rpx;
  277. line-height: 48rpx;
  278. }
  279. .note view text {
  280. display: inline-block;
  281. }
  282. .note text:nth-of-type(1) {
  283. width: 22%;
  284. text-indent: 30rpx;
  285. text-align: left;
  286. font-size: 24rpx;
  287. color: #333;
  288. letter-spacing: 1.16rpx;
  289. }
  290. .note text:nth-of-type(2) {
  291. width: 67%;
  292. font-size: 24rpx;
  293. color: #333;
  294. letter-spacing: 1.16rpx;
  295. }
  296. .manjian {
  297. margin-left: 26rpx;
  298. color: #666 !important;
  299. font-size: 26rpx !important;
  300. }
  301. .moneys {
  302. font-size: 40rpx !important;
  303. color: #ff4949 !important;
  304. letter-spacing: 0;
  305. text-align: right;
  306. }