index.less 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768
  1. page{
  2. height: 100%;
  3. }
  4. .j_page{
  5. padding-bottom: 64rpx;
  6. }
  7. .mini_mask{
  8. width: 100%;
  9. z-index: 100;
  10. position: absolute;
  11. // overflow: hidden;
  12. .stepmask{
  13. padding:0 16rpx;
  14. background:rgba(0, 0, 0, 0);
  15. position: absolute;
  16. border-radius: 4px;
  17. box-shadow:0 0 5px 800px rgba(0,0,0,0.2);
  18. }
  19. .step_one{
  20. height:346rpx;
  21. width: 100%;
  22. top: 510rpx;
  23. left: 0;
  24. .one_contant{
  25. position: absolute;
  26. width: 201px;
  27. height: 40px;
  28. top: 380rpx;
  29. background: #04B49C;
  30. box-shadow: 0px 1px 16px 0px rgba(227, 227, 227, 0.5);
  31. border-radius: 6px;
  32. color: #FFFFFF;
  33. font-size: 14px;
  34. &::before{
  35. content: '';
  36. width: 17px;
  37. height: 17px;
  38. position: absolute;
  39. top:-7px;
  40. left: 50rpx;
  41. background:#04B49C;
  42. transform: rotate(45deg);
  43. // border-top: 10px solid transparent;
  44. // border-left: 10px solid black;
  45. // border-bottom: 10px solid transparent;
  46. border-radius: 5px;
  47. }
  48. }
  49. }
  50. .step_two{
  51. height:820rpx;
  52. width: 100%;
  53. left: 0;
  54. top: 820rpx;
  55. .two_contant{
  56. position: absolute;
  57. width: 341px;
  58. height: 40px;
  59. top: -100rpx;
  60. background: #04B49C;
  61. box-shadow: 0px 1px 16px 0px rgba(227, 227, 227, 0.5);
  62. border-radius: 6px;
  63. color: #FFFFFF;
  64. font-size: 14px;
  65. &::before{
  66. content: '';
  67. width: 16px;
  68. height: 16px;
  69. position: absolute;
  70. top:29px;
  71. left: 50rpx;
  72. background:#04B49C;
  73. transform: rotate(45deg);
  74. // border-top: 10px solid transparent;
  75. // border-left: 10px solid black;
  76. // border-bottom: 10px solid transparent;
  77. border-radius: 5px;
  78. }
  79. }
  80. }
  81. }
  82. .header_custom{
  83. float: left;
  84. width: 100%;
  85. .goback{
  86. width:30px;
  87. text-align: center;
  88. }
  89. }
  90. .header-title{
  91. display: flex;
  92. align-items: center;
  93. flex-direction: row;
  94. // padding:0 34rpx;
  95. padding:0 26rpx;
  96. width: 100%;
  97. justify-content: space-between;
  98. .mode_box{
  99. margin-right: 185rpx;
  100. height: 64rpx;
  101. display: flex;
  102. align-items: center;
  103. flex-direction: row;
  104. background: rgba(0, 0, 0, 0.15);
  105. border-radius: 25px;
  106. border: 1px solid rgba(255, 255, 255, 0.25);
  107. color: #ffffff;
  108. padding: 0 28rpx;
  109. image{
  110. width: 32rpx;
  111. height: 32rpx;
  112. }
  113. .projectname{
  114. margin-left: 12rpx;
  115. transition:all 1s ease;
  116. }
  117. }
  118. }
  119. .adjust_main{
  120. width: 100%;
  121. // height: 840rpx;
  122. background: #FFFFFF;
  123. .space_bg{
  124. width: 100%;
  125. height: 500rpx;
  126. overflow: hidden;
  127. image{
  128. width: 100%;
  129. height: 100%;
  130. }
  131. }
  132. .space_msg{
  133. height: 154rpx;
  134. padding: 0 32rpx;
  135. display: flex;
  136. flex-direction: row;
  137. justify-content: space-between;
  138. align-items: center;
  139. .msg_left{
  140. .spacename{
  141. height: 56rpx;
  142. font-size: 40rpx;
  143. vertical-align: middle;
  144. font-weight: 400;
  145. color: #2B3036;
  146. line-height: 56rpx;
  147. }
  148. .peoplestate{
  149. display: inline-block;
  150. box-sizing: border-box;
  151. padding: 4px 12px;
  152. margin-left: 10px;
  153. // line-height: 56rpx;#c86672
  154. background:#92af67;
  155. vertical-align: middle;
  156. color: #ffffff;
  157. border-radius: 12px;
  158. font-size: 24rpx;
  159. }
  160. .activepeople{
  161. background:#c86672;
  162. }
  163. .spacestate{
  164. font-size: 30rpx;
  165. color: #8D9399;
  166. line-height: 42rpx;
  167. margin-top: 8rpx;
  168. justify-content:flex-start;
  169. &>view{
  170. margin-left: 18rpx;
  171. width: 46rpx;
  172. height: 46rpx;
  173. }
  174. }
  175. }
  176. .msg_right{
  177. display: flex;
  178. align-items: center;
  179. text{
  180. font-size: 46rpx;
  181. color: #2B3036;
  182. }
  183. }
  184. }
  185. .space_paramelist{
  186. margin: 0 24rpx;
  187. // height: 140rpx;
  188. // padding: 30rpx 0;
  189. background: #F8F9FA;
  190. border-radius: 4px;
  191. .parame_item{
  192. max-width: 25%;
  193. min-width: 25%;
  194. padding:32rpx 0rpx 32rpx 0rpx;
  195. display: flex;
  196. justify-content: flex-start;
  197. align-items: flex-start;
  198. .icon_name{
  199. justify-content: flex-start;
  200. image{
  201. width: 32rpx;
  202. height: 32rpx;
  203. margin-right: 8rpx;
  204. }
  205. color: #8D9399;
  206. font-size: 24rpx;
  207. }
  208. .parame_num{
  209. color: #646A73;
  210. font-size: 24rpx;
  211. text{
  212. font-size: 32rpx;
  213. }
  214. }
  215. .parame_tag{
  216. margin:8rpx 0;
  217. padding: 4rpx 14rpx;
  218. color: #ffffff;
  219. border-radius: 24rpx;
  220. // height: 30rpx;
  221. font-size: 18rpx;
  222. display: flex;
  223. justify-content: center;
  224. align-items: center;
  225. min-width: 72rpx;
  226. }
  227. .taghumiditybg0{
  228. background:var(--envredColor);
  229. color:var(--envredtxtColor);
  230. }
  231. .taghumiditybg1{
  232. background:var(--envgreenColor);
  233. color:var(--envgreentxtColor);
  234. }
  235. .taghumiditybg2{
  236. background:var(--envblueColor);
  237. color:var(--envbluetxtColor);
  238. }
  239. .tagpm25bg0{
  240. background:var(--envgreenColor);
  241. color:var(--envgreentxtColor);
  242. }
  243. .tagpm25bg1{
  244. background:var(--envyellowColor);
  245. color:var(--envyellowtxtColor);
  246. }
  247. .tagpm25bg2{
  248. background:var(--envredColor);
  249. color:var(--envredtxtColor);
  250. }
  251. .tagco2bg0{
  252. background:var(--envgreenColor);
  253. color:var(--envgreentxtColor);
  254. }
  255. .tagco2bg1{
  256. background:var(--envyellowColor);
  257. color:var(--envyellowtxtColor);
  258. }
  259. .tagco2bg2{
  260. background:var(--envredColor);
  261. color:var(--envredtxtColor);
  262. }
  263. .taghchobg0{
  264. background:var(--envgreenColor);
  265. color:var(--envgreentxtColor);
  266. }
  267. .taghchobg1{
  268. background:var(--envyellowColor);
  269. color:var(--envyellowtxtColor);
  270. }
  271. .taghchobg2{
  272. background:var(--envredColor);
  273. color:var(--envredtxtColor);
  274. }
  275. .novalue{
  276. min-height:16px;
  277. font-weight: bold;
  278. background:var(--nodateColor);
  279. color:var(--nodatetxtColor);
  280. }
  281. }
  282. .parame_item:nth-child(1){
  283. padding:32rpx 0rpx 32rpx 24rpx;
  284. }
  285. .parame_item:nth-child(4){
  286. padding:32rpx 24rpx 32rpx 0rpx;
  287. }
  288. }
  289. .space_btns{
  290. display: flex;
  291. align-items: center;
  292. justify-content: space-around;
  293. margin-top: 32rpx;
  294. button{
  295. margin: 0;
  296. width: auto;
  297. display: inline-block;
  298. font-size: 26rpx;
  299. height: 76rpx;
  300. display: flex;
  301. padding-left: 0;
  302. padding-right: 0;
  303. text-align: center;
  304. flex-direction: row;
  305. align-items: center;
  306. justify-content: center;
  307. border-radius: 38rpx;
  308. }
  309. .btns_top{
  310. width: 162rpx;
  311. color: #8D9399;
  312. border: 1px solid #EFF0F1;
  313. }
  314. .btns_top_active{
  315. background: #EAFAF8;
  316. color: #04B49C;
  317. border: 0px solid #EFF0F1;
  318. }
  319. .btns_adjust{
  320. width: 460rpx;
  321. color: #ffffff;
  322. background-color: #04B49C;
  323. border-radius: 38rpx;
  324. }
  325. }
  326. }
  327. .envstate_list{
  328. margin:14rpx 32rpx 0;
  329. padding: 32rpx 24rpx;
  330. background: #FFFFFF;
  331. box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1);
  332. border-radius: 4px;
  333. .list_title{
  334. justify-content: flex-start;
  335. image{
  336. width: 48rpx;
  337. height: 48rpx;
  338. }
  339. text{
  340. font-size: 34rpx;
  341. color: rgba(0, 0, 0, 0.9);
  342. line-height: 24px;
  343. margin-left: 16rpx;
  344. }
  345. }
  346. .list_body{
  347. display: flex;
  348. flex-wrap: wrap;
  349. justify-content: space-between;
  350. margin-top: 32rpx;
  351. &>view{
  352. width: 48%;
  353. height: 104rpx;
  354. background: #F5F6F7;
  355. border-radius: 4px;
  356. font-size: 28rpx;
  357. display: flex;
  358. align-items: center;
  359. justify-content: center;
  360. margin-bottom: 12rpx;
  361. image{
  362. width: 56rpx;
  363. height: 56rpx;
  364. margin-right: 24rpx;
  365. }
  366. }
  367. &>.windstyle{
  368. width: 100%;
  369. }
  370. &>.typelistactive {
  371. background-color: #EAFAF8;
  372. }
  373. }
  374. }
  375. .closedown{
  376. margin: 15rpx 32rpx 64rpx;
  377. height: 80rpx;
  378. display: flex;
  379. justify-content: center;
  380. align-items: center;
  381. background: #FFFFFF;
  382. border-radius: 40rpx;
  383. border: 1px solid #EFF0F1;
  384. color: #04B49C;
  385. image{
  386. width: 24rpx;
  387. height: 24rpx;
  388. margin-right: 10rpx;
  389. }
  390. }
  391. .iosbottom{
  392. margin: 15rpx 32rpx 0rpx;
  393. }
  394. .uptime{
  395. position: absolute;
  396. bottom: 20px;
  397. left: 50%;
  398. width: 100%;
  399. transform: translate(-50%,0);
  400. font-size: 14px;
  401. color: #8D9399;
  402. line-height: 19px;
  403. }
  404. .profession_box{
  405. margin: 0 32rpx;
  406. box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1);
  407. border-radius: 4px;
  408. /* 修改标签页样式 */
  409. .van-tabs__wrap{
  410. margin-bottom: 24rpx;
  411. height: 100rpx!important;
  412. }
  413. .van-tabs__nav--card{
  414. height: 100rpx!important;
  415. overflow: hidden;
  416. border-radius: 8rpx!important;
  417. /* border:1px solid rgba(25,27,38,0.1)!important; */
  418. }
  419. .van-ellipsis{
  420. line-height: 100rpx!important;
  421. }
  422. .van-tab{
  423. height: 100rpx!important;
  424. }
  425. .tab-class{
  426. font-size: 17px;
  427. color: #373C43;
  428. }
  429. .tab-active-class{
  430. font-size: 17px;
  431. font-weight: 500;
  432. color: #04B49C!important;
  433. }
  434. .van-radio{
  435. margin-bottom: 38rpx;
  436. }
  437. .van-radio__label{
  438. font-size: 15px;
  439. color: #8D9399;
  440. line-height: 21px;
  441. }
  442. .chartlenged{
  443. margin-top: 32rpx;
  444. justify-content: flex-end;
  445. &>view{
  446. margin-left: 24rpx;
  447. font-size: 26rpx;
  448. color: #8D9399;
  449. line-height: 14px;
  450. image{
  451. width: 13px;
  452. height: 5px;
  453. margin-right: 8rpx;
  454. }
  455. &>view{
  456. width: 20rpx;
  457. height: 20rpx;
  458. margin-right: 8rpx;
  459. background: #B2E6F2;
  460. }
  461. .circle{
  462. background:#04B49C;
  463. border-radius: 50%;
  464. }
  465. }
  466. .tips{
  467. width: 40rpx;
  468. height: 40rpx;
  469. border-radius: 50%;
  470. background: #EAFAF8;
  471. color:#04B49C;
  472. }
  473. }
  474. .tabone{
  475. margin: 0 24rpx;
  476. .hopetmp{
  477. justify-content: space-between;
  478. .hopenum{
  479. font-size: 28rpx;
  480. font-weight: bold;
  481. color: #04B49C;
  482. .hopetxt{
  483. font-size: 34rpx;
  484. margin-right: 16rpx;
  485. color: #000000;
  486. font-weight: normal;
  487. }
  488. text{
  489. font-size: 36rpx;
  490. }
  491. }
  492. .operationbtn{
  493. float: right;
  494. width: 60px;
  495. height: 40px;
  496. color: #2B3036;
  497. font-weight: bold;
  498. background: #F8F9FA;
  499. border-radius: 4px 0px 0px 4px;
  500. }
  501. .minusbtn{
  502. margin-right: 26rpx;
  503. }
  504. }
  505. .choose_txt{
  506. margin: 44rpx 0 34rpx;
  507. font-size:34rpx;
  508. }
  509. .choose_box{
  510. padding:38rpx 24rpx 0;
  511. overflow: hidden;
  512. background: #F8F9FA;
  513. border-radius: 4px;
  514. }
  515. .profession_chart{
  516. height: 360rpx;
  517. width: 100%;
  518. .nodate{
  519. height: 360rpx;
  520. color:var(--nodateColor);
  521. font-size: 14px;
  522. }
  523. }
  524. }
  525. .submit{
  526. padding: 40rpx 0;
  527. background: #04B49C;
  528. color: #ffffff;
  529. }
  530. .tabtwo{
  531. margin: 0 24rpx;
  532. .plantxt{
  533. font-size: 30rpx;
  534. color: #8D9399;
  535. line-height: 21px;
  536. }
  537. .chartcontent{
  538. // min-width: 300px;
  539. // width: 100%;
  540. // height: 150px;
  541. height: 250px;
  542. position: relative;
  543. box-sizing: border-box;
  544. margin: 36rpx auto 0;
  545. .charty{
  546. position: absolute;
  547. left: -27px;
  548. height: 100%;
  549. justify-content: space-between;
  550. }
  551. .chartx{
  552. position: absolute;
  553. bottom: -25px;
  554. width: 100%;
  555. font-size:12px;
  556. color:#C3C6CB;
  557. display: flex;
  558. flex-direction: row;
  559. justify-content: space-around;
  560. }
  561. .chartmain{
  562. height: 100%;
  563. position: relative;
  564. display: flex;
  565. flex-direction: row;
  566. justify-content: center;
  567. // justify-content: space-around;
  568. justify-content: space-between;
  569. // flex-wrap: nowrap;
  570. // margin-left: 48px;
  571. &:after{
  572. content:"";
  573. width:80px;
  574. }
  575. &::before{
  576. content:"";
  577. width:80px;
  578. }
  579. .mian_item{
  580. min-width: 27px;
  581. max-width: 27px;
  582. margin-right: 4px;
  583. height: 90%;
  584. position: relative;
  585. .chartbg{
  586. height: 100%;
  587. width: 100%;
  588. background: linear-gradient(180deg, #F5F6F7 0%, #F8F9FA 100%);
  589. .chartrange{
  590. // height: 30px;
  591. width: 18px;
  592. background: #B2E6F2;
  593. position: relative;
  594. .chartdot{
  595. width: 7px;
  596. height: 7px;
  597. background: #04B49C;
  598. border-radius: 50%;
  599. }
  600. .abdot{
  601. position: absolute;
  602. top: -12px;
  603. left: -3px;
  604. font-size: 13px;
  605. }
  606. }
  607. }
  608. .item_chartx{
  609. position: absolute;
  610. bottom: -18px;
  611. font-size: 10px;
  612. left: 0px;
  613. }
  614. }
  615. }
  616. // .chartcontent::after{
  617. // content: ">";
  618. // position: absolute;
  619. // display: inline-block;
  620. // right:-3px;
  621. // bottom:-10px;
  622. // }
  623. // .chartcontent::before{
  624. // content: ">";
  625. // display: inline-block;
  626. // position: absolute;
  627. // left: -6px;
  628. // top: -7px;
  629. // transform: rotate(-90deg);
  630. // }
  631. }
  632. }
  633. }
  634. .feedback_box{
  635. margin: 64rpx 0 0;
  636. .feedimgbox{
  637. .lottie{
  638. width: 40rpx;
  639. height: 40rpx;
  640. }
  641. .feedtext_title{
  642. font-size: 38rpx;
  643. font-weight: 500;
  644. color: #000000;
  645. margin-bottom: 16rpx;
  646. }
  647. .feedtext_box{
  648. .feedtext_desc {
  649. font-size: 30rpx;
  650. color: #2B3036;
  651. }
  652. }
  653. }
  654. .noticbox {
  655. width: 100%;
  656. height:65rpx;
  657. font-size: 28rpx;
  658. margin-top: 14rpx;
  659. .noticbox_text{
  660. text-align: center;
  661. }
  662. &>swiper{
  663. height: 45rpx;
  664. }
  665. }
  666. .envpanel{
  667. justify-content: space-around;
  668. margin: 20rpx 32rpx 0;
  669. height: 224rpx;
  670. background: #F8F9FA;
  671. border-radius: 4px;
  672. .panel_left{
  673. .left_txt{
  674. font-size: 34rpx;
  675. color: #646A73;
  676. line-height: 24px;
  677. }
  678. @keyframes rotate{
  679. 0%{
  680. transform: rotate(0);
  681. }
  682. 100%{
  683. transform:rotate(360deg);
  684. }
  685. }
  686. .rotate{
  687. // transition: 0.5s;
  688. animation: rotate 1.5s linear infinite; /*开始动画后无限循环,用来控制rotate*/
  689. }
  690. .rotate_slow{
  691. // transition: 0.5s;
  692. animation: rotate 2s linear infinite;
  693. }
  694. &>view{
  695. margin-top: 12px;
  696. text-align: center;
  697. font-size: 28rpx;
  698. image{
  699. width: 68rpx;
  700. height: 68rpx;
  701. }
  702. }
  703. .left_num{
  704. font-size: 56rpx;
  705. color: #2B3036;
  706. line-height: 28px;
  707. }
  708. }
  709. .panel_center{
  710. image{
  711. width: 32rpx;
  712. height: 28rpx;
  713. }
  714. }
  715. }
  716. .feed_tips{
  717. padding-bottom: 12rpx;
  718. &>text:nth-child(1){
  719. font-size: 17px;
  720. font-weight: 500;
  721. color: #000000;
  722. margin-bottom: 16rpx;
  723. }
  724. &>text:nth-child(2){
  725. font-size: 15px;
  726. color: #2B3036;
  727. }
  728. }
  729. .iknow{
  730. color: #ffffff;
  731. background: #04B49C;
  732. }
  733. }
  734. .seconddetail{
  735. padding: 25rpx 32rpx 0;
  736. .secondtxt{
  737. font-size: 14px;
  738. margin-bottom: 16rpx;
  739. }
  740. .lottie{
  741. width: 50rpx;
  742. height: 50rpx;
  743. }
  744. .secondtxt_title{
  745. font-size: 20px;
  746. margin-bottom: 22rpx;
  747. }
  748. .custom_button{
  749. box-sizing: content-box;
  750. padding: 24rpx 32rpx;
  751. height: 40rpx;
  752. display: flex;
  753. margin-top: 54rpx;
  754. justify-content: center;
  755. text-align: center;
  756. align-items: center;
  757. background-color: #5575FF;
  758. color: #ffffff;
  759. font-size: 16px;
  760. border-radius:40rpx;
  761. }
  762. }