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.

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