index.wxss 15 KB

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