C端小程序
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

619 строки
8.7 KiB

  1. @import "../../app.wxss";
  2. page {
  3. background-color: #fff;
  4. }
  5. .container{
  6. padding-bottom: 60rpx;
  7. }
  8. .top{
  9. padding-bottom: 34rpx;
  10. }
  11. .headBox {
  12. width: 690rpx;
  13. margin: 30rpx auto 0;
  14. box-sizing: border-box;
  15. display: flex;
  16. background-color: white;
  17. }
  18. .headBox image {
  19. width: 150rpx;
  20. height: 150rpx;
  21. margin: 10rpx 30rpx 0 0;
  22. border-radius: 16rpx;
  23. }
  24. .titleName {
  25. width: 100%;
  26. line-height: 35rpx;
  27. height: 35rpx;
  28. color: #666;
  29. font-size: 32rpx;
  30. word-break: break-all;
  31. text-align: justify;
  32. font-weight: bold;
  33. }
  34. ::-webkit-scrollbar {
  35. width: 0;
  36. height: 0;
  37. color: transparent;
  38. }
  39. .carLocation, .locationNumber {
  40. display: inline-block;
  41. height: 40rpx;
  42. color: #999;
  43. font-size: 24rpx;
  44. line-height: 30rpx;
  45. }
  46. .carLocation {
  47. width: 206rpx;
  48. font-size: 28rpx;
  49. }
  50. .yuan {
  51. display: inline-block;
  52. margin-left: 6rpx;
  53. color: #333;
  54. }
  55. .price {
  56. width: 690rpx;
  57. font-size: 28rpx;
  58. color: #999;
  59. margin: 10rpx auto 0;
  60. }
  61. .time {
  62. color: #999 !important;
  63. }
  64. .price .fl {
  65. width: 15%;
  66. color: #333;
  67. }
  68. .price .fr {
  69. width: 85%;
  70. color: #999;
  71. line-height: 40rpx;
  72. font-size: 26rpx;
  73. }
  74. .titleName .fr {
  75. color: #999;
  76. font-size: 27rpx;
  77. }
  78. .borderBox {
  79. width: 750rpx;
  80. margin-top: 26rpx;
  81. }
  82. .borderUp {
  83. width: 680rpx;
  84. margin: 0 auto;
  85. font-size: 36rpx;
  86. border: 2rpx dashed #979797;
  87. border-radius: 16rpx;
  88. padding-bottom: 40rpx;
  89. height: 202rpx;
  90. margin-top: 47rpx;
  91. }
  92. .addicense_active {
  93. width: 690rpx;
  94. /* box-shadow: 0 4rpx 20rpx 0 rgba(153, 153, 153, 0.35); */
  95. border-radius: 12rpx;
  96. /* background: #02c0ff; *//* padding-bottom: 40rpx; */
  97. }
  98. .myCar {
  99. display: block;
  100. text-align: center;
  101. font-size: 34rpx;
  102. color: #02c0ff;
  103. letter-spacing: 0;
  104. }
  105. .carNumber {
  106. display: block;
  107. height: 50rpx;
  108. line-height: 50rpx;
  109. text-align: center;
  110. font-size: 26rpx;
  111. color: #999;
  112. letter-spacing: 0;
  113. margin-top: 10rpx;
  114. }
  115. .addBox {
  116. width: 750rpx;
  117. position: relative;
  118. background-color: white;
  119. }
  120. .add {
  121. position: absolute;
  122. left: 50%;
  123. top: 50%;
  124. transform: translate(-50%, -50%);
  125. font-size: 34rpx;
  126. color: #666;
  127. border: 2px dashed #eee;
  128. padding: 30rpx 50rpx;
  129. border-radius: 16rpx;
  130. }
  131. .add text {
  132. font-size: 40rpx;
  133. }
  134. .bottonBox {
  135. width: 750rpx;
  136. margin-top: 32rpx;
  137. margin-bottom: 80rpx;
  138. border-top: 16rpx #f8f8f8 solid;
  139. padding-top: 13rpx;
  140. }
  141. .textStyle {
  142. background-color: white;
  143. height: 88rpx;
  144. line-height: 88rpx;
  145. padding-left: 92rpx;
  146. border-bottom: 1px #f8f8f8 solid;
  147. position: relative;
  148. font-size: 30rpx;
  149. color: #333;
  150. letter-spacing: 1.16rpx;
  151. }
  152. .textStyle image {
  153. width: 40rpx;
  154. height: 40rpx;
  155. top: 27rpx;
  156. left: 27rpx;
  157. position: absolute;
  158. }
  159. .swiper {
  160. position: relative;
  161. margin: 0 auto;
  162. height: 262rpx;
  163. }
  164. .swiper-item {
  165. width: 365rpx;
  166. font-size: 75rpx;
  167. font-weight: 400;
  168. text-align: center;
  169. color: rgba(255, 255, 255, 1);
  170. }
  171. .swiper-item .clearfix1 {
  172. background: #bbe6ff;
  173. border-radius: 12rpx;
  174. padding: 6rpx;
  175. }
  176. .tche {
  177. width: 685rpx;
  178. height: 88rpx;
  179. line-height: 88rpx;
  180. margin: 0 auto;
  181. background: #56bdf8;
  182. border-radius: 60rpx;
  183. position: relative;
  184. margin-top: 30rpx;
  185. }
  186. .txt01 {
  187. width: 667rpx;
  188. height: 180rpx;
  189. line-height: 180rpx;
  190. float: left;
  191. background: #56bdf8;
  192. border-radius: 12rpx;
  193. border: 3px solid #fff;
  194. text-align: center;
  195. font-size: 60rpx;
  196. }
  197. .passNumberBox {
  198. width: 690rpx;
  199. margin: 32rpx auto 0;
  200. position: relative;
  201. background-color: white;
  202. }
  203. .numberBox {
  204. width: 100%;
  205. }
  206. .passNumber {
  207. width: 400rpx;
  208. height: 100rpx;
  209. font-size: 32rpx;
  210. font-weight: 600;
  211. line-height: 100rpx;
  212. left: 55rpx;
  213. position: absolute;
  214. }
  215. .nopay {
  216. height: 80rpx;
  217. line-height: 80rpx;
  218. font-weight: 400;
  219. }
  220. .number {
  221. font-size: 48rpx;
  222. color: #1f2d3d;
  223. letter-spacing: 0;
  224. line-height: 52rpx;
  225. font-weight: 400;
  226. }
  227. .manage_plate {
  228. width: 65%;
  229. border-radius: 80rpx;
  230. margin: 40rpx auto 0;
  231. background: #02c0ff;
  232. color: #fff;
  233. text-align: center;
  234. font-size: 30rpx;
  235. }
  236. .button_active {
  237. opacity: 0.6;
  238. }
  239. .btn001 {
  240. height: 88rpx;
  241. line-height: 88rpx;
  242. margin: 0 auto;
  243. font-size: 30rpx;
  244. font-weight: 400;
  245. color: #fff;
  246. background: none;
  247. }
  248. .parkPrice {
  249. font-size: 30rpx;
  250. font-weight: 500;
  251. }
  252. .deleteButton {
  253. font-size: 28rpx;
  254. line-height: 50rpx;
  255. height: 50rpx;
  256. top: 50%;
  257. right: 30rpx;
  258. position: absolute;
  259. transform: translate(0, -50%);
  260. color: white;
  261. background-color: #00c0ff !important;
  262. }
  263. .deleteButton button {
  264. background-color: #00c0ff !important;
  265. }
  266. .detail {
  267. width: 32rpx;
  268. height: 32rpx;
  269. right: 34rpx;
  270. top: 32rpx;
  271. position: absolute;
  272. }
  273. .detail image {
  274. width: 44rpx;
  275. height: 44rpx;
  276. position: absolute;
  277. left: 0;
  278. top: 0;
  279. }
  280. .voucher {
  281. width: 90%;
  282. padding: 0 5%;
  283. background-color: #fff;
  284. /* background-color: #cbcbcb; */
  285. height: 80rpx;
  286. position: relative;
  287. margin: 0 0 12rpx 0;
  288. border-bottom: 2rpx #fff solid;
  289. display: flex;
  290. justify-content: space-between;;
  291. }
  292. .textV1, .textV2 {
  293. height: 58rpx;
  294. width: 100rpx;
  295. padding-top: 26rpx;
  296. text-align: center;
  297. line-height: 80rxp;
  298. font-size: 24rpx;
  299. color: #333;
  300. }
  301. .textV2 {
  302. margin-top: 0rpx;
  303. padding: 0;
  304. /* background-color: rgb(0, 192, 255); */
  305. border-radius: 10rpx;
  306. width: 300rpx;
  307. height: 80rpx;
  308. line-height: 80rpx;
  309. font-size: 20rpx;
  310. border: 4rpx #fff solid;
  311. margin-bottom: 20rpx;
  312. }
  313. .textV3 {
  314. width: 225rpx;
  315. }
  316. /* .textV1{
  317. position: absolute;
  318. left: 10rpx;
  319. top: 22rpx;
  320. } */
  321. /* .textV2{
  322. position: absolute;
  323. top: 22rpx;
  324. right: 80rpx;
  325. } */
  326. .choice {
  327. width: 80rpx;
  328. height: 80rpx;
  329. position: relative;
  330. }
  331. .choice image {
  332. position: absolute;
  333. left: 50%;
  334. top: 50%;
  335. transform: translate(-50%, -50%);
  336. width: 30rpx;
  337. height: 30rpx;
  338. }
  339. .buy-view {
  340. background: #fff;
  341. position: relative;
  342. height: 88rpx;
  343. margin-top: 30rpx;
  344. }
  345. .buy {
  346. background: #56bdf8;
  347. height: 88rpx;
  348. width: 98%;
  349. margin: 0 auto;
  350. color: #fff;
  351. font-size: 36rpx;
  352. line-height: 88rpx;
  353. border-radius: 60rpx;
  354. position: relative;
  355. z-index: 100;
  356. }
  357. .buyBox {
  358. height: 88rpx;
  359. width: 98%;
  360. position: absolute;
  361. left: 0;
  362. top: 0;
  363. z-index: 100000000;
  364. border-radius: 60rpx;
  365. }
  366. .active {
  367. opacity: 0.6;
  368. }
  369. .borderBox {
  370. width: 750rpx;
  371. border-top: 16rpx #f8f8f8 solid;
  372. }
  373. .carmanage {
  374. position: relative;
  375. width: 690rpx;
  376. margin: 15rpx auto 0;
  377. height: 60rpx;
  378. line-height: 60rpx;
  379. /* border-bottom: 1rpx solid #eee; */
  380. }
  381. .carmanage .fr {
  382. font-size: 28rpx;
  383. color: #888;
  384. letter-spacing: 1.16rpx;
  385. text-align: right;
  386. }
  387. .fl {
  388. float: left;
  389. }
  390. .fr {
  391. float: right;
  392. }
  393. .carmanage .fl {
  394. width: 400rpx;
  395. }
  396. .carmanage .fr image {
  397. position: absolute;
  398. top: 0;
  399. right: 0;
  400. bottom: 0;
  401. margin: auto;
  402. width: 44rpx;
  403. height: 44rpx;
  404. }
  405. .carmanage image {
  406. width: 40rpx;
  407. vertical-align: middle;
  408. }
  409. .mycar {
  410. display: inline-block;
  411. font-size: 33rpx;
  412. color: #666;
  413. line-height: 35rpx;
  414. letter-spacing: 1.16rpx;
  415. }
  416. .num {
  417. display: inline-block;
  418. font-size: 26rpx;
  419. color: #999;
  420. letter-spacing: 0;
  421. margin-left: 20rpx;
  422. }
  423. .orderBox {
  424. padding: 0 20rpx;
  425. position: relative;
  426. }
  427. .priceBox {
  428. display: inline-block;
  429. width: 355rpx;
  430. }
  431. .priceBox text {
  432. color: #333;
  433. font-size: 28rpx;
  434. display: block;
  435. text-align: left;
  436. }
  437. .payBox {
  438. width: 250rpxpx;
  439. }
  440. .payBox button {
  441. width: 230rpx;
  442. border: 0;
  443. font-size: 32rpx;
  444. margin-top: 13rpx;
  445. margin-right: 20rpx;
  446. background-color: lightgreen;
  447. color: white;
  448. }
  449. input {
  450. outline: none;
  451. border: none;
  452. list-style: none;
  453. }
  454. button::after {
  455. border: none;
  456. }
  457. .right {
  458. display: inline-block;
  459. width: 328rpx;
  460. }
  461. .textRight {
  462. margin-left: 0;
  463. margin-right: 25rpx;
  464. text-align: left;
  465. font-size: 30rpx !important;
  466. color: #333 !important;
  467. }
  468. .myCars image {
  469. width: 44rpx;
  470. height: 44rpx;
  471. vertical-align: middle;
  472. margin-right: 14rpx;
  473. }
  474. .myCars {
  475. font-size: 34rpx;
  476. color: #02c0ff;
  477. letter-spacing: 0;
  478. text-align: center;
  479. padding-top: 58rpx;
  480. }
  481. .dots {
  482. position: absolute;
  483. left: 0;
  484. right: 0;
  485. bottom: 19rpx;
  486. display: flex;
  487. justify-content: center;
  488. height: 19rpx;
  489. background: #fff;
  490. }
  491. .dots .dot {
  492. margin: 0 8rpx;
  493. width: 32rpx;
  494. height: 14rpx;
  495. background: #ccc;
  496. border-radius: 8rpx;
  497. transition: all 0.6s;
  498. }
  499. .dots .dot.active {
  500. width: 49rpx;
  501. height: 4rpx;
  502. background: rgba(86, 189, 248, 1);
  503. border-radius: 6rpx;
  504. }
  505. .coupon {
  506. font-size: 28rpx;
  507. color: #666;
  508. }
  509. .orderBox .fl {
  510. line-height: 67rpx;
  511. font-size: 28rpx;
  512. color: #333;
  513. }
  514. .orderBox .fr {
  515. line-height: 67rpx;
  516. font-size: 28rpx;
  517. color: #ff4949;
  518. }
  519. .jians {
  520. font-size: 22rpx;
  521. display: inline-block;
  522. width: 34rpx;
  523. height: 34rpx;
  524. text-align: center;
  525. background: #ff4949;
  526. line-height: 34rpx;
  527. color: #fff;
  528. border-radius: 6rpx;
  529. margin-right: 6rpx;
  530. }
  531. .jiant{
  532. display: inline-block;
  533. width: 44rpx;
  534. height: 44rpx;
  535. vertical-align: middle;
  536. margin-top: -6rpx;
  537. margin-right: -10rpx;
  538. }