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);
}
}
}
}
}
}
}
}