C端小程序
Você não pode selecionar mais de 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.

636 linhas
9.0 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: 40rpx;
  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. .yuan {
  66. display: inline-block;
  67. margin-left: 6rpx;
  68. color: #333;
  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 #979797;
  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. .textStyle {
  156. background-color: white;
  157. height: 88rpx;
  158. line-height: 88rpx;
  159. padding-left: 82rpx;
  160. border-bottom: 1px #f8f8f8 solid;
  161. position: relative;
  162. font-size: 30rpx;
  163. color: #333;
  164. letter-spacing: 1.16rpx;
  165. }
  166. .textStyle image {
  167. width: 40rpx;
  168. height: 40rpx;
  169. top: 27rpx;
  170. left: 27rpx;
  171. position: absolute;
  172. }
  173. .swiper {
  174. position: relative;
  175. margin: 0 auto;
  176. height: 262rpx;
  177. }
  178. .swiper-item {
  179. width: 365rpx;
  180. font-size: 75rpx;
  181. font-weight: 400;
  182. text-align: center;
  183. color: rgba(255, 255, 255, 1);
  184. }
  185. .swiper-item .clearfix1 {
  186. background: #bbe6ff;
  187. border-radius: 12rpx;
  188. padding: 6rpx;
  189. }
  190. .tche {
  191. width: 685rpx;
  192. height: 88rpx;
  193. line-height: 88rpx;
  194. margin: 0 auto;
  195. background: #00c0ff;
  196. border-radius: 60rpx;
  197. position: relative;
  198. margin-top: 30rpx;
  199. }
  200. .txt01 {
  201. width: 667rpx;
  202. height: 180rpx;
  203. line-height: 180rpx;
  204. float: left;
  205. background: #00c0ff;
  206. border-radius: 12rpx;
  207. border: 3px solid #fff;
  208. text-align: center;
  209. font-size: 60rpx;
  210. }
  211. .passNumberBox {
  212. width: 690rpx;
  213. margin: 32rpx auto 0;
  214. position: relative;
  215. background-color: white;
  216. }
  217. .numberBox {
  218. width: 100%;
  219. }
  220. .passNumber {
  221. width: 400rpx;
  222. height: 100rpx;
  223. font-size: 32rpx;
  224. font-weight: 600;
  225. line-height: 100rpx;
  226. left: 55rpx;
  227. position: absolute;
  228. }
  229. .nopay {
  230. height: 80rpx;
  231. line-height: 80rpx;
  232. font-weight: 400;
  233. }
  234. .number {
  235. font-size: 48rpx;
  236. color: #1f2d3d;
  237. letter-spacing: 0;
  238. line-height: 52rpx;
  239. font-weight: 400;
  240. }
  241. .manage_plate {
  242. width: 65%;
  243. border-radius: 80rpx;
  244. margin: 40rpx auto 0;
  245. background: #02c0ff;
  246. color: #fff;
  247. text-align: center;
  248. font-size: 30rpx;
  249. }
  250. .button_active {
  251. opacity: 0.6;
  252. }
  253. .btn001 {
  254. height: 88rpx;
  255. line-height: 88rpx;
  256. margin: 0 auto;
  257. font-size: 30rpx;
  258. font-weight: 400;
  259. color: #fff;
  260. background: none;
  261. }
  262. .parkPrice {
  263. font-size: 30rpx;
  264. font-weight: 500;
  265. }
  266. .deleteButton {
  267. font-size: 28rpx;
  268. line-height: 50rpx;
  269. height: 50rpx;
  270. top: 50%;
  271. right: 30rpx;
  272. position: absolute;
  273. transform: translate(0, -50%);
  274. color: white;
  275. background-color: #00c0ff !important;
  276. }
  277. .deleteButton button {
  278. background-color: #00c0ff !important;
  279. }
  280. .detail {
  281. width: 32rpx;
  282. height: 32rpx;
  283. right: 34rpx;
  284. top: 32rpx;
  285. position: absolute;
  286. }
  287. .detail image {
  288. width: 44rpx;
  289. height: 44rpx;
  290. position: absolute;
  291. left: 0;
  292. top: 0;
  293. }
  294. .voucher {
  295. width: 90%;
  296. padding: 0 5%;
  297. background-color: #fff;
  298. /* background-color: #cbcbcb; */
  299. height: 80rpx;
  300. position: relative;
  301. margin: 0 0 12rpx 0;
  302. border-bottom: 2rpx #fff solid;
  303. display: flex;
  304. justify-content: space-between;;
  305. }
  306. .textV1, .textV2 {
  307. height: 58rpx;
  308. width: 100rpx;
  309. padding-top: 26rpx;
  310. text-align: center;
  311. line-height: 80rxp;
  312. font-size: 24rpx;
  313. color: #333;
  314. }
  315. .textV2 {
  316. margin-top: 0rpx;
  317. padding: 0;
  318. /* background-color: rgb(0, 192, 255); */
  319. border-radius: 10rpx;
  320. width: 300rpx;
  321. height: 80rpx;
  322. line-height: 80rpx;
  323. font-size: 20rpx;
  324. border: 4rpx #fff solid;
  325. margin-bottom: 20rpx;
  326. }
  327. .textV3 {
  328. width: 225rpx;
  329. }
  330. /* .textV1{
  331. position: absolute;
  332. left: 10rpx;
  333. top: 22rpx;
  334. } */
  335. /* .textV2{
  336. position: absolute;
  337. top: 22rpx;
  338. right: 80rpx;
  339. } */
  340. .choice {
  341. width: 80rpx;
  342. height: 80rpx;
  343. position: relative;
  344. }
  345. .choice image {
  346. position: absolute;
  347. left: 50%;
  348. top: 50%;
  349. transform: translate(-50%, -50%);
  350. width: 30rpx;
  351. height: 30rpx;
  352. }
  353. .buy-view {
  354. background: #fff;
  355. position: relative;
  356. height: 88rpx;
  357. margin-top: 30rpx;
  358. }
  359. .buy {
  360. background: #00c0ff;
  361. height: 88rpx;
  362. width: 73%;
  363. margin: 0 auto;
  364. color: #fff;
  365. font-size: 36rpx;
  366. line-height: 88rpx;
  367. border-radius: 60rpx;
  368. position: relative;
  369. z-index: 100;
  370. text-align: center;
  371. }
  372. .buyBox {
  373. height: 88rpx;
  374. line-height: 88rpx;
  375. width: 98%;
  376. position: absolute;
  377. left: 0;
  378. right: 0;
  379. bottom: 0;
  380. top: 0;
  381. z-index: 100000000;
  382. border-radius: 60rpx;
  383. }
  384. .active {
  385. opacity: 0.6;
  386. }
  387. .borderBox {
  388. width: 750rpx;
  389. }
  390. .carmanage {
  391. position: relative;
  392. width: 690rpx;
  393. margin: 15rpx auto 0;
  394. height: 60rpx;
  395. line-height: 60rpx;
  396. /* border-bottom: 1rpx solid #eee; */
  397. }
  398. .carmanage .fr {
  399. font-size: 28rpx;
  400. color: #888;
  401. letter-spacing: 1.16rpx;
  402. text-align: right;
  403. }
  404. .fl {
  405. float: left;
  406. }
  407. .fr {
  408. float: right;
  409. }
  410. .carmanage .fl {
  411. width: 400rpx;
  412. }
  413. .carmanage .fr image {
  414. position: absolute;
  415. top: 0;
  416. right: 0;
  417. bottom: 0;
  418. margin: auto;
  419. width: 44rpx;
  420. height: 44rpx;
  421. }
  422. .carmanage image {
  423. width: 40rpx;
  424. vertical-align: middle;
  425. }
  426. .mycar {
  427. display: inline-block;
  428. font-size: 33rpx;
  429. color: #666;
  430. line-height: 35rpx;
  431. letter-spacing: 1.16rpx;
  432. }
  433. .num {
  434. display: inline-block;
  435. font-size: 26rpx;
  436. color: #999;
  437. letter-spacing: 0;
  438. margin-left: 20rpx;
  439. }
  440. .orderBox {
  441. padding: 0 45rpx;
  442. position: relative;
  443. }
  444. .priceBox {
  445. display: inline-block;
  446. width: 355rpx;
  447. }
  448. .priceBox text {
  449. color: #333;
  450. font-size: 28rpx;
  451. display: block;
  452. text-align: left;
  453. }
  454. .payBox {
  455. width: 250rpxpx;
  456. }
  457. .payBox button {
  458. width: 230rpx;
  459. border: 0;
  460. font-size: 32rpx;
  461. margin-top: 13rpx;
  462. margin-right: 20rpx;
  463. background-color: lightgreen;
  464. color: white;
  465. }
  466. input {
  467. outline: none;
  468. border: none;
  469. list-style: none;
  470. }
  471. button::after {
  472. border: none;
  473. }
  474. .right {
  475. display: inline-block;
  476. width: 328rpx;
  477. }
  478. .textRight {
  479. margin-left: 0;
  480. margin-right: 25rpx;
  481. text-align: left;
  482. font-size: 30rpx !important;
  483. color: #333 !important;
  484. }
  485. .myCars image {
  486. width: 44rpx;
  487. height: 44rpx;
  488. vertical-align: middle;
  489. margin-right: 14rpx;
  490. }
  491. .myCars {
  492. font-size: 34rpx;
  493. color: #02c0ff;
  494. letter-spacing: 0;
  495. text-align: center;
  496. padding-top: 58rpx;
  497. }
  498. .dots {
  499. position: absolute;
  500. left: 0;
  501. right: 0;
  502. bottom: 19rpx;
  503. display: flex;
  504. justify-content: center;
  505. height: 19rpx;
  506. background: #fff;
  507. }
  508. .dots .dot {
  509. margin: 0 8rpx;
  510. width: 32rpx;
  511. height: 14rpx;
  512. background: #ccc;
  513. border-radius: 8rpx;
  514. transition: all 0.6s;
  515. }
  516. .dots .dot.active {
  517. width: 49rpx;
  518. height: 4rpx;
  519. background: rgba(86, 189, 248, 1);
  520. border-radius: 6rpx;
  521. }
  522. .coupon {
  523. font-size: 28rpx;
  524. color: #666;
  525. }
  526. .orderBox .fl {
  527. line-height: 70rpx;
  528. font-size: 28rpx;
  529. color: #333;
  530. }
  531. .orderBox .fr {
  532. line-height: 70rpx;
  533. font-size: 28rpx;
  534. color: #ff4949;
  535. }
  536. .jians {
  537. font-size: 22rpx;
  538. display: inline-block;
  539. width: 34rpx;
  540. height: 34rpx;
  541. text-align: center;
  542. background: #ff4949;
  543. line-height: 34rpx;
  544. color: #fff;
  545. border-radius: 6rpx;
  546. margin-right: 6rpx;
  547. }
  548. .jiant{
  549. display: inline-block;
  550. width: 44rpx;
  551. height: 44rpx;
  552. vertical-align: middle;
  553. margin-top: -6rpx;
  554. margin-right: -10rpx;
  555. }