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.

533 lines
8.2 KiB

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