C端小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

884 lignes
13 KiB

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