qzyReal
/
market-admin-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
		<meta name="author" content="Vincent Garreau" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" media="screen" href="sa-frame/login/style.css">
		<link rel="stylesheet" href="static/sa.css">
		<style type="text/css">
			/* 背景图片 */
			body {
				background-image: url(sa-frame/login/bg.jpg);
				background-size: cover;
			}

			/* 样式调整 */
			.login-box {
				width: 370px;
				padding: 10px 30px 48px 30px;
				background-color: white;
				box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				position: absolute;
				top: 20%;
				left: 65%;
			}

			.clear {
				clear: both;
			}

			.form {
				padding: 0px 25px 10px 25px;
			}

			.bag {}

			.bage {
				width: 10%;
				height: 3px;
				border-radius: 5px;
				background-color: #0E80eF;
				margin: 0 auto;
				margin-top: 10px;
			}

			.lg {
				background: #F2F4F9;
				border-radius: 8px;
				padding: 15px;
				margin-bottom: 17px;
				position: relative;
			}

			.icon {
				float: left;
				width: 20px;
				height: 20px;
				margin-right: 20px;
				margin-top: -3px;
				border-right: 1px solid #D8DDED;
				padding-right: 15px;
			}

			input {
				border: 0px;
				background-color: #F2F4F9;
				font-size: 15px;
				float: left;
				width: 50%;
			}

			.login {
				width: 400px;
				top: 10px;
				height: auto;
				padding: 50px 50px;
				position: static;
				border-radius: 15px;
				pointer-events: all;
			}

			.login-top {
				margin-top: 20px;
				margin-bottom: 30px;
			}

			.logo-img {
				width: 50px;
				height: 50px;
				vertical-align: middle;
				position: relative;
				top: -3px;
				border-radius: 50%;
				margin-left: -10px;
				margin-right: 10px;
			}

			.logo-img {
				display: none;
			}

			.login-button {
				border-radius: 6px;
				transition: all 0.2s;
			}

			.login-button:hover {
				background-color: #0E80eF;
			}

			/* .page-title{line-height: 50px;} */
			.sk-rotating-plane {}

			/* 动画相关 */
			/* .login{background-color: rgba(0,0,0,0); } */
			.login {
				opacity: 0;
			}

			.page-title {
				text-align: center;
				box-shadow: 0px 13px 35px 0px rgba(0, 129, 255, 0.03);
			}

			#captcha {
				position: absolute;
				height: 35px;
				top: 6px;
				border-radius: 3px;
			}
		</style>
	</head>
	<body>

		<div>
			<div class="login-box">
				<div class="bg">
					<div class="login-top">
						<span class="page-title">登录</span>
						<div class="bag">
							<div class="bage"></div>
						</div>
					</div>
					<div class="form">
						<div class="lg">
							<img src="sa-frame/login/name.png" class="icon" />
							<input type="text" name="key" value="" placeholder="请输入账号" />
							<div class="clear"></div>
						</div>
						<div class="lg">
							<img src="sa-frame/login/password.png" class="icon" />
							<input type="password" name="password" value="" placeholder="请输入密码" />
							<div class="clear"></div>
						</div>
						<div class="lg">
							<img src="sa-frame/login/code.png" class="icon" />
							<input type="text" name="verCode" value="" placeholder="请输入验证码" />
							<img id="captcha" />
							<div class="clear"></div>
						</div>
						<div class="login-button">登录</div>
					</div>
				</div>
			</div>
			<div class="sk-rotating-plane"></div>
		</div>

		<!-- scripts -->
		<script src="sa-frame/login/particles.min.js"></script>
		<script src="static/kj/jquery.min.js"></script>
		<script src="static/kj/layer/layer.js"></script>
		<script src="static/sa.js"></script>
		<script src="static/kj/jsencrypt.js"></script>
		<script type="text/javascript">
			// 你所有要改的代码全在这里   ↓↓↓↓↓

			// 所有参考属性
			var page_title = '你好，欢迎登录系统'; // 页面标题
			var key = ''; // 默认的账号
			var password = ''; // 默认的password
			var logo = 'sa-frame/admin-logo.png'; // logo地址，为空字符串则不显示
			var codeKey = '';
			var pKey = '';

			function getCaptcha() {
				sa.ajaxNoLoading('/sp-admin/AccAdmin/captcha', {}, function(res) {
					let data = res.data;
					$('#captcha').attr('src', data.image);
					codeKey = data.key;
					pKey = data.pKey;
				})
			}
			$(function() {
				$('#notice').html('')
				getCaptcha();
			});
			$('#captcha').click(function() {
				getCaptcha()
			})
			// 点击登录按钮
			document.querySelector(".login-button").onclick = function() {
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(pKey);
				// 1、取值
				var p = {
					key: $('[name=key]').val(),
					password: $('[name=password]').val(),
					verCode: $('[name=verCode]').val(),
					code: codeKey
				}
				// 2、判断
				if (p.key == '' || p.password == '') {
					return layer.msg('请输入账号密码');
				}
				if (p.verCode == '') {
					return layer.msg('请输入验证码');
				}
				let res = encrypt.encrypt(p.password);
				let s = encrypt.decrypt(res);
				p.password = res;
				// 3、请求后台
				sa.ajax('/sp-admin/AccAdmin/doLogin', p, function(res) {
					// 写入token
					if (res.data.tokenInfo) {
						localStorage.tokenName = res.data.tokenInfo.tokenName;
						localStorage.tokenValue = res.data.tokenInfo.tokenValue;
					}
					// 写入权限码
					sa.setAuth(res.data.per_list);
					// 打个招呼，进入 index.html
					sa.msg('登录成功，欢迎你：' + p.key);
					setTimeout(function() {
						if (parent == window) {
							location.href = "index.html";
						} else {
							sa.closeCurrIframe();
							parent.location.reload();
						}
					}, 500);
				})
			}
			// 你所有要改的代码全在这里   ↑↑↑↑↑
		</script>
		<script type="text/javascript">
			// 替换属性
			$('.page-title').html(page_title);
			$('title').html(page_title);
			$('[name=key]').val(key);
			$('[name=password]').val(password);
			if (logo != null && logo != '') {
				$('.logo-img').attr('src', logo);
				$('.logo-img').show();
			}
			// 绑定回车事件
			$('[name=password]').bind('keypress', function(event) {
				if (event.keyCode == "13") {
					$('.login-button').click();
				}
			});
		</script>
	</body>
</html>