C端小程序
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

605 linhas
8.4 KiB

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