common.scss 14 KB

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