index.less 20 KB

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