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