Newer
Older
KaiFengPC / public / static / libs / map / demo.css
@zhangdeliang zhangdeliang on 23 May 13 KB 初始化项目
  1. body,
  2. html {
  3. margin: 0;
  4. padding: 0;
  5. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  6. font-size: 12px;
  7. }
  8.  
  9. #map,
  10. body,
  11. html {
  12. width: 100%;
  13. height: calc(100vh)
  14. }
  15.  
  16. html {
  17. font-size: 12px
  18. }
  19.  
  20. .amap-copyright {
  21. box-sizing: content-box
  22. }
  23.  
  24. * {
  25. box-sizing: border-box
  26. }
  27.  
  28. .input-textarea {
  29. color: grey;
  30. height: 8em;
  31. overflow: auto;
  32. border-radius: .4rem;
  33. border: 1px solid #ced4da;
  34. margin-bottom: 1rem
  35. }
  36.  
  37. hr {
  38. margin: .5rem 0;
  39. box-sizing: content-box;
  40. height: 0;
  41. overflow: visible;
  42. border: 0;
  43. border-top: 1px solid rgba(0, 0, 0, .1)
  44. }
  45.  
  46. p {
  47. margin-top: 0;
  48. margin-bottom: 0
  49. }
  50.  
  51. label {
  52. display: inline-block;
  53. margin-bottom: .4rem
  54. }
  55.  
  56. .btn,
  57. label {
  58. margin-left: 0;
  59. font-size: 1rem
  60. }
  61.  
  62. button,
  63. input,
  64. select {
  65. margin: 0;
  66. font-family: inherit;
  67. font-size: inherit;
  68. line-height: inherit;
  69. overflow: visible;
  70. text-transform: none
  71. }
  72.  
  73. [type=button]::-moz-focus-inner,
  74. [type=reset]::-moz-focus-inner,
  75. [type=submit]::-moz-focus-inner,
  76. button::-moz-focus-inner {
  77. padding: 0;
  78. border-style: none
  79. }
  80.  
  81. input[type=checkbox],
  82. input[type=radio] {
  83. box-sizing: border-box;
  84. padding: 0;
  85. -webkit-box-sizing: border-box;
  86. box-sizing: border-box;
  87. padding: 0;
  88. margin: 0 .5rem 0 0
  89. }
  90.  
  91. h3 {
  92. color: #333;
  93. font-weight: bold;
  94. line-height: 30px;
  95. font-size: 16px;
  96. margin: 0;
  97. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  98. }
  99.  
  100. p {
  101. font-size: 14px;
  102. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  103. font-weight: 400;
  104. color: rgba(51, 51, 51, 1);
  105. line-height: 20px;
  106. }
  107.  
  108. .lkmap-popup-close-button {
  109. font-size: 20px;
  110. color: #999;
  111. }
  112.  
  113. h4 {
  114. line-height: 1.8;
  115. font-weight: 300;
  116. color: inherit;
  117. font-size: 1.1rem;
  118. margin-top: 0;
  119. margin-bottom: .5rem
  120. }
  121.  
  122. .info h4 {
  123. font-size: 14px;
  124. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  125. font-weight: 400;
  126. color: rgba(51, 51, 51, 1);
  127. line-height: 20px;
  128. }
  129.  
  130. .btn {
  131. display: inline-block;
  132. font-weight: 400;
  133. text-align: center;
  134. white-space: nowrap;
  135. vertical-align: middle;
  136. -webkit-user-select: none;
  137. -moz-user-select: none;
  138. -ms-user-select: none;
  139. user-select: none;
  140. border: 1px solid transparent;
  141. transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  142. background-color: transparent;
  143. background-image: none;
  144. color: #0037E4FF;
  145. border-color: #0037E4FF;
  146. line-height: 1.5;
  147. border-radius: 4px;
  148. -webkit-appearance: button;
  149. cursor: pointer;
  150. min-width: 120px;
  151. min-height: 36px;
  152. box-sizing: border-box;
  153. font-size: 14px;
  154. margin-right: 8px;
  155. margin-top: 8px;
  156. }
  157.  
  158. .input-item .btn:last-child {
  159. margin-right: 0;
  160. }
  161. .btn-active {
  162. color: #fff;
  163. background-color: #0037E4FF;
  164. border-color: #0037E4FF
  165. }
  166.  
  167. .mr0 {
  168. margin-right: 0;
  169. }
  170.  
  171. .btn-full {
  172. width: 100%;
  173. }
  174.  
  175. .btn:hover {
  176. color: #fff;
  177. background-color: #0037E4FF;
  178. border-color: #0037E4FF
  179. }
  180.  
  181. .btn:hover {
  182. text-decoration: none
  183. }
  184.  
  185. .input-item {
  186. position: relative;
  187. display: -ms-flexbox;
  188. display: flex;
  189. -ms-flex-wrap: wrap;
  190. flex-wrap: wrap;
  191. -ms-flex-align: center;
  192. align-items: center;
  193. width: 100%;
  194.  
  195. }
  196.  
  197. .border {
  198. border: 1px #C0C4CCFF solid;
  199. border-radius: 4px;
  200. border: 1px solid rgba(192, 196, 204, 1);
  201. margin-top: 12px;
  202. padding-left: 10px;
  203. box-sizing: border-box;
  204. }
  205.  
  206. .input-item:last-child {
  207. margin-bottom: 0
  208. }
  209.  
  210. .input-item>input[type=date],
  211. .input-item>input[type=text],
  212. .input-item>select {
  213. position: relative;
  214. -ms-flex: 1 1 auto;
  215. flex: 1 1 auto;
  216. width: 1%;
  217. margin-bottom: 0
  218. }
  219.  
  220. .input-item>input[type=date]:not(:last-child),
  221. .input-item>input[type=text]:not(:last-child),
  222. .input-item>select:not(:last-child) {
  223. border-top-right-radius: 0;
  224. border-bottom-right-radius: 0
  225. }
  226.  
  227. .input-item>input[type=date]:not(:first-child),
  228. .input-item>input[type=text]:not(:first-child),
  229. .input-item>select:not(:first-child) {
  230. border-top-left-radius: 0;
  231. border-bottom-left-radius: 0
  232. }
  233.  
  234. .input-item-prepend {
  235. margin-right: -1px
  236. }
  237.  
  238. .input-item-text,
  239. input[type=date],
  240. input[type=text],
  241. select {
  242. height: calc(2.2rem + 2px)
  243. }
  244.  
  245. .input-item-text {
  246. width: 6rem;
  247. text-align: justify;
  248. padding: .4rem .7rem;
  249. display: inline-block;
  250. text-justify: distribute-all-lines;
  251. text-align-last: justify;
  252. -moz-text-align-last: justify;
  253. -webkit-text-align-last: justify;
  254. -ms-flex-align: center;
  255. align-items: center;
  256. margin-bottom: 0;
  257. font-size: 1rem;
  258. font-weight: 400;
  259. line-height: 1.5;
  260. color: #495057;
  261. text-align: center;
  262. white-space: nowrap;
  263. background-color: #e9ecef;
  264. border: 1px solid #ced4da;
  265. border-radius: .25rem;
  266. border-bottom-right-radius: 0;
  267. border-top-right-radius: 0
  268. }
  269.  
  270. .input-item-text input[type=checkbox],
  271. .input-item-text input[type=radio] {
  272. margin-top: 0
  273. }
  274.  
  275. .input-card {
  276. display: flex;
  277. flex-direction: column;
  278. min-width: 276px;
  279. word-wrap: break-word;
  280. background-color: #fff;
  281. background-clip: border-box;
  282. border-radius: .25rem;
  283. min-height: 94px;
  284. border-width: 0;
  285. border-radius: 2px;
  286. box-shadow: 0px 2px 6px 0px rgba(97, 113, 166, 0.2);
  287. position: fixed;
  288. bottom: 30px;
  289. right: 12px;
  290. -ms-flex: 1 1 auto;
  291. flex: 1 1 auto;
  292. padding: 14px;
  293. z-index: 200;
  294. }
  295. .styles-flex {
  296. display: flex;
  297. }
  298.  
  299. .input-card > li {
  300. list-style: none;
  301. }
  302.  
  303. .input-text {
  304. line-height: 2rem;
  305. margin-right: 2rem
  306. }
  307.  
  308. .info hr {
  309. margin-right: 0;
  310. margin-left: 0;
  311. border-top-color: grey
  312. }
  313.  
  314. .info {
  315. padding: 12px;
  316. margin-bottom: 1rem;
  317. border-radius: 2px;
  318. position: fixed;
  319. top: 8px;
  320. background-color: #fff;
  321. width: auto;
  322. min-width: 150px;
  323. border-width: 0;
  324. right: 6px;
  325. box-shadow: 0px 2px 6px 0px rgba(97, 113, 166, 0.2);
  326. }
  327.  
  328. .info p {
  329. font-size: 12px;
  330. color: #0037E4;
  331. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  332. }
  333.  
  334. .info span {
  335. color: #333;
  336. font-size: 12px;
  337. }
  338.  
  339. /* 输入提示搜索框 */
  340. .info .input-serch {
  341. position: relative;
  342. display: -ms-flexbox;
  343. display: flex;
  344. -ms-flex-wrap: wrap;
  345. flex-wrap: wrap;
  346. -ms-flex-align: center;
  347. align-items: center;
  348. width: 224px;
  349. height: 36px;
  350. }
  351.  
  352. .info .input-serch .input-serch-prepend {
  353. margin-right: -1px;
  354. box-sizing: border-box;
  355. }
  356. .info .input-serch .input-serch-prepend .input-serch-title {
  357. display: block;
  358. width: 60px;
  359. height: 28px;
  360. padding: 0 5px;
  361. text-align-last: justify;
  362. align-items: center;
  363. margin-bottom: 0;
  364. line-height: 28px;
  365. color: #495057;
  366. text-align: center;
  367. white-space: nowrap;
  368. background-color: #e9ecef;
  369. border: 1px solid #ced4da;
  370. border-radius: 4px;
  371. border-bottom-right-radius: 0;
  372. border-top-right-radius: 0;
  373. }
  374.  
  375. .info .input-serch > input{
  376. position: relative;
  377. -ms-flex: 1 1 auto;
  378. flex: 1 1 auto;
  379. width: 1%;
  380. margin-bottom: 0;
  381. background: #fff;
  382. line-height: 1.5;
  383. color: #495057;
  384. vertical-align: middle;
  385. border: 1px solid #ced4da;
  386. border-radius: 4px;
  387. -webkit-appearance: none;
  388. -moz-appearance: none;
  389. appearance: none;
  390. border-top-left-radius: 0;
  391. border-bottom-left-radius: 0;
  392. }
  393.  
  394. .info .searchData-box {
  395. position: absolute;
  396. right: 12px;
  397. top: 43px;
  398. max-width: 224px;
  399. }
  400. .info .searchData-box ul {
  401. background-color: #fefefe;
  402. border: 1px solid #d1d1d1;
  403. bottom: auto;
  404. padding: 0;
  405. margin: 0;
  406. border-radius: 4px;
  407. }
  408.  
  409. .info .searchData-box ul li {
  410. list-style: none;
  411. padding: 0 5px;
  412.  
  413. }
  414. .info .searchData-box ul li:hover {
  415. background: #E8F1FF;
  416. }
  417. .info .searchData-box ul li span {
  418. color: #c1c1c1;
  419. padding-left: 4px;
  420. }
  421.  
  422.  
  423.  
  424. .w160 {
  425. width: 160px;
  426. }
  427.  
  428. .w170 {
  429. width: 170px;
  430. }
  431.  
  432. .w180 {
  433. width: 180px;
  434. }
  435.  
  436. .w190 {
  437. width: 190px;
  438. }
  439.  
  440. .w200 {
  441. width: 200px;
  442. }
  443.  
  444. .w210 {
  445. width: 210px;
  446. }
  447.  
  448. .w220 {
  449. width: 220px;
  450. }
  451.  
  452. .w230 {
  453. width: 230px;
  454. }
  455.  
  456. .w240 {
  457. width: 240px;
  458. }
  459.  
  460. .w250 {
  461. width: 250px;
  462. }
  463.  
  464. .w260 {
  465. width: 260px;
  466. }
  467.  
  468. .w270 {
  469. width: 270px;
  470. }
  471.  
  472. .w280 {
  473. width: 280px;
  474. }
  475.  
  476. .w290 {
  477. width: 290px;
  478. }
  479.  
  480. .w300 {
  481. width: 300px;
  482. }
  483.  
  484. .mb10 {
  485. margin-bottom: 10px;
  486. }
  487.  
  488. .chbox {
  489. position: relative;
  490. cursor: pointer;
  491. margin-bottom: 14px;
  492. font-size: 14px;
  493. }
  494.  
  495. .mb0 {
  496. margin-bottom: 0;
  497. }
  498.  
  499. .chbox input {
  500. cursor: pointer;
  501. display: inline-block;
  502. }
  503.  
  504. .chbox input:checked+.show-box {
  505. background: #0037E4;
  506. }
  507.  
  508. .chbox input:checked+.show-box::before {
  509. content: '';
  510. position: absolute;
  511. top: 0px;
  512. left: 4px;
  513. width: 3px;
  514. height: 7px;
  515. border: solid white;
  516. border-width: 0 2px 2px 0;
  517. transform: rotate(45deg);
  518. }
  519.  
  520. .chbox .show-box {
  521. position: absolute;
  522. top: 2px;
  523. left: 0px;
  524. width: 15px;
  525. height: 15px;
  526. border-radius: 2px;
  527. border: 1px solid #E0E2E6;
  528. background: white;
  529. }
  530.  
  531. .code {
  532. left: 1.5rem;
  533. right: 1.5rem;
  534. top: 1.5rem;
  535. bottom: 1.5rem;
  536. overflow: auto;
  537. margin-bottom: 0
  538. }
  539.  
  540. .code .btn {
  541. top: 1rem;
  542. position: absolute;
  543. right: 1rem
  544. }
  545.  
  546. .code .result {
  547. border: 1px solid rgba(0, 0, 0, .1);
  548. border-radius: .5rem;
  549. padding: 1rem;
  550. bottom: 1rem;
  551. position: absolute;
  552. top: 5.5rem;
  553. right: 1rem;
  554. left: 1rem;
  555. overflow: auto
  556. }
  557.  
  558. .code .status {
  559. color: #80adff;
  560. display: inline-block;
  561. font-size: 14px
  562. }
  563.  
  564. .code h4 {
  565. display: inline-block;
  566. max-width: 20rem;
  567. margin-right: 1rem;
  568. margin-bottom: 1rem
  569. }
  570.  
  571. input[type=date],
  572. input[type=text],
  573. select {
  574. display: inline-block;
  575. width: 100%;
  576. padding: .375rem 1.75rem .375rem .75rem;
  577. line-height: 1.5;
  578. color: #495057;
  579. vertical-align: middle;
  580. background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
  581. background-size: 8px 10px;
  582. border: 1px solid #ced4da;
  583. border-radius: .25rem;
  584. -webkit-appearance: none;
  585. -moz-appearance: none;
  586. appearance: none
  587. }
  588.  
  589. input[type=date],
  590. input[type=text] {
  591. background: #fff;
  592. padding: .375rem .75rem
  593. }
  594.  
  595. input[type=date]:focus,
  596. input[type=text]:focus,
  597. select:focus {
  598. border-color: #80bdff;
  599. outline: 0;
  600. box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
  601. }
  602.  
  603. .btn:focus {
  604. outline: 0;
  605. box-shadow: none
  606. }
  607.  
  608. input[type=date]:focus::-ms-value,
  609. input[type=text]:focus::-ms-value,
  610. select:focus::-ms-value {
  611. color: #495057;
  612. background-color: #fff
  613. }
  614.  
  615. .native-toast {
  616. position: fixed;
  617. background-color: rgba(50, 50, 50, .8);
  618. border-radius: 2px;
  619. color: #fff;
  620. left: 50%;
  621. text-align: center;
  622. padding: 10px 20px;
  623. opacity: 0;
  624. z-index: 99999;
  625. transition: transform .25s, opacity .25s, top .25s;
  626. box-sizing: border-box
  627. }
  628.  
  629. .native-toast-bottom {
  630. bottom: 120px;
  631. -ms-transform: translateX(-50%) translateY(50px);
  632. transform: translateX(-50%) translateY(50px)
  633. }
  634.  
  635. .native-toast-bottom.native-toast-shown {
  636. opacity: 1;
  637. -ms-transform: translateX(-50%) translateY(0);
  638. transform: translateX(-50%) translateY(0)
  639. }
  640.  
  641. .native-toast-bottom.native-toast-edge {
  642. bottom: 0
  643. }
  644.  
  645. .native-toast-top {
  646. top: 50px;
  647. -ms-transform: translateX(-50%) translateY(-50px);
  648. transform: translateX(-50%) translateY(-50px)
  649. }
  650.  
  651. .native-toast-top.native-toast-shown {
  652. opacity: 1;
  653. -ms-transform: translateX(-50%) translateY(0);
  654. transform: translateX(-50%) translateY(0)
  655. }
  656.  
  657. .native-toast-top.native-toast-edge {
  658. top: 0
  659. }
  660.  
  661. .native-toast-center {
  662. top: 0;
  663. -ms-transform: translateX(-50%) translateY(-50px);
  664. transform: translateX(-50%) translateY(-50px)
  665. }
  666.  
  667. .native-toast-center.native-toast-shown {
  668. opacity: 1;
  669. top: 50%;
  670. -ms-transform: translateX(-50%) translateY(-50%);
  671. transform: translateX(-50%) translateY(-50%)
  672. }
  673.  
  674. .native-toast-edge {
  675. border-radius: 0;
  676. width: 100%;
  677. text-align: left
  678. }
  679.  
  680. @media screen and (min-width:40rem) {
  681. .native-toast:not(.native-toast-edge) {
  682. max-width: 18rem
  683. }
  684. }
  685.  
  686. .native-toast-error {
  687. background-color: #c60100;
  688. color: #fff
  689. }
  690.  
  691. .native-toast-success {
  692. background-color: #0037E4FF;
  693. font-size: 14px;
  694. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  695. color: #fff
  696. }
  697.  
  698. .native-toast-warning {
  699. background-color: #ff7d1d;
  700. color: #fff
  701. }
  702.  
  703. .native-toast-info {
  704. background-color: #0037E4FF;
  705. color: #fff;
  706. font-family: "microsoft yahei", Verdana, Geneva, Tahoma, sans-serif;
  707. font-size: 14px;
  708.  
  709. }
  710.  
  711. [class^=native-toast-icon-] {
  712. vertical-align: middle;
  713. margin-right: 8px
  714. }
  715.  
  716. [class^=native-toast-icon-] svg {
  717. width: 16px;
  718. height: 16px
  719. }
  720.  
  721. .inp {
  722. border: 0 !important;
  723. color: #0037E4FF !important;
  724. }
  725.  
  726. .radio {
  727. margin: 3px 5px;
  728. }
  729.  
  730. .radio input[type="radio"] {
  731. position: absolute;
  732. opacity: 0;
  733. }
  734.  
  735. .radio input[type="radio"]+.radio-label:before {
  736. content: '';
  737. background: #f4f4f4;
  738. border-radius: 100%;
  739. border: 1px solid #C0C4CC;
  740. display: inline-block;
  741. width: 14px;
  742. height: 14px;
  743. position: relative;
  744. top: 0;
  745. margin-right: 1em;
  746. vertical-align: top;
  747. cursor: pointer;
  748. text-align: center;
  749. -webkit-transition: all 250ms ease;
  750. transition: all 250ms ease;
  751. }
  752.  
  753. .radio input[type="radio"]:checked+.radio-label:before {
  754. background-color: #0037E4;
  755. box-shadow: inset 0 0 0 4px #f4f4f4;
  756. }
  757.  
  758. .radio input[type="radio"]:focus+.radio-label:before {
  759. outline: none;
  760. border-color: #0037E4;
  761. }
  762.  
  763. .radio input[type="radio"]:disabled+.radio-label:before {
  764. box-shadow: inset 0 0 0 4px #f4f4f4;
  765. border-color: #b4b4b4;
  766. background: #b4b4b4;
  767. }
  768.  
  769. .radio input[type="radio"]+.radio-label:empty:before {
  770. margin-right: 0;
  771. }
  772.  
  773. #mapone,
  774. #maptwo {
  775. width: calc(50vw);
  776. height: 100%;
  777. position: absolute;
  778. top: 0;
  779. left: 0;
  780. box-sizing: border-box;
  781. }
  782.  
  783. #maptwo {
  784. left: 50%;
  785. padding-left: 10px;
  786. }
  787. .lkmap-compare-horizontal{
  788. display: none;
  789. }