index.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5. html,
  6. body {
  7. width: 100%;
  8. height: 100%;
  9. overflow: hidden;
  10. position: relative;
  11. }
  12. #map {
  13. position: relative;
  14. width: 100%;
  15. height: 100%;
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. }
  20. .loadinggif {
  21. width: 50px;
  22. height: 50px;
  23. position: fixed;
  24. left: 50%;
  25. bottom: 50%;
  26. margin-left: -25px;
  27. margin-top: -25px;
  28. z-index: 99;
  29. }
  30. .gm-style-mtc {
  31. display: none;
  32. }
  33. .gmnoprint {
  34. display: none !important;
  35. }
  36. .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
  37. display: none;
  38. }
  39. .gm-control-active.gm-fullscreen-control {
  40. display: none;
  41. }
  42. [class^="https://maps.google.com/maps"] {
  43. display: none !important;
  44. }
  45. .tabs {
  46. width: 60%;
  47. height: 40px;
  48. margin-left: 20%;
  49. position: fixed;
  50. left: 0;
  51. top: 20px;
  52. display: flex;
  53. align-items: center;
  54. justify-content: space-around;
  55. z-index: 100;
  56. }
  57. .tabs div {
  58. width: 100px;
  59. height: 40px;
  60. font-size: 18px;
  61. font-weight: 700;
  62. display: flex;
  63. align-items: center;
  64. justify-content: center;
  65. border-radius: 20px;
  66. position: relative;
  67. color: #666;
  68. }
  69. .tabs .active span {
  70. position: relative;
  71. font-size: 20px;
  72. font-weight: bold;
  73. color: #333;
  74. }
  75. .tabs .active span ::after {
  76. content: '';
  77. width: 20px;
  78. height: 5px;
  79. background-color: saddlebrown;
  80. position: absolute;
  81. left: 20px;
  82. bottom: 10px;
  83. }
  84. .tabs-left {}
  85. .tabs-right {}
  86. /* 动画 */
  87. .loader {
  88. position: fixed;
  89. z-index: 99;
  90. border: 8px solid #f3f3f3;
  91. border-top: 8px solid #ea4335;
  92. border-radius: 50%;
  93. width: 45px;
  94. height: 45px;
  95. animation: spin 2s linear infinite;
  96. position: absolute;
  97. top: 50%;
  98. left: 50%;
  99. margin-left: -30px;
  100. margin-top: -30px;
  101. transform: translate(-50%, -50%);
  102. }
  103. @keyframes spin {
  104. 0% {
  105. transform: rotate(0deg);
  106. }
  107. 100% {
  108. transform: rotate(360deg);
  109. }
  110. }
  111. /* end */
  112. /* 地图信息窗口样式 */
  113. .textoverflow {
  114. width: 100%;
  115. line-height: 23px;
  116. }
  117. .imgs {
  118. width: 100%;
  119. height: auto;
  120. max-height: 150px;
  121. }
  122. .infoWindow-title {
  123. width: 100%;
  124. font-size: 16px;
  125. font-weight: 600;
  126. line-height: 22px;
  127. }
  128. /* end */
  129. #slider {
  130. width: 96%;
  131. margin-left: 2%;
  132. background-color: #fff;
  133. position: fixed;
  134. left: 0;
  135. bottom: 10px;
  136. z-index: 100;
  137. border-radius: 6px;
  138. padding: 20px 15px;
  139. box-sizing: border-box;
  140. }
  141. .slider-title {
  142. width: 100%;
  143. font-size: 15px;
  144. font-weight: 500;
  145. }
  146. .slider-box {
  147. width: 100%;
  148. padding: 0 10p x 0 0;
  149. box-sizing: border-box;
  150. margin-top: 20px;
  151. display: flex;
  152. align-items: center;
  153. }
  154. .slider-btn {
  155. width: 100%;
  156. height: 40px;
  157. color: #fff;
  158. background-color: darkcyan;
  159. font-size: 15px;
  160. font-weight: 500;
  161. display: flex;
  162. align-items: center;
  163. justify-content: center;
  164. border-radius: 5px;
  165. margin-top: 30px;
  166. }
  167. .custom-button {
  168. width: 26px;
  169. color: #fff;
  170. font-size: 12px;
  171. font-weight: 500;
  172. line-height: 25px;
  173. text-align: center;
  174. background-color: darkcyan;
  175. border-radius: 100px;
  176. }
  177. #search-box {
  178. height: 30px;
  179. width: 93%;
  180. position: fixed;
  181. padding: 5px;
  182. font-size: 16px;
  183. border-radius: 4px;
  184. border: 1px solid #ccc;
  185. box-shadow: 0px 1px 3px #ddd;
  186. left: 2%;
  187. top: 80px;
  188. font-size: 12px;
  189. }
  190. /* 定位图标 */
  191. .pos {
  192. width: 36px;
  193. height: 36px;
  194. position: fixed;
  195. right: 10px;
  196. bottom: 250px;
  197. z-index: 100;
  198. padding: 6px;
  199. box-sizing: border-box;
  200. border-radius: 5px;
  201. background-color: #fff;
  202. }
  203. .citys {
  204. width: 96%;
  205. position: fixed;
  206. font-size: 16px;
  207. left: 2%;
  208. top: 130px;
  209. font-size: 12px;
  210. background-color: #fff;
  211. padding: 5px 10px;
  212. box-sizing: border-box;
  213. border-radius: 5px;
  214. }