ttk-app-core/compatible/apps/edf/edfx-app-my-setting/style.less

enterprise develop framework

.edfx-app-my-setting{
    height: 100%;
    width: 100%;
    overflow:hidden;
    flex:1;
    display: flex;

    &-content{
        flex:1;
        background: #ffffff;
        overflow:auto;
        
        .container{
            width:968px;
            margin:0 auto;
        }
    }

    &-baseInfo{
        &-title{
            background: #f5f5f5;
            width: 100%;
            height: 28px;
            line-height: 28px;
            font-family: Microsoft YaHei;
            font-size: 12px;
            color: #666;
            text-align: left;
            font-weight: 400;
            padding-left: 10px;
            margin-top:30px;
        }

        &-form{
            width: 700px;
            margin:0 auto;
            position: relative;
            display: flex;
            align-items: center;

            .mk-datepicker:hover .ant-input,.mk-input:hover{
                border-color: #52aa83;
                outline: 0;
                box-shadow: 0 0 0 2px rgba(82, 170, 131, 0.2);
            }
            .mk-input,.ant-input-disabled:hover {
                border-color: rgb(230, 216, 216);
                box-shadow: 0 0 0 2px rgba(230, 216, 216, 0.2);
            }
            .has-error .mk-input:hover .ant-input,.has-error .ant-input:focus{
                border-color: #ff4d4f;
                outline: 0;
                box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
            }
    
            .ant-input:focus {
                border-color: #52aa83;
                outline: 0;
                box-shadow: 0 0 0 2px rgba(82, 170, 131, 0.2);
            }
            .ant-calendar-picker:hover .ant-calendar-picker-input{
                border-color:#13a984;
            }

            .ant-form-item-label{
                width: 100px;
                margin-right: 15px;
            }
            .mk-input{
                height: 100%;
            }

            .mk-datepicker{
               width:100%;
            }

            &-photo {
                img{
                    width: 100px;
                    height: 100px;
                }


                .mk-upload{
                    display: none;
                    position: absolute;
                    width: 100px;
                    height: 26px;
                    text-align: center;
                    background: #57b48a;
                    bottom: 0px;
                    opacity: 0.8;
                    line-height: 26px;
                    color:#fff;
                    cursor: pointer;
                    .ant-upload{
                        color: rgb(255, 255, 255);
                    }
                }

                div:hover .mk-upload{
                    display:  block
                }
                    
            }
            &-detail {
                &-sex{
                    img{
                        width:40px;
                        height:40px;
                        cursor: pointer;
                        display: inline-block;
                        margin-right:20px;
                    }
                    img.selectImg{
                        border-width:1px;
                        border-style:solid;
                        border-color:@primary-color;
                        border-radius:50%;
                    }
                    img.unSelectImg{
                        border:1px solid #d9d9d9;
                        border-radius:50%;
                    }
                }
            }
            &-saveBtn{
                right: 71px;
                position: absolute;
                bottom: 7px;
                width: 83px;
                padding-right: 20px;
            }
        }
    }

    &-security{
        
        &-title{
            border: 0px dashed #ccc;
            border-bottom-width: 1px;
            margin-bottom: 15px;
        }
        &-box{
            width:700px;
            margin:0 auto;
        }
        &-grid{
            &-row{
                padding:20px 0;
            }
            &-row:not(:last-child){
                border-bottom:1px dashed #D6D6D6;
                padding:20px 0;
            }
            &-row{
                display: flex;
                color:#666666;
                font-size:12px;
                width:650px!important;
                >div{
                    display: flex;
                    padding-right:20px;
                    box-sizing: border-box;
                }
                >div:nth-of-type(1){
                    flex:0.07;
                    flex-direction: column;
                    text-align: center;
                    padding-top:20px;
                    i{
                        font-size:20px;
                        color:#efa524;
                    }
                    span{
                        line-height:18px;
                    }
                }
                >div:nth-of-type(2){
                    flex:0.09;
                    p{
                        align-self: center;
                        margin-bottom: 0;
                    }
                }
                >div:nth-of-type(3){
                    flex:0.7;
                    p{
                        align-self: center;
                        margin-bottom: 0;
                    }
                }
                >div:nth-of-type(4){
                    flex:0.15;
                    justify-content: left;
                    button{
                        align-self: center;
                    }
                }
                .pws{
                    display:flex;
                    &-level{
                        margin:0 10px;
                    }
                    &-bar{
                        flex:1;
                        .ant-progress-line{
                            top:-3px;
                        }
                    }
                }
            }
            &-row:nth-of-type(1){
                >div:nth-of-type(3){
                    flex-direction: column;
                    justify-content: center;
                    p{
                        align-self: left;
                    }
                }
            }
        }
        .react-grid-layout{
            margin-left:-10px;
        }
        &-level{
            margin-top:21px;

            & > span{
                margin-left: 20px
            }

            .ant-progress{
                width: 300px;
                margin-left: 20px
            }

            .mk-btn {
                 margin-left: 20px
            }
        }

        .orangeBg {
            display: block!important;
            .ant-progress-bg{
                width:100%!important;
                background-color:#E94033;
            }
        }
        .yellowBg {
            display: block!important;
            .ant-progress-bg{
                width:100%!important;
                background-color:#FA954C;
            }
        }
        .greenBg {
            display: block!important;
            .ant-progress-bg{
                width:100%!important;
                background-color:#00B38A;
            }
        }
    }
}