<!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=" 18px; height: 11px" src="src/assets/images/close-eye.png" alt="" /> <img style=" 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=" 80px; height: 38px; display: block; cursor: pointer; " src="./src/assets/images/timg.jpg" alt="重新加载" /> </div> </div> </div> <div> <button class="el-button--primary" style=" 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 { 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%; 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; 20%; min- 350px; height: auto; position: absolute; bottom: 30%; right: 14%; display: flex; justify-content: center; align-items: center; } .login-form-wrap .login-form-container { 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); 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 { 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; 80px; white-space: nowrap; } .code-image .el-input-group__append { padding: 0; } .show-pwd { padding-right: 8px; cursor: pointer; } </style> </body> </html>