login.html 4.6 KB
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台管理-登陆</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<!-- 样式 -->
		<link rel="stylesheet" href="/notify//css/login.css">

	</head>
	<body>
		<div class="main-body">
			<div class="login-main">
				<div class="login-top">
					<span>蒙自市智慧水库AI人工智能预警平台</span>

				</div>
				<div class="x-title">V1.0</div>
				<form id='form' name="form" class="layui-form login-bottom" method="POST" action="{:url('index/user/login')}">
				    <input type="hidden" name="url" value="{$url|htmlentities}"/>
                    {:token()}
					<div class="center">
						<div class="item">
							<span class="icon icon-2"></span>
							<input type="text" name="account" lay-verify="required" placeholder="请输入登录账号"
								maxlength="24" />
						</div>

						<div class="item">
							<span class="icon icon-3"></span>
							<input type="password" name="password" lay-verify="required" placeholder="请输入密码"
								maxlength="20">
							<!-- <span class="bind-password icon icon-4"></span> -->
						</div>

						<!-- <div id="validatePanel" class="item" style="width: 137px;">
                    <input type="text" name="captcha" placeholder="请输入验证码" maxlength="4">
                    <img id="refreshCaptcha" class="validateImg"  src="../images/captcha.jpg" >
                </div> -->

					</div>
					<!--<div class="tip">-->
					<!--	<a href="javascript:" class="forget-password">忘记密码?</a>-->
					<!--</div>-->
					<div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
						<button class="login-btn" type="button" onclick="login()">立即登录</button>
					</div>
				</form>
			</div>
		</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
						<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
						<script>
						    function login(){
						        let account = $('input[name="account"]').val();
						        let password = $('input[name="password"]').val();
						        if(account==''){
						            layer.msg('请填写账号');
						            return;
						        }
						        let data = $('#form').serialize();
						        if(password==''){
						            layer.msg('请填写密码');
						            return;
						        }
						        $.post("{:url('index/user/login')}",data,function(res){
						            if(res.code==0){
						                layer.msg(res.msg);
						                $('input[name="__token__"]').val(res.data.token);
						                return;
						            }
						            setTimeout(function(){
						                layer.msg('登录成功');
						                location.href= $('input[name="url"]').val();
						              },1000)
						        });
						    }
						</script>
		<script src="/notify/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>


		<script>
			layui.use(['form', 'jquery'], function() {
				var $ = layui.jquery,
					form = layui.form,
					layer = layui.layer;

				// 登录过期的时候,跳出ifram框架
				if (top.location != self.location) top.location = self.location;

				$('.bind-password').on('click', function() {
					if ($(this).hasClass('icon-5')) {
						$(this).removeClass('icon-5');
						$("input[name='password']").attr('type', 'password');
					} else {
						$(this).addClass('icon-5');
						$("input[name='password']").attr('type', 'text');
					}
				});

				$('.icon-nocheck').on('click', function() {
					if ($(this).hasClass('icon-check')) {
						$(this).removeClass('icon-check');
					} else {
						$(this).addClass('icon-check');
					}
				});

				// 进行登录操作
				form.on('submit(login)', function(data) {
					data = data.field;
					if (data.username == '') {
						layer.msg('用户名不能为空');
						return false;
					}
					if (data.password == '') {
						layer.msg('密码不能为空');
						return false;
					}
					if (data.captcha == '') {
						layer.msg('验证码不能为空');
						return false;
					}
					layer.msg('登录成功', function() {
						window.location = '../index.html';
					});
					return false;
				});
			});
		</script>
	</body>
</html>