sagacloud-sagacare-miniprogram/pages/adjust/index.less

page{
    height: 100%;
}
.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:310rpx;
        width: 100%;
        top: 510rpx;
        left: 0;
        .one_contant{
            position: absolute;
            width: 201px;
            height: 40px;
            top: 340rpx;
            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%;
}
.header-title{
    display: flex;
    align-items: center;
    flex-direction: row;
    padding:0 34rpx;
    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;
                font-weight: 400;
                color: #2B3036;
                line-height: 56rpx;
            }
            .spacestate{
                font-size: 30rpx;
                color: #8D9399;
                line-height: 42rpx;
                margin-top: 8rpx;
                justify-content:flex-start;
                &>view{
                    margin-left: 18rpx;
                    width: 34rpx;
                    height: 34rpx;
                }
            }
        }
        .msg_right{
            text{
                font-size: 46rpx;
                color: #2B3036;
            }
        }
    }
    .space_paramelist{
        margin: 0 24rpx;
        height: 140rpx;
        background: #F8F9FA;
        border-radius: 4px;
        .parame_item{
            width: 25%;
            .icon_name{
                image{
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }
                color: #8D9399;
                font-size: 24rpx;
            }
            .parame_num{
                color: #646A73;
                font-size: 24rpx;
                text{
                    font-size: 32rpx;
                }
            }
        }
    }
    .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;
            }
        }
        &>.typelistactive {
            background-color: #EAFAF8;
          }
    }
}
.closedown{
    margin: 15rpx 32rpx 64rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #EFF0F1;
    color: #04B49C;
    image{
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
}
.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: 34rpx;
            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;
        .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;
    }
}