C端小程序
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

870 líneas
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) view:nth-child(1) {
  241. font-size: 32rpx;
  242. color: #333;
  243. width: 90%;
  244. letter-spacing: 0;
  245. white-space: nowrap;
  246. text-overflow: ellipsis;
  247. overflow: hidden;
  248. }
  249. .shopVoList {
  250. display: flex !important;
  251. padding-left: 0 !important;
  252. flex-direction: row !important;
  253. }
  254. .shopVoList text {
  255. font-size: 20rpx !important;
  256. display: inline-block !important;
  257. white-space: nowrap;
  258. text-overflow: ellipsis;
  259. overflow: hidden;
  260. color: #b8b8b8 !important;
  261. }
  262. .notes view:nth-child(1) {
  263. height: 87rpx;
  264. line-height: 87rpx;
  265. background: #fff;
  266. border-top: 1px solid #f9f9f9;
  267. }
  268. .notes {
  269. width:100%;
  270. background: #FFF;
  271. }
  272. .active {
  273. opacity: 0.6;
  274. }
  275. .notes view:nth-child(1) text {
  276. color: #333;
  277. letter-spacing: 0;
  278. font-size: 30rpx;
  279. height: 70rpx;
  280. line-height: 70rpx;
  281. }
  282. .notes view:nth-child(1) {
  283. width: 92%;
  284. margin: 0 auto;
  285. }
  286. .notes view:nth-child(2) {
  287. display: flex;
  288. flex-direction: column;
  289. width: 92%;
  290. margin: 0 auto;
  291. }
  292. .notes view:nth-child(2)>text {
  293. font-size: 24rpx;
  294. color: #919191;
  295. letter-spacing: 0;
  296. line-height: 42rpx;
  297. }
  298. .buy-view {
  299. /* background: #fff; */
  300. height: 92rpx;
  301. bottom: 0;
  302. left: 0;
  303. right: 0;
  304. padding-bottom: 22rpx;
  305. padding-top: 22rpx;
  306. }
  307. .buy {
  308. position: relative;
  309. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  310. height: 94rpx;
  311. width: 560rpx;
  312. margin: 0 auto 30rpx;
  313. color: #fff;
  314. font-size: 36rpx;
  315. line-height: 94rpx;
  316. border-radius: 61rpx;
  317. }
  318. .buyHr{
  319. background: #CECECE!important;
  320. }
  321. .goback {
  322. position: relative;
  323. float: left;
  324. width: 132rpx !important;
  325. height: 96rpx;
  326. background: rgba(255, 255, 255, 1)!important;
  327. line-height: 95rpx;
  328. border-radius: 32rpx;
  329. margin-left: 20rpx;
  330. }
  331. .goback image {
  332. position: absolute;
  333. width:52rpx;
  334. height: 50rpx;
  335. left: 0;
  336. right: 0;
  337. top: 0;
  338. bottom:0;
  339. margin:10rpx auto;
  340. }
  341. .tel {
  342. position: absolute;
  343. right: 0;
  344. top: 0;
  345. bottom: 0;
  346. margin: auto;
  347. width: 50rpx;
  348. height: 50rpx;
  349. }
  350. .txt {
  351. margin-right: 30rpx;
  352. }
  353. .distance {
  354. border: none;
  355. border-radius: 16rpx;
  356. width: 600rpx;
  357. padding: 16rpx 6rpx 0 0;
  358. }
  359. .distance .txt01 {
  360. display: block;
  361. font-size: 26rpx;
  362. color: #ff4949;
  363. }
  364. .clock {
  365. width: 116rpx !important;
  366. vertical-align: middle;
  367. margin-right: 10rpx;
  368. margin-top: -4rpx;
  369. }
  370. .qiang {
  371. position: inline-block;
  372. width: 60rpx;
  373. height: 40rpx;
  374. line-height: 40rpx;
  375. color: #ff4949;
  376. text-align: center;
  377. font-size: 28rpx;
  378. margin-right: 10rpx;
  379. }
  380. .times {
  381. display: inline-block;
  382. color: #ff4949;
  383. font-weight: bold;
  384. font-size: 26rpx;
  385. text-align: center;
  386. }
  387. .timess{
  388. color: #FD782D;
  389. }
  390. .times text {
  391. display: inline-block;
  392. margin: 6rpx;
  393. height: 56rpx;
  394. padding: 0 6rpx;
  395. text-align: center;
  396. font-size: 28rpx;
  397. line-height: 60rpx;
  398. border-radius: 12rpx;
  399. color: #fff;
  400. font-weight: bold;
  401. background: #ff4949;
  402. }
  403. .b1 {
  404. position: fixed;
  405. top: 0px;
  406. bottom: 0px;
  407. left: 0px;
  408. right: 0px;
  409. background: rgba(0, 0, 0, 0.8);
  410. overflow: hidden;
  411. z-index: 10;
  412. }
  413. .con {
  414. position: absolute;
  415. top: 35rpx;
  416. right: 0;
  417. bottom: 0;
  418. left: 0;
  419. margin: auto;
  420. width: 587rpx;
  421. }
  422. .con .image {
  423. display: block;
  424. width: 100%;
  425. }
  426. .img {
  427. margin-top: -50rpx;
  428. }
  429. .question {
  430. display: block;
  431. width: 587rpx;
  432. background: #fff;
  433. border-bottom-left-radius: 22rpx;
  434. border-bottom-right-radius: 22rpx;
  435. overflow: hidden;
  436. }
  437. .ques {
  438. display: block;
  439. width: 511rpx;
  440. margin: 0 auto;
  441. height: 95rpx;
  442. line-height: 95rpx;
  443. font-size: 30rpx;
  444. color: #333;
  445. border-bottom: 1rpx solid #eee;
  446. }
  447. .titles {
  448. width: 511rpx;
  449. display: block;
  450. text-align: center;
  451. height: 50rpx;
  452. margin: 0 auto;
  453. padding-top: 10rpx;
  454. padding-bottom: 20rpx;
  455. font-size: 32rpx;
  456. font-weight: bold;
  457. line-height: 41rpx;
  458. border-bottom: 1rpx solid #eee;
  459. }
  460. .quessss >view:last-child {
  461. border-bottom: 0;
  462. }
  463. .wmclose {
  464. position: relative;
  465. z-index: 10000;
  466. display: block;
  467. width: 70rpx;
  468. }
  469. .ques_gou {
  470. position: absolute;
  471. width: 20rpx;
  472. top: 160rpx;
  473. left: 23rpx;
  474. }
  475. .btnss {
  476. color: #f8755b;
  477. font-weight: bold;
  478. font-size: 30rpx !important;
  479. text-align: center !important;
  480. }
  481. .radios {
  482. display: block;
  483. font-size: 28rpx;
  484. height: 95rpx;
  485. line-height: 95rpx;
  486. color: #333;
  487. text-indent: 0.5em;
  488. }
  489. .elecard {
  490. display: inline-block;
  491. margin-left: 6rpx;
  492. color: #af6e34;
  493. border: 1px solid #af6e34;
  494. border-radius: 8rpx;
  495. font-style: normal;
  496. font-size: 30rpx;
  497. line-height: 40rpx;
  498. padding: 0 6rpx;
  499. }
  500. .applyshop {
  501. font-size: 30rpx;
  502. height: 70rpx;
  503. line-height: 70rpx;
  504. color: #333;
  505. text-indent: 1em;
  506. }
  507. .btns {
  508. /* padding: 0 33rpx; */
  509. position: fixed;
  510. left: 0;
  511. right: 0;
  512. bottom: 0;
  513. padding-bottom: 22rpx;
  514. padding-top: 22rpx;
  515. z-index: 12;
  516. /* background: #fff; */
  517. }
  518. .btnTxt{
  519. width: 50rpx;
  520. height: 30rpx;
  521. line-height: 50rpx;
  522. color: #FD782D;
  523. font-size: 20rpx;
  524. position: absolute;
  525. right:42rpx ;
  526. bottom: 15rpx;
  527. }
  528. .btns .fr,.btns .fl {
  529. width: 277rpx;
  530. height: 95rpx;
  531. border-radius: 48rpx;
  532. text-align: center;
  533. }
  534. .btns .fl {
  535. margin-left: 20rpx;
  536. color: #fff;
  537. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  538. /* box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32); */
  539. }
  540. .btns .fl text {
  541. display: block;
  542. font-size: 30rpx;
  543. line-height: 34rpx;
  544. }
  545. .btns .fl text:nth-of-type(1) {
  546. margin-top: 12rpx;
  547. }
  548. .btns .fr {
  549. font-size: 30rpx;
  550. color: #fff;
  551. margin-right: 20rpx;
  552. line-height: 95rpx;
  553. background: linear-gradient(90deg,rgba(40,179,255,1) 0%,rgba(48,103,255,1) 100%);
  554. /* box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32); */
  555. }
  556. .support-tansfer {
  557. width: 60%;
  558. border-radius: 50rpx;
  559. margin-top: 30rpx;
  560. background: #02c0ff !important;
  561. }
  562. .shaddow {
  563. z-index: 100;
  564. position: fixed;
  565. width: 100%;
  566. height: 100%;
  567. top: 0px;
  568. background: rgba(0, 0, 0, 0.8);
  569. overflow: hidden;
  570. }
  571. .alert-box {
  572. position: fixed;
  573. top: 200rpx;
  574. left: 10%;
  575. width: 80%;
  576. height: auto;
  577. padding-bottom: 20rpx;
  578. background: #fff;
  579. z-index: 200;
  580. border-radius: 20rpx;
  581. }
  582. .user-img {
  583. position: absolute;
  584. top: -50rpx;
  585. left: 250rpx;
  586. /* margin-left: -50rpx; */
  587. width: 100rpx;
  588. height: 100rpx;
  589. z-index: 300;
  590. border-radius: 50rpx;
  591. background: #fff;
  592. overflow: hidden;
  593. }
  594. .user-img image {
  595. width: 100rpx;
  596. height: 100rpx;
  597. }
  598. .close {
  599. position: absolute;
  600. z-index: 300;
  601. right: 0;
  602. top: 0;
  603. width: 100rpx;
  604. height: 100rpx;
  605. overflow: hidden;
  606. }
  607. .close image {
  608. display: block;
  609. width: 26rpx;
  610. height: 26rpx;
  611. margin: 20rpx 0 0 52rpx;
  612. }
  613. .a-title {
  614. text-align: center;
  615. margin-top: 76rpx;
  616. font-size: 36rpx;
  617. font-family: PingFang-SC-Medium;
  618. font-weight: 500;
  619. color: rgba(51, 51, 51, 1);
  620. line-height: 44rpx;
  621. }
  622. .a-img {
  623. position: relative;
  624. width: 80%;
  625. border-radius: 20rpx;
  626. height: 294rpx;
  627. overflow: hidden;
  628. text-align: center;
  629. margin: 30rpx auto 0;
  630. }
  631. .a-received {
  632. position: absolute;
  633. width: 100%;
  634. height: 294rpx;
  635. top: 0;
  636. left: 0;
  637. text-align: center;
  638. line-height: 294rpx;
  639. z-index: 320;
  640. background: rgba(255, 255, 255, 1);
  641. border: 0px solid rgba(151, 57, 117, 1);
  642. opacity: 0.91;
  643. font-size: 36rpx;
  644. color: rgba(255, 51, 50, 1);
  645. font-family: PingFang-SC-Medium;
  646. }
  647. .a-img image {
  648. width: 100%;
  649. height: 100%;
  650. }
  651. .bottom {
  652. text-align: center;
  653. height: 70rpx;
  654. line-height: 70rpx;
  655. color: #999;
  656. font-size: 32rpx;
  657. }
  658. .presslimit {
  659. width: 300rpx;
  660. height: 34rpx;
  661. line-height: 34rpx;
  662. margin-top: 8rpx;
  663. margin-left: 12rpx;
  664. color: #FD782D;
  665. font-size: 20rpx;
  666. letter-spacing: 1.16rpx;
  667. overflow: hidden;
  668. white-space: nowrap;
  669. text-overflow: ellipsis;
  670. }
  671. .presslimit text{
  672. margin-left: 22rpx;
  673. background:rgba(201,201,201,0.1);
  674. }
  675. checkbox-group, radio-group {
  676. height: 400rpx;
  677. overflow-y: scroll;
  678. }
  679. .detailImg {
  680. width: 100%;
  681. background: #FFF;
  682. margin: auto;
  683. }
  684. .detailImg image {
  685. display: block;
  686. width: 92%;
  687. padding: 0 4% 0 4%;
  688. margin-bottom: 20rpx;
  689. }
  690. .content {
  691. margin: 0;
  692. padding: 0;
  693. width: 100%;
  694. height: 100%;
  695. background: #f3f3f3;
  696. position: relative;
  697. }
  698. .poster{
  699. width: 100%;
  700. height: 100%;
  701. padding: 20rpx;
  702. position: absolute;
  703. top: 0;
  704. left: 0;
  705. }
  706. .bottomsave {
  707. width: 100%;
  708. height: 140rpx;
  709. line-height: 140rpx;
  710. margin: auto 0;
  711. bottom:0;
  712. left: 0;
  713. right: 0;
  714. border-top: 1px solid #ccc;
  715. box-shadow: 0 0rpx 150rpx #ccc;
  716. background: #fff;
  717. }
  718. .saveposter {
  719. color: #fff;
  720. width: 380rpx;
  721. height: 80rpx;
  722. border-radius: 50rpx;
  723. background: #f08f04;
  724. margin-top: 30rpx;
  725. font-size: 32rpx;
  726. }
  727. .modal {
  728. width: 100%;
  729. height: 100%;
  730. position: fixed;
  731. top: 0;
  732. left: 0;
  733. background: rgba(0, 0, 0, 0.5);
  734. overflow: hidden;
  735. z-index: 10000;
  736. color: #fff;
  737. }
  738. .modal-content {
  739. width: 540rpx;
  740. height: 233rpx;
  741. line-height: 60rpx;
  742. overflow: hidden;
  743. position: fixed;
  744. top: 50%;
  745. left: 0;
  746. z-index: 11;
  747. background: #f9f9f9;
  748. margin: -130rpx 105rpx;
  749. border-radius: 36rpx;
  750. display: flex;
  751. }
  752. .modal-content view {
  753. display: inline-block;
  754. flex: 1;
  755. text-align: center;
  756. }
  757. .modal-content view>text {
  758. color: #000;
  759. display: block;
  760. font-size: 30rpx;
  761. }
  762. .modal-content view>image {
  763. margin-top: 40rpx;
  764. width: 90rpx;
  765. height: 90rpx;
  766. }
  767. .wx-swiper-dots{
  768. margin-bottom: 30rpx;
  769. }
  770. .quan{
  771. float: left;
  772. margin:18rpx 15rpx 0 0;
  773. width: 12rpx;
  774. height: 12rpx;
  775. background: #E1E1E1;
  776. border-radius: 50%;
  777. }