C端小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

346 行
4.9 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. }
  10. .panel, .zhuangtai image {
  11. position: relative;
  12. width: 600rpx;
  13. display: block;
  14. border-radius: 10rpx;
  15. margin: 38rpx auto 0;
  16. padding: 0;
  17. z-index: 10000000000;
  18. }
  19. .pane2 {
  20. background: #fff;
  21. opacity: 0.6;
  22. }
  23. .pane2 image {
  24. width: 500rpx;
  25. display: block;
  26. margin: 40rpx auto 0;
  27. }
  28. .buy {
  29. background: #fff;
  30. height: 88rpx;
  31. width: 98%;
  32. color: #7e7e7e;
  33. line-height: 88rpx;
  34. border-radius: 16rpx;
  35. border: 1px solid #eee;
  36. }
  37. .barcode {
  38. height: 100rpx;
  39. width: 510rpx;
  40. margin: 0 auto;
  41. }
  42. .barnum {
  43. background: #fff;
  44. height: 88rpx;
  45. width: 100%;
  46. margin: 0 auto;
  47. line-height: 88rpx;
  48. border: 2rpx solid #ccc;
  49. border-radius: 10px;
  50. font-size: 36rpx;
  51. color: #333;
  52. letter-spacing: 0;
  53. text-align: center;
  54. }
  55. .barnum text {
  56. display: inline-block;
  57. vertical-align: top;
  58. font-size: 24rpx;
  59. color: #999;
  60. letter-spacing: 0;
  61. margin-right: 6rpx;
  62. }
  63. .barcode > canvas {
  64. width: 510rpx;
  65. height: 100rpx;
  66. }
  67. .qrcode {
  68. position: relative;
  69. height: 350rpx;
  70. width: 350rpx;
  71. display: flex;
  72. flex-direction: column;
  73. justify-content: flex-end;
  74. align-items: center;
  75. margin: 0 auto;
  76. }
  77. .qrcode > canvas {
  78. width: 350rpx;
  79. height: 350rpx;
  80. }
  81. /* .fl {
  82. float: left;
  83. }
  84. .fr {
  85. float: right;
  86. } */
  87. ..coupon_detail {
  88. position: relative;
  89. }
  90. .coupon_detail .wmfl {
  91. position: absolute;
  92. width: 120rpx;
  93. height: 120rpx;
  94. left: 0;
  95. right: 0;
  96. margin: auto;
  97. top: 5rpx;
  98. border-radius: 50%;
  99. overflow: hidden;
  100. }
  101. .coupon_detail image {
  102. display: block;
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .coupon_detail .fr {
  107. width: 100%;
  108. text-align: center;
  109. }
  110. .coupon_detail .title {
  111. font-size: 32rpx;
  112. color: #1f2d3d;
  113. letter-spacing: 0;
  114. text-align: center;
  115. display: block;
  116. padding-top: 92rpx;
  117. line-height: 45rpx;
  118. }
  119. .line{
  120. height: 10rpx;
  121. display: block;
  122. width: 100%;
  123. margin-top: 20rpx;
  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: 16rpx;
  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 0;
  221. text-indent: 30rpx;
  222. font-size: 24rpx;
  223. color: #919191;
  224. letter-spacing: 0;
  225. }
  226. .tel {
  227. position: absolute;
  228. right: 30rpx;
  229. top: 0;
  230. bottom: 0;
  231. margin: auto;
  232. width: 50rpx;
  233. height: 50rpx;
  234. z-index: 1000000;
  235. }
  236. .notes view:nth-child(1) {
  237. width: 92%;
  238. height: 87rpx;
  239. padding: 0 4%;
  240. line-height: 87rpx;
  241. background: #fff;
  242. }
  243. .notes view:nth-child(1) text {
  244. font-size: 24rpx;
  245. color: #919191;
  246. letter-spacing: 0;
  247. }
  248. .notes view:nth-child(2) {
  249. width: 92%;
  250. padding: 0 4%;
  251. background: #fff;
  252. display: flex;
  253. flex-direction: column;
  254. padding-top: 2%;
  255. }
  256. .notes view:nth-child(2) > text {
  257. font-size: 24rpx;
  258. color: #333;
  259. letter-spacing: 0;
  260. line-height: 42rpx;
  261. }
  262. .notes {
  263. border-bottom-left-radius: 16rpx;
  264. border-bottom-right-radius: 16rpx;
  265. padding-bottom: 30rpx;
  266. }
  267. .note view {
  268. height: 48rpx;
  269. line-height: 48rpx;
  270. }
  271. .note view text {
  272. display: inline-block;
  273. }
  274. .note text:nth-of-type(1) {
  275. width: 22%;
  276. text-indent: 30rpx;
  277. text-align: left;
  278. font-size: 24rpx;
  279. color: #333;
  280. letter-spacing: 1.16rpx;
  281. }
  282. .note text:nth-of-type(2) {
  283. width: 67%;
  284. font-size: 24rpx;
  285. color: #333;
  286. letter-spacing: 1.16rpx;
  287. }
  288. .manjian {
  289. margin-left: 26rpx;
  290. color: #666 !important;
  291. font-size: 26rpx !important;
  292. }
  293. .moneys {
  294. font-size: 40rpx !important;
  295. color: #ff4949 !important;
  296. letter-spacing: 0;
  297. text-align: right;
  298. }