C端小程序
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

558 lines
8.8 KiB

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