common.css 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  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. input[type="text"][readonly] {
  162. background-color: #fff
  163. }
  164. *:not(input) {
  165. -webkit-touch-callout: none;
  166. -webkit-user-select: none;
  167. -khtml-user-select: none;
  168. -moz-user-select: none;
  169. -ms-user-select: none;
  170. user-select: none;
  171. }
  172. .onlineColor {
  173. color: #08BE04
  174. }
  175. .offlineColor {
  176. color: #666666
  177. }
  178. .hitchColor {
  179. color: #FF6523
  180. }
  181. input::-webkit-input-placeholder {
  182. color: #999;
  183. }
  184. input::-moz-placeholder {
  185. /* Mozilla Firefox 19+ */
  186. color: #999;
  187. }
  188. input:-moz-placeholder {
  189. /* Mozilla Firefox 4 to 18 */
  190. color: #999;
  191. }
  192. input:-ms-input-placeholder {
  193. /* Internet Explorer 10-11 */
  194. color: #999;
  195. }
  196. /*add*/
  197. body {
  198. font-size: 16px;
  199. }
  200. .device-list {
  201. margin-top: 106px;
  202. margin-bottom: 100px;
  203. }
  204. .device-item {
  205. padding: 10px 10px 10px 0;
  206. display: flex;
  207. align-items: center;
  208. margin-left: 10px;
  209. border-bottom: 1px solid #EDEDED;
  210. position: relative
  211. }
  212. .checkBox {
  213. width: 8%;
  214. text-align: center
  215. }
  216. .iconBox {
  217. width: 15%;
  218. text-align: center
  219. }
  220. .iconBox img {
  221. width: 45px
  222. }
  223. .desBox {
  224. width: 60%;
  225. padding: 0 10px;
  226. font-size: 14px;
  227. color: #666;
  228. }
  229. .desBox p:nth-child(2) {
  230. margin: 3px 0;
  231. }
  232. .device-tit {
  233. font-size: 16px;
  234. color: #333;
  235. }
  236. .statusBox {
  237. width: 15%;
  238. text-align: center
  239. }
  240. .arrowRight {
  241. width: 5%;
  242. text-align: center
  243. }
  244. .arrowRight img {
  245. width: 6px
  246. }
  247. /* 长摁弹框 */
  248. .operate-box {
  249. display: none;
  250. position: absolute;
  251. bottom: -10px;
  252. left: 70px;
  253. background: #fff;
  254. box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
  255. }
  256. .operate-box li {
  257. padding: 5px 10px;
  258. color: #333
  259. }
  260. .operate-box li:first-child {
  261. border-bottom: 1px solid #EDEDED
  262. }
  263. .fixed-section {
  264. position: fixed;
  265. top: 0;
  266. width: 100%;
  267. z-index: 9
  268. }
  269. /* 筛选 */
  270. .filterSection {
  271. padding: 15px 12px;
  272. background: #f1f1f1;
  273. width: 100%;
  274. }
  275. .nav-tit {
  276. background: #333;
  277. color: #fff;
  278. line-height: 45px;
  279. text-align: center;
  280. font-size: 20px;
  281. position: relative;
  282. }
  283. /* .nav-tit img {
  284. width: 10px;
  285. position: absolute;
  286. left: 25px;
  287. top: 12px;
  288. } */
  289. .goBack {
  290. color: #ffffff;
  291. height: 45px;
  292. width: 20px;
  293. display: inline-block;
  294. float: left;
  295. background: url(../image/left-icon.png) no-repeat center;
  296. background-size: 12px 16px;
  297. margin-left: 20px;
  298. position: absolute;
  299. left: 0;
  300. }
  301. input[type="text"] {
  302. -webkit-appearance: none;
  303. }
  304. .filterSection input[type="text"] {
  305. line-height: 35px;
  306. width: 70%;
  307. border-radius: 18px;
  308. text-indent: 15px;
  309. border: 0px solid #aaa;
  310. background: #fff;
  311. font-size: 14px;
  312. color: #999
  313. }
  314. .search {
  315. border-radius: 18px;
  316. line-height: 35px;
  317. width: 21%;
  318. background: #4074E7;
  319. color: #fff;
  320. display: inline-block;
  321. text-align: center;
  322. margin-left: 5px;
  323. }
  324. /* plus */
  325. .plus {
  326. width: 60px;
  327. position: fixed;
  328. bottom: 7px;
  329. right: 7px;
  330. }
  331. .plus :hover {
  332. opacity: .7
  333. }
  334. /* 无查询结果 */
  335. .noResult {
  336. height: 100px;
  337. display: flex;
  338. align-items: center;
  339. justify-content: center;
  340. color: #999;
  341. display: none;
  342. }
  343. /* 站点列表 */
  344. .navRight {
  345. width: 18%;
  346. text-align: right
  347. }
  348. .navRight img {
  349. /* width: 14px */
  350. }
  351. /* 新增页面 */
  352. form {
  353. padding: 15px 12px;
  354. }
  355. form>div {
  356. margin-bottom: 12px;
  357. }
  358. form span {
  359. font-size: 16px;
  360. color: #333;
  361. width: 24%;
  362. display: inline-block;
  363. text-align: left;
  364. position: relative;
  365. padding-left: 10px
  366. }
  367. form span i {
  368. color: #FF0303;
  369. position: absolute;
  370. left: -5px;
  371. }
  372. form input[type="text"],
  373. form select,
  374. form option {
  375. width: 71%;
  376. height: 35px;
  377. line-height: 35px;
  378. border: 1px solid #EDEDED;
  379. padding: 0 10px;
  380. color: #999;
  381. box-sizing: border-box;
  382. appearance: none;
  383. -moz-appearance: none;
  384. -webkit-appearance: none;
  385. }
  386. select {
  387. background: url(../image/arrow.png) no-repeat scroll 98% center;
  388. background-size: 6%;
  389. }
  390. select:focus,
  391. select:active,
  392. select:hover {
  393. outline: none;
  394. }
  395. a.submit-btn {
  396. background: #4074e7;
  397. border-radius: 40px;
  398. width: 100%;
  399. color: #fff;
  400. display: inline-block;
  401. line-height: 40px;
  402. text-align: center;
  403. margin: 20px 0
  404. }
  405. .alarming-type input:last-child {
  406. margin-left: 20px
  407. }
  408. .siteSelect select {
  409. position: relative;
  410. }
  411. .siteSelect select input {
  412. position: absolute;
  413. left: 0
  414. }
  415. /* 站点多选下拉样式 start */
  416. .layui-btn {
  417. background-color: #5fb878;
  418. }
  419. a {
  420. text-decoration: none;
  421. }
  422. .label {
  423. padding: 2px 0px;
  424. background: #aaa;
  425. border-radius: 2px;
  426. color: #fff;
  427. display: block;
  428. line-height: 20px;
  429. height: 20px;
  430. margin: 2px 5px 2px 0;
  431. float: left;
  432. }
  433. .label span {
  434. padding: 0 5px;
  435. color: #fff;
  436. }
  437. .close {
  438. padding: 1px 5px !important;
  439. }
  440. .close:hover {
  441. /* background-color: #009E94;
  442. border-radius: 2px;
  443. color: tomato; */
  444. }
  445. .selectId input {
  446. width: 100%!important;
  447. }
  448. .selectId input {
  449. height: 25px;
  450. padding: 1px 5px;
  451. border-radius: 3px;
  452. width: calc(100% - 12px);
  453. outline-color: #5fb878;
  454. border: 1px solid #5fb878;
  455. }
  456. .selectId {
  457. position: relative;
  458. }
  459. .selectId dl {
  460. border: 1px solid #eee;
  461. border-radius: 3px;
  462. margin: 2px 0px;
  463. max-height: 300px;
  464. overflow-x: hidden;
  465. white-space: nowrap;
  466. position: absolute;
  467. width: 100%;
  468. top: 40px;
  469. background: #fff;
  470. z-index: 1000
  471. }
  472. .selectId dl dd {
  473. margin: 0;
  474. padding: 5px 10px;
  475. }
  476. .selectId dl dd:hover {
  477. background-color: #5FB878;
  478. color: white;
  479. }
  480. .AD {
  481. /* width: 210px;
  482. margin-left: 40px; */
  483. overflow-y: auto;
  484. max-height: 200px;
  485. /* border: 2px solid #5fb878;
  486. border-radius: 6px;
  487. padding: 1px 2px; */
  488. }
  489. form .AD span {
  490. width: auto;
  491. }
  492. .siteSelect {
  493. width: 71%;
  494. display: inline-block;
  495. }
  496. /* 站点多选下拉样式end */