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.

897 regels
13 KiB

  1. @import "../app.wxss";
  2. page {
  3. background-color: #fff;
  4. }
  5. .container {
  6. padding-bottom: 60rpx;
  7. }
  8. .cs{
  9. height: 30rpx;
  10. background-color: aqua
  11. }
  12. .con text {
  13. display: block;
  14. text-align: center;
  15. font-size: 30rpx;
  16. }
  17. .header {
  18. width: 690rpx;
  19. height: 80rpx;
  20. font-size: 32rpx;
  21. margin: 0 auto;
  22. border-radius: 16rpx;
  23. line-height: 80rpx;
  24. letter-spacing: 3rpx;
  25. }
  26. .header image {
  27. width: 60rpx;
  28. vertical-align: middle;
  29. margin-top: -5rpx;
  30. margin-right: 6rpx;
  31. }
  32. .top {
  33. border-bottom: 2rpx solid #f8f8f8;
  34. }
  35. .headBox {
  36. width: 690rpx;
  37. margin: 30rpx auto 0;
  38. box-sizing: border-box;
  39. display: flex;
  40. background-color: white;
  41. }
  42. .headBox image {
  43. width: 150rpx;
  44. height: 150rpx;
  45. margin: 10rpx 30rpx 0 0;
  46. border-radius: 16rpx;
  47. }
  48. .titleName {
  49. width: 100%;
  50. line-height: 35rpx;
  51. height: 35rpx;
  52. color: #666;
  53. font-size: 32rpx;
  54. word-break: break-all;
  55. text-align: justify;
  56. font-weight: bold;
  57. }
  58. ::-webkit-scrollbar {
  59. width: 0;
  60. height: 0;
  61. color: transparent;
  62. }
  63. .carLocation, .locationNumber {
  64. display: inline-block;
  65. height: 40rpx;
  66. color: #999;
  67. font-size: 24rpx;
  68. line-height: 30rpx;
  69. }
  70. .carLocation {
  71. width: 206rpx;
  72. font-size: 28rpx;
  73. }
  74. .price {
  75. width: 690rpx;
  76. font-size: 28rpx;
  77. color: #999;
  78. margin: 10rpx auto 0;
  79. }
  80. .time {
  81. color: #999 !important;
  82. }
  83. .price .fl {
  84. width: 15%;
  85. color: #333;
  86. }
  87. .price .fr {
  88. width: 85%;
  89. color: #999;
  90. line-height: 40rpx;
  91. font-size: 26rpx;
  92. }
  93. .titleName .fr {
  94. color: #999;
  95. font-size: 27rpx;
  96. }
  97. .borderBox {
  98. width: 750rpx;
  99. margin-top: 30rpx;
  100. }
  101. .borderUp {
  102. width: 680rpx;
  103. margin: 0 auto;
  104. font-size: 36rpx;
  105. border: 2rpx dashed #fd832d;
  106. border-radius: 16rpx;
  107. padding-bottom: 40rpx;
  108. height: 202rpx;
  109. margin-top: 47rpx;
  110. }
  111. .addicense_active {
  112. width: 690rpx;
  113. /* box-shadow: 0 4rpx 20rpx 0 rgba(153, 153, 153, 0.35); */
  114. border-radius: 12rpx;
  115. /* background: #02c0ff; *//* padding-bottom: 40rpx; */
  116. }
  117. .myCar {
  118. display: block;
  119. text-align: center;
  120. font-size: 34rpx;
  121. color: #02c0ff;
  122. letter-spacing: 0;
  123. }
  124. .carNumber {
  125. display: block;
  126. height: 50rpx;
  127. line-height: 50rpx;
  128. text-align: center;
  129. font-size: 26rpx;
  130. color: #999;
  131. letter-spacing: 0;
  132. margin-top: 10rpx;
  133. }
  134. .addBox {
  135. width: 750rpx;
  136. position: relative;
  137. background-color: white;
  138. }
  139. .add {
  140. position: absolute;
  141. left: 50%;
  142. top: 50%;
  143. transform: translate(-50%, -50%);
  144. font-size: 34rpx;
  145. color: #666;
  146. border: 2px dashed #eee;
  147. padding: 30rpx 50rpx;
  148. border-radius: 16rpx;
  149. }
  150. .add text {
  151. font-size: 40rpx;
  152. }
  153. .bottonBox {
  154. width: 750rpx;
  155. margin-top: 34rpx;
  156. margin-bottom: 80rpx;
  157. border-top: 16rpx #f8f8f8 solid;
  158. }
  159. .bottonBox view:nth-of-type(1) image {
  160. height: 45rpx;
  161. }
  162. .textStyle {
  163. background-color: white;
  164. height: 88rpx;
  165. line-height: 88rpx;
  166. padding-left: 82rpx;
  167. border-bottom: 1px #f8f8f8 solid;
  168. position: relative;
  169. font-size: 30rpx;
  170. color: #333;
  171. letter-spacing: 1.16rpx;
  172. }
  173. .textStyle image {
  174. width: 40rpx;
  175. height: 40rpx;
  176. top: 24rpx;
  177. left: 27rpx;
  178. position: absolute;
  179. }
  180. .swiper {
  181. position: relative;
  182. margin: 0 auto;
  183. height: 262rpx;
  184. }
  185. .swiper-item {
  186. width: 365rpx;
  187. font-size: 75rpx;
  188. font-weight: 400;
  189. text-align: center;
  190. color: rgba(255, 255, 255, 1);
  191. }
  192. .swiper-item .clearfix1 {
  193. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  194. border-radius: 12rpx;
  195. padding: 6rpx;
  196. }
  197. .tche {
  198. width: 685rpx;
  199. height: 88rpx;
  200. line-height: 88rpx;
  201. margin: 0 auto;
  202. background: #00c0ff;
  203. border-radius: 60rpx;
  204. position: relative;
  205. margin-top: 30rpx;
  206. }
  207. .txt01 {
  208. width: 667rpx;
  209. height: 180rpx;
  210. line-height: 180rpx;
  211. float: left;
  212. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  213. border-radius: 12rpx;
  214. border: 3px solid #fff;
  215. text-align: center;
  216. font-size: 60rpx;
  217. }
  218. .passNumberBox {
  219. width: 690rpx;
  220. margin: 32rpx auto 0;
  221. position: relative;
  222. background-color: white;
  223. }
  224. .numberBox {
  225. width: 100%;
  226. }
  227. .passNumber {
  228. width: 400rpx;
  229. height: 100rpx;
  230. font-size: 32rpx;
  231. font-weight: 600;
  232. line-height: 100rpx;
  233. left: 55rpx;
  234. position: absolute;
  235. }
  236. .nopay {
  237. height: 80rpx;
  238. line-height: 80rpx;
  239. font-weight: 400;
  240. }
  241. .number {
  242. font-size: 48rpx;
  243. color: #1f2d3d;
  244. letter-spacing: 0;
  245. line-height: 52rpx;
  246. font-weight: 400;
  247. }
  248. .manage_plate {
  249. width: 65%;
  250. border-radius: 80rpx;
  251. margin: 40rpx auto 0;
  252. background: #02c0ff;
  253. color: #fff;
  254. text-align: center;
  255. font-size: 30rpx;
  256. }
  257. .button_active {
  258. opacity: 0.6;
  259. }
  260. .btn001 {
  261. height: 88rpx;
  262. line-height: 88rpx;
  263. margin: 0 auto;
  264. font-size: 30rpx;
  265. font-weight: 400;
  266. color: #fff;
  267. background: none;
  268. }
  269. .parkPrice {
  270. font-size: 30rpx;
  271. font-weight: 500;
  272. }
  273. .deleteButton {
  274. font-size: 28rpx;
  275. line-height: 50rpx;
  276. height: 50rpx;
  277. top: 50%;
  278. right: 30rpx;
  279. position: absolute;
  280. transform: translate(0, -50%);
  281. color: white;
  282. background-color: #00c0ff !important;
  283. }
  284. .deleteButton button {
  285. background-color: #00c0ff !important;
  286. }
  287. .detail {
  288. width: 32rpx;
  289. height: 32rpx;
  290. right: 34rpx;
  291. top: 32rpx;
  292. position: absolute;
  293. }
  294. .detail image {
  295. width: 44rpx;
  296. height: 44rpx;
  297. position: absolute;
  298. left: 0;
  299. top: 0;
  300. }
  301. .voucher {
  302. width: 90%;
  303. padding: 0 5%;
  304. background-color: #fff;
  305. /* background-color: #cbcbcb; */
  306. height: 80rpx;
  307. position: relative;
  308. margin: 0 0 12rpx 0;
  309. border-bottom: 2rpx #fff solid;
  310. display: flex;
  311. justify-content: space-between;;
  312. }
  313. .textV1, .textV2 {
  314. height: 58rpx;
  315. width: 100rpx;
  316. padding-top: 26rpx;
  317. text-align: center;
  318. line-height: 80rxp;
  319. font-size: 24rpx;
  320. color: #333;
  321. }
  322. .textV2 {
  323. margin-top: 0rpx;
  324. padding: 0;
  325. /* background-color: rgb(0, 192, 255); */
  326. border-radius: 10rpx;
  327. width: 300rpx;
  328. height: 80rpx;
  329. line-height: 80rpx;
  330. font-size: 20rpx;
  331. border: 4rpx #fff solid;
  332. margin-bottom: 20rpx;
  333. }
  334. .textV3 {
  335. width: 225rpx;
  336. }
  337. .choice {
  338. width: 80rpx;
  339. height: 80rpx;
  340. position: relative;
  341. }
  342. .choice image {
  343. position: absolute;
  344. left: 50%;
  345. top: 50%;
  346. transform: translate(-50%, -50%);
  347. width: 30rpx;
  348. height: 30rpx;
  349. }
  350. .buy-view {
  351. background: #fff;
  352. position: relative;
  353. height: 88rpx;
  354. margin-top: 30rpx;
  355. display: flex;
  356. justify-content: center;
  357. align-items: center;
  358. }
  359. .buy {
  360. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  361. height: 88rpx;
  362. width: 73%;
  363. margin: 0 auto;
  364. color: #fff;
  365. font-size: 36rpx;
  366. line-height: 88rpx;
  367. border-radius: 60rpx;
  368. position: absolute;
  369. z-index: 100;
  370. text-align: center;
  371. bottom: -570rpx;
  372. left: 100rpx;
  373. }
  374. .buyBox {
  375. height: 88rpx;
  376. line-height: 88rpx;
  377. width: 98%;
  378. position: absolute;
  379. left: 0;
  380. right: 0;
  381. bottom: 0;
  382. top: 0;
  383. z-index: 100000000;
  384. border-radius: 60rpx;
  385. }
  386. .active {
  387. opacity: 0.6;
  388. }
  389. .borderBox {
  390. width: 750rpx;
  391. }
  392. .carmanage {
  393. position: relative;
  394. width: 690rpx;
  395. margin: 15rpx auto 0;
  396. height: 60rpx;
  397. line-height: 60rpx;
  398. /* border-bottom: 1rpx solid #eee; */
  399. }
  400. .carmanage .fr {
  401. font-size: 28rpx;
  402. color: #888;
  403. letter-spacing: 1.16rpx;
  404. text-align: right;
  405. }
  406. .fl {
  407. float: left;
  408. }
  409. .fr {
  410. float: right;
  411. }
  412. .carmanage .fl {
  413. width: 400rpx;
  414. }
  415. .carmanage .fr image {
  416. position: absolute;
  417. top: 0;
  418. right: 0;
  419. bottom: 0;
  420. margin: auto;
  421. width: 44rpx;
  422. height: 44rpx;
  423. }
  424. .carmanage image {
  425. width: 40rpx;
  426. vertical-align: middle;
  427. }
  428. .mycar {
  429. display: inline-block;
  430. font-size: 33rpx;
  431. color: #666;
  432. line-height: 35rpx;
  433. letter-spacing: 1.16rpx;
  434. }
  435. .num {
  436. display: inline-block;
  437. font-size: 26rpx;
  438. color: #999;
  439. letter-spacing: 0;
  440. margin-left: 20rpx;
  441. }
  442. .orderBox {
  443. padding: 0 45rpx;
  444. position: relative;
  445. }
  446. .priceBox {
  447. display: inline-block;
  448. width: 355rpx;
  449. }
  450. .priceBox text {
  451. color: #333;
  452. font-size: 28rpx;
  453. display: block;
  454. text-align: left;
  455. }
  456. .payBox {
  457. width: 250rpxpx;
  458. }
  459. .payBox button {
  460. width: 230rpx;
  461. border: 0;
  462. font-size: 32rpx;
  463. margin-top: 13rpx;
  464. margin-right: 20rpx;
  465. background-color: lightgreen;
  466. color: white;
  467. }
  468. input {
  469. outline: none;
  470. border: none;
  471. list-style: none;
  472. }
  473. button::after {
  474. border: none;
  475. }
  476. .right {
  477. display: inline-block;
  478. width: 328rpx;
  479. }
  480. .textRight {
  481. margin-left: 0;
  482. margin-right: 25rpx;
  483. text-align: left;
  484. font-size: 30rpx !important;
  485. color: #333 !important;
  486. }
  487. .myCars image {
  488. width: 44rpx;
  489. height: 44rpx;
  490. vertical-align: middle;
  491. margin-right: 14rpx;
  492. }
  493. .myCars {
  494. font-size: 34rpx;
  495. color: #02c0ff;
  496. letter-spacing: 0;
  497. text-align: center;
  498. padding-top: 58rpx;
  499. }
  500. .dots {
  501. position: absolute;
  502. left: 0;
  503. right: 0;
  504. bottom: 19rpx;
  505. display: flex;
  506. justify-content: center;
  507. height: 19rpx;
  508. background: #fff;
  509. }
  510. .dots .dot {
  511. margin: 0 8rpx;
  512. width: 32rpx;
  513. height: 14rpx;
  514. background: #ccc;
  515. border-radius: 8rpx;
  516. transition: all 0.6s;
  517. }
  518. .dots .dot.active {
  519. width: 49rpx;
  520. height: 4rpx;
  521. background: rgba(86, 189, 248, 1);
  522. border-radius: 6rpx;
  523. }
  524. .coupon {
  525. font-size: 28rpx;
  526. color: #666;
  527. }
  528. .orderBox .fl {
  529. line-height: 70rpx;
  530. font-size: 28rpx;
  531. color: #333;
  532. }
  533. .orderBox .fr {
  534. line-height: 70rpx;
  535. font-size: 28rpx;
  536. color: #fd832d;
  537. }
  538. .jians {
  539. font-size: 22rpx;
  540. display: inline-block;
  541. width: 34rpx;
  542. height: 34rpx;
  543. text-align: center;
  544. background: #ff4949;
  545. line-height: 34rpx;
  546. color: #fff;
  547. border-radius: 6rpx;
  548. margin-right: 6rpx;
  549. }
  550. .jiant {
  551. display: inline-block;
  552. width: 44rpx;
  553. height: 44rpx;
  554. vertical-align: middle;
  555. margin-top: -6rpx;
  556. margin-right: -10rpx;
  557. }
  558. .img {
  559. display: block;
  560. width: 211rpx;
  561. margin: 168rpx auto 40rpx;
  562. }
  563. .txt1 {
  564. font-size: 22rpx;
  565. color: #a6a6a6;
  566. letter-spacing: 0;
  567. }
  568. .txt2 {
  569. display: block;
  570. font-size: 28rpx;
  571. color: #999;
  572. letter-spacing: 0;
  573. text-align: center;
  574. line-height: 40rpx;
  575. margin-top: 10rpx;
  576. }
  577. .gray-bg {
  578. position: fixed;
  579. left: 0;
  580. top: 0;
  581. width: 100%;
  582. height: 100%;
  583. z-index: 1000;
  584. background: rgba(0, 0, 0, 0.2);
  585. }
  586. .ticket-modal {
  587. position: fixed;
  588. left: 50%;
  589. top: 50%;
  590. width: 80%;
  591. height: 880rpx;
  592. z-index: 10000;
  593. transform: translate(-50%, -50%);
  594. background: #fff;
  595. }
  596. .nocoupon image {
  597. width: 300rpx;
  598. display: block;
  599. margin: 3% auto 0;
  600. }
  601. .txt001 {
  602. display: block;
  603. line-height: 48rpx;
  604. font-size: 34rpx;
  605. color: #333;
  606. letter-spacing: 0;
  607. text-align: center;
  608. }
  609. .txt002 {
  610. display: block;
  611. margin-top: 1%;
  612. font-size: 28rpx;
  613. color: #999;
  614. letter-spacing: 0;
  615. line-height: 40rpx;
  616. text-align: center;
  617. }
  618. .nocoupon button {
  619. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  620. color: #fff;
  621. font-size: 30rpx;
  622. width: 74%;
  623. border-radius: 60rpx;
  624. height: 78rpx;
  625. line-height: 78rpx;
  626. margin-top: 100rpx;
  627. }
  628. .loading {
  629. text-align: center;
  630. height: 80rpx;
  631. line-height: 80rpx;
  632. font-size: 26rpx;
  633. color: #999;
  634. }
  635. .loading image {
  636. width: 60rpx;
  637. height: 60rpx;
  638. vertical-align: middle;
  639. margin-right: 10rpx;
  640. }
  641. .section {
  642. position: relative;
  643. width: 90%;
  644. margin-left: 5%;
  645. }
  646. .mms {
  647. width: 100%;
  648. height: 180rpx !important;
  649. background: #fff;
  650. /* padding: 30rpx 0 0; */
  651. margin: 0 auto 40rpx;
  652. /* border-radius: 16rpx; *//* border-top: 8rpx solid #02b7ff; */
  653. box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10);
  654. }
  655. .detail_msg {
  656. display: flex;
  657. padding-top: 16rpx;
  658. padding-bottom: 16rpx;
  659. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  660. }
  661. .logo {
  662. width: 60rpx;
  663. height: 60rpx;
  664. /* border: 1px solid #f8f8f8; */
  665. border-radius: 50rpx;
  666. display: block;
  667. margin: 15rpx 20rpx 0 20rpx;
  668. }
  669. .logo image {
  670. width: 60rpx;
  671. height: 60rpx;
  672. border-radius: 50%;
  673. }
  674. .info view:nth-child(1) {
  675. display: flex;
  676. justify-content: space-between;
  677. padding: 0 4%;
  678. margin-top: 15rpx;
  679. }
  680. .info {
  681. width: 100%;
  682. border-left: 1rpx #fff dashed;
  683. }
  684. .info view:nth-child(1) text {
  685. font-size: 32rpx;
  686. line-height: 32rpx;
  687. height: 32rpx;
  688. color: #fff;
  689. letter-spacing: 0;
  690. width: 400rpx;
  691. display: inline-block;
  692. white-space: nowrap;
  693. text-overflow: ellipsis;
  694. overflow: hidden;
  695. }
  696. .info view:nth-child(2) {
  697. padding-left: 4%;
  698. font-size: 22rpx;
  699. color: #fff;
  700. letter-spacing: 0;
  701. margin-top: 6rpx;
  702. display: inline-block;
  703. white-space: nowrap;
  704. text-overflow: ellipsis;
  705. overflow: hidden;
  706. width: 400rpx;
  707. }
  708. .info view:nth-child(3) {
  709. margin-left: 20rpx;
  710. }
  711. .active {
  712. color: #fff;
  713. opacity: 0.6;
  714. /* background: #02c0ff; */
  715. }
  716. .expiretime {
  717. display: block;
  718. width: 100%;
  719. text-align: left;
  720. text-indent: 1em;
  721. height: 50rpx;
  722. line-height: 50rpx;
  723. font-size: 22rpx;
  724. color: #a6a6a6;
  725. letter-spacing: 0;
  726. }
  727. .ticket-title-tip {
  728. position: relative;
  729. width: 100%;
  730. height: 76rpx;
  731. line-height: 76rpx;
  732. text-align: center;
  733. color: #353535;
  734. font-size: 34rpx;
  735. }
  736. .close-icon {
  737. position: absolute;
  738. right: 10rpx;
  739. transform: translateY(16rpx);
  740. }
  741. .btns {
  742. position: absolute;
  743. right: 120rpx;
  744. top: 50rpx;
  745. height: 48rpx;
  746. line-height: 48rpx;
  747. text-align: right;
  748. color: #fff;
  749. font-size: 40rpx;
  750. }
  751. .yuan {
  752. color: #fff;
  753. font-size: 26rpx;
  754. }
  755. .gou {
  756. position: absolute;
  757. top: 45rpx;
  758. right: 30rpx;
  759. width: 60rpx;
  760. }
  761. .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  762. margin-bottom: 2rpx;
  763. }
  764. .swiper-box .wx-swiper-dot {
  765. width: 40rpx;
  766. display: inline-flex;
  767. height: 6rpx;
  768. margin-left: 10rpx;
  769. border-radius: 6rpx;
  770. justify-content: space-between;
  771. }
  772. .swiper-box .wx-swiper-dot::before {
  773. content: '';
  774. flex-grow: 1;
  775. background: #ccc8c8;
  776. }
  777. .swiper-box .wx-swiper-dot-active::before {
  778. background: #f6792b;
  779. }