index.less 19 KB

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