cb_admin/css/login.less

html{
    width: 100%;
    height: 100%;
    body{
        width: 100%;
        height: 100%;
        .wrapper{
            width: 100%;
            height: 100%;
            // background-color: #f2f2f2;
            background:url("../img/login.png") no-repeat center;
            background-size: cover;
            position: relative;
            .inner{
                width: 450px;
                position: absolute;
                left: 50%;
                top: 25%;
                margin-left: -250px;
                background-color: #ffffff;
                border-radius: 12px;
                box-shadow: 0 0 10px 0;
                .logo{
                    text-align: center;
                    padding: 15px;
                    box-sizing: border-box;
                    img{
                        max-width: 100%;
                    }
                }
                .form-box{
                    width: 100%;
                    padding: 10px 20px 35px;
                    box-sizing: border-box;
                    .form-item{
                        width: 100%;
                        margin-bottom: 15px;
                        overflow: hidden;
                        font-size: 16px;
                        position: relative;
                        .iconfont{
                            position: absolute;
                            left: 7px;
                            top: 8px;
                            color: #666666;
                            font-size: 20px;
                            vertical-align: middle;
                        }
                        .form-input{
                            display: block;
                            width: 100%;
                            line-height: 36px;
                            border: 1px solid #dddddd;
                            border-radius: 4px;
                            padding:0 10px 0 30px;
                            box-sizing: border-box;
                            &:focus{
                                border-color: #bf3033;
                            }
                        }
                    }
                    .code-item{
                        .form-input{
                            display: inline-block;
                            width: 70%;
                        }
                        .img-code{
                            position: absolute;
                            right: 25px;
                            max-height: 100%;
                            width: 80px;;
                            height: 36px;;
                        }
                    }
                    .form-button{
                        width: 100%;
                        &>button{
                            display: block;
                            width: 100%;
                            outline: none;
                            background-image: linear-gradient(90deg,#e45b5b 0,#bf3033 99%),linear-gradient(#139cfa,#139cfa);
                            color: #ffffff;
                            font-size: 20px;
                            text-align: center;
                            border: none;
                            border-radius: 4px;
                            line-height: 40px;
                            cursor: pointer;
                            &:hover{
                                background-image: linear-gradient(90deg,#bf3033 0,#bf3033 99%),linear-gradient(#139cfa,#139cfa);
                            }
                        }
                    }
                }
            }
        }
    }
}