From daf1d89c0f1703bf3e6fa81920d78a6a2e6428ca Mon Sep 17 00:00:00 2001
From: chenhuan <czj123456>
Date: 星期三, 22 五月 2024 10:05:36 +0800
Subject: [PATCH] login
---
javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/pass0521.png | 0
javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/user0521.png | 0
javaweb-plus/javaweb-cms/src/main/resources/templates/loginPage/process/login.html | 111 +++++++++++++++++++++++++++++++++++++------------------
3 files changed, 74 insertions(+), 37 deletions(-)
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/pass0521.png b/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/pass0521.png
new file mode 100644
index 0000000..dc4882d
--- /dev/null
+++ b/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/pass0521.png
Binary files differ
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/user0521.png b/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/user0521.png
new file mode 100644
index 0000000..7fe45c7
--- /dev/null
+++ b/javaweb-plus/javaweb-cms/src/main/resources/static/images/loginPage/user0521.png
Binary files differ
diff --git a/javaweb-plus/javaweb-cms/src/main/resources/templates/loginPage/process/login.html b/javaweb-plus/javaweb-cms/src/main/resources/templates/loginPage/process/login.html
index 9986413..047423f 100644
--- a/javaweb-plus/javaweb-cms/src/main/resources/templates/loginPage/process/login.html
+++ b/javaweb-plus/javaweb-cms/src/main/resources/templates/loginPage/process/login.html
@@ -16,7 +16,24 @@
if(window.top!==window.self){window.top.location=window.location};
</script>
<style>
- body,html{color:#000;margin:0;overflow:hidden;font:400 13px arial,Microsoft Yahei!important}a{font-size:inherit;text-decoration:none;color:#666;cursor:pointer}.txt{width:90%;padding:4px 20px;border-radius:22px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:3.6em;outline:0}.txt:focus{border-color:#4386f5}.button{background:#4386f5;color:#fff;padding:6px 0;height:25px;line-height:25px;border-radius:5px;width:90%;border-radius:22px;display:inline-block;cursor:pointer}.page-con{text-align:center;width:400px;margin:0 auto;height:362px;position:absolute;top:50%;margin-top:-181px;left:50%;margin-left:-200px;background-color:#fff;padding:27px;border-radius:5px;border:1px solid #e8e1e1;}.page-con .sep{border-top:1px solid #ddd;height:20px;text-align:center}.page-con label{color:#666;display:inline-block;padding:0 10px;}.page-con .signup{font-size:12px;margin-top:19px;color:#666;text-align:left;padding-left:26px}.page-con .signup a{color:#333}#bg-canvas{position:absolute;z-index:-1}#logo-text{display:inline-block;margin-left:8px;font-size:35px;vertical-align:7px;font-family:arial;height:60px;text-shadow:1px 1px 2px #bbb inset}#logo-text .logo-dot{width:68px;height:6px;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-3px;display:none}#logo-text .logo-dot:after{width:6px;background:#4386f5;height:6px;display:inline-block;position:absolute;right:-4px;border-radius:50%;content:""}#logo-text label{display:inline-block;background:#4386f5;border-radius:50%;color:#fff;padding:11px 8px;margin-left:6px;position:relative;box-shadow:1px 1px 6px #ccc}.login-input{position:relative}.login-input a{position:absolute;right:33px;top:13px;width:auto;height:20px;line-height:20px;text-align:right;color:#888;z-index:1}.weixin-con{display:none;padding:15px;background:#fff;position:absolute;z-index:9;width:362px;height:410px;left:50%;top:50%;margin-left:-181px;margin-top:-205px;text-align:center;border-raidus:5px;box-shadow:1px 1px 4px #ccc}.error-tip{height:30px;line-height:30px;position:absolute;right:32px;color:red;bottom:6px;font-size:12px;z-index:2;background:#fff}.success-tip{position:absolute;width:194px;top:155px;display:none;right:96px;padding:5px 8px;border:1px solid green;border-radius:3px;box-shadow:1px 1px 5px #d6e9c6;background-color:#dff0d8;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,.5)}.icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:42px;height:42px;cursor:pointer;}.icons.weixin{background-position:0 0;background-size:42px}.icons.qq{background-position:0 -85px;background-size:43px}.icons.weibo{background-position:0 -131px;background-size:44px}.icons.google{background-position:0 -45px;background-size:44px}.icons.somemore{border-radius:100%;border:1px solid #ddd;background-position:-1px -165px;background-size:42px;width:38px;height:38px}.icons.somemore:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.2);cursor:pointer}.morelogo-con{background-color:#fff;padding:10px;position:absolute;left:249px;opacity:0;top:30px;z-index:3;border-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.morelogo-con.popover{opacity:1;top:45px}.morelogo-con>span{display:block;font-size:13px;color:#3d474d}.morelogo-con .mingdao{display:inline-block;vertical-align:middle;background-position:0 -257px;background-size:44px;margin-right:11px}.rotate{animation:.8s infinite rotate;-webkit-animation:.8s infinite rotate;-o-animation:.8s infinite rotate;-moz-animation:.8s infinite rotate;-ms-animation:.8s infinite rotate}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes rotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bind{width:600px;margin-left:-300px}.bind .button,.bind .txt{width:55%}.bind #logo-text{vertical-align:-7px}.bind .icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:74px;height:74px;vertical-align:top}.bind .icons.weixin{background-position:0 0;background-size:70px;width:70px;height:68px}.bind .icons.qq{background-position:0 -141px;background-size:70px;width:70px;height:68px}.bind .icons.weibo{background-position:0 -211px;background-size:70px;width:70px;height:68px}.bind .icons.google{background-position:0 -73px;background-size:70px;width:70px;height:68px}.bind_item{position:relative}.bind-arrow{margin-left:30px;display:inline-block;position:relative;color:#666;margin-right:30px}.bind-tip{margin-top:40px}.des{margin-top:10px;font-size:14px}@media screen and (max-width:760px){.page-con{width:100%;left:0;margin-left:0}}
+ body,html{color:#000;margin:0;overflow:hidden;font:400 13px arial,Microsoft Yahei!important}a{font-size:inherit;text-decoration:none;color:#666;cursor:pointer}
+ .txt{width:90%;padding:4px 20px;border-radius:22px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:3.6em;outline:0}
+ .txt:focus{border-color:#4386f5}.button{background:#4386f5;color:#fff;padding:6px 0;height:25px;line-height:25px;border-radius:5px;width:90%;border-radius:22px;display:inline-block;cursor:pointer}
+ .container{text-align:center;
+ /*width:400px;*/
+ margin:0 auto;
+ /*height:362px;*/
+ position:absolute;
+ top:30%;
+ margin-top:-181px;
+ /*left:50%;*/
+ margin-left:-200px;
+ /*background-color:#fff;*/
+ /*padding:27px;*/
+ /*border-radius:5px;*/
+ /*border:1px solid #e8e1e1;*/
+ }
+ .page-con .sep{border-top:1px solid #ddd;height:20px;text-align:center}.page-con label{color:#666;display:inline-block;padding:0 10px;}.page-con .signup{font-size:12px;margin-top:19px;color:#666;text-align:left;padding-left:26px}.page-con .signup a{color:#333}#bg-canvas{position:absolute;z-index:-1}#logo-text{display:inline-block;margin-left:8px;font-size:35px;vertical-align:7px;font-family:arial;height:60px;text-shadow:1px 1px 2px #bbb inset}#logo-text .logo-dot{width:68px;height:6px;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-34px;margin-top:-3px;display:none}#logo-text .logo-dot:after{width:6px;background:#4386f5;height:6px;display:inline-block;position:absolute;right:-4px;border-radius:50%;content:""}#logo-text label{display:inline-block;background:#4386f5;border-radius:50%;color:#fff;padding:11px 8px;margin-left:6px;position:relative;box-shadow:1px 1px 6px #ccc}.login-input{position:relative}.login-input a{position:absolute;right:33px;top:13px;width:auto;height:20px;line-height:20px;text-align:right;color:#888;z-index:1}.weixin-con{display:none;padding:15px;background:#fff;position:absolute;z-index:9;width:362px;height:410px;left:50%;top:50%;margin-left:-181px;margin-top:-205px;text-align:center;border-raidus:5px;box-shadow:1px 1px 4px #ccc}.error-tip{height:30px;line-height:30px;position:absolute;right:32px;color:red;bottom:6px;font-size:12px;z-index:2;background:#fff}.success-tip{position:absolute;width:194px;top:155px;display:none;right:96px;padding:5px 8px;border:1px solid green;border-radius:3px;box-shadow:1px 1px 5px #d6e9c6;background-color:#dff0d8;color:#468847;text-shadow:0 1px 0 rgba(255,255,255,.5)}.icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:42px;height:42px;cursor:pointer;}.icons.weixin{background-position:0 0;background-size:42px}.icons.qq{background-position:0 -85px;background-size:43px}.icons.weibo{background-position:0 -131px;background-size:44px}.icons.google{background-position:0 -45px;background-size:44px}.icons.somemore{border-radius:100%;border:1px solid #ddd;background-position:-1px -165px;background-size:42px;width:38px;height:38px}.icons.somemore:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.2);cursor:pointer}.morelogo-con{background-color:#fff;padding:10px;position:absolute;left:249px;opacity:0;top:30px;z-index:3;border-radius:5px;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.morelogo-con.popover{opacity:1;top:45px}.morelogo-con>span{display:block;font-size:13px;color:#3d474d}.morelogo-con .mingdao{display:inline-block;vertical-align:middle;background-position:0 -257px;background-size:44px;margin-right:11px}.rotate{animation:.8s infinite rotate;-webkit-animation:.8s infinite rotate;-o-animation:.8s infinite rotate;-moz-animation:.8s infinite rotate;-ms-animation:.8s infinite rotate}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-ms-keyframes rotate{from{-ms-transform:rotate(0)}to{-ms-transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bind{width:600px;margin-left:-300px}.bind .button,.bind .txt{width:55%}.bind #logo-text{vertical-align:-7px}.bind .icons{background:url(/resources/images/login_processon.png) no-repeat;display:inline-block;width:74px;height:74px;vertical-align:top}.bind .icons.weixin{background-position:0 0;background-size:70px;width:70px;height:68px}.bind .icons.qq{background-position:0 -141px;background-size:70px;width:70px;height:68px}.bind .icons.weibo{background-position:0 -211px;background-size:70px;width:70px;height:68px}.bind .icons.google{background-position:0 -73px;background-size:70px;width:70px;height:68px}.bind_item{position:relative}.bind-arrow{margin-left:30px;display:inline-block;position:relative;color:#666;margin-right:30px}.bind-tip{margin-top:40px}.des{margin-top:10px;font-size:14px}@media screen and (max-width:760px){.page-con{width:100%;left:0;margin-left:0}}
body{
background-image :url(images/loginPage/bg0521.png);
background-size:100% 100%;
@@ -30,18 +47,26 @@
}
#logo-text{
/*color: rgba(51, 51, 51, 1);*/
- font-size: 40px;
+ font-size: 32px;
margin-left: 25px;
- color: white;
+ color: #065deb;
margin-bottom: 20px;
}
- .page-con{
- border-width: 0px;
+ .container{
+ width: 495px;
+ height: 621px;
+ border-radius: 24px;
+ background-color: #ffffff;
+ box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+ border-width: 0px;
margin-left: 0px;
/*text-align: left;*/
- left: 38%;
+ left: 60%;
padding: 0px;
color: white;
+ }
+ .page-con{
+ padding:24px;
}
.bar-line{
display: block;
@@ -59,6 +84,13 @@
}
.input-container{
/*border-bottom: 1px solid rgba(187, 187, 187, 1);*/
+ margin: auto;
+ box-sizing: border-box;
+ width:340px;
+ height:60px;
+ border:1px solid #065deb;
+ padding: 18px 28px 18px 28px;
+ border-radius: 8px;
display: flex;
align-items: center;
}
@@ -67,7 +99,7 @@
height: 50px;
line-height: 50px;
border-radius: 4px;
- background-color: rgba(28,29,29, 1);
+ background-color: #065deb;
/*background-color: rgba(94, 131, 248, 1);*/
color: rgba(255, 255, 255, 1);
font-size: 20px;
@@ -95,42 +127,47 @@
</head>
<body>
-<div class="page-con" style="background-color:transparent">
- <span class="bar-line"></span>
- <form name="loginform" id="loginform">
- <input type="hidden" id="redirectUrl" name="redirectUrl" value="${redirectUrl}" >
- <div><span id="logo-text">鍖椾含甯傚湴闈㈡矇闄嶇洃娴嬬綉寤鸿宸ョ▼</span></div>
+<div class="container">
+ <div class="page-con" >
+ <span class="bar-line"></span>
+ <form name="loginform" id="loginform">
+ <input type="hidden" id="redirectUrl" name="redirectUrl" value="${redirectUrl}" >
+ <div><span id="logo-text">鍖椾含甯傚湴闈㈡矇闄嶇洃娴嬬綉寤鸿宸ョ▼</span></div>
+ <div style="width:100%">
+ <div class="input-container" style="margin-top:25px;position:relative;">
+ <img src="images/loginPage/user0521.png" style="margin-right:5px;"/>
+ <input id="username" name="username" class="txt" value="admin" type="text" autocomplete="off" placeholder="璇疯緭鍏ョ敤鎴峰悕/閭" >
+ <div class="error-tip"></div>
+ </div>
+ <div class="login-input input-container" style="margin-top:30px;position:relative;">
+ <img class="password-icon" src="images/loginPage/pass0521.png"/>
+ <input name="password" id="password" value="admin123" class="txt" type="password" placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" autocomplete="off" >
+ <div class="error-tip"></div>
+ </div>
- <div class="input-container" style="margin-top:25px;position:relative;">
- <img src="images/loginPage/user3.png" style="margin-right:5px;"/>
- <input id="username" name="username" class="txt" value="admin" type="text" autocomplete="off" placeholder="璇疯緭鍏ョ敤鎴峰悕/閭" >
- <div class="error-tip"></div>
- </div>
- <div class="login-input input-container" style="margin-top:30px;position:relative;">
- <img class="password-icon" src="images/loginPage/pass1.png"/>
- <input name="password" id="password" value="admin123" class="txt" type="password" placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�" autocomplete="off" >
- <div class="error-tip"></div>
+ <div style="margin-top:25px;position:relative;" th:if="${captchaEnabled==true}">
+ <img class="verification-icon" src="images/loginPage/validate.svg" />
+ <input name="validateCode" id="validateCode" style="float: left;margin-left: 30px;width: 230px;" class="txt" type="text" placeholder="楠岃瘉鐮�" />
+ <a href="javascript:void(0);" title="鐐瑰嚮鏇存崲楠岃瘉鐮�">
+ <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="radius imgcode" width="100" height="30" style="position:absolute;right:40px;top:7px;"/>
+ </a>
+ <div style="display: inline-block;float: left;position: relative;top:10px;right: 150px;" class="error-tip"></div>
+ </div>
</div>
- <div style="margin-top:25px;position:relative;" th:if="${captchaEnabled==true}">
- <img class="verification-icon" src="images/loginPage/validate.svg" />
- <input name="validateCode" id="validateCode" style="float: left;margin-left: 30px;width: 230px;" class="txt" type="text" placeholder="楠岃瘉鐮�" />
- <a href="javascript:void(0);" title="鐐瑰嚮鏇存崲楠岃瘉鐮�">
- <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="radius imgcode" width="100" height="30" style="position:absolute;right:40px;top:7px;"/>
- </a>
- <div style="display: inline-block;float: left;position: relative;top:10px;right: 150px;" class="error-tip"></div>
+ <div class="validate-line" style="clear:both;"></div>
+ <div style="margin-top:30px;">
+ <span id="signin_btn" onclick="login.login();" class="button">鐧�  褰�</span>
</div>
- <div class="validate-line" style="clear:both;"></div>
- <div style="margin-top:30px;">
- <span id="signin_btn" onclick="login.login();" class="button">鐧�  褰�</span>
- </div>
- <div class="signup">
- <label for="rememberMe" style="float:right;margin-right: 15px;color:#000;" >
- <input type="checkbox" id="rememberMe" name="rememberMe" >璁颁綇瀵嗙爜</label>
- </div>
- </form>
+ <div class="signup">
+ <label for="rememberMe" style="float:right;margin-right: 15px;color:#000;" >
+ <input type="checkbox" id="rememberMe" name="rememberMe" >璁颁綇瀵嗙爜</label>
+ </div>
+ </form>
+ </div>
</div>
+
<div class="weixin-con" id="weixin_dlg"><div style="margin-top:200px;">鍔犺浇涓�...</div></div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]];var captchaEnabled= [[${captchaEnabled}]]; </script>
--
Gitblit v1.9.1