common.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  1. /* common */
  2. * {
  3. -webkit-touch-callout: none;
  4. -webkit-user-select: none;
  5. -khtml-user-select: none;
  6. -moz-user-select: none;
  7. -ms-user-select: none;
  8. user-select: none;
  9. }
  10. body .uni-input-input,body .uni-textarea-textarea{
  11. -webkit-touch-callout: initial!important;
  12. -webkit-user-select: initial!important;
  13. -khtml-user-select: initial!important;
  14. -moz-user-select: initial!important;
  15. -ms-user-select: initial!important;
  16. user-select: initial!important;
  17. }
  18. body {
  19. font-size: 32rpx;
  20. }
  21. radio,checkbox {
  22. transform: scale(0.7)
  23. }
  24. /* 修改placeholder颜色 */
  25. .uni-input-placeholder{
  26. color:#999
  27. }
  28. table{
  29. border-collapse: collapse;
  30. width:100%;
  31. text-align:left
  32. }
  33. table,tr,td,th{
  34. border:1px solid #e2e2e2;
  35. }
  36. td,th{
  37. padding:14rpx 10rpx;
  38. font-size:26rpx;
  39. }
  40. .imgPic image{
  41. width:100%
  42. }
  43. /* 一行显示*/
  44. .inOneLine{
  45. white-space: nowrap;
  46. overflow: hidden;
  47. text-overflow: ellipsis;
  48. }
  49. /* 画面监控引入特殊字体 */
  50. @font-face {
  51. font-family: 'FANDOLFANG-REGULAR'; /* project id 2394829 */
  52. src: url('static/font/FANDOLFANG-REGULAR.OTF');
  53. }
  54. /* 巡检计划图表入特殊字体 */
  55. @font-face {
  56. font-family: 'IMPACT'; /* project id 2394829 */
  57. src: url('static/font/IMPACT.TTF');
  58. }
  59. .cu-bar .search-form uni-input{
  60. padding:0 30rpx
  61. }
  62. .searchSelect{
  63. position: -webkit-fixed;
  64. position: fixed;
  65. // top: 88rpx;
  66. top: var(--window-top);
  67. z-index: 999;
  68. -webkit-box-flex: 1;
  69. -webkit-flex: 1;
  70. flex: 1;
  71. -webkit-box-orient: vertical;
  72. -webkit-box-direction: normal;
  73. -webkit-flex-direction: column;
  74. flex-direction: column;
  75. overflow: hidden;
  76. background-color: #fff;
  77. width:254rpx;
  78. .search{
  79. min-height:80rpx;
  80. }
  81. .search-form{
  82. border:1px solid #E9E9E9;
  83. height:50rpx;
  84. line-height:50rpx;
  85. .cuIcon-search{
  86. color:#4074E7
  87. }
  88. input{
  89. padding-left:20rpx;
  90. padding-right:0rpx
  91. }
  92. }
  93. .select-item{
  94. padding:12rpx 32rpx;
  95. text-align:center;
  96. border-top:1px solid #E9E9E9;
  97. font-size:28rpx
  98. }
  99. }
  100. /* 九宫格样式 */
  101. .cu-list.grid>.cu-item uni-text {
  102. color: #333;
  103. font-size: 30rpx;
  104. margin-top:14rpx
  105. }
  106. .cu-list.menu-avatar>.cu-item>.cu-avatar {
  107. left: 24rpx;
  108. background-color:rgba(0,0,0,0)
  109. }
  110. .cu-list.menu-avatar>.cu-item .action {
  111. width: 132rpx
  112. }
  113. .iconfont.phone {
  114. color:#08BE04!important;
  115. font-size:45rpx;
  116. position:relative;
  117. top:6rpx;
  118. left:10rpx;
  119. }
  120. .iconfont.map{
  121. color:#4074E7!important;
  122. font-size:38rpx;
  123. }
  124. /* 列列表公共样式 */
  125. .processWrapper .cu-avatar {
  126. background-repeat: no-repeat;
  127. background-size: cover;
  128. background-color: #fff
  129. }
  130. .cu-avatar.lg {
  131. width: 90rpx;
  132. height: 90rpx
  133. }
  134. .cu-list.menu-avatar .cu-item {
  135. margin-left: 24rpx;
  136. padding: 30rpx 0;
  137. }
  138. .cu-list.menu-avatar>.cu-item>.cu-avatar {
  139. left: 0
  140. }
  141. .cu-list.menu-avatar>.cu-item .content {
  142. left: 120rpx;
  143. width: 580rpx;
  144. }
  145. .unProcess,.error {
  146. color: #FF4E00
  147. }
  148. .processed ,.online{
  149. color: #08BE04
  150. }
  151. .bg-error {
  152. background: #FF4E00;
  153. color:#fff;
  154. display:inline-block;
  155. padding:0 10px ;
  156. }
  157. .bg-online{
  158. background: #08BE04;
  159. color:#fff;
  160. display:inline-block;
  161. padding:0 10px ;
  162. }
  163. // 底部操作样式 (分享 设备注册)
  164. .share{
  165. position:fixed;
  166. bottom:0;
  167. left:0;
  168. width:100%;
  169. background: #f4f5f7;
  170. border: 1px solid #e6e6e6;
  171. .share-item{
  172. padding:20rpx;
  173. }
  174. .share-item:nth-child(2){
  175. border-left:1px solid #e6e6e6;
  176. border-right:1px solid #e6e6e6;
  177. }
  178. }
  179. /* 页面样式 */
  180. /* 站点列表页 */
  181. /* 筛选框 */
  182. .filter-section {
  183. /* position: fixed; */
  184. /* top: 88rpx; */
  185. width: 100%;
  186. z-index: 9
  187. }
  188. .cu-bar .search-form {
  189. background: #fff
  190. }
  191. .cu-btn {
  192. padding: 0 46rpx;
  193. }
  194. /* 站点列表 */
  195. .site-items {
  196. margin-top:100rpx;
  197. width: 100%;
  198. height: calc(100% - 100rpx);
  199. overflow: scroll
  200. }
  201. .site-items .site-tit {
  202. font-size: 32rpx;
  203. color: #333;
  204. justify-content: space-between;
  205. }
  206. .site-items .cu-avatar {}
  207. /* 新增按钮 */
  208. .site-wrapper .plus {
  209. position: fixed;
  210. bottom: 20rpx;
  211. right: 20rpx
  212. }
  213. /* 已处理未处理列表 */
  214. .processList .cu-list.menu-avatar .cu-item {
  215. height: 180rpx;
  216. }
  217. .pro-title {
  218. color: #333;
  219. }
  220. .pro-des,
  221. .pro-date {
  222. font-size: 28rpx;
  223. color: #666;
  224. }
  225. .pro-res {}
  226. .processList{
  227. width: 100%;
  228. height: calc(100% - 90rpx);
  229. overflow-y: scroll;
  230. }
  231. .fireBashWrapper.pushListWrapper{
  232. margin-top:0rpx;
  233. }
  234. .share-item.active{
  235. color:red
  236. }
  237. /* 已处理未处理详情页样式 */
  238. .timeBox {
  239. height: 88rpx;
  240. background: #EFF4FF;
  241. line-height: 88rpx;
  242. .time {
  243. color: #333
  244. }
  245. }
  246. .info-tit {
  247. color: #4074E7;
  248. line-height: 90rpx;
  249. height: 90rpx;
  250. }
  251. /* // 基本信息 */
  252. .info-content>view {
  253. margin-left: 24rpx;
  254. border-bottom: 1px solid #EDEDED;
  255. line-height: 92rpx;
  256. color: #666;
  257. .checkMore {
  258. color: #4074E7!important
  259. }
  260. }
  261. .info-content view text:first-child {
  262. width: auto!important;
  263. display: inline-block
  264. }
  265. //分析页面
  266. .analyse-wrapper {
  267. .top-banner {
  268. width: 100%;
  269. height: 273rpx;
  270. // background: url(/static/analyse-bg.png) no-repeat;
  271. background-size:cover;
  272. position:relative;
  273. }
  274. .cu-list.menu-avatar .cu-item{
  275. margin:30rpx 0 0;
  276. margin-left:0;
  277. .cu-avatar{
  278. background-color:rgba(0,0,0,0);
  279. left:26rpx;
  280. }
  281. .content{
  282. left:130rpx;
  283. font-size:32rpx;
  284. }
  285. }
  286. }
  287. //消息页面
  288. .image-bg {
  289. position: absolute;
  290. z-index: -1;
  291. left: 0;
  292. right: 0;
  293. bottom: 0;
  294. right: 0;
  295. width: 100%;
  296. height: 100%;
  297. }
  298. .info-wrapper {
  299. .top-banner {
  300. background: none;
  301. background-size:cover;
  302. position:relative
  303. }
  304. }
  305. .submitBottomBtn {
  306. position: fixed;
  307. width: 100%;
  308. left:0;
  309. bottom: 44rpx;
  310. z-index: 999;
  311. // background-color: #ffffff;
  312. }
  313. // 权限新增
  314. .perAppWrapper{
  315. input,
  316. select,
  317. option {
  318. line-height: 70rpx;
  319. padding: 0 20rpx;
  320. height: 70rpx;
  321. border: 1px solid #EDEDED;
  322. // width:500rpx!important;
  323. background-color: #fff;
  324. box-sizing: border-box;
  325. appearance: none;
  326. -moz-appearance: none;
  327. -webkit-appearance: none;
  328. color: #999;
  329. }
  330. }
  331. .siteItems{
  332. z-index:999;
  333. position:absolute;
  334. border:1px solid #eee;
  335. width:100%;
  336. .site-item{
  337. background:#fff;
  338. padding:10rpx;
  339. font-size:28rpx;
  340. }
  341. }
  342. .selectedBox .cuIcon-close{
  343. position:relative;
  344. top:3rpx;
  345. right:-10rpx;
  346. }
  347. .noResult{
  348. padding:0 20rpx;
  349. font-size:28rpx;
  350. color:#aaa
  351. }
  352. // 离线设备
  353. .ding{
  354. position:fixed;
  355. width:100%;
  356. top: var(--window-top);
  357. // position: sticky;
  358. /* #ifdef H5 */
  359. // top: 44px;
  360. /* #endif */
  361. /* #ifndef H5 */
  362. // top: 0;
  363. /* #endif */
  364. z-index: 999;
  365. flex: 1;
  366. flex-direction: column;
  367. overflow: hidden;
  368. background-color: #ffffff;
  369. }
  370. .cu-bar{
  371. min-height:0rpx;
  372. }
  373. .cu-bar .search-form {
  374. margin:26rpx 24rpx 0;
  375. }
  376. uni-textarea{
  377. width:500rpx;
  378. }
  379. uni-label uni-text{
  380. position: relative;
  381. top: 2px;
  382. }
  383. select{
  384. outline:none;
  385. border:none;
  386. // width:90%;
  387. width:98%;
  388. padding-left:24rpx;
  389. color:#999
  390. }
  391. // 未处理textarea样式
  392. /* // 处理内容 */
  393. .cu-form-group {
  394. background: #f5f5f5;
  395. }
  396. .processStatus {
  397. textarea {
  398. background: #F5F5F5;
  399. color: #999999;
  400. padding:20rpx;
  401. }
  402. }
  403. // textarea
  404. .JTxtArea {
  405. position: relative;
  406. &.sm {
  407. min-height: 60rpx;
  408. }
  409. &.lg {
  410. min-height: 120rpx;
  411. }
  412. &:after {
  413. content: attr(data-maxnum);
  414. position: absolute;
  415. right: 10rpx;
  416. bottom: 0px;
  417. }
  418. }
  419. // 设备类型
  420. .cu-list.menu-avatar .deviceTypeItem.cu-item{
  421. height:110rpx;
  422. .content{
  423. left:100rpx!important
  424. }
  425. .cu-avatar.round{
  426. width:70rpx;
  427. height:70rpx
  428. }
  429. .title{
  430. font-size:32rpx!important;
  431. }
  432. .num{
  433. color:#666;
  434. }
  435. }
  436. // 设备详情
  437. .radiusStatus{
  438. width:20rpx;height:20rpx;border-radius:50%;display:inline-block;
  439. margin-right:6rpx
  440. }
  441. .radiusStatus.offLine{
  442. }
  443. .bg-offLine{
  444. background:#ABABAB;
  445. color:#666666;
  446. .radiusStatus{
  447. background:#666
  448. }
  449. }
  450. .bg-onLine{
  451. background:#08BE04;
  452. color:#fff;
  453. .radiusStatus{
  454. background:#fff
  455. }
  456. }
  457. // 巡检计划
  458. .plan-sec{
  459. border-radius:10rpx;
  460. }
  461. .plan-tit{
  462. font-size:34rpx
  463. }
  464. // 巡检新增
  465. .cu-form-group {
  466. border-top: 0;
  467. background: #fff;
  468. padding:0
  469. }
  470. input{
  471. border: 1px solid #EDEDED!important;
  472. }
  473. input,
  474. select,
  475. option {
  476. line-height: 70rpx;
  477. padding: 0 20rpx;
  478. height: 70rpx;
  479. border: 1px solid #EDEDED;
  480. background-color: #fff;
  481. box-sizing: border-box;
  482. appearance: none;
  483. -moz-appearance: none;
  484. -webkit-appearance: none;
  485. color: #999;
  486. }
  487. select{
  488. background-color: rgba(0,0,0,0);
  489. }
  490. select:focus,
  491. select:active,
  492. select:hover {
  493. outline: none;
  494. }
  495. .selectBox{
  496. position:relative;
  497. select{
  498. z-index:2
  499. }
  500. .iconfont{
  501. position:absolute;
  502. top:0;
  503. right:0rpx;
  504. color:#999;
  505. z-index:1
  506. }
  507. }
  508. select {
  509. // background: url(/static/arrow2.png) no-repeat scroll 98% center;
  510. background-size:28rpx;
  511. }
  512. textarea{
  513. border:1px solid #EDEDED;
  514. padding:10px;
  515. color: #999;
  516. }
  517. .form-item label text {
  518. position: relative;
  519. top: 2rpx
  520. }
  521. .form-item.selectBox{
  522. select{
  523. background:rgba(0,0,0,0)
  524. }
  525. }
  526. .form-item {
  527. margin: 0 40rpx;
  528. display: flex;
  529. align-items: top;
  530. margin-bottom: 20rpx;
  531. line-height:70rpx;
  532. .title {
  533. width: 200rpx;
  534. position: relative;
  535. .necessary {
  536. color: red;
  537. display: inline-block;
  538. position: absolute;
  539. top: -2rpx;
  540. left: -20rpx;
  541. font-size: 40rpx;
  542. }
  543. }
  544. input,
  545. select {
  546. width: calc(100% - 200rpx);
  547. font-size: 28rpx;
  548. }
  549. }
  550. //报修
  551. .repair-page .cu-avatar{
  552. width:82rpx;
  553. height:82rpx
  554. }
  555. // 巡检详情,已执行
  556. .planDetailDone{
  557. .form-item{
  558. margin-left:24rpx;
  559. padding:26rpx 10rpx;
  560. border-top:1px solid #f1f1f1;
  561. margin-bottom:0
  562. }
  563. }
  564. .repairSquare{
  565. padding:18rpx 20rpx;
  566. border-radius:10rpx;
  567. }
  568. .repairSquare .num,.repairSquare .title{
  569. color:#fff
  570. }
  571. .repairSquare .num{
  572. font-size:36rpx
  573. }
  574. // 设备管理
  575. uni-input, select, option{
  576. border:none
  577. }
  578. // 风险保障
  579. .viewDetail{
  580. color:#4074E7;
  581. }
  582. .qa{
  583. .cu-list+.cu-list{
  584. margin-top:0
  585. }
  586. }
  587. .qa-des{
  588. color:#666;
  589. line-height:1.5;
  590. text-indent:64rpx
  591. }
  592. .bottom-line{
  593. background: rgba(221,221,221,.5);
  594. height:2rpx;
  595. margin-left:30rpx;
  596. }
  597. .cu-list.menu-avatar>.cu-item.qa-tit{
  598. height:auto;
  599. .cu-avatar{
  600. width:32rpx;height:32rpx
  601. }
  602. .content{
  603. left:50rpx
  604. }
  605. }
  606. .messagePush{
  607. .uni-checkbox .uni-checkbox-input{
  608. width:40rpx;
  609. height:40rpx;
  610. }
  611. }
  612. .fireBashWrapper{
  613. .cu-avatar{
  614. width:120rpx;
  615. height:100rpx
  616. }
  617. .cu-list.menu-avatar > .cu-item .content{
  618. left:140rpx;
  619. .pro-date{
  620. position:absolute;
  621. right:20rpx;
  622. bottom:0
  623. }
  624. }
  625. }
  626. // 消防知识库详情页
  627. .fireBashDetailWrapper{
  628. font-size:28rpx;
  629. .cu-avatar{
  630. width:50rpx;
  631. height:50rpx
  632. }
  633. .fireD-content{
  634. position:relative
  635. }
  636. .fireD-content:before{
  637. position: absolute;
  638. top: -8px;
  639. left: -15px;
  640. box-sizing: border-box;
  641. width: calc(100% + 30px);
  642. height: 1px;
  643. background:#EDEDED;
  644. content: " ";
  645. }
  646. .fireD-content view{
  647. line-height:1.5;
  648. // text-indent:56rpx;
  649. }
  650. }
  651. .fireD-tit{
  652. font-size:32rpx;
  653. font-weight:bold
  654. }
  655. .preAndNext{
  656. color:#4074E7;
  657. margin:30rpx 0 80rpx;
  658. }
  659. // 月报详情
  660. .reportD-wrapper{
  661. .title-wrapper{
  662. background:#EFF4FF;
  663. }
  664. .title{
  665. line-height:2
  666. }
  667. .other view{
  668. margin-bottom:10rpx;
  669. }
  670. }
  671. .chart-tit{
  672. color:#4074E7;
  673. font-size:32rpx;
  674. }
  675. // 提交页面
  676. .successWrapper{
  677. text-align:center;
  678. padding-top:100rpx;
  679. img{
  680. width:313rpx;
  681. margin-right:32rpx;
  682. margin-bottom:20rpx
  683. }
  684. view{
  685. font-size:36rpx;
  686. }
  687. }
  688. // 设备注册
  689. .deviceRegistList{
  690. // height:calc(100vh - 490rpx);
  691. checkbox{
  692. position:absolute;
  693. left:0
  694. }
  695. .cu-list.menu-avatar > .cu-item > .cu-avatar{
  696. left:64rpx;
  697. }
  698. .cu-list.menu-avatar > .cu-item .content{
  699. left:170rpx
  700. }
  701. }
  702. .deviceRegistWrapper{
  703. .checkAll{
  704. position:absolute;
  705. top:-60rpx;
  706. left:22rpx
  707. }
  708. .cu-form-group{
  709. min-height:30rpx;
  710. margin-top:0
  711. }
  712. }
  713. // 导出页面样式start
  714. .cu-dialog{
  715. width:505rpx
  716. }
  717. .cu-modal .cu-dialog>.cu-bar:first-child .action{
  718. min-height:50rpx;
  719. min-width:auto;
  720. }
  721. .cu-dialog{
  722. border-radius:20rpx
  723. }
  724. .export-modal{
  725. .cu-bar .action:first-child{
  726. margin-left:70rpx;
  727. }
  728. .cu-bar.operate .action:last-child{
  729. margin-right:70rpx;
  730. color:#fff;
  731. background:#4074E7;
  732. }
  733. .cu-bar.operate .action{
  734. width:158rpx;
  735. border: 1px solid #bfbfbf;
  736. border-radius: 29rpx;
  737. line-height:56rpx;
  738. font-size:26rpx;
  739. }
  740. }
  741. // 导出页面样式end
  742. // 导出页面
  743. .uni-date-x--border, .uni-date-x{
  744. border-radius:25rpx!important;
  745. }
  746. .uni-date__x-input{
  747. line-height:72rpx;
  748. }
  749. .example-body {
  750. margin:20rpx 20rpx;
  751. uni-input, select, option{
  752. border:none!important;
  753. }
  754. }