sweep_code.wxss 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. page {
  2. width: 100%;
  3. border-top: 2rpx solid #dedede;
  4. }
  5. map {
  6. width: 100%;
  7. }
  8. .box {
  9. width: 100%;
  10. height: auto;
  11. }
  12. .notice {
  13. width: 100%;
  14. height: 60rpx;
  15. display: flex;
  16. align-items: center;
  17. color: black;
  18. font-size: 26rpx;
  19. position: fixed;
  20. top: 0;
  21. left: 0;
  22. justify-content: center;
  23. background: #E92E16;
  24. }
  25. .notice .text {
  26. color: white;
  27. }
  28. .notice image {
  29. margin-right: 20rpx;
  30. }
  31. .box .top {
  32. width: 100%;
  33. }
  34. .top .top_view {
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. padding-top: 44rpx;
  39. }
  40. .top .top_view .title {
  41. width: 474rpx;
  42. font-size: 52rpx;
  43. font-family: PingFang SC;
  44. font-weight: 500;
  45. color: rgba(51, 51, 51, 1);
  46. }
  47. .top .top_view .view {
  48. width: 468rpx;
  49. display: flex;
  50. justify-content: center;
  51. font-size: 24rpx;
  52. font-family: PingFang SC;
  53. font-weight: 400;
  54. color: rgba(51, 51, 51, 1);
  55. padding-top: 25rpx;
  56. }
  57. .top .top_view .view view {
  58. display: flex;
  59. align-items: center;
  60. }
  61. .top image {
  62. width: 276rpx;
  63. height: 141rpx;
  64. }
  65. .top .btm_view {
  66. width: 212rpx;
  67. height: 52rpx;
  68. border: 2rpx solid rgba(191, 191, 191, 1);
  69. border-radius: 26rpx;
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. font-size: 24rpx;
  74. font-family: PingFang SC;
  75. font-weight: 400;
  76. color: rgba(42, 42, 42, 1);
  77. }
  78. .background {
  79. width: 100%;
  80. height: 16rpx;
  81. background: rgba(249, 249, 248, 1);
  82. }
  83. /* 新样式 */
  84. .bottom-new {
  85. padding: 20rpx 30rpx 30rpx;
  86. }
  87. .new-top {
  88. display: flex;
  89. align-items: center;
  90. }
  91. .quyu-img {
  92. flex: 0 0 120rpx;
  93. height: 80rpx;
  94. width: 80rpx;
  95. margin-right: 12rpx;
  96. }
  97. .bottom-new .text {
  98. font-size: 30rpx;
  99. padding-top: 10rpx;
  100. }
  101. .text-tip {
  102. font-size: 26rpx;
  103. color: #9e9c9c;
  104. margin-top: 8rpx;
  105. }
  106. .new-middle {
  107. text-align: center;
  108. font-size: 28rpx;
  109. margin-top: 30rpx;
  110. font-weight: bold;
  111. }
  112. .licheng {
  113. font-size: 32rpx;
  114. }
  115. .new-km {
  116. font-size: 38rpx;
  117. font-weight: bold;
  118. color: rgba(24, 213, 185, 1);
  119. margin: 0 10rpx;
  120. }
  121. .jifei {
  122. padding: 20rpx 0;
  123. width: 80vw;
  124. margin: 0 auto;
  125. }
  126. .jifei-title {
  127. text-align: center;
  128. color: #a09e9e;
  129. font-size: 24rpx;
  130. }
  131. .jiantou {
  132. display: inline-block;
  133. width: 40rpx;
  134. vertical-align: middle;
  135. height: 40rpx;
  136. }
  137. .jifei-item {
  138. margin-bottom: 10rpx;
  139. display: flex;
  140. justify-content: space-between;
  141. font-size: 24rpx;
  142. color: #3b3b3b;
  143. }
  144. .new-button {
  145. display: flex;
  146. margin: 0 auto;
  147. margin-top: 30rpx;
  148. width: 85vw;
  149. justify-content: space-between;
  150. }
  151. .button-item {
  152. width: 38vw;
  153. height: 80rpx;
  154. border-radius: 40rpx;
  155. line-height: 80rpx;
  156. text-align: center;
  157. }
  158. .change-bike {
  159. /* background-color: #dedede; */
  160. border: 2rpx solid #10d6bb;
  161. color: #10d6bb;
  162. }
  163. .open-block {
  164. background-color: rgba(24, 213, 185, 1);
  165. color: #fff;
  166. }
  167. .bottom-tab {
  168. display: flex;
  169. align-items: center;
  170. justify-content: space-between;
  171. width: 60vw;
  172. margin: 0 auto;
  173. }
  174. .tab-item,
  175. .active-tab {
  176. text-align: center;
  177. border-bottom: solid 3px #0FD6BA;
  178. padding-bottom: 10rpx;
  179. margin-bottom: 10rpx;
  180. font-weight: 550;
  181. color: #0FD6BA;
  182. }
  183. .tab-item {
  184. border: none;
  185. color: rgb(90, 89, 89);
  186. }
  187. /*
  188. .bottom {
  189. width: 84%;
  190. display: flex;
  191. flex-direction: column;
  192. margin: 0 auto;
  193. }
  194. .bottom .baoxiu{
  195. text-align: right;
  196. font-size:24rpx;
  197. font-family:PingFang SC;
  198. font-weight:500;
  199. color:rgba(24,213,185,1);
  200. padding-bottom: 20rpx;
  201. }
  202. .bottom .btm_top {
  203. display: flex;
  204. justify-content: space-between;
  205. align-items: center;
  206. padding-bottom: 34rpx;
  207. border-bottom: 2rpx solid #dedede;
  208. font-weight: 800;
  209. }
  210. .bottom .btm_top view{
  211. font-size:40rpx;
  212. font-family:PingFang SC;
  213. font-weight:500;
  214. color:rgba(42,42,42,1);
  215. }
  216. .bottom .btm_center {
  217. display: flex;
  218. justify-content: space-between;
  219. align-items: center;
  220. }
  221. .bottom .btm_center view {
  222. width: 50%;
  223. display: flex;
  224. flex-direction: column;
  225. align-items: center;
  226. }
  227. .bottom .btm_center view text:nth-of-type(1) {
  228. font-size:40rpx;
  229. font-family:PingFang SC;
  230. font-weight:bold;
  231. color:rgba(42,42,42,1);
  232. }
  233. .bottom .btm_center view text:nth-of-type(2) {
  234. font-size: 24rpx;
  235. font-family: PingFang-SC-Regular;
  236. font-weight: 400;
  237. color: rgba(153, 153, 153, 1);
  238. padding-top: 15rpx;
  239. }
  240. .bottom .btm_btm_rent {
  241. display: flex;
  242. justify-content: center;
  243. align-items: center;
  244. height: 90rpx;
  245. border-radius: 10rpx;
  246. font-size: 32rpx;
  247. font-family: PingFang-SC-Medium;
  248. font-weight: 500;
  249. color: rgba(255, 254, 254, 1);
  250. width:630rpx;
  251. background:rgba(24,213,185,1);
  252. box-shadow:0px 8rpx 54rpx 0px rgba(224,224,224,0.68);
  253. }
  254. .bottom .btm_btm_use {
  255. display: flex;
  256. justify-content: center;
  257. align-items: center;
  258. height: 90rpx;
  259. width:630rpx;
  260. background:#E92E16;
  261. box-shadow:0px 8rpx 8rpx 0px rgba(224,224,224,0.68);
  262. border-radius:10rpx;
  263. font-size:32rpx;
  264. font-family:PingFang SC;
  265. font-weight:500;
  266. color:white;
  267. }
  268. .bottom .btm_btm1 {
  269. border: 2rpx solid rgba(24, 213, 185, 1);
  270. box-shadow: 0rpx 8rpx 54rpx 0rpx rgba(224, 224, 224, 0.68);
  271. border-radius: 10rpx;
  272. background: #fff !important;
  273. font-size: 32rpx;
  274. font-family: PingFang SC;
  275. font-weight: 500;
  276. color: rgba(24, 213, 185, 1);
  277. margin-top: 25rpx !important;
  278. }
  279. .back {
  280. width: 100%;
  281. height: 100%;
  282. position: fixed;
  283. top: 0rpx;
  284. left: 0rpx;
  285. right: 0rpx;
  286. bottom: 0rpx;
  287. z-index: 9999;
  288. background: #666;
  289. opacity: 0.5;
  290. }
  291. */
  292. /* 日租 */
  293. .model {
  294. position: relative;
  295. }
  296. /* .over {
  297. position: absolute;
  298. bottom: 10%;
  299. z-index: 99999;
  300. } */
  301. .model-content {
  302. /* width: 582rpx; */
  303. /* height: 670rpx; */
  304. background: white;
  305. z-index: 99999;
  306. /* margin-top: 160rpx; */
  307. position: relative;
  308. }
  309. .model-content .view1 {
  310. display: flex;
  311. align-items: center;
  312. width: 100%;
  313. justify-content: center;
  314. text-align: center;
  315. margin-bottom: 30rpx;
  316. }
  317. .model-content .view2 {
  318. display: flex;
  319. align-items: center;
  320. padding-left: 50rpx;
  321. padding-top: 14rpx;
  322. }
  323. .model-content .view2 view:nth-of-type(1) {
  324. width: 10rpx;
  325. height: 10rpx;
  326. background: rgba(24, 213, 185, 1);
  327. opacity: 0.85;
  328. border-radius: 50%;
  329. }
  330. .model-content .view2 view:nth-of-type(2) {
  331. font-size: 30rpx;
  332. font-family: PingFang SC;
  333. font-weight: 500;
  334. color: rgba(24, 213, 185, 1);
  335. padding-left: 10rpx;
  336. }
  337. .model-content .text {
  338. font-size: 24rpx;
  339. font-family: PingFang SC;
  340. font-weight: 400;
  341. color: rgba(152, 152, 152, 1);
  342. padding-left: 65rpx;
  343. padding-top: 10rpx;
  344. display: flex;
  345. flex-direction: column;
  346. }
  347. .model-content .view1 view {
  348. width: 218rpx;
  349. height: 228rpx;
  350. background: #efefef;
  351. display: flex;
  352. align-items: center;
  353. justify-content: center;
  354. margin-top: -40rpx;
  355. }
  356. .model-content .bottom1 {
  357. width: 100%;
  358. display: flex;
  359. /* position: absolute; */
  360. /* bottom: 0rpx; */
  361. /* left: 0rpx; */
  362. margin-top: 40rpx;
  363. height: 88rpx;
  364. line-height: 88rpx;
  365. justify-content: space-between;
  366. align-items: flex-end;
  367. }
  368. .model-content .bottom1 view {
  369. width: 100%;
  370. height: 100%;
  371. flex: 1;
  372. text-align: center;
  373. align-items: center;
  374. justify-content: center;
  375. background: #10d6bb;
  376. border: solid 1px #10d6bb;
  377. color: white;
  378. }
  379. .model-content .bottom1 .btn_ci {
  380. margin-right: 30rpx;
  381. flex: 0 0 30vw;
  382. border: solid 1px #10d6bb;
  383. background-color: #fff;
  384. color: #10d6bb;
  385. }
  386. .pop {
  387. position: absolute;
  388. top: 50%;
  389. left: 50%;
  390. transform: translate(-50%, -50%);
  391. width: 670rpx;
  392. height: 1180rpx;
  393. background: rgba(255, 255, 255, 1);
  394. border-radius: 14rpx;
  395. }
  396. .pop .top {
  397. width: 100%;
  398. height: 100rpx;
  399. background: rgba(246, 246, 246, 1);
  400. border-radius: 14rpx 14rpx 0rpx 0rpx;
  401. display: flex;
  402. align-items: center;
  403. justify-content: center;
  404. font-size: 46rpx;
  405. font-family: PingFang SC;
  406. font-weight: bold;
  407. color: rgba(31, 31, 31, 1);
  408. }
  409. .pop .center {
  410. display: flex;
  411. flex-direction: column;
  412. width: 100%;
  413. }
  414. .pop .center .view {
  415. display: flex;
  416. width: 100%;
  417. border-bottom: 2rpx #EFEFEF solid;
  418. }
  419. .pop .center .view view {
  420. width: 64.29%;
  421. display: flex;
  422. flex-direction: column;
  423. padding-left: 25rpx;
  424. }
  425. .pop .center .view view .title2 {
  426. padding-top: 22rpx;
  427. font-size: 32rpx;
  428. font-family: PingFang SC;
  429. font-weight: 500;
  430. color: rgba(54, 54, 50, 1);
  431. }
  432. .pop .center .view view .content1 {
  433. padding-top: 5rpx;
  434. font-size: 24rpx;
  435. font-family: PingFang SC;
  436. font-weight: 400;
  437. color: rgba(103, 103, 103, 1);
  438. opacity: 0.8;
  439. width: 92%;
  440. letter-spacing: 0.5px;
  441. }
  442. .pop .center .view image {
  443. width: 235rpx;
  444. height: 188rpx;
  445. }
  446. .pop .bottom1 {
  447. width: 100%;
  448. height: 130rpx;
  449. display: flex;
  450. align-items: center;
  451. justify-content: center;
  452. }
  453. .pop .bottom1 view {
  454. width: 400rpx;
  455. height: 76rpx;
  456. background: #0FD6BA;
  457. border-radius: 38rpx;
  458. display: flex;
  459. align-items: center;
  460. justify-content: center;
  461. font-size: 32rpx;
  462. font-family: PingFang SC;
  463. font-weight: 400;
  464. color: rgba(255, 255, 255, 1);
  465. }
  466. .cover {
  467. position: absolute;
  468. top: 50%;
  469. left: 50%;
  470. transform: translate(-50%, -50%);
  471. height: 100%;
  472. width: 100%;
  473. background: rgba(0, 0, 0, 0.5);
  474. }
  475. .arrow_down {
  476. width: 54rpx;
  477. height: 54rpx;
  478. position: fixed;
  479. right: 20rpx;
  480. bottom: 700rpx;
  481. z-index: 8888;
  482. }
  483. .arrow_down image {
  484. width: 100%;
  485. height: 100%;
  486. }
  487. .maskLayer {
  488. z-index: 8887;
  489. position: fixed;
  490. top: 0rpx;
  491. left: 0rpx;
  492. right: 0rpx;
  493. bottom: 0rpx;
  494. width: 100%;
  495. height: 100%;
  496. background: #333;
  497. opacity: .5;
  498. }
  499. .choose {
  500. z-index: 8888;
  501. position: fixed;
  502. bottom: 0rpx;
  503. width: 100%;
  504. background: white;
  505. padding: 26rpx 0rpx;
  506. display: flex;
  507. flex-wrap: wrap;
  508. }
  509. .choose .left {
  510. margin-left: 4%;
  511. margin-top: 7rpx;
  512. margin-bottom: 7rpx;
  513. margin-right: 10rpx;
  514. }
  515. .choose .right {
  516. margin-right: 4%;
  517. margin-top: 7rpx;
  518. margin-bottom: 7rpx;
  519. }