C端小程序
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

858 rindas
13 KiB

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