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