page { height: 100%; } .j_page { padding-bottom: 64rpx; } .mini_mask { width: 100%; z-index: 100; position: absolute; } .mini_mask .stepmask { padding: 0 16rpx; background: rgba(0, 0, 0, 0); position: absolute; border-radius: 4px; box-shadow: 0 0 5px 800px rgba(0, 0, 0, 0.2); } .mini_mask .step_one { height: 346rpx; width: 100%; top: 510rpx; left: 0; } .mini_mask .step_one .one_contant { position: absolute; width: 201px; height: 40px; top: 380rpx; background: #04B49C; box-shadow: 0px 1px 16px 0px rgba(227, 227, 227, 0.5); border-radius: 6px; color: #FFFFFF; font-size: 14px; } .mini_mask .step_one .one_contant::before { content: ''; width: 17px; height: 17px; position: absolute; top: -7px; left: 50rpx; background: #04B49C; transform: rotate(45deg); border-radius: 5px; } .mini_mask .step_two { height: 820rpx; width: 100%; left: 0; top: 820rpx; } .mini_mask .step_two .two_contant { position: absolute; width: 341px; height: 40px; top: -100rpx; background: #04B49C; box-shadow: 0px 1px 16px 0px rgba(227, 227, 227, 0.5); border-radius: 6px; color: #FFFFFF; font-size: 14px; } .mini_mask .step_two .two_contant::before { content: ''; width: 16px; height: 16px; position: absolute; top: 29px; left: 50rpx; background: #04B49C; transform: rotate(45deg); border-radius: 5px; } .header_custom { float: left; width: 100%; } .header_custom .goback { width: 30px; text-align: center; } .header-title { display: flex; align-items: center; flex-direction: row; padding: 0 26rpx; width: 100%; justify-content: space-between; } .header-title .mode_box { margin-right: 185rpx; height: 64rpx; display: flex; align-items: center; flex-direction: row; background: rgba(0, 0, 0, 0.15); border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; padding: 0 28rpx; } .header-title .mode_box image { width: 32rpx; height: 32rpx; } .header-title .mode_box .projectname { margin-left: 12rpx; transition: all 1s ease; } .adjust_main { width: 100%; background: #FFFFFF; } .adjust_main .space_bg { width: 100%; height: 500rpx; overflow: hidden; } .adjust_main .space_bg image { width: 100%; height: 100%; } .adjust_main .space_msg { height: 154rpx; padding: 0 32rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .adjust_main .space_msg .msg_left .spacename { height: 56rpx; font-size: 40rpx; vertical-align: middle; font-weight: 400; color: #2B3036; line-height: 56rpx; } .adjust_main .space_msg .msg_left .peoplestate { display: inline-block; box-sizing: border-box; padding: 1px 7px; margin-left: 10px; background: #34c724; vertical-align: middle; color: #ffffff; border-radius: 12px; font-size: 20rpx; } .adjust_main .space_msg .msg_left .activepeople { background: #f54e45; } .adjust_main .space_msg .msg_left .spacestate { font-size: 30rpx; color: #8D9399; line-height: 42rpx; margin-top: 8rpx; justify-content: flex-start; } .adjust_main .space_msg .msg_left .spacestate > view { margin-left: 18rpx; width: 46rpx; height: 46rpx; } .adjust_main .space_msg .msg_right { display: flex; align-items: center; } .adjust_main .space_msg .msg_right text { font-size: 46rpx; color: #2B3036; } .adjust_main .space_paramelist { margin: 0 24rpx; background: #F8F9FA; border-radius: 4px; } .adjust_main .space_paramelist .parame_item { max-width: 25%; min-width: 25%; padding: 32rpx 0rpx 32rpx 0rpx; display: flex; justify-content: flex-start; align-items: flex-start; } .adjust_main .space_paramelist .parame_item .icon_name { justify-content: flex-start; color: #8D9399; font-size: 24rpx; } .adjust_main .space_paramelist .parame_item .icon_name image { width: 32rpx; height: 32rpx; margin-right: 8rpx; } .adjust_main .space_paramelist .parame_item .parame_num { color: #646A73; font-size: 24rpx; } .adjust_main .space_paramelist .parame_item .parame_num text { font-size: 32rpx; } .adjust_main .space_paramelist .parame_item .parame_tag { margin: 8rpx 0; padding: 4rpx 14rpx; color: #ffffff; border-radius: 24rpx; font-size: 18rpx; display: flex; justify-content: center; align-items: center; min-width: 72rpx; } .adjust_main .space_paramelist .parame_item .taghumiditybg0 { background: var(--envredColor); color: var(--envredtxtColor); } .adjust_main .space_paramelist .parame_item .taghumiditybg1 { background: var(--envgreenColor); color: var(--envgreentxtColor); } .adjust_main .space_paramelist .parame_item .taghumiditybg2 { background: var(--envblueColor); color: var(--envbluetxtColor); } .adjust_main .space_paramelist .parame_item .tagpm25bg0 { background: var(--envgreenColor); color: var(--envgreentxtColor); } .adjust_main .space_paramelist .parame_item .tagpm25bg1 { background: var(--envyellowColor); color: var(--envyellowtxtColor); } .adjust_main .space_paramelist .parame_item .tagpm25bg2 { background: var(--envredColor); color: var(--envredtxtColor); } .adjust_main .space_paramelist .parame_item .tagco2bg0 { background: var(--envgreenColor); color: var(--envgreentxtColor); } .adjust_main .space_paramelist .parame_item .tagco2bg1 { background: var(--envyellowColor); color: var(--envyellowtxtColor); } .adjust_main .space_paramelist .parame_item .tagco2bg2 { background: var(--envredColor); color: var(--envredtxtColor); } .adjust_main .space_paramelist .parame_item .taghchobg0 { background: var(--envgreenColor); color: var(--envgreentxtColor); } .adjust_main .space_paramelist .parame_item .taghchobg1 { background: var(--envyellowColor); color: var(--envyellowtxtColor); } .adjust_main .space_paramelist .parame_item .taghchobg2 { background: var(--envredColor); color: var(--envredtxtColor); } .adjust_main .space_paramelist .parame_item .novalue { min-height: 16px; font-weight: bold; background: var(--nodateColor); color: var(--nodatetxtColor); } .adjust_main .space_paramelist .parame_item:nth-child(1) { padding: 32rpx 0rpx 32rpx 24rpx; } .adjust_main .space_paramelist .parame_item:nth-child(4) { padding: 32rpx 24rpx 32rpx 0rpx; } .adjust_main .space_btns { display: flex; align-items: center; justify-content: space-around; margin-top: 32rpx; } .adjust_main .space_btns button { margin: 0; width: auto; display: inline-block; font-size: 26rpx; height: 76rpx; display: flex; padding-left: 0; padding-right: 0; text-align: center; flex-direction: row; align-items: center; justify-content: center; border-radius: 38rpx; } .adjust_main .space_btns .btns_top { width: 162rpx; color: #8D9399; border: 1px solid #EFF0F1; } .adjust_main .space_btns .btns_top_active { background: #EAFAF8; color: #04B49C; border: 0px solid #EFF0F1; } .adjust_main .space_btns .btns_adjust { width: 460rpx; color: #ffffff; background-color: #04B49C; border-radius: 38rpx; } .envstate_list { margin: 14rpx 32rpx 0; padding: 32rpx 24rpx; background: #FFFFFF; box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1); border-radius: 4px; } .envstate_list .list_title { justify-content: flex-start; } .envstate_list .list_title image { width: 48rpx; height: 48rpx; } .envstate_list .list_title text { font-size: 34rpx; color: rgba(0, 0, 0, 0.9); line-height: 24px; margin-left: 16rpx; } .envstate_list .list_body { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 32rpx; } .envstate_list .list_body > view { width: 48%; height: 104rpx; background: #F5F6F7; border-radius: 4px; font-size: 28rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 12rpx; } .envstate_list .list_body > view image { width: 56rpx; height: 56rpx; margin-right: 24rpx; } .envstate_list .list_body > .windstyle { width: 100%; } .envstate_list .list_body > .typelistactive { background-color: #EAFAF8; } .closedown { margin: 15rpx 32rpx 64rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 40rpx; border: 1px solid #EFF0F1; color: #04B49C; } .closedown image { width: 24rpx; height: 24rpx; margin-right: 10rpx; } .iosbottom { margin: 15rpx 32rpx 0rpx; } .uptime { position: absolute; bottom: 20px; left: 50%; width: 100%; transform: translate(-50%, 0); font-size: 14px; color: #8D9399; line-height: 19px; } .profession_box { margin: 0 32rpx; box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1); border-radius: 4px; /* 修改标签页样式 */ } .profession_box .van-tabs__wrap { margin-bottom: 24rpx; height: 100rpx!important; } .profession_box .van-tabs__nav--card { height: 100rpx!important; overflow: hidden; border-radius: 8rpx!important; /* border:1px solid rgba(25,27,38,0.1)!important; */ } .profession_box .van-ellipsis { line-height: 100rpx!important; } .profession_box .van-tab { height: 100rpx!important; } .profession_box .tab-class { font-size: 17px; color: #373C43; } .profession_box .tab-active-class { font-size: 17px; font-weight: 500; color: #04B49C !important; } .profession_box .van-radio { margin-bottom: 38rpx; } .profession_box .van-radio__label { font-size: 15px; color: #8D9399; line-height: 21px; } .profession_box .chartlenged { margin-top: 32rpx; justify-content: flex-end; } .profession_box .chartlenged > view { margin-left: 24rpx; font-size: 26rpx; color: #8D9399; line-height: 14px; } .profession_box .chartlenged > view image { width: 13px; height: 5px; margin-right: 8rpx; } .profession_box .chartlenged > view > view { width: 20rpx; height: 20rpx; margin-right: 8rpx; background: #B2E6F2; } .profession_box .chartlenged > view .circle { background: #04B49C; border-radius: 50%; } .profession_box .chartlenged .tips { width: 40rpx; height: 40rpx; border-radius: 50%; background: #EAFAF8; color: #04B49C; } .profession_box .tabone { margin: 0 24rpx; } .profession_box .tabone .hopetmp { justify-content: space-between; } .profession_box .tabone .hopetmp .hopenum { font-size: 28rpx; font-weight: bold; color: #04B49C; } .profession_box .tabone .hopetmp .hopenum .hopetxt { font-size: 34rpx; margin-right: 16rpx; color: #000000; font-weight: normal; } .profession_box .tabone .hopetmp .hopenum text { font-size: 36rpx; } .profession_box .tabone .hopetmp .operationbtn { float: right; width: 60px; height: 40px; color: #2B3036; font-weight: bold; background: #F8F9FA; border-radius: 4px 0px 0px 4px; } .profession_box .tabone .hopetmp .minusbtn { margin-right: 26rpx; } .profession_box .tabone .choose_txt { margin: 44rpx 0 34rpx; font-size: 34rpx; } .profession_box .tabone .choose_box { padding: 38rpx 24rpx 0; overflow: hidden; background: #F8F9FA; border-radius: 4px; } .profession_box .tabone .profession_chart { height: 360rpx; width: 100%; } .profession_box .tabone .profession_chart .nodate { height: 360rpx; color: var(--nodateColor); font-size: 14px; } .profession_box .submit { padding: 40rpx 0; background: #04B49C; color: #ffffff; } .profession_box .tabtwo { margin: 0 24rpx; } .profession_box .tabtwo .plantxt { font-size: 30rpx; color: #8D9399; line-height: 21px; } .profession_box .tabtwo .chartcontent { height: 250px; position: relative; box-sizing: border-box; margin: 36rpx auto 0; } .profession_box .tabtwo .chartcontent .charty { position: absolute; left: -27px; height: 100%; justify-content: space-between; } .profession_box .tabtwo .chartcontent .chartx { position: absolute; bottom: -25px; width: 100%; font-size: 12px; color: #C3C6CB; display: flex; flex-direction: row; justify-content: space-around; } .profession_box .tabtwo .chartcontent .chartmain { height: 100%; position: relative; display: flex; flex-direction: row; justify-content: center; justify-content: space-between; } .profession_box .tabtwo .chartcontent .chartmain:after { content: ""; width: 80px; } .profession_box .tabtwo .chartcontent .chartmain::before { content: ""; width: 80px; } .profession_box .tabtwo .chartcontent .chartmain .mian_item { min-width: 27px; max-width: 27px; margin-right: 4px; height: 90%; position: relative; } .profession_box .tabtwo .chartcontent .chartmain .mian_item .chartbg { height: 100%; width: 100%; background: linear-gradient(180deg, #F5F6F7 0%, #F8F9FA 100%); } .profession_box .tabtwo .chartcontent .chartmain .mian_item .chartbg .chartrange { width: 18px; background: #B2E6F2; position: relative; } .profession_box .tabtwo .chartcontent .chartmain .mian_item .chartbg .chartrange .chartdot { width: 7px; height: 7px; background: #04B49C; border-radius: 50%; } .profession_box .tabtwo .chartcontent .chartmain .mian_item .chartbg .chartrange .abdot { position: absolute; top: -12px; left: -3px; font-size: 13px; } .profession_box .tabtwo .chartcontent .chartmain .mian_item .item_chartx { position: absolute; bottom: -18px; font-size: 10px; left: 0px; } .feedback_box { margin: 64rpx 0 0; } .feedback_box .feedimgbox .lottie { width: 40rpx; height: 40rpx; } .feedback_box .feedimgbox .feedtext_title { font-size: 38rpx; font-weight: 500; color: #000000; margin-bottom: 16rpx; } .feedback_box .feedimgbox .feedtext_box .feedtext_desc { font-size: 30rpx; color: #2B3036; } .feedback_box .noticbox { width: 100%; height: 65rpx; font-size: 28rpx; margin-top: 14rpx; } .feedback_box .noticbox .noticbox_text { text-align: center; } .feedback_box .noticbox > swiper { height: 45rpx; } .feedback_box .envpanel { justify-content: space-around; margin: 20rpx 32rpx 0; height: 224rpx; background: #F8F9FA; border-radius: 4px; } .feedback_box .envpanel .panel_left .left_txt { font-size: 34rpx; color: #646A73; line-height: 24px; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .feedback_box .envpanel .panel_left .rotate { animation: rotate 1.5s linear infinite; /*开始动画后无限循环,用来控制rotate*/ } .feedback_box .envpanel .panel_left .rotate_slow { animation: rotate 2s linear infinite; } .feedback_box .envpanel .panel_left > view { margin-top: 12px; text-align: center; font-size: 28rpx; } .feedback_box .envpanel .panel_left > view image { width: 68rpx; height: 68rpx; } .feedback_box .envpanel .panel_left .left_num { font-size: 56rpx; color: #2B3036; line-height: 28px; } .feedback_box .envpanel .panel_center image { width: 32rpx; height: 28rpx; } .feedback_box .feed_tips { padding-bottom: 12rpx; } .feedback_box .feed_tips > text:nth-child(1) { font-size: 17px; font-weight: 500; color: #000000; margin-bottom: 16rpx; } .feedback_box .feed_tips > text:nth-child(2) { font-size: 15px; color: #2B3036; } .feedback_box .iknow { color: #ffffff; background: #04B49C; } .seconddetail { padding: 25rpx 32rpx 0; } .seconddetail .secondtxt { font-size: 14px; margin-bottom: 16rpx; } .seconddetail .lottie { width: 50rpx; height: 50rpx; } .seconddetail .secondtxt_title { font-size: 20px; margin-bottom: 22rpx; } .seconddetail .custom_button { box-sizing: content-box; padding: 24rpx 32rpx; height: 40rpx; display: flex; margin-top: 54rpx; justify-content: center; text-align: center; align-items: center; background-color: #5575FF; color: #ffffff; font-size: 16px; border-radius: 40rpx; }