map.css 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. .bubble {
  2. -webkit-user-select: none;
  3. -moz-user-select: none;
  4. -ms-user-select: none;
  5. user-select: none;
  6. box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  7. -webkit-transition: background-color .15s ease-in-out;
  8. -moz-transition: background-color .15s ease-in-out;
  9. -o-transition: background-color .15s ease-in-out;
  10. transition: background-color .15s ease-in-out
  11. }
  12. .bubble-4 {
  13. width: 56px;
  14. height: 56px;
  15. border-radius: 28px;
  16. position: relative;
  17. background-image: url(img/map/bubble-4.png)
  18. }
  19. .bubble-4_tri {
  20. position: absolute;
  21. top: 45px;
  22. left: 20px;
  23. width: 0;
  24. height: 0;
  25. border: 8px solid transparent;
  26. border-bottom-color: #fff
  27. }
  28. .bubble-4_tip {
  29. position: absolute;
  30. top: 61px;
  31. background-color: #fff;
  32. height: 28px;
  33. line-height: 28px;
  34. left: -20px;
  35. width: 100px;
  36. text-align: center;
  37. border-radius: 2px;
  38. box-shadow: 0 2px 1px #A7A7A7;
  39. overflow: hidden;
  40. text-overflow: ellipsis
  41. }
  42. .bubble-3 {
  43. height: 24px;
  44. line-height: 24px;
  45. cursor: pointer;
  46. text-align: center;
  47. box-shadow: 0 1px 2px rgba(0,0,0,0.3)
  48. }
  49. .bubble-3 .num {
  50. padding: 0 3px;
  51. display: inline-block;
  52. background-color: #00a75b;
  53. border-radius: 2px;
  54. border: 1px solid #00a75b;
  55. min-width: 40px;
  56. -webkit-transition: all .15s ease-in-out;
  57. -moz-transition: all .15s ease-in-out;
  58. -o-transition: all .15s ease-in-out;
  59. transition: all .15s ease-in-out
  60. }
  61. .bubble-3 .num b {
  62. font-weight: bold
  63. }
  64. .bubble-3 .arrow-up {
  65. border: 4px solid transparent;
  66. border-top-width: 4px;
  67. border-top-color: #00a75b
  68. }
  69. .bubble-3 .name {
  70. height: 30px;
  71. color: #333;
  72. position: absolute;
  73. z-index: -1;
  74. line-height: 30px;
  75. -webkit-transition: all .15s ease-in-out;
  76. -moz-transition: all .15s ease-in-out;
  77. -o-transition: all .15s ease-in-out;
  78. transition: all .15s ease-in-out;
  79. opacity: 0;
  80. visibility: hidden
  81. }
  82. .bubble-3 .name-des {
  83. background-color: #fff;
  84. display: inline-block;
  85. padding: 0 6px;
  86. border-radius: 0 3px 3px 0;
  87. box-shadow: 0 2px 2px rgba(0,0,0,0.2)
  88. }
  89. .bubble-3 .name-des a {
  90. color: #333
  91. }
  92. .bubble-3:hover .num,.bubble-3.clicked .num,.bubble-3.hovered .num {
  93. background-color: #e4393c;
  94. border-color: #e4393c;
  95. color: #fff
  96. }
  97. .bubble-3:hover .name,.bubble-3.clicked .name,.bubble-3.hovered .name {
  98. visibility: visible;
  99. opacity: 1
  100. }
  101. .bubble-3:hover .arrow-up,.bubble-3.clicked .arrow-up,.bubble-3.hovered .arrow-up {
  102. border-top-color: #e4393c
  103. }
  104. .bubble-3:hover .arrow,.bubble-3.clicked .arrow,.bubble-3.hovered .arrow {
  105. border-top-color: #e4393c
  106. }
  107. .bubble-3.ditie_clicked .num {
  108. background-color: #0085FD;
  109. border-color: #0085FD
  110. }
  111. .bubble-3.ditie_clicked .arrow-up {
  112. border-top-color: #0085FD
  113. }
  114. .bubble-3.ditie_clicked .arrow {
  115. border-top-color: #0085FD
  116. }
  117. .label-clicked {
  118. z-index: 3 !important
  119. }
  120. .arrow-up {
  121. opacity: .9999;
  122. zoom:1}
  123. .arrow-up,.arrow {
  124. border: 6px solid transparent;
  125. border-top-color: #00a75b;
  126. border-top-width: 8px;
  127. display: block;
  128. width: 0;
  129. height: 0;
  130. margin: 0 auto;
  131. -webkit-transition: all .15s ease-in-out;
  132. -moz-transition: all .15s ease-in-out;
  133. -o-transition: all .15s ease-in-out;
  134. transition: all .15s ease-in-out
  135. }
  136. .arrow {
  137. border-top-color: #00a75b;
  138. margin-left: -6px;
  139. margin-top: -9px;
  140. position: relative
  141. }
  142. .bubble-2 {
  143. width: 78px;
  144. height: 78px;
  145. border: 1px solid transparent;
  146. background-color: #00a75b;
  147. background-color: rgba(0,167,91,0.9);
  148. border-radius: 50%;
  149. overflow: hidden;
  150. line-height: 18px;
  151. cursor: pointer
  152. }
  153. .bubble-2:hover {
  154. background-color: #e4393c;
  155. background-color: rgba(240,65,52,0.9)
  156. }
  157. .bubble-2.hover {
  158. background-color: #e4393c;
  159. background-color: rgba(240,65,52,0.9)
  160. }
  161. .bubble-2 .name {
  162. margin-top: 10px
  163. }
  164. .bubble-2 .num {
  165. font-size: 13px;
  166. font-weight: bold;
  167. margin-top: -2px;
  168. min-height: 10px
  169. }
  170. .bubble-2 .count {
  171. font-size: 12px;
  172. font-weight: bold;
  173. font-family: tahoma
  174. }
  175. .bubble-2 p {
  176. overflow: hidden;
  177. text-overflow: ellipsis;
  178. padding-left: 6px;
  179. padding-right: 6px
  180. }
  181. .bubble-21 {
  182. line-height: 20px
  183. }
  184. .bubble-21 .name {
  185. margin-top: 20px
  186. }
  187. .bubble-5 {
  188. width: 84px;
  189. height: 84px;
  190. line-height: 20px;
  191. font-size: 12px
  192. }
  193. .bubble-5 .name {
  194. margin-top: 12px
  195. }
  196. .bubble-6 .name {
  197. margin-top: 24px
  198. }
  199. .bubble-6 .count {
  200. font-size: 12px;
  201. font-family: tahoma
  202. }
  203. .bubble-8 {
  204. background-image: url(img/map/bubble-8.png);
  205. cursor: pointer
  206. }
  207. .bubble-9 {
  208. line-height: 20px
  209. }
  210. .bubble-9 .name {
  211. margin-top: 20px
  212. }
  213. .bubble-10 {
  214. background-image: url(img/map/btn-subway-staion.png);
  215. cursor: default
  216. }
  217. @media \0screen {
  218. .bubble-2 {
  219. background-position: center center;
  220. background-repeat: no-repeat;
  221. background-image: url(img/map/bubble2-ie8.png);
  222. background-color: transparent
  223. }
  224. .bubble-2:hover {
  225. background-image: url(img/map/bubble2-hover-ie8.png);
  226. background-color: transparent
  227. }
  228. .bubble-5 {
  229. background-position: center center;
  230. background-repeat: no-repeat;
  231. background-image: url(img/map/bubble5-ie8.png);
  232. background-color: transparent
  233. }
  234. .bubble-5:hover {
  235. background-image: url(img/map/bubble5-hover-ie8.png);
  236. background-color: transparent
  237. }
  238. }
  239. .resblock_label {
  240. width: 33px;
  241. height: 40px;
  242. background-image: url(img/map/sprite.svg);
  243. background-color: transparent;
  244. background-repeat: no-repeat;
  245. background-position: -222px 0
  246. }
  247. .icon_transfer_station:after {
  248. display: inline-block;
  249. background-image: url(img/map/sprite.svg);
  250. background-repeat: no-repeat;
  251. position: relative;
  252. cursor: pointer
  253. }
  254. .map_icon {
  255. display: inline-block;
  256. background-image: url(img/map/sprite.svg);
  257. background-repeat: no-repeat;
  258. position: relative;
  259. cursor: pointer
  260. }
  261. .map_icon.icon_arrow_down {
  262. width: 12px;
  263. height: 12px;
  264. margin-left: 8px;
  265. background-position: -119px 0;
  266. top: 4px
  267. }
  268. .map_icon.icon_search {
  269. width: 13px;
  270. height: 13px;
  271. position: absolute;
  272. right: 14px;
  273. top: 20px;
  274. -webkit-transform: scale(1.21);
  275. -ms-transform: scale(1.21);
  276. -o-transform: scale(1.21)
  277. }
  278. .map_icon.icon_search.icon_search_green {
  279. background-position: -287px 0
  280. }
  281. .map_icon.icon_checkbox {
  282. background-position: -143px 0
  283. }
  284. .map_icon.icon_circle_entrance {
  285. width: 20px;
  286. height: 20px;
  287. background-position: -34px 0;
  288. top: 3px;
  289. margin-right: 10px
  290. }
  291. .map_icon.icon_subway_entrance {
  292. width: 16px;
  293. height: 20px;
  294. background-position: -70px 0;
  295. top: 5px;
  296. margin-right: 10px
  297. }
  298. .map_icon.icon_close_houselist {
  299. width: 10px;
  300. height: 16px;
  301. background-position: -171px 0;
  302. top: 2px
  303. }
  304. .map_icon.icon_redraw {
  305. width: 16px;
  306. height: 19px;
  307. background-position: -190px 0;
  308. margin-right: 4px;
  309. top: 4px
  310. }
  311. .map_icon.icon_jia {
  312. width: 8px;
  313. height: 8px;
  314. background-position: -271px 0;
  315. top: 3px
  316. }
  317. .map_icon.icon_jian {
  318. width: 8px;
  319. height: 8px;
  320. background-position: -279px 0;
  321. top: 3px
  322. }
  323. .icon_transfer_station:after {
  324. width: 16px;
  325. height: 16px;
  326. background-position: -255px 0;
  327. border: none;
  328. position: absolute;
  329. top: -4px;
  330. left: 5px
  331. }
  332. .count_hint {
  333. position: absolute;
  334. background: rgba(0,0,0,0.6);
  335. color: #fff;
  336. padding: 0 18px;
  337. border-radius: 2px;
  338. font-size: 12px;
  339. bottom: 20px;
  340. left: 50%;
  341. height: 26px;
  342. padding-bottom: 1px;
  343. line-height: 26px;
  344. font-weight: bold;
  345. transform: translate(-50%, 0);
  346. -webkit-transform: translate(-50%, 0);
  347. -ms-transform: translate(-50%, 0);
  348. -o-transform: translate(-50%, 0)
  349. }
  350. .control {
  351. position: absolute;
  352. bottom: 70px;
  353. right: 22px;
  354. background-color: #fff;
  355. width: 28px;
  356. border: 1px solid #999999;
  357. box-shadow: 0 3px 5px rgba(0,0,0,0.12);
  358. border-radius: 4px
  359. }
  360. .control a {
  361. width: 28px;
  362. height: 28px;
  363. display: block;
  364. cursor: pointer;
  365. text-align: center
  366. }
  367. .control a:first-child {
  368. border-bottom: 1px solid #EDEDED
  369. }
  370. body .lianjiaim {
  371. right: 145px
  372. }