C端小程序
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

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