C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

543 lines
7.7 KiB

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