From aec187fca7090b7a22fd33e20a2be65640af3296 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 27 一月 2021 16:00:14 +0800
Subject: [PATCH] #
---
src/main/webapp/views/login.html | 288 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 172 insertions(+), 116 deletions(-)
diff --git a/src/main/webapp/views/login.html b/src/main/webapp/views/login.html
index 4197d31..b2584a0 100644
--- a/src/main/webapp/views/login.html
+++ b/src/main/webapp/views/login.html
@@ -1,146 +1,196 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <title>鍒牱鑲夊</title>
+ <script>if (window !== top) top.location.replace(location.href);</script>
+ <meta charset="utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/x-icon" href="../static/image/log.png" />
+ <title>鐢ㄦ埛鐧诲綍</title>
<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
- <script type="text/javascript" src="../static/layui/layui.js"></script>
- <script type="text/javascript" src="../static/js/common.js"></script>
+ <link rel="stylesheet" href="../static/css/admin.css?v=318">
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+ <![endif]-->
<style>
- html{
- height: 100%;
- }
- body.login-bg {
- color: #777;
- height: 100%;
- background-image: url("../static/image/bg-imgage.jpg");
- /*background-image: url("../static/image/login_bg.jpg");*/
+ body {
+ background-image: url("../static/image/bg-login.jpg");
background-repeat: no-repeat;
background-size: cover;
- background-position: top center;
+ min-height: 100vh;
}
- #login-wrapper {
- /*color: #fff;*/
- box-sizing:border-box;
- /*background: #576669;*/
- background: #fff;
- position: absolute;
- top: 45%;
- left: 50%;
- margin-top: -210px;
- margin-left: -220px;
- width: 440px;
- min-height: 420px;
- padding: 50px;
- text-align: center;
- border-radius: 5px;
-
- transform-origin: 50% 50%;
- animation: loading 1s 0s forwards;
- transform: rotateX(0deg);
+ body:before {
+ content: "";
+ background-color: rgba(0, 0, 0, .2);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
- #login-wrapper h2 {
- letter-spacing: 3px;
- font-size: 26px;
- margin-bottom: 30px;
- }
-
- .layadmin-user-login-body .layui-form-item {
- margin-bottom: 20px;
+ .login-wrapper {
+ max-width: 420px;
+ padding: 20px;
+ margin: 0 auto;
position: relative;
+ box-sizing: border-box;
+ z-index: 2;
}
- .layadmin-user-login-body .layui-form-item .layui-input {
- height: 42px;
- padding-left: 40px;
- font-size: 16px;
- border: 1px solid #c8cccf;
- color: inherit;
- }
- .login-submit {
- margin-top: 30px;
- }
- .layadmin-user-login-icon {
- position: absolute;
- left: 1px;
- top: 1px;
- width: 38px;
- line-height: 40px;
- text-align: center;
- color: #B2B2B2;
- font-size: 18px;
- }
- .layui-btn-normal {
- background-color: #0767aa;
- font-size: 20px;
+
+ .login-wrapper > .layui-form {
+ padding: 25px 30px;
+ background-color: #fff;
+ box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
+ box-sizing: border-box;
border-radius: 4px;
- height: 52px;
}
- .layui-form-checked[lay-skin=primary] i {
- border-color: #0767aa!important;
- background-color: #0767aa;
- color: #fff;
+
+ .login-wrapper > .layui-form > h2 {
+ color: #333;
+ font-size: 18px;
+ text-align: center;
+ margin-bottom: 25px;
}
- .layui-form-checkbox[lay-skin=primary]:hover i {
- border-color: #0767aa;
- color: #fff;
- }
- #code-box {
+
+ .login-wrapper > .layui-form > .layui-form-item {
+ margin-bottom: 25px;
position: relative;
- height: 42px;
}
- #code-label {
- z-index: 999;
+
+ .login-wrapper > .layui-form > .layui-form-item:last-child {
+ margin-bottom: 0;
}
- #code {
+
+ .login-wrapper > .layui-form > .layui-form-item > .layui-input {
+ height: 46px;
+ line-height: 46px;
+ border-radius: 2px !important;
+ }
+
+ .login-wrapper .layui-input-icon-group > .layui-input {
+ padding-left: 46px;
+ }
+
+ .login-wrapper .layui-input-icon-group > .layui-icon {
+ width: 46px;
+ height: 46px;
+ line-height: 46px;
+ font-size: 20px;
+ color: #909399;
position: absolute;
left: 0;
top: 0;
- display: inline-block;
- width: 60%;
+ text-align: center;
}
- #codeImg {
- border: 1px solid rgba(0,0,0,0.1);
+
+ .login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
+ padding-right: 135px;
+ }
+
+ .login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
+ height: 46px;
+ width: 120px;
+ cursor: pointer;
+ box-sizing: border-box;
+ border: 1px solid #e6e6e6;
+ border-radius: 2px !important;
position: absolute;
- right: 5%;
+ right: 0;
top: 0;
- width: 30%;
- height: 90%;
+ }
+
+ .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
+ margin: 0 !important;
+ padding-left: 25px;
+ }
+
+ .login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
+ width: 15px !important;
+ height: 15px !important;
+ }
+
+ .login-wrapper > .layui-form .layui-btn-fluid {
+ height: 48px;
+ line-height: 48px;
+ font-size: 16px;
+ border-radius: 2px !important;
+ }
+
+ .login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
+ font-size: 26px;
+ }
+
+ .login-copyright {
+ color: #eee;
+ padding-bottom: 20px;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+ }
+
+ @media screen and (min-height: 550px) {
+ .login-wrapper {
+ margin: -250px auto 0;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ width: 100%;
+ }
+
+ .login-copyright {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ }
+ }
+
+ .layui-btn {
+ background-color: #5FB878;
+ border-color: #5FB878;
+ }
+
+ .layui-link {
+ color: #5FB878 !important;
}
</style>
</head>
-<body class="login-bg">
-
-<div id="login-wrapper">
- <header>
- <h2>绯荤粺鐧诲綍</h2>
- </header>
- <div class="layui-form layadmin-user-login-body">
- <div class="layui-form-item">
- <label class="layui-icon layui-icon-username layadmin-user-login-icon"></label>
- <input id="username" class="layui-input" type="text" name="username" lay-verify="username" placeholder="璐﹀彿">
+<body>
+<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
+ <form class="layui-form">
+ <h2>鐢ㄦ埛鐧诲綍</h2>
+ <div class="layui-form-item layui-input-icon-group">
+ <i class="layui-icon layui-icon-username"></i>
+ <input class="layui-input" id="username" name="username" placeholder="璇疯緭鍏ョ櫥褰曡处鍙�" autocomplete="off"
+ lay-verType="tips" lay-verify="required" required/>
</div>
- <div class="layui-form-item">
- <label class="layui-icon layui-icon-password layadmin-user-login-icon"></label>
- <input id="password" class="layui-input" type="password" name="password" lay-verify="password" placeholder="瀵嗙爜">
+ <div class="layui-form-item layui-input-icon-group">
+ <i class="layui-icon layui-icon-password"></i>
+ <input class="layui-input" id="password" name="password" placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" type="password"
+ lay-verType="tips" lay-verify="required" required/>
</div>
- <div id="code-box" class="layui-form-item" style="">
- <label id="code-label" class="layui-icon layui-icon-vercode layadmin-user-login-icon"></label>
+ <div id="code-box" class="layui-form-item layui-input-icon-group login-captcha-group">
+ <i class="layui-icon layui-icon-auz"></i>
<input id="code" class="layui-input" type="text" name="password" lay-verify="code" placeholder="楠岃瘉鐮�">
- <img id="codeImg" title="鐪嬩笉娓咃紵鐐瑰嚮鎹竴寮犮��">
+ <img class="login-captcha" id="codeImg" title="鐪嬩笉娓咃紵鐐瑰嚮鎹竴寮犮��">
</div>
- <div class="layui-form-item" style="text-align: left;padding-left: 3px;">
- <input id="rememberPwd" style="vertical-align: middle" type="checkbox" lay-skin='primary' lay-filter="remPwd" title="璁颁綇瀵嗙爜" checked="checked">
+ <div class="layui-form-item">
+ <input type="checkbox" name="remember" title="璁颁綇瀵嗙爜" lay-skin="primary" checked>
</div>
- </div>
- <div class="layui-form-item login-submit">
- <button id="login-button" class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit="" lay-filter="login">鐧� 褰�</button>
- </div>
+ <div class="layui-form-item">
+ <button class="layui-btn layui-btn-fluid" lay-filter="login" lay-submit>鐧诲綍</button>
+ </div>
+ </form>
</div>
+<div class="login-copyright">copyright 漏 2020 娴欐睙涓壃 all rights reserved.</div>
</body>
+<script type="text/javascript" src="../static/layui/layui.js"></script>
+<script type="text/javascript" src="../static/js/common.js"></script>
<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../static/js/tools/md5.js"></script>
<script type="text/javascript">
@@ -190,16 +240,22 @@
}, 100);
}
- layui.use(['form','layer'],function () {
- var form = layui.form,
- layer = layui.layer,
- $ = layui.jquery;
+ layui.config({
+ base: baseUrl + "/static/layui/lay/modules/"
+ }).extend({
+ notice: 'notice/notice',
+ }).use(['form','layer', 'notice'],function () {
+ var $ = layui.jquery;
+ var layer = layui.layer;
+ var form = layui.form;
+ var notice = layui.notice;
+ $('.login-wrapper').removeClass('layui-hide');
form.on('submit(login)', function (data) {
var username = $("#username").val();
if (username === "") {
layer.msg("璇疯緭鍏ヨ处鍙�", {offset: '150px'});
- return;
+ return false;
}
var password = $("#password").val();
// if (password === "") {
@@ -208,12 +264,12 @@
// }
var code = $("#code").val();
if (code === "" && codeSwitch === 'Y') {
- layer.msg("璇疯緭鍏ラ獙璇佺爜", {offset: '150px'});
- return;
+ notice.msg('璇疯緭鍏ラ獙璇佺爜', {icon: 2});
+ return false;
}
if (sessionStorage.getItem("code").toUpperCase() !== code.toUpperCase()&&codeSwitch==='Y'){
- layer.msg("楠岃瘉鐮侀敊璇�", {offset: '150px'});
- return;
+ notice.msg('楠岃瘉鐮侀敊璇�', {icon: 2});
+ return false;
}
var user = {
@@ -238,7 +294,7 @@
localStorage.setItem("nickname", res.data.nickname);
window.location.href = "index.html";
} else {
- layer.msg(res.msg, {offset: '150px'});
+ notice.msg(res.msg, {icon: 2});
}
}
});
--
Gitblit v1.9.1