meteo.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140
  1. /*天气*/
  2. .meteo-main-menu {
  3. /*如有相应的点可以去掉 start */
  4. position: absolute;
  5. right: 100px;
  6. top: 70px;
  7. /*如有相应的点可以去掉 end */
  8. width: 330px;
  9. border: 1px solid #378be0;
  10. z-index: 99999;
  11. display: none;
  12. background: #fff;
  13. background: #fff url(../../images/layout/bg-normal.png);
  14. }
  15. .meteo-menu-top {
  16. height: 40px;
  17. /* background-color: #378be0; */
  18. padding: 14px 0 0 20px;
  19. position: relative;
  20. box-sizing: border-box;
  21. }
  22. .meteo-menu-top .meteo-title, .meteo-menu-top .meteo-delete {
  23. font-size: 15px;
  24. color: #fff;
  25. font-weight: normal;
  26. }
  27. .meteo-menu-top .meteo-delete {
  28. position: absolute;
  29. right: 20px;
  30. top: 15px;
  31. }
  32. .meteo-menu-top .meteo-remove {
  33. right: 50px;
  34. }
  35. .meteo-main-content {
  36. position: relative;
  37. }
  38. .meteo-main-content .meteo-time-box {
  39. /*height: 85px;*/
  40. /*margin: 8px 0 0 15px;*/
  41. height: 42px;
  42. margin: 8px 0 0 30px;
  43. background-color: #fff;
  44. margin-top: 10px;
  45. }
  46. .meteo-main-content .meteo-select-time {
  47. font-size: 14px;
  48. color: #666;
  49. vertical-align: middle;
  50. }
  51. .meteo-main-content .meteo-time-box input {
  52. color: #666;
  53. vertical-align: middle;
  54. font-weight: normal;
  55. }
  56. .meteo-main-content .meteo-main-warp {
  57. max-height: 407px;
  58. overflow: auto;
  59. }
  60. /*树形菜单*/
  61. .meteo-oneUl {
  62. border-bottom: 1px solid #2a67a5;
  63. }
  64. .meteo-oneUl .meteo-twoUl {
  65. display: none;
  66. }
  67. .meteo-oneUl .meteo-threeUl {
  68. display: none;
  69. }
  70. /*一*/
  71. .meteo-oneUl .meteo-oneLi {
  72. line-height: 22px;
  73. background-color: #1F5E9F;
  74. }
  75. /*.meteo-oneUl .meteo-oneLi.meteo-twoLi{*/
  76. /*background:url(../images/img/web_26.gif) repeat-x;*/
  77. /*}*/
  78. .meteo-oneUl .meteo-oneLi .meteo-oneBtn {
  79. display: block;
  80. padding-left: 40px;
  81. color: #fff;
  82. height: 40px;
  83. line-height: 40px;
  84. background: url(../../images/meteo/layout/arrow-top.png) no-repeat 22px center;
  85. }
  86. /*.meteo-oneUl .meteo-oneLi .meteo-oneBtn.meteo-lastBtn{*/
  87. /*background:url(../images/img/web_biao4.png) no-repeat 5px center;*/
  88. /*}*/
  89. .meteo-oneUl .meteo-oneLi.current .meteo-oneBtn {
  90. background: url(../../images/meteo/layout/arrow-bottom.png) no-repeat 18px center;
  91. }
  92. .meteo-oneUl .meteo-oneLi.current .meteo-twoUl {
  93. display: block;
  94. }
  95. /*二*/
  96. #menu .meteo-twoUl .meteo-twoLi.meteo-twoLi {
  97. width: 100%;
  98. border-bottom: 1px solid #1961b6;
  99. height: 40px;
  100. line-height: 40px;
  101. }
  102. .meteo-twoUl .meteo-twoLi.meteo-twoLi {
  103. width: 100%;
  104. border-bottom: 1px solid #1961b6;
  105. height: 40px;
  106. line-height: 40px;
  107. }
  108. .meteo-twoUl .meteo-twoLi .meteo-twoBtn {
  109. display: inline-block;
  110. padding-left: 75px;
  111. color: #fff;
  112. line-height: 33px;
  113. background: url(../../images/meteo/layout/selected-no.png) no-repeat 55px center;
  114. }
  115. .meteo-twoUl .meteo-twoLi .meteo-twoBtn.meteo-lastBtn {
  116. background: url(../../images/meteo/layout/selected-no.png) no-repeat 55px center;
  117. }
  118. .meteo-twoUl .meteo-twoLi.current .meteo-twoBtn {
  119. background-image: url(../../images/meteo/layout/selected.png);
  120. }
  121. .meteo-twoUl .meteo-twoLi.current .meteo-threeUl {
  122. display: block;
  123. }
  124. /*三*/
  125. .meteo-threeUl .meteo-threeLi {
  126. line-height: 22px;
  127. border-bottom: 1px solid #204b77;
  128. background-color: #17406b;
  129. height: 35px;
  130. line-height: 32px;
  131. }
  132. .meteo-threeUl .meteo-threeLi .threeBtn {
  133. display: block;
  134. padding-left: 76px;
  135. color: #fff;
  136. height: 30px;
  137. line-height: 30px;
  138. }
  139. .meteo-threeUl .meteo-threeLi .threeBtn.meteo-lastBtn {
  140. background: url(../../images/meteo/layout/selected-no.png) no-repeat 62px center;
  141. padding-left: 83px;
  142. }
  143. .meteo-threeUl .meteo-threeLi.current .threeBtn {
  144. background-image: url(../../images/meteo/layout/selected.png);
  145. }
  146. .meteo-twoUl .meteo-twoLi .meteo-arrow-top {
  147. background: url(../../images/meteo/layout/arrow-top.png) no-repeat 40px center;
  148. padding-left: 60px;
  149. }
  150. .meteo-twoUl .meteo-twoLi .meteo-arrow-top.current {
  151. background: url(../../images/meteo/layout/arrow-bottom.png) no-repeat 36px center;
  152. }
  153. .meteo-information .meteo-site-ul {
  154. display: block;
  155. }
  156. .meteo-information .meteo-site-list {
  157. display: none;
  158. }
  159. #menu .infoMenu .meteo-control-active{
  160. border-bottom: 1px solid #1961b6;
  161. }
  162. #menu .infoMenu .fu #meteo-bt-wave {
  163. display: inline-block;
  164. margin-left: 40px;
  165. padding-left: 24px;
  166. background: url(../../images/meteo/layout/selected-no.png) no-repeat 0 center;
  167. }
  168. #menu .infoMenu .fu #meteo-bt-wave.current {
  169. background: url(../../images/meteo/layout/selected.png) no-repeat 0 center;
  170. }
  171. /*气象信息查询*/
  172. .meteo-information .meteo-longitude-group {
  173. height: 68px;
  174. }
  175. .meteo-information .meteo-site-text, .meteo-information .meteo-longitude-text {
  176. color: #333333;
  177. padding: 0 5px 0 20px;
  178. vertical-align: middle;
  179. }
  180. .meteo-information .meteo-site-input, .meteo-information .meteo-longitude-input {
  181. width: 150px;
  182. height: 24px;
  183. vertical-align: middle;
  184. }
  185. .meteo-information .meteo-button-group {
  186. float: left;
  187. padding-left: 10px;
  188. }
  189. .meteo-information .meteo-button-group a {
  190. color: #fff;
  191. border: 1px solid #fff;
  192. height: 24px;
  193. display: inline-block;
  194. width: 50px;
  195. text-align: center;
  196. line-height: 21px;
  197. font-size: 14px;
  198. vertical-align: middle;
  199. margin: 0 3px;
  200. }
  201. .meteo-information .meteo-button-group a:hover {
  202. color: #01b7ff;
  203. }
  204. .meteo-information .meteo-button-group a:focus {
  205. color: #378be0;
  206. border: 1px solid #01b7ff;
  207. }
  208. /*时间轴*/
  209. .meteo-time-box {
  210. height: 50px;
  211. background-color: rgba(55, 139, 224, 0.3);
  212. padding: 10px 0 0 25px;
  213. box-sizing: border-box;
  214. border-bottom: 1px solid #01b7ff;
  215. }
  216. .meteo-select-time {
  217. color: #fff;
  218. font-size: 14px;
  219. }
  220. .meteo-time-boxmax {
  221. width: 400px;
  222. height: 95px;
  223. position: absolute;
  224. left: 0;
  225. top: -10px;
  226. z-index: 4;
  227. }
  228. .meteo-slider-line {
  229. position: absolute;
  230. left: 5px;
  231. top: 30px;
  232. width: 360px;
  233. height: 8px;
  234. background-color: #112f4d;
  235. border: 1px solid #01b7ff;
  236. border-radius: 4px;
  237. }
  238. .meteo-slider-move {
  239. position: absolute;
  240. /* left:0; */
  241. top: 20px;
  242. width: 25px;
  243. height: 25px;
  244. background: url(../../images/meteo/layout/slider-move.png);
  245. z-index: 1;
  246. cursor: pointer;
  247. }
  248. .meteo-slider-move-text {
  249. position: absolute;
  250. left: -5px;
  251. top: -20px;
  252. font-size: 12px;
  253. background-color: #378be0;
  254. color: #fff;
  255. border-radius: 10px;
  256. width: 40px;
  257. height: 22px;
  258. line-height: 22px;
  259. text-align: center;
  260. }
  261. .meteo-slider-foottime {
  262. width: 360px;
  263. height: 50px;
  264. position: absolute;
  265. left: 6px;
  266. top: 31px;
  267. }
  268. .meteo-slider-foottime .meteo-slider-date {
  269. position: absolute;
  270. left: 0;
  271. top: 10px;
  272. width: 100%;
  273. }
  274. .meteo-slider-foottime .meteo-slider-date li {
  275. position: absolute;
  276. top: 5px;
  277. left: 0;
  278. width: 33px;
  279. text-align: center;
  280. font-size: 12px;
  281. margin-left: -15px;
  282. }
  283. .meteo-slider-vertical-line {
  284. width: 100%;
  285. position: absolute;
  286. left: 0;
  287. top: 1px;
  288. }
  289. .meteo-slider-vertical-line li {
  290. width: 2px;
  291. height: 6px;
  292. background-color: #e9cb22;
  293. position: absolute;
  294. left: 0;
  295. top: 0;
  296. }
  297. /*天气 end*/
  298. /*时间轴 新 start*/
  299. .meteo-time-boxone {
  300. position: absolute;
  301. top: 78%;
  302. left: 0;
  303. right: 0;
  304. margin: auto;
  305. width: 492px;
  306. }
  307. .meteo-time-boxbg {
  308. background: #1258ac;
  309. }
  310. /*时间轴 新 end*/
  311. /*实况 start*/
  312. .meteo-popup {
  313. /*如有相应的点可以去掉 start */
  314. position: absolute;
  315. left: 260px;
  316. top: 100px;
  317. /*如有相应的点可以去掉 end */
  318. /* height: 422px; */
  319. width: 740px;
  320. border: 1px solid #378be0;
  321. z-index: 99999;
  322. display: none;
  323. background: #fff;
  324. }
  325. .meteo-popup-main-warp {
  326. border: 1px solid #ccc;
  327. }
  328. .meteo-popup .meteo-popup-main-warp.current {
  329. display: block;
  330. }
  331. .meteo-popup .meteo-popup-main {
  332. overflow: hidden;
  333. padding: 5px 0;
  334. }
  335. .meteo-popup .meteo-popup-main li {
  336. float: left;
  337. width: 172px;
  338. margin-left: 12px;
  339. }
  340. .meteo-popup .meteo-popup-main li span {
  341. font-size: 14px;
  342. }
  343. .meteo-popup .meteo-main-name {
  344. text-align: right;
  345. display: inline-block;
  346. width: 84px;
  347. }
  348. .meteo-popup-chart {
  349. /*自己定宽高*/
  350. width: 740px;
  351. height: 270px;
  352. /*background-color: #e3f1ff;*/
  353. }
  354. .meteo-popup-chart-list {
  355. width: 741px;
  356. height: 260px;
  357. display: none;
  358. }
  359. .meteo-popup-chart-listmin {
  360. height: 260px;
  361. }
  362. .meteo-popup-chart.current {
  363. display: block;
  364. }
  365. .meteo-popup-buttons {
  366. text-align: center;
  367. margin-top: 10px;
  368. }
  369. .meteo-popup-buttons a {
  370. display: inline-block;
  371. width: 90px;
  372. height: 30px;
  373. line-height: 30px;
  374. text-align: center;
  375. border: 1px solid #378be0;
  376. border-radius: 4px;
  377. font-size: 16px;
  378. margin: 0 10px;
  379. color: #378be0;
  380. }
  381. .meteo-popup-buttons a:hover {
  382. color: #378be0;
  383. }
  384. .meteo-popup-buttons a.current {
  385. color: #ffffff;
  386. border: 1px solid #378be0;
  387. background-color: #378be0;
  388. }
  389. .meteo-popup-button {
  390. display: none;
  391. }
  392. /*实况 end*/
  393. /* 台风 start*/
  394. .meteo-popup-typhoon {
  395. /*如有相应的点可以去掉 start */
  396. position: absolute;
  397. left: 450px;
  398. top: 100px;
  399. /*如有相应的点可以去掉 end */
  400. width: 300px;
  401. border: 1px solid #378be0;
  402. z-index: 99999;
  403. display: none;
  404. }
  405. .meteo-popup-typhoon .meteo-popup-typhoon-warp li {
  406. line-height: 24px;
  407. }
  408. .meteo-popup-typhoon .meteo-popup-typhoon-warp li span {
  409. font-size: 14px;
  410. }
  411. .meteo-popup-typhoon-warp {
  412. max-height: 407px;
  413. }
  414. .meteo-popup-typhoonUl {
  415. padding: 5px;
  416. }
  417. /* 台风 end*/
  418. /*机场 strat*/
  419. .meteo-popup-airport {
  420. /*如有相应的点可以去掉 start */
  421. position: absolute;
  422. left: 100px;
  423. top: 100px;
  424. /*如有相应的点可以去掉 end */
  425. width: 320px;
  426. border: 1px solid #378be0;
  427. z-index: 99999;
  428. display: none;
  429. }
  430. .meteo-menu-top-airport {
  431. position: relative;
  432. box-sizing: border-box;
  433. margin-left: -8px;
  434. /*margin-top: -12px;*/
  435. /*background: transparent;*/
  436. }
  437. .meteo-popup-airport .meteo-popup-airport-warp li {
  438. line-height: 24px;
  439. }
  440. .meteo-popup-airport .meteo-popup-airport-warp li span {
  441. font-size: 14px;
  442. }
  443. .meteo-popup-airpory-h4 {
  444. color: #2889d8;
  445. font-weight: normal;
  446. font-size: 16px;
  447. }
  448. .meteo-popup-airportUl li span {
  449. font-size: 14px;
  450. }
  451. .meteo-popup-airpory-text {
  452. display: inline-block;
  453. text-align: justify;
  454. text-justify: distribute;
  455. }
  456. .meteo-popup-airpory-li {
  457. margin-top: 10px;
  458. }
  459. .meteo-popup-airport-li {
  460. color: #666;
  461. }
  462. /*机场 end*/
  463. /*hover 天气*/
  464. .meteo-hover-div {
  465. position: absolute;
  466. top: 0;
  467. right: 40px;
  468. width: 98px;
  469. height: 50px;
  470. display: none;
  471. }
  472. .meteo-hover-button {
  473. position: fixed;
  474. right: 0px;
  475. top: 450px;
  476. width: 60px;
  477. height: 42px;
  478. text-align: center;
  479. line-height: 42px;
  480. border: 1px solid #adadad;
  481. display: block;
  482. z-index: 999;
  483. }
  484. .meteo-hover-button-warp {
  485. position: absolute;
  486. right: 0;
  487. top: 0;
  488. }
  489. .meteo-hover-ul {
  490. overflow: hidden;
  491. }
  492. .meteo-hover-li {
  493. float: left;
  494. cursor: pointer;
  495. }
  496. #topBar #meteo-bt-sc-surf {
  497. width: 49px;
  498. height: 50px;
  499. background: #fff url(../../images/meteo/layout/b1.png) no-repeat;
  500. }
  501. #topBar #meteo-bt-sc-cloud {
  502. width: 46px;
  503. height: 50px;
  504. background: #fff url(../../images/meteo/layout/b2.png) no-repeat;
  505. }
  506. #topBar #meteo-bt-sc-typh {
  507. width: 49px;
  508. height: 50px;
  509. background: #fff url(../../images/meteo/layout/b3.png) no-repeat;
  510. }
  511. /*危险天气监控*/
  512. .meteo-wheather-monitoring {
  513. position: absolute;
  514. left: 0;
  515. top: 0;
  516. right: 0;
  517. bottom: 0;
  518. background: #fff url(../../images/layout/bg-normal.png);
  519. }
  520. .meteo-wheather-monitoring ul {
  521. overflow: hidden;
  522. border-bottom: 1px solid #01b7ff;
  523. padding: 5px 0;
  524. }
  525. #meteo-control .meteo-twoUL-last {
  526. border-bottom: 0;
  527. }
  528. .meteo-wheather-monitoring .meteo-twoUl .meteo-twoLi {
  529. float: left;
  530. width: 44%;
  531. margin: 0;
  532. line-height: 25px;
  533. border-bottom: 0;
  534. position: relative;
  535. }
  536. #meteo-monitoring-jiankong {
  537. overflow: hidden;
  538. }
  539. #meteo-monitoring-jiankong .meteo-twoLi {
  540. float: left;
  541. width: 44%;
  542. margin: 0;
  543. line-height: 25px;
  544. border-bottom: 0;
  545. }
  546. .meteo-wheather-message {
  547. position: absolute;
  548. left: 0;
  549. top: 0;
  550. width: 100%;
  551. height: 100%;
  552. background: #fff url(../../images/layout/bg-normal.png);
  553. }
  554. .meteo-wheather-message-list {
  555. box-sizing: border-box;
  556. border: 1px solid #01b7ff;
  557. position: absolute;
  558. left: 20px;
  559. top: 0;
  560. bottom: 10px;
  561. right: 5px;
  562. overflow: hidden;
  563. /*background-color: #184a7e;*/
  564. }
  565. .meteo-monitoring-h3 {
  566. font-size: 16px;
  567. color: #fff;
  568. height: 40px;
  569. line-height: 40px;
  570. font-weight: normal;
  571. padding-left: 10px;
  572. background-color: rgba(55, 139, 224, 0.3);
  573. box-shadow: 0 1px 8px #1f548a;
  574. position: relative;
  575. }
  576. #meteo-bt-cloud-paly{
  577. width: 12px;
  578. height: 16px;
  579. background: url(../../scripts/meteo/other/meteoVideo/img/play.png) no-repeat left center;
  580. position: absolute;
  581. left: 90px;
  582. top: 12px;
  583. cursor: pointer;
  584. }
  585. #meteo-bt-cloud-paly.current{
  586. background-image: url(../../scripts/meteo/other/meteoVideo/img/pause.png);
  587. }
  588. .meteo-monitoring-warp-div {
  589. position: absolute;
  590. left: 0;
  591. top: 40px;
  592. right: 0;
  593. bottom: 0;
  594. /*top: 180px;*/
  595. }
  596. .meteo-information {
  597. /*要去掉的*/
  598. position: absolute;
  599. left: 300px;
  600. bottom: 60px;
  601. border: 1px solid #ccc;
  602. width: 300px;
  603. height: 300px;
  604. z-index: 999;
  605. padding: 5px;
  606. background: #b9b9b9;
  607. }
  608. /*单点查询*/
  609. .meteo-query {
  610. display: none;
  611. position: absolute;
  612. bottom: 25px;
  613. left: 50%;
  614. margin-left: -150px;
  615. width: 300px;
  616. border: 1px solid #01b7ff;
  617. background-color: #1258ac;
  618. z-index: 999999999;
  619. box-sizing: border-box;
  620. }
  621. .meteo-query-odd {
  622. position: absolute;
  623. left: -1px;
  624. top: -22px;
  625. width: 80px;
  626. height: 21px;
  627. padding-left: 11px;
  628. line-height: 21px;
  629. background: url(../../images/meteo/layout/bgtitle.png) no-repeat;
  630. color: #fff;
  631. font-size: 12px;
  632. }
  633. .meteo-query-del {
  634. position: absolute;
  635. right: -1px;
  636. top: -17px;
  637. }
  638. .meteo-query-title {
  639. height: 50px;
  640. /*border-bottom: 1px solid #01b7ff;*/
  641. padding: 10px 0 0 15px;
  642. box-sizing: border-box;
  643. box-shadow: 0 1px 8px #1f548a;
  644. }
  645. .meteo-query-title input {
  646. width: 220px;
  647. height: 30px;
  648. padding: 5px;
  649. box-sizing: border-box;
  650. border: 0 none;
  651. }
  652. .meteo-query-button {
  653. width: 35px;
  654. height: 30px;
  655. display: inline-block;
  656. background-color: #327cd4;
  657. vertical-align: middle;
  658. padding: 5px 0 0 7px;
  659. margin-top: -3px;
  660. box-sizing: border-box;
  661. }
  662. .meteo-query-main {
  663. width: 298px;
  664. max-height: 250px;
  665. background-color: #0f4382;
  666. display: none;
  667. }
  668. .meteo-query-main li {
  669. padding: 5px;
  670. color: #fff;
  671. line-height: 25px;
  672. border-bottom: 1px solid #01b7ff;
  673. }
  674. .meteo-img {
  675. display: inline-block;
  676. position: absolute;
  677. top: 6px;
  678. left: 130px;
  679. }
  680. .meteo-img-max {
  681. left: 170px;
  682. }
  683. /*--------------------------标题部分--------------------------*/
  684. .meteo-title-box {
  685. width:auto; /*最小宽度 根据字的长短*/
  686. height: auto;
  687. position: absolute;
  688. top: 72px; /*距上的距离*/
  689. right: -70px; /*距右的距离*/
  690. /*background-color: #fff;*/
  691. /*background-color:transparent;*/
  692. /*background-color:rgba(255, 255, 255, 0.3);*/
  693. background-color: rgba(0, 0, 0, 0.3);
  694. /*背景颜色*/
  695. -webkit-transform: translate(-50%, -50%);
  696. -moz-transform: translate(-50%, -50%);
  697. -ms-transform: translate(-50%, -50%);
  698. -o-transform: translate(-50%, -50%);
  699. transform: translate(-50%, -50%);
  700. display: none;
  701. }
  702. .meteo-title-box ul li {
  703. height: 30px; /*每条字的高度 */
  704. line-height: 30px; /*height改动时 随之改动*/
  705. font-size: 14px; /*字的大小*/
  706. color: #ffffff; /*字的颜色*/
  707. font-weight: bold; /*加粗*/
  708. /*padding-left:10px;字不在中间显示时 距离左侧的距离*/
  709. text-align: left; /*字在中间显示*/
  710. /*border-bottom:1px solid #ccc;/*每条字底部加边*/
  711. }
  712. /*--------------------------色标部分--------------------------*/
  713. .meteo-legend-box {
  714. min-width: 230px; /*最小宽度 根据图片的长短*/
  715. height: auto;
  716. position: absolute;
  717. top: 800px; /*距上的距离*/
  718. right: -124px; /*距右的距离*/
  719. -webkit-transform: translate(-50%, -50%);
  720. -moz-transform: translate(-50%, -50%);
  721. -ms-transform: translate(-50%, -50%);
  722. -o-transform: translate(-50%, -50%);
  723. transform: translate(-50%, -50%);
  724. }
  725. .meteo-legend-box ul li img {
  726. display: block;
  727. width: 450px;
  728. }
  729. /*----------------------------新弹窗----------------------------------*/
  730. .meteo-popup-shikuang{
  731. /*如有相应的点可以去掉 start */
  732. position: absolute;
  733. left:450px;
  734. top:100px;
  735. /*如有相应的点可以去掉 end */
  736. width: 500px;
  737. border: 1px solid #378be0;
  738. z-index: 99999;
  739. display:block;
  740. }
  741. .meteo-menu-top .meteo-title,.meteo-menu-top .meteo-delete{
  742. font-size:17px;
  743. color:#fff;
  744. font-weight:normal;
  745. }
  746. .meteo-title-span{
  747. font-size:14px;
  748. padding-left:10px;
  749. }
  750. .meteo-menu-top .meteo-delete{
  751. position: absolute;
  752. right:20px;
  753. top:14px;
  754. }
  755. .meteo-popup-shikuangUl{
  756. overflow:hidden;
  757. padding:10px;
  758. }
  759. .meteo-popup-shikuangUl li{
  760. width: 19.7%;
  761. height: 130px;
  762. float: left;
  763. border: 1px solid #e5edf6;
  764. text-align: center;
  765. }
  766. /*.meteo-popup-shikuangUl .meteo-nengjiandu-li,.meteo-popup-shikuangUl .meteo-jiangshui-li{*/
  767. /*border-right:0;*/
  768. /*}*/
  769. .meteo-qiwen,.meteo-tianqixianxiang,.meteo-fengxiang,.meteo-fengsu,.meteo-nengjiandu-li{
  770. border-bottom:1px solid #e5edf6;
  771. }
  772. .meteo-shikuang-img{
  773. height:80px;
  774. position: relative;
  775. }
  776. .meteo-shikuang-img img{
  777. position: absolute;
  778. left:50%;
  779. top:50%;
  780. margin:-25px 0 0 -25px;
  781. }
  782. .meteo-shikuang-text,.meteo-shikuang-number{
  783. display:block;
  784. padding: 1px 0;
  785. }
  786. .meteo-shikuang-text{
  787. color:#2275ce;
  788. font-size:12px;
  789. }
  790. .meteo-shikuang-number{
  791. color: #054688;
  792. font-size:14px;
  793. }
  794. /*
  795. 地面站
  796. */
  797. .meteo-popup-surf {
  798. /*如有相应的点可以去掉 start */
  799. position: absolute;
  800. left: 260px;
  801. top: 100px;
  802. /*如有相应的点可以去掉 end */
  803. /* height: 422px; */
  804. width: 740px;
  805. border: 1px solid #378be0;
  806. z-index: 99999;
  807. display: none;
  808. background: #fff;
  809. }
  810. /*
  811. 全球5000站
  812. */
  813. .meteo-popup-global {
  814. /*如有相应的点可以去掉 start */
  815. position: absolute;
  816. left: 260px;
  817. top: 100px;
  818. /*如有相应的点可以去掉 end */
  819. /* height: 422px; */
  820. width: 740px;
  821. border: 1px solid #378be0;
  822. z-index: 99999;
  823. display: none;
  824. background: #fff;
  825. }
  826. /*
  827. JD站
  828. */
  829. .meteo-popup-army {
  830. /*如有相应的点可以去掉 start */
  831. position: absolute;
  832. left: 260px;
  833. top: 100px;
  834. /*如有相应的点可以去掉 end */
  835. /* height: 422px; */
  836. width: 740px;
  837. border: 1px solid #378be0;
  838. z-index: 99999;
  839. display: none;
  840. background: #fff;
  841. }
  842. /*
  843. 自动站
  844. */
  845. .meteo-popup-auto {
  846. /*如有相应的点可以去掉 start */
  847. position: absolute;
  848. left: 260px;
  849. top: 100px;
  850. /*如有相应的点可以去掉 end */
  851. /* height: 422px; */
  852. width: 740px;
  853. border: 1px solid #378be0;
  854. z-index: 99999;
  855. display: none;
  856. background: #fff;
  857. }
  858. /**
  859. 大气标签
  860. */
  861. .meteo-p-daqi {
  862. background: url(../../images/meteo/layout/icon/daqi1.png) left no-repeat;
  863. background-size: 17px;
  864. }
  865. /*----------------------当前位置天气---------------------------*/
  866. .meteo-cl-popup {
  867. /*position: absolute;*/
  868. /*left: 477px;*/
  869. /*top: 0;*/
  870. min-width: 100px;
  871. height: 41px;
  872. background-color: #ffffff;
  873. border: 1px solid #01b7ff;
  874. border-left: none;
  875. display: inline-block;
  876. padding: 0 10px;
  877. }
  878. .meteo-cl-tt {
  879. /*position: absolute;*/
  880. /*left: 1px;*/
  881. /*top: 0;*/
  882. height: 41px;
  883. line-height: 40px;
  884. text-align: center;
  885. font-size: 18px;
  886. color: #666;
  887. display: inline-block;
  888. vertical-align: top;
  889. }
  890. .meteo-cl-station {
  891. /*position: absolute;*/
  892. /*right: 0;*/
  893. /*top: 0;*/
  894. /*width: 110px;*/
  895. height: 41px;
  896. display: inline-block;
  897. }
  898. .meteo-cl-location-p {
  899. font-size: 12px;
  900. color: #666;
  901. text-align: center;
  902. }
  903. .meteo-cl-weather {
  904. height: 20px;
  905. line-height: 20px;
  906. font-size: 12px;
  907. }
  908. .meteo-cl-wth {
  909. display: inline-block;
  910. color: #666;
  911. /*width: 40px;*/
  912. background: url('../../images/meteo/weatherIcon/cww02.png') no-repeat left center;
  913. background-size: 25px;
  914. padding-left: 22px;
  915. }
  916. .meteo-cl-wind {
  917. display: inline-block;
  918. color: #666;
  919. background: url('../../images/meteo/windDirection/0.png') no-repeat left center;
  920. background-size: 16px;
  921. padding-left: 15px;
  922. }
  923. /*---------------------------空间天气-------------------------*/
  924. .meteo-sw-menu {
  925. background: url(../../images/meteo/space_weather_s.png) left no-repeat;
  926. background-size: 17px;
  927. }
  928. .meteo-sw-box {
  929. width: 640px;
  930. height: 600px;
  931. text-align: center;
  932. }
  933. .meteo-sw-top {
  934. height: 50px;
  935. background-color: #fff;
  936. position: relative;
  937. }
  938. .meteo-sw-middle {
  939. height: 440px;
  940. background-color: #fff;
  941. position: relative;
  942. }
  943. .meteo-sw-list {
  944. width: 140px;
  945. height: 440px;
  946. background-color: #fff;
  947. float: left;
  948. }
  949. .meteo-sw-item {
  950. margin-bottom: 5px;
  951. }
  952. .meteo-sw-left_a {
  953. width: 50px;
  954. height: 440px;
  955. background: url(../../images/meteo/space_last.png) center no-repeat;
  956. background-size: 20px;
  957. position: absolute;
  958. /* left: 140px; */
  959. left: 0;
  960. }
  961. .meteo-sw-pic {
  962. /* width: 400px; */
  963. width: 540px;
  964. height: 440px;
  965. background-color: #fff;
  966. position: absolute;
  967. /* left: 190px; */
  968. left: 50px;
  969. }
  970. .meteo-sw-img{
  971. height: 400px;
  972. width: 540px;
  973. }
  974. .meteo-sw-left_b {
  975. width: 50px;
  976. height: 440px;
  977. background: url(../../images/meteo/space_next.png) center no-repeat;
  978. background-size: 20px;
  979. position: absolute;
  980. right: 0px;
  981. }
  982. .meteo-sw-pic_f {
  983. height: 40px;
  984. width: 540px;
  985. background-color: #fff;
  986. position: absolute;
  987. bottom: 0;
  988. }
  989. .meteo-sw-general {
  990. height: 100px;
  991. background-color: #fff;
  992. position: relative;
  993. text-align: left;
  994. }