新增“贵州林产品溯源管理系统”登录页面前端功能

login/css/style.css

@@ -1,139 +1,193 @@
-.main-nav{
-    height: 70px;
-    background-color: rgba(255, 255, 255, 0.1);
-    display: flex;
-    align-items: center;
-    padding: 0 30px
+.main-nav {
+  height: 70px;
+  background-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  padding: 0 30px;
 }
-.main-nav .return{
-    
+.main-nav .return {
 }
-.main-nav .return a i{
-    margin-right: 5px;
-    font-size: 14px;
-    vertical-align: middle;
+.main-nav .return a i {
+  margin-right: 5px;
+  font-size: 14px;
+  vertical-align: middle;
 }
-.main-nav .return a{
-    color: #fff;
-    font-size: 16px;
+.main-nav .return a {
+  color: #fff;
+  font-size: 16px;
 }
 
-.blur{
-    filter: blur(15px);
-    position: fixed;
-    top: 0;
-}
-.main-login{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-	background:url("../img/login-bg.png") no-repeat center center !important;
-	background-size: 100% 100%;
+.blur {
+  filter: blur(15px);
+  position: fixed;
+  top: 0;
+}
+.main-login {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background: url("../img/login-bg.png") no-repeat center center !important;
+  background-size: 100% 100%;
 }
 
-.login-box{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: calc(100% - 70px)
-}
-.login-layout{
-	width:622px;
-    margin-top: -120px;
-	padding:20px 0 12px 25px;
-	background:rgba(255,255,255,0.2);
-	border-radius:10px;
-}
-.logo{
-	float:left;
-	width: 260px;
-	height: 255px;
-	background: url("../img/login-logo-bg.png") no-repeat center center;
-	background-size: 90% 90%;
-	text-align: center;
-	margin-right: 30px;
-}
-.logo h2,.logo h3{
-	font-family: PingFangSC-Medium, PingFang SC;
-	font-weight: 500;
-	color: #ffffff;
-	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74);
-}
-.logo .title{
-	margin: 84px 0 5px 0;
-	font-size: 28px;
-}
-.logo .sub-title{
-	font-size: 18px;
-	letter-spacing: 3px;
-}
-.login-form{
-	overflow:hidden;
-    width: 287px;
-    padding:0 36px 20px 22px
-	text-align:center;
-}
-.login-form h4{
-    font-size: 18px;
-	margin:16px 0 18px 0;
-    letter-spacing: 2px;
-    color: #fff;
-	text-align:left;
-    text-shadow: 1px 1px 7px rgba(0,0,0,.6);
-}
-.layui-form-item{
-    height: 38px;
-    background-color: #fff;
-    border: 1px solid #f8f8f8;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-	margin-bottom:18px;
-    box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
-}
-.layui-form-item .layui-icon{
-    font-size: 20px;
-    padding: 0 10px;
-    color: #409EFF;
-}
-.layui-form-item .layui-input{
-    border: none;
-    font-size: 16px;
-    height:38px;
-    line-height: 45px;
-	padding-left:5px;
-}
-.layui-submit{
-   margin-top:10px;
-   width:100%;
-   color: #FFF;
-   background: #409EFF;
-   display: inline-block;
-   line-height: 1;
-   white-space: nowrap;
-   cursor: pointer;
-   border: 1px solid #409EFF;
-   color: #fff;
-   -webkit-appearance: none;
-   text-align: center;
-   -webkit-box-sizing: border-box;
-   box-sizing: border-box;
-   outline: 0;
-   margin: 0;
-   -webkit-transition: .1s;
-   transition: .1s;
-   font-weight: 500;
-   -moz-user-select: none;
-   -webkit-user-select: none;
-   -ms-user-select: none;
-   padding: 12px 20px;
-   font-size: 14px;
-   border-radius: 4px;
-   letter-spacing:9px;
-}
-.layui-submit:hover{
-    color: #333;
-}
+.login-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 70px);
+}
+.login-layout {
+  width: 800px;
+  padding: 0;
+  margin-top: -3%;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.logo {
+  float: left;
+  width: 340px;
+  height: 300px;
+  background: url("../img/login-logo-bg-index.png") no-repeat left center,
+    url("../img//login-logo-bg.png") no-repeat center center;
+  background-size: 93% 89%, 102% 107%;
+  text-align: center;
+  margin-right: 20px;
+}
+.logo h2,
+.logo h3 {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74);
+}
+.formTitle {
+  /* display: flex; */
+  align-items: center;
+  font-size: 18px;
+  color: #336666;
+  font-weight: 700;
+  margin: 15px 0 18px 0;
+  letter-spacing: 4px;
+}
+.formTitle img {
+  width: 42px;
+  height: 38px;
+  margin-right: 10px;
+}
+.logo .title {
+  margin: 84px 0 5px 0;
+  font-size: 28px;
+}
+.logo .sub-title {
+  font-size: 18px;
+  letter-spacing: 3px;
+}
+.login-btn-submit {
+  width: 100% !important;
+  background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important;
+  border: none !important;
+  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important;
+}
+.login-btn-submit:hover {
+  width: 100% !important;
+  background: linear-gradient(180deg, #70ba7b 1%, #70ba7b 100%) !important;
+  border: none !important;
+  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+.login-form {
+  overflow: hidden;
+  padding: 20px 36px 20px 22px;
+  text-align: center;
+}
+.login-form h4 {
+  font-size: 18px;
+  margin: 16px 0 18px 0;
+  letter-spacing: 2px;
+  color: #fff;
+  text-align: left;
+  text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
+}
+.layui-form-item {
+  height: 38px;
+  background-color: #fff;
+  border: 1px solid #f8f8f8;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 22px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+.layui-form-item .layui-icon {
+  font-size: 20px;
+  padding: 0 10px;
+  color: #409eff;
+}
+.layui-form-item .layui-input {
+  border: none;
+  font-size: 16px;
+  height: 38px;
+  line-height: 45px;
+  padding-left: 5px;
+}
+.layui-submit {
+  margin-top: 10px;
+  width: 100%;
+  color: #fff;
+  background: #409eff;
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid #409eff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  letter-spacing: 9px;
+}
+.layui-submit:hover {
+  color: #333;
+}
+.layui-form-item .layui-input:focus {
+  border-color: #70ba7b !important;
+}
+.layui-form-item .layui-input:hover {
+  border-color: #70ba7b !important;
+}
+.layui-form-item .layui-icon {
+  color: #70ba7b;
+}
+.layui-form-item .layui-input::-webkit-input-placeholder {
+  /* 使用webkit内核的浏览器 */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input:-moz-placeholder {
+  /* Firefox版本4-18 */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input::-moz-placeholder {
+  /* Firefox版本19+ */
+  color: #dcdfe6;
+}
+.layui-form-item .layui-input:-ms-input-placeholder {
+  /* IE浏览器 */
+  color: #dcdfe6;
+}

login/index.html

@@ -1,124 +1,120 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-	<meta charset="UTF-8">
-	<title>林产品溯源管理系统登录</title>
-	<meta name="renderer" content="webkit">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<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" type="text/css" href="../layui/css/layui.css" />
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
-	<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css" />
-</head>
+	<head>
+		<meta charset="UTF-8">
+		<title>贵州林产品溯源管理系统登录</title>
+		<meta name="renderer" content="webkit">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<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" type="text/css" href="../layui/css/layui.css" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
+		<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css" />
+	</head>
 
-<body>
-	<div class="login-wrap">
-		<div class="main-login">
-			<div class="login-box">
-				<div class="login-layout">
-					<div class="logo">
-						<h2 class="title">林产品溯源管理系统</h2>
-						<!-- <h3 class="sub-title">产品溯源管理系统</h3> -->
+	<body>
+		<div class="login-wrap">
+			<div class="main-login">
+				<div class="login-box">
+					<div class="login-layout">
+						<div class="logo"></div>
+						<form class="layui-form login-form" action="">
+							<h3 class="formTitle">
+								<img src="./img/login-logo-bg-icon.png">贵州林产品溯源管理系统</h3>
+							<div class="layui-form-item">
+								<i class="layui-icon">&#xe66f;</i>
+								<input type="text" name="account" required lay-verify="userName" placeholder="请输入账号" autocomplete="off" class="login-box-input layui-input">
+							</div>
+							<div class="layui-form-item">
+								<i class="layui-icon">&#xe673;</i>
+								<input type="password" name="pwd" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="login-box-input layui-input">
+							</div>
+							<button class="layui-btn layui-submit login-btn-submit" lay-submit lay-filter="loginForm">登录</button>
+						</form>
 					</div>
-					<form class="layui-form login-form" action="">
-						<h4>用户登录</h4>
-						<div class="layui-form-item">
-							<i class="layui-icon">&#xe66f;</i>
-							<input type="text" name="account" required lay-verify="userName" placeholder="用户名" autocomplete="off"
-								class="layui-input">
-						</div>
-						<div class="layui-form-item">
-							<i class="layui-icon">&#xe673;</i>
-							<input type="password" name="pwd" required lay-verify="pwd" placeholder="密码" autocomplete="off"
-								class="layui-input">
-						</div>
-						<button class="layui-btn layui-submit" lay-submit lay-filter="loginForm">登录</button>
-					</form>
 				</div>
 			</div>
 		</div>
-	</div>
-	<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
-	<script src="../js/ajaxhook.min.js" type="text/javascript" charset="utf-8"></script>
-	<script>
-		var SYS_VER = Math.random() * 100000;
-		function loadJS(url) {
-			document.write("<script src='" + url + "?ver=" + SYS_VER + "'><\/script>")
-		}
-		loadJS("../js/config.js");
-		layui.config({
-			base: "../js/layuiPlugins/"
-		}).use(['form', 'laytpl', 'jquery', 'md5'], function () {
-			//清除token
-			layui.sessionData(window.hywa.sessionTable.tableName, null);
-			var form = layui.form,
-				laytpl = layui.laytpl,
-				$ = layui.$,
-				md5 = layui.md5;
+		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
+		<script src="../js/ajaxhook.min.js" type="text/javascript" charset="utf-8"></script>
+		<script>
+			var SYS_VER = Math.random() * 100000;
+			function loadJS(url) {
+				document.write("<script src='" + url + "?ver=" + SYS_VER + "'><\/script>")
+			}
+			loadJS("../js/config.js");
+			layui.config({
+				base: "../js/layuiPlugins/"
+			}).use(['form', 'laytpl', 'jquery', 'md5'], function () {
+				//清除token
+				layui.sessionData(window.hywa.sessionTable.tableName, null);
+				var form = layui.form,
+					laytpl = layui.laytpl,
+					$ = layui.$,
+					md5 = layui.md5;
 
-			form.verify({
-				userName: [
-					/^[0-9\a-z\A-Z\u4e00-\u9fa5_]{2,16}$/,
-					"账号必须是2-16位,且不包含特殊字符"
-				],
-				pwd: [
-					/^[\S]{6,12}$/,
-					'密码必须6到12位，且不能出现空格'
-				]
-			});
+				form.verify({
+					userName: [
+						/^[0-9\a-z\A-Z\u4e00-\u9fa5_]{2,16}$/,
+						"账号必须是2-16位,且不包含特殊字符"
+					],
+					pwd: [
+						/^[\S]{6,12}$/,
+						'密码必须6到12位，且不能出现空格'
+					]
+				});
 
-			function ajaxLogin(data) {
-				var time = 'b8d11ee289394be688ef3a4f6968efed';
-				var result = btoa(data.pwd);
-				time = time.substring(0, 8);
-				var pass = md5.calcMD5(time);
-				pass = pass.substring(0, 5);
-				data.passwd = pass + result;
-				$.ajax({
-					url: 'login',
-					type: 'post',
-					data: JSON.stringify(data),
-					contentType: 'application/json',
-					success: function (data) {
-						var code = data.code,
-							user = { userId: ((((data.data || [])[0] || {}).CurrentUser || {}).guid || ""), name: ((((data.data || [])[0] || {}).CurrentUser || {}).account || ""), realName: ((((data.data || [])[0] || {}).CurrentUser || {}).userName || ""), menus: (((data.data || [])[0] || {}).authMenuObj || {}) },
-							token = ((data.data || [])[0] || {}).accessToken || null,
-							systemLable = { systemName: (((data.data || [])[0] || {}).orgObject || {}).systemName || "溯源管理系统" };
-						if (!(code - 0)) {
-							//储存用户信息
-							layui.sessionData(window.hywa.sessionTable.tableName, {
-								key: window.hywa.sessionTable.userData,
-								value: user
-							});
-							//存储系统名称
-							layui.sessionData(window.hywa.sessionTable.tableName, {
-								key: 'sys',
-								value: systemLable
-							});
-							//存储token
-							layui.sessionData(window.hywa.sessionTable.tableName, {
-								key: 'token',
-								value: token
-							});
-							//存储数组
-							location.href = window.hywa.jumpPage.home;
+				function ajaxLogin(data) {
+					var time = 'b8d11ee289394be688ef3a4f6968efed';
+					var result = btoa(data.pwd);
+					time = time.substring(0, 8);
+					var pass = md5.calcMD5(time);
+					pass = pass.substring(0, 5);
+					data.passwd = pass + result;
+					$.ajax({
+						url: 'login',
+						type: 'post',
+						data: JSON.stringify(data),
+						contentType: 'application/json',
+						success: function (data) {
+							var code = data.code,
+								user = { userId: ((((data.data || [])[0] || {}).CurrentUser || {}).guid || ""), name: ((((data.data || [])[0] || {}).CurrentUser || {}).account || ""), realName: ((((data.data || [])[0] || {}).CurrentUser || {}).userName || ""), menus: (((data.data || [])[0] || {}).authMenuObj || {}) },
+								token = ((data.data || [])[0] || {}).accessToken || null,
+								systemLable = { systemName: (((data.data || [])[0] || {}).orgObject || {}).systemName || "贵州林产品溯源管理系统" };
+							if (!(code - 0)) {
+								//储存用户信息
+								layui.sessionData(window.hywa.sessionTable.tableName, {
+									key: window.hywa.sessionTable.userData,
+									value: user
+								});
+								//存储系统名称
+								layui.sessionData(window.hywa.sessionTable.tableName, {
+									key: 'sys',
+									value: systemLable
+								});
+								//存储token
+								layui.sessionData(window.hywa.sessionTable.tableName, {
+									key: 'token',
+									value: token
+								});
+								//存储数组
+								location.href = window.hywa.jumpPage.home;
+							}
 						}
-					}
-				})
-			}
+					})
+				}
 
-			form.on('submit(loginForm)', function (data) {
-				setTimeout(function () {
-					ajaxLogin(data.field);
-				}, 0);
-				return false;
+				form.on('submit(loginForm)', function (data) {
+					setTimeout(function () {
+						ajaxLogin(data.field);
+					}, 0);
+					return false;
+				});
 			});
-		});
-	</script>
-</body>
+		</script>
+	</body>
 
 </html>