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.

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