index.wxss 15 KB

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