html 登录页面 简洁,简单登录html页面

简单的登录页面

一个简单pc+移动端显示的html

code

Document

* {

margin: 0px;

padding: 0px;

}

.bg {

width: 100%;

height: 45vh;

text-align: center;

color: #fff;

background-image: linear-gradient(160deg, #0078ff 20%, #002abb 80%);

display: flex;

justify-content: center;

align-items: center;

}

/* 主体内容 */

.content {

width: 80%;

max-width: 360px;

background: #fff;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 20px;

box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);

}

.main {

display: flex;

}

/* 输入框 */

.inputbox {

outline-style: none;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 3px;

padding: 13px 14px;

font-size: 14px;

font-weight: 700;

width: 100%;

box-sizing: border-box;

}

#tip {

color: red;

}

/* 按钮 */

.btn {

width: 100%;

height: 40px;

border-width: 0px;

border-radius: 3px;

background: #1E90FF;

cursor: pointer;

outline: none;

color: white;

font-size: 17px;

}

.btn:hover {

background: #5599FF;

}

function loginFn() {

console.log({

username:$('#name').val(),

password:$('#password').val()

})

$.ajax({

url:'',

method:'POST',

data:{

username:$('#name').val(),

password:$('#password').val()

},

success:function(res) {

// 成功

console.log(res)

if(res.code == 200) {

window.location.href='/swagger-ui/index.html?data='+res.data

}

},

error:function(err) {

// 失败

console.log(err)

}

})

}