<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./src/assets/images/favicon.ico" />
<title>login</title>
</head>
<body>
<div id="app" class="login-container">
<div class="title-container">
<div class="img"><img src="src/assets/images/logo.png" alt="" /></div>
<h3 class="title"></h3>
</div>
<div class="login-form-wrap">
<div class="login-form-container">
<div>
<label>账号</label>
<div class="el-form-item__content">
<input
id="name"
placeholder="请输入账号"
name="name"
type="text"
tabindex="1"
autocomplete="on"
/>
</div>
</div>
<div>
<label>密码</label>
<div class="el-form-item__content">
<input
id="password"
type="password"
placeholder="请输入密码"
name="password"
/>
<span class="show-pwd" onclick="showPwd()">
<img
style="width: 18px; height: 11px"
src="src/assets/images/close-eye.png"
alt=""
/>
<img
style="width: 18px; height: 11px; display: none"
src="src/assets/images/eye.png"
alt=""
/>
</span>
</div>
</div>
<div>
<label>验证码</label>
<div class="el-form-item__content">
<input
id="captcha"
type="text"
placeholder="请输入验证码"
name="captcha"
style="display: table-cell"
/>
<div class="el-input-group__append">
<img
@click="changeCode"
style="
width: 80px;
height: 38px;
display: block;
cursor: pointer;
"
src="./src/assets/images/timg.jpg"
alt="重新加载"
/>
</div>
</div>
</div>
<div>
<button
class="el-button--primary"
style="width: 100%"
onclick="LoginHandle()"
>
登 录
</button>
</div>
</div>
</div>
</div>
<!-- 引入组件库 -->
<script src="./src/config/index.js"></script>
<script>
let flagForShowPwd = 0;
function LoginHandle() {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;
if (!(name && password)) {
alert("请填写登录信息");
return false;
}
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 201) {
window.localStorage.setItem("datav-Token", xmlhttp.responseText);
window.location.href = "./home.html";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(JSON.parse(xmlhttp.responseText).message);
}
};
xmlhttp.open("POST", config.baseURL + "/login", true);
xmlhttp.setRequestHeader(
"Content-type",
"application/json;charset=UTF-8"
);
xmlhttp.setRequestHeader("Accept", "application/json, text/plain, */*");
xmlhttp.send(
JSON.stringify({
name: name,
password: password,
})
);
}
function showPwd() {
if (flagForShowPwd % 2 == 0) {
document.getElementById("password").type = "text";
document.getElementsByClassName(
"show-pwd"
)[0].childNodes[1].style.display = "none";
document.getElementsByClassName(
"show-pwd"
)[0].childNodes[3].style.display = "";
} else {
document.getElementById("password").type = "password";
document.getElementsByClassName(
"show-pwd"
)[0].childNodes[3].style.display = "none";
document.getElementsByClassName(
"show-pwd"
)[0].childNodes[1].style.display = "";
}
flagForShowPwd++;
}
window.onload = function () {
document.getElementById("app").childNodes[1].childNodes[3].innerHTML =
config.titleName + "互联网数据监测中心";
window.localStorage.setItem("screenRadio", "1");
// 需要重新计算页面布局
// zoom();
let domName = document.getElementById("name");
let domPassword = document.getElementById("password");
console.log(domName);
if (domName.value === "") {
domName.focus();
} else if (domPassword.value == "") {
domPassword.focus();
}
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei";
}
.login-container {
width: 100%;
height: 100vh;
position: relative;
background-color: #0f4aaa;
background-image: url("src/assets/images/login-bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.login-container .title-container {
position: absolute;
top: 10%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-container .title-container .img {
padding-right: 15px;
}
.login-container .title-container .title {
font-size: 36px;
color: #fff;
margin: 0;
}
.login-form-wrap {
background: #fff;
box-shadow: 7px -2px 21px 0px rgba(255, 255, 255, 0.23);
border-radius: 8px;
width: 20%;
min-width: 350px;
height: auto;
position: absolute;
bottom: 30%;
right: 14%;
display: flex;
justify-content: center;
align-items: center;
}
.login-form-wrap .login-form-container {
width: 80%;
margin: 0 auto;
padding: 8% 0;
display: flex;
flex-direction: column;
}
.login-form-wrap .login-form-container > div:not(:last-child) {
flex: 1;
height: 3rem;
line-height: 3rem;
margin-bottom: 20px;
}
.login-form-wrap .login-form-container .el-form-item__content {
line-height: 40px;
position: relative;
font-size: 14px;
margin-left: 5rem;
}
.login-form-wrap .login-form-container .el-button--primary {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #ffffff;
border: 1px solid #dcdfe6;
border-color: #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 400;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
color: #ffffff;
background-color: #1890ff;
border-color: #1890ff;
}
.login-form-wrap .login-form-container .el-form-item__content input {
-webkit-appearance: none;
background-color: #ffffff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
.login-form-wrap .login-form-container .el-form-item__content .show-pwd {
position: absolute;
height: 100%;
right: 5px;
top: 0;
text-align: center;
color: #c0c4cc;
transition: all 0.3s;
/* pointer-events: none; */
cursor: pointer;
}
.login-form-wrap .login-form-container div label {
width: 5rem;
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
box-sizing: border-box;
}
.login-form-wrap .login-form-container div label::before {
content: "*";
color: #ff4949;
margin-right: 4px;
}
.login-form-wrap .login-form-container div div.el-input-group__append {
background-color: #f5f7fa;
color: #909399;
vertical-align: middle;
display: table-cell;
top: 0px;
right: 0px;
position: absolute;
border: 1px solid #dcdfe6;
border-radius: 4px;
width: 80px;
white-space: nowrap;
}
.code-image .el-input-group__append {
padding: 0;
}
.show-pwd {
padding-right: 8px;
cursor: pointer;
}
</style>
</body>
</html>
