common.css 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. @charset "utf-8";
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. /* max-height: 999999px; */
  6. }
  7. html {
  8. -webkit-overflow-scrolling: touch;
  9. /*//允许独立的滚动区域和触摸回弹*/
  10. }
  11. body,
  12. h1,
  13. h2,
  14. h3,
  15. h4,
  16. h5,
  17. h6,
  18. hr,
  19. p,
  20. blockquote,
  21. dl,
  22. dt,
  23. dd,
  24. ul,
  25. ol,
  26. li,
  27. pre,
  28. form,
  29. fieldset,
  30. legend,
  31. button,
  32. input,
  33. textarea,
  34. th,
  35. td {
  36. margin: 0;
  37. padding: 0;
  38. }
  39. h1,
  40. h2,
  41. h3,
  42. h4,
  43. h5,
  44. h6 {
  45. font-weight: normal;
  46. }
  47. body,
  48. button,
  49. input,
  50. select,
  51. textarea {
  52. font: 28px Source Han Sans CN, PingFang SC, Helvetica, Arial, Microsoft YaHei, FreeSans, Arimo, Droid Sans, wenquanyi micro hei, Hiragino Sans GB, Hiragino Sans GB W3, sans-serif
  53. }
  54. h1,
  55. h2,
  56. h3,
  57. h4,
  58. h5,
  59. h6 {
  60. font-size: 100%;
  61. }
  62. address,
  63. cite,
  64. dfn,
  65. em,
  66. var {
  67. font-style: normal;
  68. }
  69. code,
  70. kbd,
  71. pre,
  72. samp {
  73. font-family: courier new, courier, monospace;
  74. }
  75. small {
  76. font-size: 12px;
  77. }
  78. ul,
  79. ol {
  80. list-style: none;
  81. }
  82. i,
  83. em {
  84. font-style: normal;
  85. }
  86. a {
  87. text-decoration: none;
  88. /* color: #fff; */
  89. }
  90. sup {
  91. vertical-align: text-top;
  92. }
  93. sub {
  94. vertical-align: text-bottom;
  95. }
  96. legend {
  97. color: #000;
  98. }
  99. fieldset,
  100. img {
  101. border: 0;
  102. max-width: 100%;
  103. }
  104. button,
  105. input,
  106. select,
  107. textarea {
  108. font-size: 100%;
  109. }
  110. table {
  111. border-collapse: collapse;
  112. border-spacing: 0;
  113. }
  114. .clear {
  115. clear: both;
  116. float: none;
  117. height: 0;
  118. overflow: hidden;
  119. }
  120. html .hide {
  121. display: none;
  122. }
  123. /* 去除苹果默认input样式 */
  124. input[type="button"],
  125. input[type="submit"],
  126. input[type="reset"],
  127. textarea {
  128. -webkit-appearance: none;
  129. border: none;
  130. /*-moz-appearance: none;
  131. outline:none;*/
  132. background: rgba(0, 0, 0, 0);
  133. }
  134. /*input[type="submit"]{
  135. -webkit-appearance: button;
  136. }*/
  137. /* 去除谷歌焦点样式 */
  138. input:focus,
  139. textarea:focus {
  140. outline: none;
  141. }
  142. /* 去除IE10+浏览器文本框后面的小叉叉 */
  143. input::-ms-clear {
  144. display: none;
  145. }
  146. /* 禁止多行文本框textarea拖拽 */
  147. textarea {
  148. resize: none;
  149. }
  150. /* 去除android用户点击链接,出现边框或者半透明灰色遮罩 */
  151. a,
  152. button,
  153. input,
  154. textarea {
  155. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  156. -webkit-user-modify: read-only;
  157. /* 只能读 */
  158. -moz-user-modify: read-only;
  159. user-modify: read-only;
  160. }
  161. *:not(input) {
  162. -webkit-touch-callout: none;
  163. -webkit-user-select: none;
  164. -khtml-user-select: none;
  165. -moz-user-select: none;
  166. -ms-user-select: none;
  167. user-select: none;
  168. }
  169. .onlineColor {
  170. color: #08BE04
  171. }
  172. .offlineColor {
  173. color: #666666
  174. }
  175. .hitchColor {
  176. color: #FF6523
  177. }
  178. input::-webkit-input-placeholder {
  179. color: #999;
  180. }
  181. input::-moz-placeholder {
  182. /* Mozilla Firefox 19+ */
  183. color: #999;
  184. }
  185. input:-moz-placeholder {
  186. /* Mozilla Firefox 4 to 18 */
  187. color: #999;
  188. }
  189. input:-ms-input-placeholder {
  190. /* Internet Explorer 10-11 */
  191. color: #999;
  192. }
  193. /*add*/
  194. body {
  195. font-size: 16px;
  196. }
  197. .device-list {
  198. margin-top: 106px;
  199. margin-bottom: 100px;
  200. }
  201. .device-item {
  202. padding: 10px 10px 10px 0;
  203. display: flex;
  204. align-items: center;
  205. margin-left: 10px;
  206. border-bottom: 1px solid #EDEDED;
  207. position: relative
  208. }
  209. .checkBox {
  210. width: 8%;
  211. text-align: center
  212. }
  213. .iconBox {
  214. width: 15%;
  215. text-align: center
  216. }
  217. .iconBox img {
  218. width: 45px
  219. }
  220. .desBox {
  221. width: 60%;
  222. padding: 0 10px;
  223. font-size: 14px;
  224. color: #666;
  225. }
  226. .desBox p:nth-child(2) {
  227. margin: 3px 0;
  228. }
  229. .device-tit {
  230. font-size: 16px;
  231. color: #333;
  232. }
  233. .statusBox {
  234. width: 15%;
  235. text-align: center
  236. }
  237. .arrowRight {
  238. width: 5%;
  239. text-align: center
  240. }
  241. .arrowRight img {
  242. width: 6px
  243. }
  244. /* 长摁弹框 */
  245. .operate-box {
  246. display: none;
  247. position: absolute;
  248. bottom: -10px;
  249. left: 70px;
  250. background: #fff;
  251. box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
  252. }
  253. .operate-box li {
  254. padding: 5px 10px;
  255. color: #333
  256. }
  257. .operate-box li:first-child {
  258. border-bottom: 1px solid #EDEDED
  259. }
  260. .fixed-section {
  261. position: fixed;
  262. top: 0;
  263. width: 100%;
  264. z-index: 9
  265. }
  266. /* 筛选 */
  267. .filterSection {
  268. padding: 15px 12px;
  269. background: #f1f1f1;
  270. width: 100%;
  271. }
  272. .nav-tit {
  273. background: #333;
  274. color: #fff;
  275. line-height: 45px;
  276. text-align: center;
  277. font-size: 20px;
  278. position: relative;
  279. }
  280. /* .nav-tit img {
  281. width: 10px;
  282. position: absolute;
  283. left: 25px;
  284. top: 12px;
  285. } */
  286. .goBack {
  287. color: #ffffff;
  288. height: 45px;
  289. width: 20px;
  290. display: inline-block;
  291. float: left;
  292. background: url(../image/left-icon.png) no-repeat center;
  293. background-size: 12px 16px;
  294. margin-left: 20px;
  295. position: absolute;
  296. left: 0;
  297. }
  298. input[type="text"] {
  299. -webkit-appearance: none;
  300. }
  301. .filterSection input[type="text"] {
  302. line-height: 35px;
  303. width: 70%;
  304. border-radius: 18px;
  305. text-indent: 15px;
  306. border: 0px solid #aaa;
  307. background: #fff;
  308. font-size: 14px;
  309. color: #999
  310. }
  311. .search {
  312. border-radius: 18px;
  313. line-height: 35px;
  314. width: 21%;
  315. background: #4074E7;
  316. color: #fff;
  317. display: inline-block;
  318. text-align: center;
  319. margin-left: 5px;
  320. }
  321. /* plus */
  322. .plus {
  323. width: 60px;
  324. position: fixed;
  325. bottom: 7px;
  326. right: 7px;
  327. }
  328. .plus :hover {
  329. opacity: .7
  330. }
  331. /* 无查询结果 */
  332. .noResult {
  333. height: 100px;
  334. display: flex;
  335. align-items: center;
  336. justify-content: center;
  337. color: #999;
  338. display: none;
  339. }
  340. /* 站点列表 */
  341. .navRight {
  342. width: 18%;
  343. text-align: right
  344. }
  345. .navRight img {
  346. /* width: 14px */
  347. }
  348. /* 新增页面 */
  349. form {
  350. padding: 15px 12px;
  351. }
  352. form>div {
  353. margin-bottom: 12px;
  354. }
  355. form span {
  356. font-size: 16px;
  357. color: #333;
  358. width: 24%;
  359. display: inline-block;
  360. text-align: left;
  361. position: relative;
  362. padding-left: 10px
  363. }
  364. form span i {
  365. color: #FF0303;
  366. position: absolute;
  367. left: -5px;
  368. }
  369. form input[type="text"],
  370. form select,
  371. form option {
  372. width: 71%;
  373. height: 35px;
  374. line-height: 35px;
  375. border: 1px solid #EDEDED;
  376. padding: 0 10px;
  377. color: #999;
  378. box-sizing: border-box;
  379. appearance: none;
  380. -moz-appearance: none;
  381. -webkit-appearance: none;
  382. }
  383. select {
  384. background: url(../image/arrow.png) no-repeat scroll 98% center;
  385. background-size: 6%;
  386. }
  387. select:focus,
  388. select:active,
  389. select:hover {
  390. outline: none;
  391. }
  392. a.submit-btn {
  393. background: #4074e7;
  394. border-radius: 40px;
  395. width: 100%;
  396. color: #fff;
  397. display: inline-block;
  398. line-height: 40px;
  399. text-align: center;
  400. margin: 20px 0
  401. }
  402. .alarming-type input:last-child {
  403. margin-left: 20px
  404. }
  405. .siteSelect select {
  406. position: relative;
  407. }
  408. .siteSelect select input {
  409. position: absolute;
  410. left: 0
  411. }
  412. /* 站点多选下拉样式 start */
  413. .layui-btn {
  414. background-color: #5fb878;
  415. }
  416. a {
  417. text-decoration: none;
  418. }
  419. .label {
  420. padding: 2px 0px;
  421. background: #aaa;
  422. border-radius: 2px;
  423. color: #fff;
  424. display: block;
  425. line-height: 20px;
  426. height: 20px;
  427. margin: 2px 5px 2px 0;
  428. float: left;
  429. }
  430. .label span {
  431. padding: 0 5px;
  432. color: #fff;
  433. }
  434. .close {
  435. padding: 1px 5px !important;
  436. }
  437. .close:hover {
  438. /* background-color: #009E94;
  439. border-radius: 2px;
  440. color: tomato; */
  441. }
  442. .selectId input {
  443. width: 100%!important;
  444. }
  445. .selectId input {
  446. height: 25px;
  447. padding: 1px 5px;
  448. border-radius: 3px;
  449. width: calc(100% - 12px);
  450. outline-color: #5fb878;
  451. border: 1px solid #5fb878;
  452. }
  453. .selectId {
  454. position: relative;
  455. }
  456. .selectId dl {
  457. border: 1px solid #eee;
  458. border-radius: 3px;
  459. margin: 2px 0px;
  460. max-height: 300px;
  461. overflow-x: hidden;
  462. white-space: nowrap;
  463. position: absolute;
  464. width: 100%;
  465. top: 40px;
  466. background: #fff;
  467. z-index: 1000
  468. }
  469. .selectId dl dd {
  470. margin: 0;
  471. padding: 5px 10px;
  472. }
  473. .selectId dl dd:hover {
  474. background-color: #5FB878;
  475. color: white;
  476. }
  477. .AD {
  478. /* width: 210px;
  479. margin-left: 40px; */
  480. overflow-y: auto;
  481. max-height: 200px;
  482. /* border: 2px solid #5fb878;
  483. border-radius: 6px;
  484. padding: 1px 2px; */
  485. }
  486. form .AD span {
  487. width: auto;
  488. }
  489. .siteSelect {
  490. width: 71%;
  491. display: inline-block;
  492. }
  493. /* 站点多选下拉样式end */