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.

876 rindas
13 KiB

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