C端小程序
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

871 lines
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: #FD782D;
  174. margin-left: 10rpx;
  175. }
  176. .salePriceStr .yuan {
  177. font-size: 24rpx;
  178. color: #FD782D;
  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. background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%);
  562. }
  563. .shaddow {
  564. z-index: 100;
  565. position: fixed;
  566. width: 100%;
  567. height: 100%;
  568. top: 0px;
  569. background: rgba(0, 0, 0, 0.8);
  570. overflow: hidden;
  571. }
  572. .alert-box {
  573. position: fixed;
  574. top: 200rpx;
  575. left: 10%;
  576. width: 80%;
  577. height: auto;
  578. padding-bottom: 20rpx;
  579. background: #fff;
  580. z-index: 200;
  581. border-radius: 20rpx;
  582. }
  583. .user-img {
  584. position: absolute;
  585. top: -50rpx;
  586. left: 250rpx;
  587. /* margin-left: -50rpx; */
  588. width: 100rpx;
  589. height: 100rpx;
  590. z-index: 300;
  591. border-radius: 50rpx;
  592. background: #fff;
  593. overflow: hidden;
  594. }
  595. .user-img image {
  596. width: 100rpx;
  597. height: 100rpx;
  598. }
  599. .close {
  600. position: absolute;
  601. z-index: 300;
  602. right: 0;
  603. top: 0;
  604. width: 100rpx;
  605. height: 100rpx;
  606. overflow: hidden;
  607. }
  608. .close image {
  609. display: block;
  610. width: 26rpx;
  611. height: 26rpx;
  612. margin: 20rpx 0 0 52rpx;
  613. }
  614. .a-title {
  615. text-align: center;
  616. margin-top: 76rpx;
  617. font-size: 36rpx;
  618. font-family: PingFang-SC-Medium;
  619. font-weight: 500;
  620. color: rgba(51, 51, 51, 1);
  621. line-height: 44rpx;
  622. }
  623. .a-img {
  624. position: relative;
  625. width: 80%;
  626. border-radius: 20rpx;
  627. height: 294rpx;
  628. overflow: hidden;
  629. text-align: center;
  630. margin: 30rpx auto 0;
  631. }
  632. .a-received {
  633. position: absolute;
  634. width: 100%;
  635. height: 294rpx;
  636. top: 0;
  637. left: 0;
  638. text-align: center;
  639. line-height: 294rpx;
  640. z-index: 320;
  641. background: rgba(255, 255, 255, 1);
  642. border: 0px solid rgba(151, 57, 117, 1);
  643. opacity: 0.91;
  644. font-size: 36rpx;
  645. color: rgba(255, 51, 50, 1);
  646. font-family: PingFang-SC-Medium;
  647. }
  648. .a-img image {
  649. width: 100%;
  650. height: 100%;
  651. }
  652. .bottom {
  653. text-align: center;
  654. height: 70rpx;
  655. line-height: 70rpx;
  656. color: #999;
  657. font-size: 32rpx;
  658. }
  659. .presslimit {
  660. width: 300rpx;
  661. height: 34rpx;
  662. line-height: 34rpx;
  663. margin-top: 8rpx;
  664. margin-left: 12rpx;
  665. color: #FD782D;
  666. font-size: 20rpx;
  667. letter-spacing: 1.16rpx;
  668. overflow: hidden;
  669. white-space: nowrap;
  670. text-overflow: ellipsis;
  671. }
  672. .presslimit text{
  673. margin-left: 22rpx;
  674. background:rgba(201,201,201,0.1);
  675. }
  676. checkbox-group, radio-group {
  677. height: 400rpx;
  678. overflow-y: scroll;
  679. }
  680. .detailImg {
  681. width: 100%;
  682. background: #FFF;
  683. margin: auto;
  684. }
  685. .detailImg image {
  686. display: block;
  687. width: 92%;
  688. padding: 0 4% 0 4%;
  689. margin-bottom: 20rpx;
  690. }
  691. .content {
  692. margin: 0;
  693. padding: 0;
  694. width: 100%;
  695. height: 100%;
  696. background: #f3f3f3;
  697. position: relative;
  698. }
  699. .poster{
  700. width: 100%;
  701. height: 100%;
  702. padding: 20rpx;
  703. position: absolute;
  704. top: 0;
  705. left: 0;
  706. }
  707. .bottomsave {
  708. width: 100%;
  709. height: 140rpx;
  710. line-height: 140rpx;
  711. margin: auto 0;
  712. bottom:0;
  713. left: 0;
  714. right: 0;
  715. border-top: 1px solid #ccc;
  716. box-shadow: 0 0rpx 150rpx #ccc;
  717. background: #fff;
  718. }
  719. .saveposter {
  720. color: #fff;
  721. width: 380rpx;
  722. height: 80rpx;
  723. border-radius: 50rpx;
  724. background: #f08f04;
  725. margin-top: 30rpx;
  726. font-size: 32rpx;
  727. }
  728. .modal {
  729. width: 100%;
  730. height: 100%;
  731. position: fixed;
  732. top: 0;
  733. left: 0;
  734. background: rgba(0, 0, 0, 0.5);
  735. overflow: hidden;
  736. z-index: 10000;
  737. color: #fff;
  738. }
  739. .modal-content {
  740. width: 540rpx;
  741. height: 233rpx;
  742. line-height: 60rpx;
  743. overflow: hidden;
  744. position: fixed;
  745. top: 50%;
  746. left: 0;
  747. z-index: 11;
  748. background: #f9f9f9;
  749. margin: -130rpx 105rpx;
  750. border-radius: 36rpx;
  751. display: flex;
  752. }
  753. .modal-content view {
  754. display: inline-block;
  755. flex: 1;
  756. text-align: center;
  757. }
  758. .modal-content view>text {
  759. color: #000;
  760. display: block;
  761. font-size: 30rpx;
  762. }
  763. .modal-content view>image {
  764. margin-top: 40rpx;
  765. width: 90rpx;
  766. height: 90rpx;
  767. }
  768. .wx-swiper-dots{
  769. margin-bottom: 30rpx;
  770. }
  771. .quan{
  772. float: left;
  773. margin:18rpx 15rpx 0 0;
  774. width: 12rpx;
  775. height: 12rpx;
  776. background: #E1E1E1;
  777. border-radius: 50%;
  778. }