简单的登录页面
一个简单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)
}
})
}