home.css 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. html {
  2. font-size: 192px;
  3. }
  4. body {
  5. background-color: #010B14;
  6. overflow-x: hidden;
  7. }
  8. .div-header {
  9. background: url(../images/biaoti_bg_img.png) no-repeat;
  10. width: 100%;
  11. height: 0.39rem;
  12. background-size: 100% 100%;
  13. z-index: 100;
  14. position: fixed;
  15. top: 0;
  16. }
  17. .div-bottom {
  18. background: url(../images/logo_bg_img.png) no-repeat;
  19. width: 100%;
  20. height: 0.2rem;
  21. background-size: 100% 100%;
  22. position: fixed;
  23. bottom: 0;
  24. }
  25. .div-devices {
  26. position: relative;
  27. z-index: 10;
  28. background: url(../images/bg03_img.png) no-repeat;
  29. width: 2.52rem;
  30. height: 1.77rem;
  31. background-size: 100% 100%;
  32. float: left;
  33. }
  34. .div-content {
  35. margin: 40px 20px 110px;
  36. }
  37. .div-header-name {
  38. font-size: 0.12rem;
  39. color: #B5E1FC;
  40. padding: 0.08rem 0.1rem;
  41. }
  42. #chart-main {
  43. width: 2.52rem;
  44. height: 1.77rem;
  45. position: absolute;
  46. z-index: 20;
  47. /*margin: 50px 20px 0px 20px;*/
  48. }
  49. .div-yujing {
  50. position: relative;
  51. z-index: 10;
  52. background: url(../images/bg02_img.png) no-repeat;
  53. width: 2.52rem;
  54. height: 2.5rem;
  55. background-size: 100% 100%;
  56. float: right;
  57. }
  58. .div-yujing-content,.div-juming-content {
  59. margin: 0px 20px 40px 0px;
  60. height: 95%;
  61. width: -moz-calc(100% - 10px);
  62. width: -webkit-calc(100% - 10px);
  63. width: calc(100% - 10px);
  64. padding-left: 40px;
  65. }
  66. .c-f14 {
  67. font-size: 0.07rem;
  68. }
  69. .c-f20 {
  70. font-size: 0.10rem;
  71. }
  72. .c-f26 {
  73. font-size: 0.14rem;
  74. }
  75. .c-f30 {
  76. font-size: 0.16rem;
  77. }
  78. .c-B5E1FC {
  79. color: #B5E1FC;
  80. }
  81. .c-009DFE {
  82. color: #009DFE;
  83. }
  84. .c-E9350B {
  85. color: #E9350B;
  86. }
  87. .pt20 {
  88. padding-top: 0.1rem;
  89. }
  90. .mt37 {
  91. margin-top: 0.19rem;
  92. }
  93. .mt20 {
  94. margin-top: 0.1rem;
  95. }
  96. .mt10 {
  97. margin-top: 0.05rem;
  98. }
  99. .pt10 {
  100. margin-top: 0.05rem;
  101. }
  102. .mt5 {
  103. margin-top: 0.03rem;
  104. }
  105. .ml20 {
  106. margin-left: 0.1rem;
  107. }
  108. .mt8 {
  109. margin-top: 0.04rem;
  110. }
  111. .mt32 {
  112. margin-top: 0.17rem;
  113. }
  114. .mt80 {
  115. margin-top: 0.42rem;
  116. }
  117. .mt30 {
  118. margin-top: 0.16rem;
  119. }
  120. .mt80 {
  121. margin-top: 0.42rem;
  122. }
  123. .mr60 {
  124. margin-right: 0.31rem;
  125. }
  126. .mb20 {
  127. margin-bottom: 0.1rem;
  128. }
  129. .mb30 {
  130. margin-bottom: 0.16rem;
  131. }
  132. .f-tac {
  133. text-align: center;
  134. }
  135. .mr14 {
  136. margin-right: 0.07rem;
  137. }
  138. .dis-inblock {
  139. display: inline-block;
  140. }
  141. .height-50 {
  142. height: 0.26rem;
  143. }
  144. .lheight-50 {
  145. line-height: 0.26rem;
  146. }
  147. .height-20 {
  148. height: 0.104rem;
  149. }
  150. .c-pr {
  151. position: relative;
  152. }
  153. .f-clb {
  154. clear: both;
  155. }
  156. .c-hide {
  157. display: block;
  158. }
  159. .c-show {
  160. display: none;
  161. }
  162. .fr {
  163. float: right;
  164. }
  165. .fl {
  166. float: left;
  167. }
  168. .div-manbing {
  169. position: relative;
  170. z-index: 10;
  171. background: url(../images/bg01_img.png) no-repeat;
  172. width: 2.52rem;
  173. height: 2.5rem;
  174. background-size: 100% 100%;
  175. float: left;
  176. }
  177. .div-device-bang {
  178. position: relative;
  179. z-index: 10;
  180. background: url(../images/bg04_img.png) no-repeat;
  181. width: 2.52rem;
  182. height: 1.77rem;
  183. background-size: 100% 100%;
  184. float: right;
  185. }
  186. /*
  187. +----------------------------------------------------------------+
  188. Slideshow
  189. +----------------------------------------------------------------+
  190. */
  191. .slider {
  192. margin: 20px auto 0;
  193. /*width: 1.21rem*/
  194. }
  195. .slider-container {
  196. height: 270px;
  197. margin: 0 auto 20px;
  198. overflow: hidden;
  199. position: relative;
  200. width: 1.67rem;
  201. }
  202. .div-device-bang .slider-container {
  203. width: 100%;
  204. }
  205. .slider-container .slider-wrapper {
  206. left: 0;
  207. overflow: hidden;
  208. position: absolute;
  209. top: 0;
  210. width: 3.63rem;
  211. /*Fix for prevent display errors*/
  212. -webkit-transition: all 800ms ease;
  213. -moz-transition: all 800ms ease;
  214. -o-transition: all 800ms ease;
  215. transition: all 800ms ease;
  216. }
  217. .div-device-bang .slider-container .slider-wrapper {
  218. width: 100%;
  219. }
  220. .slider-container .slide {
  221. float: left;
  222. height: 425px;
  223. overflow: hidden;
  224. position: relative;
  225. width: 1.67rem;
  226. }
  227. .div-device-bang .slider-container .slide {
  228. width: 100%;
  229. }
  230. .slider-nav {
  231. text-align: center;
  232. /*width: 1.21rem;*/
  233. }
  234. .slider-nav li {
  235. display: none;
  236. padding: 3px;
  237. }
  238. .div-banding-content {
  239. position: absolute;
  240. left: 50%;
  241. top: 50%;
  242. margin-left: -0.89rem;
  243. margin-top: -0.42rem;
  244. }
  245. .btn-group .btn {
  246. border-radius: 10px;
  247. padding: 9px 20px;
  248. font-size: 0.1rem;
  249. width: 0.63rem;
  250. }
  251. .btn-default {
  252. background-color: #05233B;
  253. color: #009DFE;
  254. border-color: #1eaaff;
  255. }
  256. [data-toggle=buttons]>.btn input[type=checkbox],
  257. [data-toggle=buttons]>.btn input[type=radio],
  258. [data-toggle=buttons]>.btn-group>.btn input[type=checkbox],
  259. [data-toggle=buttons]>.btn-group>.btn input[type=radio] {
  260. position: absolute;
  261. clip: rect(0, 0, 0, 0);
  262. pointer-events: none;
  263. }
  264. .btn-default:active:hover,
  265. .btn-default.active:hover,
  266. .open>.dropdown-toggle.btn-default:hover,
  267. .btn-default:active:focus,
  268. .btn-default.active:focus,
  269. .open>.dropdown-toggle.btn-default:focus,
  270. .btn-default:active.focus,
  271. .btn-default.active.focus,
  272. .open>.dropdown-toggle.btn-default.focus {
  273. color: #fff;
  274. background-color: #009DFE;
  275. border-color: #009DFE;
  276. }
  277. .btn-default.active,
  278. .btn-default.focus,
  279. .btn-default:active,
  280. .btn-default:focus,
  281. .btn-default:hover,
  282. .open>.dropdown-toggle.btn-default {
  283. color: #fff;
  284. background-color: #009DFE;
  285. border-color: #009DFE;
  286. }
  287. .l-text {
  288. width: 1.25rem;
  289. height: 0.26rem;
  290. /*border: 1px solid #457DA1;*/
  291. vertical-align: middle;
  292. }
  293. .l-text-field {
  294. padding-left: 5px;
  295. padding-right: 30px;
  296. border: 0px;
  297. width: 1.24rem;
  298. height: 0.25rem;
  299. line-height: 0.25rem;
  300. position: absolute;
  301. top: 0px;
  302. left: 0px;
  303. border: 0;
  304. margin: 0;
  305. outline: none;
  306. background: #05233B;
  307. color: #B5E1FC;
  308. }
  309. .l-text {
  310. position: relative;
  311. background: transparent;
  312. }
  313. .l-trigger,
  314. .l-trigger-hover,
  315. .l-trigger-pressed {
  316. top: 0px;
  317. right: 0px;
  318. background: transparent;
  319. width: 0.16rem;
  320. height: 0.16rem;
  321. border: 0px;
  322. cursor: pointer;
  323. position: absolute;
  324. overflow: hidden;
  325. }
  326. .l-trigger-search .l-trigger-icon {
  327. background: url(../images/sousuo_icon.png) no-repeat transparent;
  328. width: 0.13rem;
  329. height: 0.13rem;
  330. margin-top: 3px;
  331. background-size: 100% 100%;
  332. }
  333. input::-webkit-input-placeholder {
  334. color: #457DA1;
  335. }
  336. input::-moz-placeholder {
  337. /* Mozilla Firefox 19+ */
  338. color: #457DA1;
  339. }
  340. input:-moz-placeholder {
  341. /* Mozilla Firefox 4 to 18 */
  342. color: #457DA1;
  343. }
  344. input:-ms-input-placeholder {
  345. /* Internet Explorer 10-11 */
  346. color: #457DA1;
  347. }
  348. .div-yujing-name {
  349. position: absolute;
  350. left: 50%;
  351. margin-left: -67px;
  352. top: 0.72rem;
  353. }
  354. .div-bangding-name {
  355. position: absolute;
  356. left: 50%;
  357. margin-left: -35px;
  358. top: 0.72rem;
  359. }
  360. .div-renshu_img {
  361. background: url(../images/renshu_img.png) no-repeat;
  362. width: 0.77rem;
  363. height: 0.77rem;
  364. line-height: 0.77rem;
  365. background-size: 100% 100%;
  366. }
  367. .div-juming-info {
  368. width: 100%;
  369. height: 0.28rem;
  370. background: #05233B;
  371. color: #B5E1FC;
  372. margin: 0 auto;
  373. line-height: 0.28rem;
  374. position: relative;
  375. margin-top: 6px;
  376. }
  377. .div-juming-info.active {
  378. background: #0164AF;
  379. }
  380. .div-juming-info img {
  381. width: 0.14rem;
  382. height: 0.14rem;
  383. }
  384. .div-line1 {
  385. width: 10px;
  386. height: 2px;
  387. border: 1px solid #009DFE;
  388. position: absolute;
  389. right: 0;
  390. }
  391. .div-line2 {
  392. width: 2px;
  393. height: 10px;
  394. border: 1px solid #009DFE;
  395. position: absolute;
  396. right: 0;
  397. }
  398. .div-line3 {
  399. width: 10px;
  400. height: 2px;
  401. border: 1px solid #009DFE;
  402. position: absolute;
  403. bottom: 0;
  404. }
  405. .div-line4 {
  406. width: 2px;
  407. height: 10px;
  408. border: 1px solid #009DFE;
  409. position: absolute;
  410. bottom: 0;
  411. }
  412. .c-vam {
  413. vertical-align: middle;
  414. }
  415. .div-juming-color-name {
  416. margin: 0px 10px 0px 8px;
  417. }
  418. .div-yujing-content {
  419. overflow: auto;
  420. }
  421. .f-dn {
  422. display: none;
  423. }
  424. .div-yujing-scroller::-webkit-scrollbar {
  425. /*滚动条整体样式*/
  426. width: 6px;
  427. /*高宽分别对应横竖滚动条的尺寸*/
  428. height: 6px;
  429. }
  430. .div-yujing-scroller::-webkit-scrollbar-thumb {
  431. /*滚动条里面小方块*/
  432. border-radius: 10px;
  433. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  434. background: #009DFE;
  435. }
  436. .div-yujing-scroller::-webkit-scrollbar-track {
  437. /*滚动条里面轨道*/
  438. -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  439. border-radius: 10px;
  440. background: #0164AF;
  441. }
  442. .div-juming-btn {
  443. background: url(../images/juming_btn.png);
  444. width: 0.31rem;
  445. height: 0.31rem;
  446. position: absolute;
  447. bottom: 0px;
  448. left: -0.44rem;
  449. z-index: 10;
  450. }
  451. .div-juming-bg {
  452. z-index: 20;
  453. background: url(../images/bg05_img.png) 0% 0% / 100% 100% no-repeat;
  454. width: 2.52rem;
  455. height: 2.5rem;
  456. position: absolute;
  457. bottom: 0px;
  458. left: -2.625rem;
  459. }
  460. .div-shousuo-btn {
  461. background: url(../images/shousuo_icon.png);
  462. width: 0.125rem;
  463. height: 0.125rem;
  464. float: right;
  465. margin: 0.08rem 0.1rem;
  466. }
  467. #mapWrap,
  468. #allmap,
  469. #app {
  470. width: 100%;
  471. height: 100%;
  472. }
  473. #mapWrap {
  474. position: fixed;
  475. top: 0;
  476. z-index: 0;
  477. }
  478. #wrapper,#wrapper1 {
  479. position: absolute;
  480. z-index: 1;
  481. top: 60px;
  482. bottom: 10px;
  483. left: 0;
  484. width: 100%;
  485. background: transparent;
  486. overflow: hidden;
  487. }
  488. #scroller,#scroller1 {
  489. position: absolute;
  490. z-index: 1;
  491. -webkit-tap-highlight-color: rgba(0,0,0,0);
  492. width: 100%;
  493. -webkit-transform: translateZ(0);
  494. -moz-transform: translateZ(0);
  495. -ms-transform: translateZ(0);
  496. -o-transform: translateZ(0);
  497. transform: translateZ(0);
  498. -webkit-touch-callout: none;
  499. -webkit-user-select: none;
  500. -moz-user-select: none;
  501. -ms-user-select: none;
  502. user-select: none;
  503. -webkit-text-size-adjust: none;
  504. -moz-text-size-adjust: none;
  505. -ms-text-size-adjust: none;
  506. -o-text-size-adjust: none;
  507. text-size-adjust: none;
  508. }
  509. #pullDown,#pullUp,#pullDown1,#pullUp1,.pulldown-tips{
  510. height:40px;
  511. line-height:40px;
  512. text-align:center;
  513. }
  514. .pulldown-tips{
  515. position:absolute;
  516. top:-40px;
  517. left:0;
  518. width:100%;
  519. }
  520. /* Styled scrollbars */
  521. .iScrollVerticalScrollbar {
  522. position: absolute;
  523. z-index: 9999;
  524. width: 16px;
  525. bottom: 2px;
  526. top: 2px;
  527. right: 2px;
  528. overflow: hidden;
  529. }
  530. .iScrollVerticalScrollbar.iScrollBothScrollbars {
  531. bottom: 18px;
  532. }
  533. .iScrollIndicator {
  534. position: absolute;
  535. background: #009DFE;
  536. border-width: 1px;
  537. border-style: solid;
  538. border-color: #009DFE;
  539. border-radius: 8px;
  540. }
  541. .iScrollVerticalScrollbar .iScrollIndicator {
  542. width: 100%;
  543. background: #009DFE;
  544. height: 50px;
  545. }
  546. /* end */
  547. .no-result-img{
  548. width: 0.9rem;
  549. margin: 0 auto;
  550. object-fit: fill;
  551. margin-top: 1.04rem;
  552. }
  553. .no-result-img>img{
  554. width: 100%;
  555. height: 100%;
  556. }
  557. .no-result-text{
  558. text-align: center;
  559. margin-top: 0.1rem;
  560. font-size: 0.07rem;
  561. color: #b5e1fc;
  562. }