暂定版登录页面及logo图片
This commit is contained in:
zifan
parent
6ddf43be4c
commit
a055327bd7
133
www/login.html
133
www/login.html
|
|
@ -6,22 +6,136 @@
|
|||
<meta name="author" content="zifan">
|
||||
<meta name="keywords" content="物联网">
|
||||
<title>登录页面</title>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#top {
|
||||
height: 50px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#foot {
|
||||
height: 40px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
background-color: lightcyan;
|
||||
}
|
||||
|
||||
#top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid lightgray;
|
||||
}
|
||||
|
||||
#logo>img {
|
||||
width: 180px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#foot {
|
||||
border-top: 1px solid lightgray;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: rgba(41, 117, 117, 0.667);
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
max-width: 100%;
|
||||
padding: 0px 35px 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px 5px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#insert {
|
||||
font-size: 60px;
|
||||
font-family: "楷体";
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form onsubmit="return login(this)">
|
||||
<div id="top">
|
||||
<div id="logo">
|
||||
<img src="/logo.png">
|
||||
</div>
|
||||
<div id="base_info">基础版</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div></div>
|
||||
<div>
|
||||
<label>用户名</label>
|
||||
<input name="name">
|
||||
<span id="insert"><i>快速</i> </span>
|
||||
<span id="insert"> <i>畅联</i></span>
|
||||
</div>
|
||||
<div>
|
||||
<label>密 码</label>
|
||||
<input name="pwd" type="password">
|
||||
<form onsubmit="return login(this);">
|
||||
<div class="row">
|
||||
<input name="name" placeholder="请输入账号">
|
||||
</div>
|
||||
<div class="row">
|
||||
<input name="pwd" type="password" placeholder="请输入密码">
|
||||
</div>
|
||||
<div class="row center">
|
||||
<button>登录</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<button>登录</button>
|
||||
</div>
|
||||
</form>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="foot" style="text-align: center;">
|
||||
<b>版本所有@FLY-NOOB</b>
|
||||
</div>
|
||||
<script>
|
||||
function login(form) {
|
||||
let login_data = {
|
||||
|
|
@ -37,6 +151,7 @@
|
|||
}).then(resp => resp.json()).then(data => {
|
||||
console.log(data);
|
||||
if (data.code == 0) {
|
||||
window.localStorage.setItem("login_user", JSON.stringify(data.data));
|
||||
open("/index.html", "_self");
|
||||
} else {
|
||||
alert(data.msg);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Loading…
Reference in New Issue