huimv.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. #datePlugin {
  2. background: rgba(0, 0, 0, 0.2);
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. z-index: 1111111;
  7. width: 100%;
  8. height: 100%;
  9. display: none; }
  10. #datePlugin * {
  11. box-sizing: border-box;
  12. margin: 0;
  13. padding: 0;
  14. background-clip: padding-box; }
  15. #datePlugin .d-date-box {
  16. position: absolute;
  17. bottom: 0;
  18. background-color: #fff;
  19. width: 100%; }
  20. #datePlugin .d-date-title {
  21. text-align: center;
  22. font-weight: 700;
  23. padding: 10px; }
  24. #datePlugin .d-date-info {
  25. color: #333;
  26. text-align: center;
  27. font-size: 14px; }
  28. #datePlugin .d-date-wrap {
  29. margin-top: 10px;
  30. width: 100%;
  31. height: 120px;
  32. position: relative; }
  33. #datePlugin .d-time-wrap {
  34. border-top: 1px solid #2285E2; }
  35. #datePlugin .d-time-wrap .d-date-cell {
  36. width: 50%; }
  37. #datePlugin .d-date-mark {
  38. background-color: #eee;
  39. border-top: 1px solid #ddd;
  40. border-bottom: 1px solid #ddd;
  41. position: absolute;
  42. top: 40px;
  43. left: 0;
  44. width: 100%;
  45. height: 40px; }
  46. #datePlugin .d-date-cell {
  47. float: left;
  48. width: 33.33333%;
  49. height: 100%;
  50. overflow: hidden; }
  51. #datePlugin .d-date-cell li {
  52. height: 40px;
  53. line-height: 40px;
  54. text-align: center; }
  55. #datePlugin .d-date-btns .d-btn {
  56. background: #2285E2;
  57. display: inline-block;
  58. width: 50%;
  59. margin-top: 10px;
  60. border: none;
  61. border-top: 1px solid #ddd;
  62. color: #fff;
  63. font-size: 16px;
  64. padding: 10px 0; }
  65. #datePlugin .d-date-btns #d-okBtn {
  66. border-right: 1px solid #ddd; }
  67. #datePlugin .d-date-btns #d-cancleBtn {
  68. background: #bbb; }
  69. @-webkit-keyframes emerge {
  70. from {
  71. opacity: 0.3;
  72. bottom: -14px; }
  73. to {
  74. opacity: 1;
  75. bottom: 0; } }
  76. @-moz-keyframes emerge {
  77. from {
  78. opacity: 0.3;
  79. bottom: -14px; }
  80. to {
  81. opacity: 1;
  82. bottom: 0; } }
  83. @-ms-keyframes emerge {
  84. from {
  85. opacity: 0.3;
  86. bottom: -14px; }
  87. to {
  88. opacity: 1;
  89. bottom: 0; } }
  90. @keyframes emerge {
  91. from {
  92. opacity: 0.3;
  93. bottom: -14px; }
  94. to {
  95. opacity: 1;
  96. bottom: 0; } }
  97. #sy .wrapper {
  98. margin: 10px; }
  99. div#alertBanner {
  100. position: fixed;
  101. left: 0;
  102. right: 0;
  103. top: 40px;
  104. margin: 0;
  105. padding: 8px; }
  106. .navbar-fixed-top {
  107. height: 38px;
  108. background-color: #2285E2;
  109. opacity: 0.97;
  110. display: flex;
  111. flex-wrap: wrap;
  112. flex-direction: row;
  113. justify-content: space-between;
  114. align-items: center; }
  115. .navbar-fixed-top span.glyphicon-menu-left, .navbar-fixed-top span.logo {
  116. margin: 10px;
  117. font-size: 18px;
  118. color: #ffffff;
  119. width: 40px; }
  120. .navbar-fixed-top span.logo img {
  121. width: 30px;
  122. height: 30px; }
  123. .navbar-fixed-top h4 {
  124. color: #ffffff; }
  125. .navbar-fixed-top h4 select {
  126. margin: auto;
  127. border-radius: 4px;
  128. color: #555;
  129. height: 29px;
  130. padding: 3px 12px; }
  131. .navbar-fixed-top .placeholder, .navbar-fixed-top .saveBtn, .navbar-fixed-top .glyphicon-wrench, .navbar-fixed-top .glyphicon-bell {
  132. line-height: 1.1;
  133. margin: 10px;
  134. font-size: 18px;
  135. color: #ffffff;
  136. width: 40px;
  137. height: 20px;
  138. text-align: right; }
  139. #bjMenu1 ul.nav-pills {
  140. background-color: #f0f0f0;
  141. height: 30px; }
  142. #bjMenu1 ul.nav-pills li {
  143. text-align: center;
  144. font-size: 16px;
  145. line-height: 30px;
  146. height: 30px; }
  147. #bjMenu1 ul.nav-pills li.active {
  148. color: #2285E2; }
  149. #hkmenu1 ul.nav-pills, #menu1 ul.nav-pills {
  150. background-color: #f0f0f0;
  151. height: 60px; }
  152. #hkmenu1 ul.nav-pills li, #menu1 ul.nav-pills li {
  153. text-align: center;
  154. font-size: 12px; }
  155. #hkmenu1 ul.nav-pills li.active, #menu1 ul.nav-pills li.active {
  156. color: #2285E2; }
  157. #hkmenu1 ul.nav-pills li img, #menu1 ul.nav-pills li img {
  158. width: 30px;
  159. height: 30px;
  160. margin: 5px; }
  161. #hkmenu1 ul.nav-pills li div, #menu1 ul.nav-pills li div {
  162. height: 20px; }
  163. #hkmenu1 .searchBtn, #menu1 .searchBtn {
  164. font-size: 28px;
  165. position: absolute;
  166. top: -43px;
  167. right: 38px;
  168. z-index: 20; }
  169. #menu1 > .nav-pills > li {
  170. width: 20% !important; }
  171. #hkmenu2, #menu2 {
  172. margin-top: 38px; }
  173. #hkmenu2 .container, #menu2 .container {
  174. margin-top: 0; }
  175. #hkmenu2 .container ul.nav, #menu2 .container ul.nav {
  176. background-color: #fff;
  177. border-bottom: 1px solid #f0f0f0; }
  178. #hkmenu2 .container ul.nav li.active, #menu2 .container ul.nav li.active {
  179. color: #428bca; }
  180. #hkmenu2 .container ul.nav li.active:before, #menu2 .container ul.nav li.active:before {
  181. content: "";
  182. position: absolute;
  183. z-index: 2;
  184. left: 0;
  185. right: 0;
  186. bottom: 0;
  187. background: #2098d1;
  188. height: 2px;
  189. width: 80%;
  190. margin: 0 auto; }
  191. div#chartDiv {
  192. margin-bottom: 70px;
  193. margin-right:10px;
  194. margin-left:10px;}
  195. .container {
  196. background-color: #f0f0f0; }
  197. .container > div {
  198. background-color: #fff; }
  199. .cardWrapper {
  200. margin-bottom: 60px; }
  201. .cardWrapper div.row {
  202. margin-top: 3px; }
  203. .cardWrapper div.row:first-child {
  204. margin-top: 0; }
  205. .cardWrapper div.row .leftDiv {
  206. text-align: center; }
  207. .cardWrapper div.row .leftDiv div img {
  208. margin-top: 20px;
  209. width: 60px;
  210. height: 60px; }
  211. .cardWrapper div.row .leftDiv h5 {
  212. border-radius: 20px;
  213. background-color: #28cd6f;
  214. text-align: center;
  215. height: 20px;
  216. line-height: 20px;
  217. color: #F0F0F0;
  218. width: 80px;
  219. margin: 10px auto; }
  220. .cardWrapper div.row .rightDiv {
  221. margin: 16px auto 0; }
  222. .cardWrapper div.row .rightDiv dl.dl-horizontal dt {
  223. height: 26px;
  224. text-align: justify;
  225. float: left;
  226. width: 60px;
  227. white-space: inherit;
  228. clear: left; }
  229. .cardWrapper div.row .rightDiv dl.dl-horizontal dt span {
  230. display: inline-block;
  231. padding-left: 100%; }
  232. .cardWrapper div.row .rightDiv dl.dl-horizontal dd {
  233. margin-left: 15px;
  234. float: left; }
  235. #mc > .nav-pills > li.active:before {
  236. content: "";
  237. position: absolute;
  238. z-index: 2;
  239. left: 0;
  240. right: 0;
  241. bottom: 0;
  242. background: #2098d1;
  243. height: 2px; }
  244. #channelSwitch {
  245. height: 270px;
  246. background: url(../images/hjkz/channelswitch.png) no-repeat;
  247. background-size: cover; }
  248. #channelSwitch .panel {
  249. width: 190px;
  250. height: 190px;
  251. border-radius: 100%;
  252. top: 5%;
  253. position: relative;
  254. margin: 0 auto;
  255. box-shadow: 0 12px 31px rgba(123, 178, 226, 0.55); }
  256. #channelSwitch .panel .infoPanel {
  257. position: relative;
  258. top: 14%;
  259. color: #999;
  260. text-align: center;
  261. font-size: large; }
  262. #channelSwitch .panel .lcdShow {
  263. font-size: 28px;
  264. font-weight: bolder;
  265. text-align: center;
  266. top: 22%;
  267. position: relative;
  268. color: rgba(34, 133, 226, 0.8); }
  269. #channelSwitch .panel .flex-container {
  270. display: flex;
  271. flex-wrap: wrap;
  272. flex-direction: row;
  273. justify-content: space-around;
  274. font-size: 24px;
  275. height: 60px;
  276. line-height: 60px;
  277. width: 65%;
  278. margin: 0 auto;
  279. color: #2285E2;
  280. top: 28%;
  281. position: relative; }
  282. #channelSwitch .panel .flex-container .flex-item {
  283. text-align: center; }
  284. #channelSwitch .panel .flex-container .flex-item:nth-child(2) {
  285. font-size: 19px;
  286. border-radius: 100%;
  287. color: #fff;
  288. width: 60px;
  289. letter-spacing: 4px;
  290. background-color: #2285E2; }
  291. #channelSwitch #slider {
  292. top: 15%;
  293. position: relative;
  294. background: #fff;
  295. width: 260px;
  296. border-radius: 4px;
  297. height: 4px;
  298. box-shadow: 0 2px 4px rgba(123, 178, 226, 0.3);
  299. margin: 0 auto; }
  300. #channelSwitch #slider i {
  301. position: absolute;
  302. color: #2285E2;
  303. width: 30px;
  304. height: 30px;
  305. border-radius: 100%;
  306. top: -12px;
  307. font-size: 30px; }
  308. #channelSwitch #slider i.addBtn {
  309. left: -10px; }
  310. #channelSwitch #slider i.subtractBtn {
  311. right: -10px; }
  312. #channelSet, #alarmSet, #deviceAlarmSet {
  313. margin-top: 30px;
  314. margin-bottom: 40px; }
  315. #channelSet dl.dl-horizontal, #alarmSet dl.dl-horizontal, #deviceAlarmSet dl.dl-horizontal {
  316. border-bottom: 2px solid #f0f0f0;
  317. margin-bottom: 0; }
  318. #channelSet dl.dl-horizontal dt, #alarmSet dl.dl-horizontal dt, #deviceAlarmSet dl.dl-horizontal dt {
  319. text-align: center; }
  320. #channelSet dl.dl-horizontal dt span.icon-wrapper, #alarmSet dl.dl-horizontal dt span.icon-wrapper, #deviceAlarmSet dl.dl-horizontal dt span.icon-wrapper {
  321. line-height: 60px;
  322. position: relative;
  323. width: 50px;
  324. margin: 0 auto; }
  325. #channelSet dl.dl-horizontal dt span.icon-wrapper img, #alarmSet dl.dl-horizontal dt span.icon-wrapper img, #deviceAlarmSet dl.dl-horizontal dt span.icon-wrapper img {
  326. width: 50px;
  327. height: 50px; }
  328. #channelSet dl.dl-horizontal dt span.icon-wrapper span, #alarmSet dl.dl-horizontal dt span.icon-wrapper span, #deviceAlarmSet dl.dl-horizontal dt span.icon-wrapper span {
  329. background-color: rgba(39, 135, 225, 0.93);
  330. border-radius: 100%;
  331. width: 24px;
  332. height: 24px;
  333. line-height: 24px;
  334. position: absolute;
  335. top: -12px;
  336. right: 0;
  337. color: #ffffff; }
  338. #channelSet dl.dl-horizontal dt span.glyphicon-alert, #alarmSet dl.dl-horizontal dt span.glyphicon-alert, #deviceAlarmSet dl.dl-horizontal dt span.glyphicon-alert {
  339. width: 50px;
  340. font-size: 24px;
  341. line-height: 60px;
  342. height: 100%; }
  343. #channelSet dl.dl-horizontal dd, #alarmSet dl.dl-horizontal dd, #deviceAlarmSet dl.dl-horizontal dd {
  344. text-align: center;
  345. line-height: 60px;
  346. height: 60px; }
  347. #channelSet dl.dl-horizontal dd input, #alarmSet dl.dl-horizontal dd input, #deviceAlarmSet dl.dl-horizontal dd input {
  348. height: 24px;
  349. line-height: 24px;
  350. width: 95%;
  351. border: 1px solid rgba(56, 49, 49, 0.19);
  352. margin: 18px auto; }
  353. #channelSet dl.dl-horizontal dd span.caret, #alarmSet dl.dl-horizontal dd span.caret, #deviceAlarmSet dl.dl-horizontal dd span.caret {
  354. right: 24px;
  355. top: 48%;
  356. position: absolute; }
  357. #channelSet dl.dl-horizontal dd span.glyphicon-trash, #alarmSet dl.dl-horizontal dd span.glyphicon-trash, #deviceAlarmSet dl.dl-horizontal dd span.glyphicon-trash {
  358. color: red; }
  359. #channelSet dl.dl-horizontal dd span.glyphicon-ok, #alarmSet dl.dl-horizontal dd span.glyphicon-ok, #deviceAlarmSet dl.dl-horizontal dd span.glyphicon-ok {
  360. color: greenyellow; }
  361. #channelSet div.infoBottom, #alarmSet div.infoBottom, #deviceAlarmSet div.infoBottom {
  362. position: absolute;
  363. width: 100%;
  364. text-align: center;
  365. bottom: 35px;
  366. color: rgba(176, 176, 176, 0.68); }
  367. #channelSet .displayNone, #alarmSet .displayNone, #deviceAlarmSet .displayNone {
  368. display: none; }
  369. #channelSet .addButtonWrapper, #alarmSet .addButtonWrapper, #deviceAlarmSet .addButtonWrapper {
  370. height: 40px !important; }
  371. #channelSet .addButtonWrapper div.addButton, #alarmSet .addButtonWrapper div.addButton, #deviceAlarmSet .addButtonWrapper div.addButton {
  372. position: relative;
  373. background-color: #39e605;
  374. box-shadow: 0 5px 11px rgba(98, 98, 102, 0.25);
  375. font-size: 30px;
  376. width: 35px;
  377. height: 35px;
  378. line-height: 30px;
  379. margin: 0 auto;
  380. text-align: center;
  381. color: white;
  382. border-radius: 100%; }
  383. #channelSet #addWrapper, #alarmSet #addWrapper, #deviceAlarmSet #addWrapper {
  384. position: fixed;
  385. bottom: 80px;
  386. width: 100%; }
  387. #channelSet #addWrapper .addButton, #alarmSet #addWrapper .addButton, #deviceAlarmSet #addWrapper .addButton {
  388. position: relative;
  389. background-color: #39e605;
  390. box-shadow: 0 5px 11px rgba(98, 98, 102, 0.25);
  391. font-size: 30px;
  392. width: 40px;
  393. height: 40px;
  394. line-height: 35px;
  395. margin: 0 auto;
  396. text-align: center;
  397. color: white;
  398. border-radius: 100%; }
  399. #channelSet #addWrapper .emerge, #alarmSet #addWrapper .emerge, #deviceAlarmSet #addWrapper .emerge {
  400. -webkit-animation-name: emerge;
  401. animation-name: emerge;
  402. -webkit-animation-duration: 0.2s;
  403. animation-duration: 0.2s;
  404. -webkit-animation-fill-mode: forwards;
  405. animation-fill-mode: forwards; }
  406. #chooseHjkzSet .modal-dialog {
  407. width: 300px;
  408. margin: 36% auto 0 auto; }
  409. #chooseHjkzSet .modal-dialog div.option {
  410. height: 40px;
  411. line-height: 40px;
  412. text-align: center; }
  413. #chooseHjkzSet .modal-dialog div.option:first-child {
  414. border-bottom: 1px solid #F0F0F0; }
  415. ul.row {
  416. margin-left: 0;
  417. margin-right: 0;
  418. height: 32px;
  419. line-height: 32px;
  420. background-color: #f0f0f0;
  421. color: #969696; }
  422. ul.row li {
  423. text-align: center; }
  424. .modal#checkboxWrapper .modal-dialog {
  425. margin: 55px; }
  426. .modal#checkboxWrapper .modal-dialog .modal-header {
  427. background-color: #f4f2f2; }
  428. .modal#checkboxWrapper .modal-dialog .modal-header .modal-title {
  429. text-align: center; }
  430. .modal#checkboxWrapper .modal-dialog .modal-footer {
  431. text-align: center; }
  432. .modal#checkboxWrapper .modal-dialog .modal-footer button.save {
  433. width: 100%;
  434. background-color: #28ce6f;
  435. color: #f0f0f0; }
  436. ul#alarmCheckbox {
  437. width: 200px;
  438. margin: 10px auto; }
  439. ul#alarmCheckbox li {
  440. position: relative;
  441. padding-bottom: 15px;
  442. padding-left: 40px; }
  443. ul#alarmCheckbox li .icheckbox_green {
  444. top: 0;
  445. left: 0;
  446. position: absolute;
  447. display: block;
  448. padding: 0;
  449. width: 20px;
  450. height: 20px;
  451. background: url(../images/hjkz/green.png) no-repeat 0 0;
  452. border: none; }
  453. ul#alarmCheckbox li .icheckbox_green input {
  454. position: absolute;
  455. opacity: 0; }
  456. ul#alarmCheckbox li .icheckbox_green ins {
  457. position: absolute;
  458. top: 0;
  459. left: 0;
  460. display: block;
  461. width: 100%;
  462. height: 100%;
  463. margin: 0;
  464. padding: 0;
  465. border: 0;
  466. opacity: 0;
  467. background: #ffffff; }
  468. ul#alarmCheckbox li label {
  469. padding-left: 16px; }
  470. ul#alarmCheckbox li.checked div {
  471. background-position: -22px 0; }
  472. ul#alarmCheckbox li.checked label {
  473. font-weight: bold;
  474. color: #1ABC9c; }
  475. .displayNone {
  476. display: none; }
  477. .nav-top {
  478. position: fixed;
  479. top: 0;
  480. left: 0;
  481. right: 0;
  482. background-color: #fff;
  483. border-bottom: 1px solid #ccc;
  484. display: flex;
  485. flex-direction: row;
  486. justify-content: space-around; }
  487. .nav-top li {
  488. padding: 10px; }
  489. .nav-top li.active {
  490. color: #357BDC;
  491. border-bottom: 2px solid #357BDC; }
  492. .bottom-da {
  493. position: fixed;
  494. right: 20px;
  495. top: 50px;
  496. padding: 3px;
  497. background-color: #357BDC;
  498. color: #ffffff; }
  499. .cont-div {
  500. margin-top: 90px;
  501. margin-bottom: 40px; }
  502. .cont-div div {
  503. padding: 10px 30px;
  504. display: flex;
  505. flex-direction: row;
  506. justify-content: space-between; }
  507. .nav-bottom {
  508. left: 0;
  509. right: 0;
  510. background-color: #fff;
  511. border-top: 1px solid #ccc;
  512. position: fixed;
  513. bottom: 0;
  514. margin-bottom: 0;
  515. display: flex;
  516. flex-direction: row;
  517. justify-content: center; }
  518. .nav-bottom li {
  519. margin: 5px;
  520. background-color: #357BDC;
  521. width: 30px;
  522. height: 30px;
  523. border-radius: 100%;
  524. color: #ffffff;
  525. padding: 4px; }
  526. .nav-bottom li::before {
  527. top: 4px;
  528. left: 4px;
  529. position: relative; }
  530. /*# sourceMappingURL=huimv.css.map */