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.

447 lines
6.9 KiB

  1. @import "../../app.wxss";
  2. page {
  3. background: #f5f5f5;
  4. }
  5. .coupons {
  6. width: 100%;
  7. background: #fff;
  8. position: relative;
  9. }
  10. .coupons-body {
  11. flex: 1;
  12. /* overflow: auto; */
  13. }
  14. .banner {
  15. position: relative;
  16. width: 750rpx;
  17. height: 280rpx;
  18. overflow: hidden;
  19. }
  20. .banner image {
  21. width: 100%;
  22. display: block;
  23. }
  24. .banner text {
  25. position: absolute;
  26. right: 0;
  27. top: 0;
  28. bottom: 0;
  29. margin: auto;
  30. width: 122rpx;
  31. height: 48rpx;
  32. line-height: 48rpx;
  33. opacity: 0.8;
  34. background: #000;
  35. font-size: 24rpx;
  36. color: #FFFFFF;
  37. letter-spacing: 0;
  38. text-indent: .5em;
  39. border-top-left-radius: 50rpx;
  40. border-bottom-left-radius: 50rpx;
  41. }
  42. .coupons_info {
  43. width: 92%;
  44. height: 120rpx;
  45. display: flex;
  46. justify-content: space-between;
  47. padding: 0 4% 4%;
  48. background: #fff;
  49. }
  50. .coupons_info view {
  51. display: flex;
  52. flex-direction: column;
  53. }
  54. .coupons_info view:nth-child(1) text {
  55. font-size: 30rpx;
  56. margin-top: 10%;
  57. }
  58. .coupons_info view:nth-child(1) text:nth-child(1) text {
  59. color: #ff3434;
  60. font-size: 24rpx;
  61. border: 1px solid #ff3434;
  62. border-radius: 6rpx;
  63. margin-left: 2%;
  64. padding: 0 5rpx;
  65. }
  66. .coupons_info view:nth-child(1) text:nth-child(2),
  67. .coupons_info view:nth-child(1) text:nth-child(3) {
  68. color: #b8b8b8;
  69. font-size: 24rpx;
  70. margin-top: 4%;
  71. }
  72. .coupons_info view:nth-child(1) text:nth-child(2) text,
  73. .coupons_info view:nth-child(1) text:nth-child(3) text {
  74. color: #ff3434;
  75. font-size: 24rpx;
  76. }
  77. .coupons_info view:nth-child(2) text:nth-child(1) {
  78. font-size: 36rpx;
  79. color: #ff3434;
  80. margin-top: 40rpx;
  81. font-weight: bold;
  82. }
  83. .coupons_info view:nth-child(2) text:nth-child(2) {
  84. font-size: 24rpx;
  85. color: #b4b4b4;
  86. text-decoration: line-through;
  87. padding-left: 10rpx;
  88. padding-top: 4rpx;
  89. }
  90. navigator {
  91. display: block;
  92. padding: 0 24rpx 0;
  93. margin-bottom: 24rpx;
  94. }
  95. .contain {
  96. background: #f5f5f5;
  97. padding-top: 24rpx;
  98. }
  99. .posi {
  100. width: 92%;
  101. display: flex;
  102. flex-direction: column;
  103. padding: 0 4%;
  104. background: #fff;
  105. margin-top: 2%;
  106. }
  107. .posi>view:nth-child(2) {
  108. width: 100%;
  109. height: 87rpx;
  110. display: flex;
  111. justify-content: space-between;
  112. border-top: 1px solid #f6f6f6;
  113. line-height: 87rpx;
  114. }
  115. .posi>view:nth-child(2) text:nth-child(1) {
  116. font-size: 30rpx;
  117. color: #a9a9a9;
  118. }
  119. .posi>view:nth-child(2) text:nth-child(2) {
  120. font-size: 30rpx;
  121. color: #a9a9a9;
  122. }
  123. .posi_logo {
  124. width: 100%;
  125. height: 156rpx;
  126. display: flex;
  127. margin-top: 30rpx;
  128. }
  129. .posi_logo view:nth-child(1) {
  130. width: 126rpx;
  131. height: 126rpx;
  132. border-radius: 50%;
  133. overflow: hidden;
  134. flex: 2;
  135. }
  136. .posi_logo view:nth-child(1) image {
  137. width: 100%;
  138. height: 100%;
  139. }
  140. .posi_logo view:nth-child(2) {
  141. display: flex;
  142. flex-direction: column;
  143. flex: 8;
  144. padding-top: 20rpx;
  145. padding-left: 30rpx;
  146. }
  147. .posi_logo view:nth-child(2) text:nth-child(1) {
  148. font-size: 30rpx;
  149. }
  150. .posi_logo view:nth-child(2) text:nth-child(2) {
  151. font-size: 24rpx;
  152. color: #b8b8b8;
  153. padding-top: 10rpx;
  154. }
  155. .notes view:nth-child(1) {
  156. width: 92%;
  157. height: 87rpx;
  158. padding: 0 4%;
  159. line-height: 87rpx;
  160. background: #fff;
  161. /* border-top: 1rpx solid #f5f5f5; */
  162. }
  163. .notes view:nth-child(1) text {
  164. font-size: 30rpx;
  165. font-weight: bold;
  166. }
  167. .notes view:nth-child(2) {
  168. width: 92%;
  169. height: auto;
  170. padding: 0 4% 4%;
  171. background: #fff;
  172. /* border-bottom: 1rpx solid #f5f5f5; */
  173. display: flex;
  174. flex-direction: column;
  175. }
  176. .notes view:nth-child(2)>text {
  177. font-size: 28rpx;
  178. color: #a9a9a9;
  179. line-height: 45rpx;
  180. }
  181. .spot {
  182. width: 12rpx;
  183. height: 12rpx;
  184. display: inline-block;
  185. background: #a9a9a9;
  186. margin-right: 16rpx;
  187. position: relative;
  188. bottom: 4rpx;
  189. border-radius: 50%;
  190. }
  191. .buy-view {
  192. background: #fff;
  193. position: fixed;
  194. padding-top: 10rpx;
  195. height: 98rpx;
  196. bottom: 0rpx;
  197. left: 0;
  198. right: 0;
  199. }
  200. .buy {
  201. display: block;
  202. background: #00c0ff;
  203. height: 50rpx;
  204. width: 120rpx;
  205. margin: 0 auto;
  206. color: #fff;
  207. font-size: 28rpx;
  208. line-height: 50rpx;
  209. text-align: center;
  210. border-radius: 50rpx;
  211. }
  212. .coupons1-btn-gm {
  213. background: #00c0ff !important;
  214. border-radius: 10rpx !important;
  215. margin: 0 !important;
  216. padding: 0 !important;
  217. font-family: PingFangSC-Semibold;
  218. font-size: 28rpx;
  219. color: #fff !important;
  220. letter-spacing: 0;
  221. height: 50rpx !important;
  222. width: 138rpx !important;
  223. line-height: 50rpx !important;
  224. }
  225. .coupons1 {
  226. flex-direction: row;
  227. display: flex;
  228. padding: 24rpx;
  229. position: relative;
  230. height: 152rpx;
  231. background: #fff;
  232. border-radius: 16rpx;
  233. box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
  234. }
  235. /* .coupons1-border {
  236. height: 1rpx;
  237. left: 30rpx;
  238. right: 30rpx;
  239. background: #f5f5f5;
  240. position: absolute;
  241. bottom: 0;
  242. } */
  243. .coupons1-img {
  244. width: 160rpx;
  245. height: 160rpx;
  246. overflow: hidden;
  247. border-radius: 10rpx;
  248. }
  249. .coupons1-img image {
  250. display: block;
  251. width: 100%;
  252. height: 100%;
  253. }
  254. .coupons1-info {
  255. padding-left: 20rpx;
  256. }
  257. .coupons1-info-name {
  258. font-size: 28rpx;
  259. color: #000;
  260. letter-spacing: 0;
  261. line-height: 38rpx;
  262. }
  263. .i {
  264. font-size: 20rpx;
  265. font-style: normal;
  266. }
  267. .coupons1-info-price-p {
  268. display: inline-block;
  269. font-size: 36rpx;
  270. color: #f96563;
  271. line-height: 50rpx;
  272. }
  273. .tit {
  274. font-size: 28rpx;
  275. color: #000;
  276. letter-spacing: 0;
  277. }
  278. .coupons1-info-price-o {
  279. display: block;
  280. text-align: center;
  281. font-size: 26rpx;
  282. color: #b4b4b4;
  283. letter-spacing: 0.96rpx;
  284. text-decoration: line-through;
  285. line-height: 24rpx;
  286. }
  287. .coupons1-info-distance {
  288. font-size: 22rpx;
  289. color: #c0c0c0;
  290. letter-spacing: 0;
  291. padding-bottom: 10rpx;
  292. line-height: 30rpx;
  293. }
  294. .coupons1-info-address {
  295. font-size: 22rpx;
  296. color: #585858;
  297. letter-spacing: 0;
  298. line-height: 30rpx;
  299. }
  300. .coupons1-btn {
  301. position: absolute;
  302. width: 120rpx;
  303. top: 61rpx;
  304. right: 30rpx;
  305. }
  306. .coupons1-btn-gm {
  307. background: #00c0ff !important;
  308. border-radius: 10rpx !important;
  309. margin: 0 !important;
  310. padding: 0 !important;
  311. font-family: PingFangSC-Semibold;
  312. font-size: 28rpx;
  313. color: #fff !important;
  314. letter-spacing: 0;
  315. height: 50rpx !important;
  316. width: 138rpx !important;
  317. line-height: 50rpx !important;
  318. }
  319. .subtitle {
  320. font-size: 24rpx;
  321. font-weight: 100;
  322. text-align: left;
  323. overflow: hidden;
  324. white-space: nowrap;
  325. text-overflow: ellipsis;
  326. width: 300rpx;
  327. height: 33rpx;
  328. color: #919191;
  329. letter-spacing: 0;
  330. }
  331. .coupons1-info-manjian {
  332. color: #fa7c7a;
  333. font-size: 20rpx;
  334. line-height: 34rpx;
  335. display: inline-block;
  336. }
  337. /**上拉加载更多**/
  338. .userinfo {
  339. display: flex;
  340. flex-direction: column;
  341. align-items: center;
  342. }
  343. .userinfo-avatar {
  344. width: 128rpx;
  345. height: 128rpx;
  346. margin: 20rpx;
  347. border-radius: 50%;
  348. }
  349. .userinfo-nickname {
  350. color: #aaa;
  351. }
  352. .sy {
  353. display: block;
  354. text-align: center;
  355. width: 120rpx !important;
  356. }
  357. .usermotto {
  358. margin-top: 200px;
  359. }
  360. /**/
  361. scroll-view {
  362. width: 100%;
  363. }
  364. .item {
  365. width: 90%;
  366. height: 300rpx;
  367. margin: 20rpx auto;
  368. background: brown;
  369. overflow: hidden;
  370. }
  371. .item .img {
  372. width: 430rpx;
  373. margin-right: 20rpx;
  374. float: left;
  375. }
  376. .title {
  377. font-size: 30rpx;
  378. display: block;
  379. margin: 30rpx auto;
  380. }
  381. .description {
  382. font-size: 26rpx;
  383. line-height: 15rpx;
  384. }