首页及UI美化

src/main/resources/templates/login/login.html

@@ -9,7 +9,7 @@
     <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="icon" th:href="@{//images/logo.ico}">
+    <link rel="icon" th:href="@{/images/logo.ico}">
     <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
     <style th:inline="text">
         .main-body {
@@ -18,7 +18,6 @@
             left: 50%;
             transform: translate(-50%, -50%);
             width: 350px;
-
             background: #fff;
             border-radius: 20px;
             box-shadow: 0 5px 10px rgba(0,0,0,0.2);
@@ -99,7 +98,7 @@
         }
 
         .login-main .login-bottom .center .item {
-            width: 288px;
+            width: 260px;
             height: 35px;
             border-bottom: 1px solid #dae1e6;
             margin-bottom: 35px;
@@ -107,6 +106,7 @@
 
         .login-main {
             width: 350px;
+            height: 500px;
             position: relative;
             float: left;
         }
@@ -184,7 +184,7 @@
         }
 
         .login-main .login-bottom .center {
-            width: 288px;
+            width: 260px;
             margin: 0 auto;
             padding-top: 40px;
             padding-bottom: 15px;
@@ -195,7 +195,7 @@
             clear: both;
             height: 16px;
             line-height: 16px;
-            width: 288px;
+            width: 260px;
             margin: 0 auto;
         }
 
@@ -233,7 +233,7 @@
             clear: both;
             height: 16px;
             line-height: 16px;
-            width: 288px;
+            width: 260px;
             margin: 0 auto;
         }
 
@@ -245,6 +245,7 @@
             letter-spacing: 0;
             color: #9abcda;
             cursor: pointer;
+            margin-top: 5px;
         }
 
         .login-main .login-bottom .tip .forget-password {
@@ -257,7 +258,7 @@
         }
 
         .login-main .login-bottom .login-btn {
-            width: 288px;
+            width: 260px;
             height: 40px;
             background-color: #2980b9;
             border-radius: 16px;
@@ -339,7 +340,6 @@
     <h2>科研管控平台</h2>
 </div>
 <div class="main-body">
-
     <div class="login-main">
         <div class="login-top">
             <div class="avatar">
@@ -354,25 +354,17 @@
                     <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入登录账号"
                            maxlength="24" autocomplete="current-password" />
                 </div>
-
                 <div class="item">
                     <span class="icon icon-3"></span>
                     <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
                            maxlength="20" autocomplete="current-password">
                     <span class="bind-password icon icon-4"></span>
                 </div>
-
-                <!--                <div id="validatePanel" class="item" style="width: 167px;">-->
-                <!--                    <span class="icon icon-1"></span>-->
-                <!--                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" maxlength="4">-->
-                <!--                    <img id="ver_btn" class="validateImg" alt="看不清? 点击刷新" title="看不清? 点击刷新"/>-->
-                <!--                </div>-->
-
             </div>
             <div class="tip">
                 <span class="icon-nocheck"></span>
-                <span class="login-tip">记住密码</span><!--
-                <a href="javascript:" class="forget-password">忘记密码？</a>-->
+                <span class="login-tip">记住密码</span>
+                <!--<a href="javascript:" class="forget-password">忘记密码？</a>-->
             </div>
             <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                 <button id="btn_login" class="login-btn" lay-submit lay-filter="login">
@@ -387,6 +379,18 @@
 <div class="footer">
     Copyright© 2023 <span class="padding-5">|</span>
 </div>
+<script>
+    const  inputs = [
+        document.getElementById('username'),
+        document.getElementById('password')
+    ]
+
+    inputs.forEach(input =>{
+        input.addEventListener('input',function () {
+            this.value = this.value.replace(/\s+/g,'');
+        })
+    })
+</script>
 <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
 <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
 <script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>