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.

885 regels
13 KiB

  1. @import "../../../app.wxss";
  2. page {
  3. background: #f4f5f9;
  4. }
  5. button::after {
  6. border: none;
  7. }
  8. .coupons {
  9. width: 100%;
  10. position: relative;
  11. overflow: hidden;
  12. padding-bottom: 170rpx;
  13. background: #f4f5f9;
  14. }
  15. .banner {
  16. position: relative;
  17. width: 750rpx;
  18. height: 454rpx;
  19. }
  20. .banner swiper {
  21. width: 750rpx;
  22. height: 454rpx;
  23. }
  24. .banner image {
  25. width: 100%;
  26. height: 454rpx;
  27. }
  28. .moneyBox {
  29. font-size: 24rpx;
  30. overflow: hidden;
  31. }
  32. .earnest {
  33. float: left;
  34. font-size: 28rpx;
  35. color: #a6a6a6;
  36. }
  37. .earnestNum {
  38. float: left;
  39. color: red;
  40. font-size: 32rpx;
  41. }
  42. .final {
  43. float: left;
  44. font-size: 28rpx;
  45. color: #a6a6a6;
  46. margin-left: 30rpx;
  47. }
  48. .pickFinal_Box {
  49. overflow: hidden;
  50. }
  51. .earnestTime{
  52. font-size: 28rpx;
  53. color: #a6a6a6;
  54. }
  55. .finalTime{
  56. font-size: 28rpx;
  57. color: #a6a6a6;
  58. }
  59. .original {
  60. float: left;
  61. width: 100rpx;
  62. margin-left: 10rpx;
  63. text-decoration: line-through;
  64. color: #a6a6a6;
  65. font-size: 24rpx;
  66. line-height: 50rpx;
  67. }
  68. .dots {
  69. position: absolute;
  70. left: 0;
  71. right: 0;
  72. bottom: 50rpx;
  73. display: flex;
  74. justify-content: center;
  75. }
  76. .dot {
  77. margin: 0 8rpx;
  78. width: 14rpx;
  79. height: 14rpx;
  80. background: #fff;
  81. border-radius: 8rpx;
  82. transition: all 0.6s;
  83. }
  84. .dot.active {
  85. width: 24rpx;
  86. background: #f80;
  87. }
  88. .refound {
  89. border: 1rpx solid red;
  90. padding: 3rpx 0;
  91. display: block;
  92. width: 130rpx;
  93. text-align: center;
  94. margin-left: 14rpx;
  95. }
  96. .coupons_info {
  97. width: 92%;
  98. padding: 0 4%;
  99. background: #fff;
  100. border-top-left-radius: 20rpx;
  101. border-top-right-radius: 20rpx;
  102. /* margin-top: -25rpx; */
  103. }
  104. .fenxiang {
  105. position: absolute;
  106. right: 28rpx;
  107. top: 27rpx;
  108. display: flex;
  109. flex-direction: column;
  110. }
  111. .fenxiang image {
  112. width: 48rpx;
  113. height: 48rpx;
  114. margin: 0 auto;
  115. }
  116. .gift {
  117. color: #3c3c3c;
  118. font-size: 20rpx;
  119. margin: 0 auto;
  120. }
  121. .user-motto {
  122. width: 270rpx;
  123. border: 0;
  124. background: none;
  125. height: 260rpx;
  126. color: #fff;
  127. position: fixed;
  128. }
  129. .user-motto::after {
  130. border: none;
  131. }
  132. .title {
  133. display: block;
  134. font-weight: bold;
  135. font-size: 32rpx;
  136. color: #3c3c3c;
  137. letter-spacing: 1.09rpx;
  138. line-height: 45rpx;
  139. width: 542rpx;
  140. overflow: hidden;
  141. white-space: nowrap;
  142. text-overflow: ellipsis;
  143. padding-top: 30rpx;
  144. }
  145. .subTitle {
  146. display: block;
  147. width: 588rpx;
  148. /* height: 37rpx; */
  149. font-size: 26rpx;
  150. color: #a6a6a6;
  151. letter-spacing: 1.16rpx;
  152. overflow: hidden;
  153. white-space: nowrap;
  154. text-overflow: ellipsis;
  155. padding: 6rpx 0;
  156. }
  157. .rest {
  158. font-size: 24rpx;
  159. color: #919191;
  160. letter-spacing: 0;
  161. height: 50rpx;
  162. line-height: 50rpx;
  163. border-bottom: 1px solid #f9f9f9;
  164. }
  165. .restNum {
  166. font-size: 24rpx;
  167. color: #999;
  168. letter-spacing: 1.16rpx;
  169. text-align: right;
  170. }
  171. .time {
  172. font-size: 24rpx;
  173. color: #a6a6a6;
  174. letter-spacing: 0;
  175. line-height: 33rpx;
  176. display: inline-block;
  177. }
  178. .txt01 {
  179. font-size: 24rpx;
  180. color: #919191;
  181. letter-spacing: 0;
  182. }
  183. .price {
  184. font-size: 24rpx;
  185. color: #999;
  186. letter-spacing: 0;
  187. }
  188. .salePriceStr {
  189. font-size: 24rpx;
  190. color: #999;
  191. letter-spacing: 0;
  192. }
  193. .salePriceStr .rmb {
  194. color: #fd782d;
  195. font-size: 24rpx;
  196. line-height: 40rpx;
  197. float: left;
  198. }
  199. .salePriceStr .pri01 {
  200. font-size: 40rpx;
  201. color: #fd782d;
  202. letter-spacing: 0;
  203. line-height: 40rpx;
  204. float: left;
  205. }
  206. .salePriceStr .pri01Hr {
  207. font-size: 24rpx !important;
  208. }
  209. .use {
  210. color: #fd782d;
  211. /* margin-left: 10rpx; */
  212. }
  213. .salePriceStr .yuan {
  214. font-size: 24rpx;
  215. color: #fd782d;
  216. letter-spacing: 0;
  217. }
  218. .price text {
  219. font-size: 24rpx;
  220. color: #333;
  221. letter-spacing: 0;
  222. }
  223. .throgh {
  224. text-decoration: line-through;
  225. margin-left: 10rpx;
  226. color: #999 !important;
  227. margin-top: 8rpx;
  228. height: 32rpx;
  229. line-height: 45rpx;
  230. }
  231. .fl {
  232. float: left;
  233. }
  234. .fr {
  235. float: right;
  236. }
  237. .notes view:nth-child(1) {
  238. height: 87rpx;
  239. line-height: 87rpx;
  240. background: #fff;
  241. border-top: 1px solid #f9f9f9;
  242. }
  243. .notes {
  244. width: 100%;
  245. background: #fff;
  246. padding-bottom: 30rpx;
  247. }
  248. .active {
  249. opacity: 0.6;
  250. }
  251. .notes view:nth-child(1) text {
  252. color: #333;
  253. letter-spacing: 0;
  254. font-size: 30rpx;
  255. height: 70rpx;
  256. line-height: 70rpx;
  257. }
  258. .notes view:nth-child(1) {
  259. width: 92%;
  260. margin: 0 auto;
  261. }
  262. .notes view:nth-child(2) {
  263. display: flex;
  264. flex-direction: column;
  265. width: 92%;
  266. margin: 0 auto;
  267. }
  268. .notes view:nth-child(2)>text {
  269. font-size: 24rpx;
  270. color: #919191;
  271. letter-spacing: 0;
  272. line-height: 42rpx;
  273. }
  274. .buy-view {
  275. /* background: #fff; */
  276. height: 92rpx;
  277. bottom: 0;
  278. left: 0;
  279. right: 0;
  280. padding-bottom: 22rpx;
  281. padding-top: 22rpx;
  282. }
  283. .buy {
  284. position: relative;
  285. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  286. height: 94rpx;
  287. width: 560rpx;
  288. margin: 0 auto 30rpx;
  289. color: #fff;
  290. font-size: 36rpx;
  291. line-height: 94rpx;
  292. border-radius: 61rpx;
  293. }
  294. #noBuy{
  295. position: relative;
  296. background-color:rgba(0, 0, 0, 0.2);
  297. height: 94rpx;
  298. width: 560rpx;
  299. margin: 0 auto 30rpx;
  300. color: #fff;
  301. font-size: 36rpx;
  302. line-height: 94rpx;
  303. border-radius: 61rpx;
  304. }
  305. .buyHr {
  306. background: #cecece !important;
  307. }
  308. .goback {
  309. position: relative;
  310. float: left;
  311. width: 132rpx !important;
  312. height: 96rpx;
  313. background: rgba(255, 255, 255, 1) !important;
  314. line-height: 95rpx;
  315. border-radius: 32rpx;
  316. margin-left: 20rpx;
  317. }
  318. .goback image {
  319. position: absolute;
  320. width: 52rpx;
  321. height: 50rpx;
  322. left: 0;
  323. right: 0;
  324. top: 0;
  325. bottom: 0;
  326. margin: 10rpx auto;
  327. }
  328. .tel {
  329. position: absolute;
  330. right: 0;
  331. top: 0;
  332. bottom: 0;
  333. margin: auto;
  334. width: 50rpx;
  335. height: 50rpx;
  336. }
  337. .txt {
  338. margin-right: 30rpx;
  339. }
  340. .distance {
  341. border: none;
  342. border-radius: 16rpx;
  343. width: 600rpx;
  344. padding: 16rpx 6rpx 0 0;
  345. }
  346. .distance .txt01 {
  347. display: block;
  348. font-size: 26rpx;
  349. color: #ff4949;
  350. }
  351. .clock {
  352. width: 116rpx !important;
  353. vertical-align: middle;
  354. margin-right: 10rpx;
  355. margin-top: -4rpx;
  356. }
  357. .qiang {
  358. position: inline-block;
  359. width: 60rpx;
  360. height: 40rpx;
  361. line-height: 40rpx;
  362. color: #ff4949;
  363. text-align: center;
  364. font-size: 28rpx;
  365. margin-right: 10rpx;
  366. }
  367. .times {
  368. display: inline-block;
  369. color: #ff4949;
  370. font-weight: bold;
  371. font-size: 26rpx;
  372. text-align: center;
  373. }
  374. .timess {
  375. color: #fd782d;
  376. }
  377. .times text {
  378. display: inline-block;
  379. margin: 6rpx;
  380. height: 56rpx;
  381. padding: 0 6rpx;
  382. text-align: center;
  383. font-size: 28rpx;
  384. line-height: 60rpx;
  385. border-radius: 12rpx;
  386. color: #fff;
  387. font-weight: bold;
  388. background: #ff4949;
  389. }
  390. .con {
  391. position: absolute;
  392. top: 35rpx;
  393. right: 0;
  394. bottom: 0;
  395. left: 0;
  396. margin: auto;
  397. width: 587rpx;
  398. }
  399. .con .image {
  400. display: block;
  401. width: 100%;
  402. }
  403. .img {
  404. margin-top: -50rpx;
  405. }
  406. .question {
  407. display: block;
  408. width: 587rpx;
  409. background: #fff;
  410. border-bottom-left-radius: 22rpx;
  411. border-bottom-right-radius: 22rpx;
  412. overflow: hidden;
  413. }
  414. .ques {
  415. display: block;
  416. width: 511rpx;
  417. margin: 0 auto;
  418. height: 95rpx;
  419. line-height: 95rpx;
  420. font-size: 30rpx;
  421. color: #333;
  422. border-bottom: 1rpx solid #eee;
  423. }
  424. .titles {
  425. width: 511rpx;
  426. display: block;
  427. text-align: center;
  428. height: 50rpx;
  429. margin: 0 auto;
  430. padding-top: 10rpx;
  431. padding-bottom: 20rpx;
  432. font-size: 32rpx;
  433. font-weight: bold;
  434. line-height: 41rpx;
  435. border-bottom: 1rpx solid #eee;
  436. }
  437. .quessss >view:last-child {
  438. border-bottom: 0;
  439. }
  440. .wmclose {
  441. position: relative;
  442. z-index: 10000;
  443. display: block;
  444. width: 70rpx;
  445. }
  446. .ques_gou {
  447. position: absolute;
  448. width: 20rpx;
  449. top: 160rpx;
  450. left: 23rpx;
  451. }
  452. .btnss {
  453. color: #f8755b;
  454. font-weight: bold;
  455. font-size: 30rpx !important;
  456. text-align: center !important;
  457. }
  458. .radios {
  459. display: block;
  460. font-size: 28rpx;
  461. height: 95rpx;
  462. line-height: 95rpx;
  463. color: #333;
  464. text-indent: 0.5em;
  465. }
  466. .elecard {
  467. display: inline-block;
  468. margin-left: 6rpx;
  469. color: rgba(254, 70, 20, 1);
  470. border: 1px solid rgba(254, 70, 20, 1);
  471. border-radius: 8rpx;
  472. font-style: normal;
  473. font-size: 30rpx;
  474. line-height: 40rpx;
  475. padding: 0 6rpx;
  476. }
  477. .btns {
  478. /* padding: 0 33rpx; */
  479. position: fixed;
  480. left: 0;
  481. right: 0;
  482. bottom: 0;
  483. padding-bottom: 22rpx;
  484. padding-top: 22rpx;
  485. z-index: 12;
  486. /* background: #fff; */
  487. }
  488. .btnTxt {
  489. width: 50rpx;
  490. height: 30rpx;
  491. line-height: 50rpx;
  492. color: #fd782d;
  493. font-size: 20rpx;
  494. position: absolute;
  495. right: 42rpx;
  496. bottom: 15rpx;
  497. }
  498. .btns .fr, .btns .fl {
  499. width: 277rpx;
  500. height: 95rpx;
  501. border-radius: 48rpx;
  502. text-align: center;
  503. }
  504. .btns .fl {
  505. margin-left: 20rpx;
  506. color: #fff;
  507. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  508. }
  509. .btns .fl text {
  510. display: block;
  511. font-size: 30rpx;
  512. line-height: 34rpx;
  513. }
  514. .btns .fl text:nth-of-type(1) {
  515. margin-top: 12rpx;
  516. }
  517. .btns .fr {
  518. font-size: 30rpx;
  519. color: #fff;
  520. margin-right: 20rpx;
  521. line-height: 95rpx;
  522. background: linear-gradient(90deg, rgba(40, 179, 255, 1) 0%, rgba(48, 103, 255, 1) 100%);
  523. /* box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32); */
  524. }
  525. .support-tansfer {
  526. width: 60%;
  527. border-radius: 50rpx;
  528. margin-top: 30rpx;
  529. /* background: #02c0ff !important; */
  530. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  531. }
  532. .shaddow {
  533. z-index: 100;
  534. position: fixed;
  535. width: 100%;
  536. height: 100%;
  537. top: 0px;
  538. background: rgba(0, 0, 0, 0.8);
  539. overflow: hidden;
  540. }
  541. .alert-box {
  542. position: fixed;
  543. top: 50%;
  544. margin-top: -270rpx;
  545. left: 10%;
  546. width: 80%;
  547. height: auto;
  548. padding-bottom: 20rpx;
  549. background: #fff;
  550. z-index: 200;
  551. border-radius: 20rpx;
  552. }
  553. .user-img {
  554. position: absolute;
  555. top: -50rpx;
  556. left: 250rpx;
  557. /* margin-left: -50rpx; */
  558. width: 100rpx;
  559. height: 100rpx;
  560. z-index: 300;
  561. border-radius: 50rpx;
  562. background: #fff;
  563. overflow: hidden;
  564. }
  565. .user-img image {
  566. width: 100rpx;
  567. height: 100rpx;
  568. }
  569. .close {
  570. position: absolute;
  571. z-index: 300;
  572. right: 0;
  573. top: 0;
  574. width: 100rpx;
  575. height: 100rpx;
  576. overflow: hidden;
  577. }
  578. .close image {
  579. display: block;
  580. width: 26rpx;
  581. height: 26rpx;
  582. margin: 20rpx 0 0 52rpx;
  583. }
  584. .a-title {
  585. text-align: center;
  586. margin-top: 76rpx;
  587. font-size: 36rpx;
  588. font-family: PingFang-SC-Medium;
  589. font-weight: 500;
  590. color: rgba(51, 51, 51, 1);
  591. line-height: 44rpx;
  592. }
  593. .a-img {
  594. position: relative;
  595. width: 80%;
  596. border-radius: 20rpx;
  597. height: 294rpx;
  598. overflow: hidden;
  599. text-align: center;
  600. margin: 30rpx auto 0;
  601. }
  602. .a-received {
  603. position: absolute;
  604. width: 100%;
  605. height: 294rpx;
  606. top: 0;
  607. left: 0;
  608. text-align: center;
  609. line-height: 294rpx;
  610. z-index: 320;
  611. background: rgba(255, 255, 255, 1);
  612. border: 0px solid rgba(151, 57, 117, 1);
  613. opacity: 0.91;
  614. font-size: 36rpx;
  615. color: rgba(255, 51, 50, 1);
  616. font-family: PingFang-SC-Medium;
  617. }
  618. .a-img image {
  619. width: 100%;
  620. height: 100%;
  621. }
  622. .bottom {
  623. text-align: center;
  624. height: 70rpx;
  625. line-height: 70rpx;
  626. color: #999;
  627. font-size: 32rpx;
  628. background: #fff;
  629. padding-top: 20rpx;
  630. }
  631. .presslimit {
  632. height: 34rpx;
  633. line-height: 34rpx;
  634. margin-top: 8rpx;
  635. margin-left: 12rpx;
  636. color: #fd782d;
  637. font-size: 20rpx;
  638. letter-spacing: 1.16rpx;
  639. overflow: hidden;
  640. white-space: nowrap;
  641. text-overflow: ellipsis;
  642. }
  643. .presslimit text {
  644. margin-left: 15rpx;
  645. background: rgba(201, 201, 201, 0.1);
  646. }
  647. checkbox-group, radio-group {
  648. height: 400rpx;
  649. overflow-y: scroll;
  650. }
  651. .detailImg {
  652. width: 100%;
  653. background: #fff;
  654. margin: auto;
  655. }
  656. .detailImg image {
  657. display: block;
  658. width: 92%;
  659. padding: 0 4% 0 4%;
  660. margin-bottom: 20rpx;
  661. }
  662. .content {
  663. margin: 0;
  664. padding: 0;
  665. width: 100%;
  666. height: 100%;
  667. background: #f3f3f3;
  668. position: relative;
  669. }
  670. .poster {
  671. width: 100%;
  672. height: 100%;
  673. padding: 20rpx;
  674. position: absolute;
  675. top: 0;
  676. left: 0;
  677. }
  678. .bottomsave {
  679. width: 100%;
  680. height: 140rpx;
  681. line-height: 140rpx;
  682. margin: auto 0;
  683. bottom: 0;
  684. left: 0;
  685. right: 0;
  686. border-top: 1px solid #ccc;
  687. box-shadow: 0 0rpx 150rpx #ccc;
  688. background: #fff;
  689. }
  690. .saveposter {
  691. color: #fff;
  692. width: 380rpx;
  693. height: 80rpx;
  694. border-radius: 50rpx;
  695. background: #f08f04;
  696. margin-top: 30rpx;
  697. font-size: 32rpx;
  698. }
  699. .modal {
  700. width: 100%;
  701. height: 100%;
  702. position: fixed;
  703. top: 0;
  704. left: 0;
  705. background: rgba(0, 0, 0, 0.5);
  706. overflow: hidden;
  707. z-index: 10000;
  708. color: #fff;
  709. }
  710. .modal-content {
  711. width: 540rpx;
  712. height: 233rpx;
  713. line-height: 60rpx;
  714. overflow: hidden;
  715. position: fixed;
  716. top: 50%;
  717. left: 0;
  718. z-index: 11;
  719. background: #f9f9f9;
  720. margin: -16rpx 105rpx;
  721. border-radius: 36rpx;
  722. display: flex;
  723. }
  724. .modal-content view {
  725. display: inline-block;
  726. flex: 1;
  727. text-align: center;
  728. }
  729. .modal-content view>text {
  730. color: #000;
  731. display: block;
  732. font-size: 30rpx;
  733. }
  734. .modal-content view>image {
  735. margin-top: 40rpx;
  736. width: 90rpx;
  737. height: 90rpx;
  738. }
  739. .wx-swiper-dots {
  740. margin-bottom: 30rpx;
  741. }
  742. .quan {
  743. float: left;
  744. margin: 18rpx 15rpx 0 0;
  745. width: 12rpx;
  746. height: 12rpx;
  747. background: #e1e1e1;
  748. border-radius: 50%;
  749. }
  750. .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  751. margin-bottom: 2rpx;
  752. }
  753. .swiper-box .wx-swiper-dot {
  754. width: 40rpx;
  755. display: inline-flex;
  756. height: 6rpx;
  757. margin-left: 10rpx;
  758. border-radius: 6rpx;
  759. justify-content: space-between;
  760. }
  761. .swiper-box .wx-swiper-dot::before {
  762. content: '';
  763. flex-grow: 1;
  764. background: #ccc8c8;
  765. }
  766. .swiper-box .wx-swiper-dot-active::before {
  767. background: #f6792b;
  768. }
  769. .jifen {
  770. font-size: 30rpx;
  771. }