Files
code/application/admincpp/view/login/login.html

91 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title>登录 - CPP生长减速预测模型后台</title>
<link rel="stylesheet" type="text/css" href="/static/admincpp/css/style.css" />
<link rel="stylesheet" type="text/css" href="/static/admincpp/css/login.css" />
<style>
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #27C2A7 0%, #1abc9c 100%); padding: 20px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; }
.login-card .login-header { padding: 36px 24px 24px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.login-card .login-title { font-size: 18px; font-weight: 600; color: #1f2d3d; line-height: 1.5; margin: 0; }
.login-card .login-body { padding: 32px 28px 40px; }
.login-card .form-item { margin-bottom: 22px; }
.login-card .form-item input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 15px; color: #333; background: #fafafa; box-sizing: border-box; transition: border-color .2s, background .2s; }
.login-card .form-item input::placeholder { color: #aaa; }
.login-card .form-item input:focus { outline: none; border-color: #27C2A7; background: #fff; }
.login-card .form-item .warning { display: block; margin-top: 6px; font-size: 12px; color: #e4393c; min-height: 18px; }
.login-card .btn-login { width: 100%; height: 48px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; color: #fff; background: #27C2A7; cursor: pointer; transition: background .2s; }
.login-card .btn-login:hover { background: #1fa891; }
</style>
</head>
<body>
<div class="login-wrap">
<div class="login-card">
<div class="login-header">
<h1 class="login-title">CPP生长减速预测模型后台</h1>
</div>
<div class="login-body">
<form id="loginForm" method="post">
<div class="form-item">
<input type="text" id="username" name="username" placeholder="请输入账号" value="" autocomplete="username" />
<span id="checkusername" class="warning"></span>
</div>
<div class="form-item">
<input type="password" autocomplete="off" id="admin_password" name="password" placeholder="请输入密码" />
<span id="checkpassword" class="warning"></span>
</div>
<button type="button" class="btn-login" id="loginBtn">立即登录</button>
</form>
</div>
</div>
</div>
<script src="/static/admincpp/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#loginBtn").on("click", function(){
var username = $("#username").val().trim();
var password = $("#admin_password").val().trim();
var hasError = false;
if(username === ""){
$("#checkusername").text("账号不能为空").addClass("warning");
hasError = true;
}else{
$("#checkusername").text("").removeClass("warning");
}
if(password === ""){
$("#checkpassword").text("密码不能为空").addClass("warning");
hasError = true;
}else{
$("#checkpassword").text("").removeClass("warning");
}
if(hasError) return;
$.ajax({
type: "POST",
url: "/admincpp/Login/login",
data: { username: username, password: password },
dataType: "json",
success: function(res){
if(res.status == 1){
window.location.href = "/admincpp/Login/index";
}else{
alert(res.msg || "登录失败");
}
},
error: function(){
alert("登录请求失败,请稍后再试");
}
});
});
$(document).keydown(function(e){
if(e.keyCode == 13){ $("#loginBtn").click(); }
});
});
</script>
</body>
</html>