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.

868 rivejä
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. .b1 {
  401. position: fixed;
  402. bottom: 0px;
  403. left: 0px;
  404. right: 0px;
  405. top:170rpx;
  406. background: rgba(0, 0, 0, 0.8);
  407. overflow: hidden;
  408. z-index: 10;
  409. }
  410. .con {
  411. position: absolute;
  412. top: 35rpx;
  413. right: 0;
  414. bottom: 0;
  415. left: 0;
  416. margin: auto;
  417. width: 587rpx;
  418. }
  419. .con .image {
  420. display: block;
  421. width: 100%;
  422. }
  423. .img {
  424. margin-top: -50rpx;
  425. }
  426. .question {
  427. display: block;
  428. width: 587rpx;
  429. background: #fff;
  430. border-bottom-left-radius: 22rpx;
  431. border-bottom-right-radius: 22rpx;
  432. overflow: hidden;
  433. }
  434. .ques {
  435. display: block;
  436. width: 511rpx;
  437. margin: 0 auto;
  438. height: 95rpx;
  439. line-height: 95rpx;
  440. font-size: 30rpx;
  441. color: #333;
  442. border-bottom: 1rpx solid #eee;
  443. }
  444. .titles {
  445. width: 511rpx;
  446. display: block;
  447. text-align: center;
  448. height: 50rpx;
  449. margin: 0 auto;
  450. padding-top: 10rpx;
  451. padding-bottom: 20rpx;
  452. font-size: 32rpx;
  453. font-weight: bold;
  454. line-height: 41rpx;
  455. border-bottom: 1rpx solid #eee;
  456. }
  457. .quessss >view:last-child {
  458. border-bottom: 0;
  459. }
  460. .wmclose {
  461. position: relative;
  462. z-index: 10000;
  463. display: block;
  464. width: 70rpx;
  465. }
  466. .ques_gou {
  467. position: absolute;
  468. width: 20rpx;
  469. top: 160rpx;
  470. left: 23rpx;
  471. }
  472. .btnss {
  473. color: #f8755b;
  474. font-weight: bold;
  475. font-size: 30rpx !important;
  476. text-align: center !important;
  477. }
  478. .radios {
  479. display: block;
  480. font-size: 28rpx;
  481. height: 95rpx;
  482. line-height: 95rpx;
  483. color: #333;
  484. text-indent: 0.5em;
  485. }
  486. .elecard {
  487. display: inline-block;
  488. margin-left: 6rpx;
  489. color: #af6e34;
  490. border: 1px solid #af6e34;
  491. border-radius: 8rpx;
  492. font-style: normal;
  493. font-size: 30rpx;
  494. line-height: 40rpx;
  495. padding: 0 6rpx;
  496. }
  497. .applyshop {
  498. font-size: 30rpx;
  499. height: 70rpx;
  500. line-height: 70rpx;
  501. color: #333;
  502. text-indent: 1em;
  503. }
  504. .btns {
  505. /* padding: 0 33rpx; */
  506. position: fixed;
  507. left: 0;
  508. right: 0;
  509. bottom: 0;
  510. padding-bottom: 22rpx;
  511. padding-top: 22rpx;
  512. z-index: 12;
  513. /* background: #fff; */
  514. }
  515. .btnTxt{
  516. width: 50rpx;
  517. height: 30rpx;
  518. line-height: 50rpx;
  519. color: #FD782D;
  520. font-size: 20rpx;
  521. position: absolute;
  522. right:42rpx ;
  523. bottom: 15rpx;
  524. }
  525. .btns .fr,.btns .fl {
  526. width: 277rpx;
  527. height: 95rpx;
  528. border-radius: 48rpx;
  529. text-align: center;
  530. }
  531. .btns .fl {
  532. margin-left: 20rpx;
  533. color: #fff;
  534. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  535. /* box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32); */
  536. }
  537. .btns .fl text {
  538. display: block;
  539. font-size: 30rpx;
  540. line-height: 34rpx;
  541. }
  542. .btns .fl text:nth-of-type(1) {
  543. margin-top: 12rpx;
  544. }
  545. .btns .fr {
  546. font-size: 30rpx;
  547. color: #fff;
  548. margin-right: 20rpx;
  549. line-height: 95rpx;
  550. background: linear-gradient(90deg,rgba(40,179,255,1) 0%,rgba(48,103,255,1) 100%);
  551. /* box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32); */
  552. }
  553. .support-tansfer {
  554. width: 60%;
  555. border-radius: 50rpx;
  556. margin-top: 30rpx;
  557. /* background: #02c0ff !important; */
  558. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  559. }
  560. .shaddow {
  561. z-index: 100;
  562. position: fixed;
  563. width: 100%;
  564. height: 100%;
  565. top: 0px;
  566. background: rgba(0, 0, 0, 0.8);
  567. overflow: hidden;
  568. }
  569. .alert-box {
  570. position: fixed;
  571. top: 200rpx;
  572. left: 10%;
  573. width: 80%;
  574. height: auto;
  575. padding-bottom: 20rpx;
  576. background: #fff;
  577. z-index: 200;
  578. border-radius: 20rpx;
  579. }
  580. .user-img {
  581. position: absolute;
  582. top: -50rpx;
  583. left: 250rpx;
  584. /* margin-left: -50rpx; */
  585. width: 100rpx;
  586. height: 100rpx;
  587. z-index: 300;
  588. border-radius: 50rpx;
  589. background: #fff;
  590. overflow: hidden;
  591. }
  592. .user-img image {
  593. width: 100rpx;
  594. height: 100rpx;
  595. }
  596. .close {
  597. position: absolute;
  598. z-index: 300;
  599. right: 0;
  600. top: 0;
  601. width: 100rpx;
  602. height: 100rpx;
  603. overflow: hidden;
  604. }
  605. .close image {
  606. display: block;
  607. width: 26rpx;
  608. height: 26rpx;
  609. margin: 20rpx 0 0 52rpx;
  610. }
  611. .a-title {
  612. text-align: center;
  613. margin-top: 76rpx;
  614. font-size: 36rpx;
  615. font-family: PingFang-SC-Medium;
  616. font-weight: 500;
  617. color: rgba(51, 51, 51, 1);
  618. line-height: 44rpx;
  619. }
  620. .a-img {
  621. position: relative;
  622. width: 80%;
  623. border-radius: 20rpx;
  624. height: 294rpx;
  625. overflow: hidden;
  626. text-align: center;
  627. margin: 30rpx auto 0;
  628. }
  629. .a-received {
  630. position: absolute;
  631. width: 100%;
  632. height: 294rpx;
  633. top: 0;
  634. left: 0;
  635. text-align: center;
  636. line-height: 294rpx;
  637. z-index: 320;
  638. background: rgba(255, 255, 255, 1);
  639. border: 0px solid rgba(151, 57, 117, 1);
  640. opacity: 0.91;
  641. font-size: 36rpx;
  642. color: rgba(255, 51, 50, 1);
  643. font-family: PingFang-SC-Medium;
  644. }
  645. .a-img image {
  646. width: 100%;
  647. height: 100%;
  648. }
  649. .bottom {
  650. text-align: center;
  651. height: 70rpx;
  652. line-height: 70rpx;
  653. color: #999;
  654. font-size: 32rpx;
  655. }
  656. .presslimit {
  657. width: 300rpx;
  658. height: 34rpx;
  659. line-height: 34rpx;
  660. margin-top: 8rpx;
  661. margin-left: 12rpx;
  662. color: #FD782D;
  663. font-size: 20rpx;
  664. letter-spacing: 1.16rpx;
  665. overflow: hidden;
  666. white-space: nowrap;
  667. text-overflow: ellipsis;
  668. }
  669. .presslimit text{
  670. margin-left: 22rpx;
  671. background:rgba(201,201,201,0.1);
  672. }
  673. checkbox-group, radio-group {
  674. height: 400rpx;
  675. overflow-y: scroll;
  676. }
  677. .detailImg {
  678. width: 100%;
  679. background: #FFF;
  680. margin: auto;
  681. }
  682. .detailImg image {
  683. display: block;
  684. width: 92%;
  685. padding: 0 4% 0 4%;
  686. margin-bottom: 20rpx;
  687. }
  688. .content {
  689. margin: 0;
  690. padding: 0;
  691. width: 100%;
  692. height: 100%;
  693. background: #f3f3f3;
  694. position: relative;
  695. }
  696. .poster{
  697. width: 100%;
  698. height: 100%;
  699. padding: 20rpx;
  700. position: absolute;
  701. top: 0;
  702. left: 0;
  703. }
  704. .bottomsave {
  705. width: 100%;
  706. height: 140rpx;
  707. line-height: 140rpx;
  708. margin: auto 0;
  709. bottom:0;
  710. left: 0;
  711. right: 0;
  712. border-top: 1px solid #ccc;
  713. box-shadow: 0 0rpx 150rpx #ccc;
  714. background: #fff;
  715. }
  716. .saveposter {
  717. color: #fff;
  718. width: 380rpx;
  719. height: 80rpx;
  720. border-radius: 50rpx;
  721. background: #f08f04;
  722. margin-top: 30rpx;
  723. font-size: 32rpx;
  724. }
  725. .modal {
  726. width: 100%;
  727. height: 100%;
  728. position: fixed;
  729. top: 0;
  730. left: 0;
  731. background: rgba(0, 0, 0, 0.5);
  732. overflow: hidden;
  733. z-index: 10000;
  734. color: #fff;
  735. }
  736. .modal-content {
  737. width: 540rpx;
  738. height: 233rpx;
  739. line-height: 60rpx;
  740. overflow: hidden;
  741. position: fixed;
  742. top: 50%;
  743. left: 0;
  744. z-index: 11;
  745. background: #f9f9f9;
  746. margin: -130rpx 105rpx;
  747. border-radius: 36rpx;
  748. display: flex;
  749. }
  750. .modal-content view {
  751. display: inline-block;
  752. flex: 1;
  753. text-align: center;
  754. }
  755. .modal-content view>text {
  756. color: #000;
  757. display: block;
  758. font-size: 30rpx;
  759. }
  760. .modal-content view>image {
  761. margin-top: 40rpx;
  762. width: 90rpx;
  763. height: 90rpx;
  764. }
  765. .wx-swiper-dots{
  766. margin-bottom: 30rpx;
  767. }
  768. .quan{
  769. float: left;
  770. margin:18rpx 15rpx 0 0;
  771. width: 12rpx;
  772. height: 12rpx;
  773. background: #E1E1E1;
  774. border-radius: 50%;
  775. }