C端小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

894 行
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. bottom: -570rpx;
  368. left: 100rpx;
  369. }
  370. .buyBox {
  371. height: 88rpx;
  372. line-height: 88rpx;
  373. width: 98%;
  374. position: absolute;
  375. left: 0;
  376. right: 0;
  377. bottom: 0;
  378. top: 0;
  379. z-index: 100000000;
  380. border-radius: 60rpx;
  381. }
  382. .active {
  383. opacity: 0.6;
  384. }
  385. .borderBox {
  386. width: 750rpx;
  387. }
  388. .carmanage {
  389. position: relative;
  390. width: 690rpx;
  391. margin: 15rpx auto 0;
  392. height: 60rpx;
  393. line-height: 60rpx;
  394. /* border-bottom: 1rpx solid #eee; */
  395. }
  396. .carmanage .fr {
  397. font-size: 28rpx;
  398. color: #888;
  399. letter-spacing: 1.16rpx;
  400. text-align: right;
  401. }
  402. .fl {
  403. float: left;
  404. }
  405. .fr {
  406. float: right;
  407. }
  408. .carmanage .fl {
  409. width: 400rpx;
  410. }
  411. .carmanage .fr image {
  412. position: absolute;
  413. top: 0;
  414. right: 0;
  415. bottom: 0;
  416. margin: auto;
  417. width: 44rpx;
  418. height: 44rpx;
  419. }
  420. .carmanage image {
  421. width: 40rpx;
  422. vertical-align: middle;
  423. }
  424. .mycar {
  425. display: inline-block;
  426. font-size: 33rpx;
  427. color: #666;
  428. line-height: 35rpx;
  429. letter-spacing: 1.16rpx;
  430. }
  431. .num {
  432. display: inline-block;
  433. font-size: 26rpx;
  434. color: #999;
  435. letter-spacing: 0;
  436. margin-left: 20rpx;
  437. }
  438. .orderBox {
  439. padding: 0 45rpx;
  440. position: relative;
  441. }
  442. .priceBox {
  443. display: inline-block;
  444. width: 355rpx;
  445. }
  446. .priceBox text {
  447. color: #333;
  448. font-size: 28rpx;
  449. display: block;
  450. text-align: left;
  451. }
  452. .payBox {
  453. width: 250rpxpx;
  454. }
  455. .payBox button {
  456. width: 230rpx;
  457. border: 0;
  458. font-size: 32rpx;
  459. margin-top: 13rpx;
  460. margin-right: 20rpx;
  461. background-color: lightgreen;
  462. color: white;
  463. }
  464. input {
  465. outline: none;
  466. border: none;
  467. list-style: none;
  468. }
  469. button::after {
  470. border: none;
  471. }
  472. .right {
  473. display: inline-block;
  474. width: 328rpx;
  475. }
  476. .textRight {
  477. margin-left: 0;
  478. margin-right: 25rpx;
  479. text-align: left;
  480. font-size: 30rpx !important;
  481. color: #333 !important;
  482. }
  483. .myCars image {
  484. width: 44rpx;
  485. height: 44rpx;
  486. vertical-align: middle;
  487. margin-right: 14rpx;
  488. }
  489. .myCars {
  490. font-size: 34rpx;
  491. color: #02c0ff;
  492. letter-spacing: 0;
  493. text-align: center;
  494. padding-top: 58rpx;
  495. }
  496. .dots {
  497. position: absolute;
  498. left: 0;
  499. right: 0;
  500. bottom: 19rpx;
  501. display: flex;
  502. justify-content: center;
  503. height: 19rpx;
  504. background: #fff;
  505. }
  506. .dots .dot {
  507. margin: 0 8rpx;
  508. width: 32rpx;
  509. height: 14rpx;
  510. background: #ccc;
  511. border-radius: 8rpx;
  512. transition: all 0.6s;
  513. }
  514. .dots .dot.active {
  515. width: 49rpx;
  516. height: 4rpx;
  517. background: rgba(86, 189, 248, 1);
  518. border-radius: 6rpx;
  519. }
  520. .coupon {
  521. font-size: 28rpx;
  522. color: #666;
  523. }
  524. .orderBox .fl {
  525. line-height: 70rpx;
  526. font-size: 28rpx;
  527. color: #333;
  528. }
  529. .orderBox .fr {
  530. line-height: 70rpx;
  531. font-size: 28rpx;
  532. color: #fd832d;
  533. }
  534. .jians {
  535. font-size: 22rpx;
  536. display: inline-block;
  537. width: 34rpx;
  538. height: 34rpx;
  539. text-align: center;
  540. background: #ff4949;
  541. line-height: 34rpx;
  542. color: #fff;
  543. border-radius: 6rpx;
  544. margin-right: 6rpx;
  545. }
  546. .jiant {
  547. display: inline-block;
  548. width: 44rpx;
  549. height: 44rpx;
  550. vertical-align: middle;
  551. margin-top: -6rpx;
  552. margin-right: -10rpx;
  553. }
  554. .img {
  555. display: block;
  556. width: 211rpx;
  557. margin: 168rpx auto 40rpx;
  558. }
  559. .txt1 {
  560. font-size: 22rpx;
  561. color: #a6a6a6;
  562. letter-spacing: 0;
  563. }
  564. .txt2 {
  565. display: block;
  566. font-size: 28rpx;
  567. color: #999;
  568. letter-spacing: 0;
  569. text-align: center;
  570. line-height: 40rpx;
  571. margin-top: 10rpx;
  572. }
  573. .gray-bg {
  574. position: fixed;
  575. left: 0;
  576. top: 0;
  577. width: 100%;
  578. height: 100%;
  579. z-index: 1000;
  580. background: rgba(0, 0, 0, 0.2);
  581. }
  582. .ticket-modal {
  583. position: fixed;
  584. left: 50%;
  585. top: 50%;
  586. width: 80%;
  587. height: 880rpx;
  588. z-index: 10000;
  589. transform: translate(-50%, -50%);
  590. background: #fff;
  591. }
  592. .nocoupon image {
  593. width: 300rpx;
  594. display: block;
  595. margin: 3% auto 0;
  596. }
  597. .txt001 {
  598. display: block;
  599. line-height: 48rpx;
  600. font-size: 34rpx;
  601. color: #333;
  602. letter-spacing: 0;
  603. text-align: center;
  604. }
  605. .txt002 {
  606. display: block;
  607. margin-top: 1%;
  608. font-size: 28rpx;
  609. color: #999;
  610. letter-spacing: 0;
  611. line-height: 40rpx;
  612. text-align: center;
  613. }
  614. .nocoupon button {
  615. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  616. color: #fff;
  617. font-size: 30rpx;
  618. width: 74%;
  619. border-radius: 60rpx;
  620. height: 78rpx;
  621. line-height: 78rpx;
  622. margin-top: 100rpx;
  623. }
  624. .loading {
  625. text-align: center;
  626. height: 80rpx;
  627. line-height: 80rpx;
  628. font-size: 26rpx;
  629. color: #999;
  630. }
  631. .loading image {
  632. width: 60rpx;
  633. height: 60rpx;
  634. vertical-align: middle;
  635. margin-right: 10rpx;
  636. }
  637. .section {
  638. position: relative;
  639. width: 90%;
  640. margin-left: 5%;
  641. }
  642. .mms {
  643. width: 100%;
  644. height: 180rpx !important;
  645. background: #fff;
  646. /* padding: 30rpx 0 0; */
  647. margin: 0 auto 40rpx;
  648. /* border-radius: 16rpx; *//* border-top: 8rpx solid #02b7ff; */
  649. box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10);
  650. }
  651. .detail_msg {
  652. display: flex;
  653. padding-top: 16rpx;
  654. padding-bottom: 16rpx;
  655. background: linear-gradient(127deg, rgba(252, 177, 74, 1) 0%, rgba(254, 70, 20, 1) 100%);
  656. }
  657. .logo {
  658. width: 60rpx;
  659. height: 60rpx;
  660. /* border: 1px solid #f8f8f8; */
  661. border-radius: 50rpx;
  662. display: block;
  663. margin: 15rpx 20rpx 0 20rpx;
  664. }
  665. .logo image {
  666. width: 60rpx;
  667. height: 60rpx;
  668. border-radius: 50%;
  669. }
  670. .info view:nth-child(1) {
  671. display: flex;
  672. justify-content: space-between;
  673. padding: 0 4%;
  674. margin-top: 15rpx;
  675. }
  676. .info {
  677. width: 100%;
  678. border-left: 1rpx #fff dashed;
  679. }
  680. .info view:nth-child(1) text {
  681. font-size: 32rpx;
  682. line-height: 32rpx;
  683. height: 32rpx;
  684. color: #fff;
  685. letter-spacing: 0;
  686. width: 400rpx;
  687. display: inline-block;
  688. white-space: nowrap;
  689. text-overflow: ellipsis;
  690. overflow: hidden;
  691. }
  692. .info view:nth-child(2) {
  693. padding-left: 4%;
  694. font-size: 22rpx;
  695. color: #fff;
  696. letter-spacing: 0;
  697. margin-top: 6rpx;
  698. display: inline-block;
  699. white-space: nowrap;
  700. text-overflow: ellipsis;
  701. overflow: hidden;
  702. width: 400rpx;
  703. }
  704. .info view:nth-child(3) {
  705. margin-left: 20rpx;
  706. }
  707. .active {
  708. color: #fff;
  709. opacity: 0.6;
  710. /* background: #02c0ff; */
  711. }
  712. .expiretime {
  713. display: block;
  714. width: 100%;
  715. text-align: left;
  716. text-indent: 1em;
  717. height: 50rpx;
  718. line-height: 50rpx;
  719. font-size: 22rpx;
  720. color: #a6a6a6;
  721. letter-spacing: 0;
  722. }
  723. .ticket-title-tip {
  724. position: relative;
  725. width: 100%;
  726. height: 76rpx;
  727. line-height: 76rpx;
  728. text-align: center;
  729. color: #353535;
  730. font-size: 34rpx;
  731. }
  732. .close-icon {
  733. position: absolute;
  734. right: 10rpx;
  735. transform: translateY(16rpx);
  736. }
  737. .btns {
  738. position: absolute;
  739. right: 120rpx;
  740. top: 50rpx;
  741. height: 48rpx;
  742. line-height: 48rpx;
  743. text-align: right;
  744. color: #fff;
  745. font-size: 40rpx;
  746. }
  747. .yuan {
  748. color: #fff;
  749. font-size: 26rpx;
  750. }
  751. .gou {
  752. position: absolute;
  753. top: 45rpx;
  754. right: 30rpx;
  755. width: 60rpx;
  756. }
  757. .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  758. margin-bottom: 2rpx;
  759. }
  760. .swiper-box .wx-swiper-dot {
  761. width: 40rpx;
  762. display: inline-flex;
  763. height: 6rpx;
  764. margin-left: 10rpx;
  765. border-radius: 6rpx;
  766. justify-content: space-between;
  767. }
  768. .swiper-box .wx-swiper-dot::before {
  769. content: '';
  770. flex-grow: 1;
  771. background: #ccc8c8;
  772. }
  773. .swiper-box .wx-swiper-dot-active::before {
  774. background: #f6792b;
  775. }