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

page{
    overflow-x: hidden;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
// .pagecontainer{
//     position: absolute;
//     width: 686rpx;
//     // height: 379rpx;
//     background: #FFFFFF;
//     border-radius: 8px;
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%,-50%);
//     z-index:999
// }
.header-title{
    // padding:0 34rpx;
    padding:0 26rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
}
.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: 130rpx;
        width: 450rpx;
        top: 43rpx;
        left: 0;
        .one_contant{
            position: absolute;
            width: 201px;
            height: 40px;
            top: 170rpx;
            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;
            }
        }
    }
}
.user-img{
    width: 64rpx;
    height: 64rpx;
    margin-right: 24rpx;
    border-radius: 50%;
    overflow: hidden;
    justify-content: center;

}
.delete_icon{
    height: 339px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    .delete_box{
        width: 44px;
        height: 44px;
        background: #FEF2F1;
        border-radius: 50%;
        image{
            width: 32rpx;
            height: 32rpx;
        }
    }
}
.home-icon{
    .projectname{
        font-size: 16px;
        color: #1F2329;
        image{
            width: 20rpx;
            height: 10rpx;
            margin-left: 16rpx;
        }
    }
    .daytmp{
        justify-content: start;
        font-size: 13px;
        color: #646A73;
        image{
            height: 32rpx;
            width: 32rpx;
        }
    }
}

.contant_box{
     background: #f9fafa;
     height: 100%;
    width: 100%;
    .spacelist_box{
        margin:20rpx 32rpx 0;
        .space_item{
            width: 100%;
            // height: 840rpx;
            padding-bottom: 40rpx;
            background: #FFFFFF;
            box-shadow: 0px 4px 3px 0px rgba(43, 48, 54, 0.1);
            border-radius: 8px;
            margin-bottom: 40rpx;
            &>view{
                text-align: left;
            }
            .space_bg{
                width: 100%;
                height: 398rpx;
                border-radius: 8px 8px 0 0;
                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;
                        vertical-align: middle;
                   }
                   .peoplestate{
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 4px 12px;
                        margin-left: 10px;
                        // line-height: 56rpx;#c86672
                        background:#92af67;
                        vertical-align: middle;
                        color: #ffffff;
                        border-radius: 12px;
                        font-size: 24rpx;
                    }
                    .activepeople{
                        background:#c86672;
                    }
                   .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;
                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;
                        font-weight: bold;
                        float: left;
                        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;
                    border: 1px solid transparent;
                }
                .btns_top_active{
                    background: #EAFAF8;
                    color: #04B49C;
                    border: 0px solid #EFF0F1;
                }
                .btns_adjust{
                    width: 460rpx;
                    color: #ffffff;
                    background-color: #04B49C;
                    border-radius: 38rpx;
                }
            }
        }
    }
    .nospace{
        width: 100%;
        max-width: 343px;
        margin:0 auto;
        height: 339px;
        border-radius: 8px;
        border: 1px dashed #DDDDDD;
        justify-content: space-between;
        .nospace_center{
            margin-top: 216rpx;
            .nospace_img{
                width: 120rpx;
                height: 116rpx;
            }
            text{
                font-size: 30rpx;
                color: #000000;
                line-height: 48rpx;
            }
        }
        .nospace_msg{
            .nospace_down{
                width: 32rpx;
                height: 28rpx;
                margin: 16rpx 0 24rpx;
            }
            text{
                font-size: 24rpx;
                color: #C3C6CB;
                line-height: 40rpx;
            }
        }

    }
    .scannospace{
        width: 100%;
        max-width: 343px;
        margin: 0 auto;
        height: 254px;
        margin-top: 40rpx;
        background: #FFFFFF;
        box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1);
        border-radius: 4px;
        .scan_box{
            width: 198rpx;
            height: 198rpx;
            background: #F0F8FF;
            border-radius: 4px;
            image{
                width: 78rpx;
                height: 78rpx;
            }
        }
        .scan_name{
            margin-top: 24rpx;
            font-size: 36rpx;
            color: #2B3036;
            line-height: 56rpx;
        }
        .scan_scr{
            font-size: 24rpx;
            color: #8D9399;
            line-height: 36rpx;
        }
    }
    .placeholder-view{
        width: 100%;
        height: 202rpx;
        // height: 156rpx;
    }
}
.faillogin{
    background: #ffffff;
}
.footer_box{
    position:fixed;
    bottom: 0;
    width: 100%;
    padding: 26rpx 32rpx 68rpx;
    box-sizing: border-box;
    // height: 78px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    box-shadow: 0px 6px 20px 0px rgba(43, 48, 54, 0.1);
    border-radius: 0px 0px 4px 4px;
    border-top:1px solid #F5F6F7;
}
.footer_box_active{
    border-top:1px solid #c7c8c8;
}
.footer_box_pop{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.2;
}
.spacedetail{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.footer_box{
    z-index:100;
    .item_title{
        font-size: 18px;
        line-height: 28px;
    }
    .item_des{
        color: #8D9399;
        font-size: 12px;
    }
    .item_img{
        width: 106rpx;
        height: 106rpx;
        background: #F0F8FF;
        border-radius: 4px;
        margin-right: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        cover-image{
            width: 48rpx;
            height: 48rpx;
        }
    }
}