Home Esplora Aiuto
Registrati Accedi
ly
/
KYGK
Segui 1
Vota 0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Merge remote-tracking branch 'origin/dev' into dev

梁世豪 2 mesi fa
parent
c3e67a6de9 fe562f03b8
commit
660d206703
4 ha cambiato i file con 457 aggiunte e 30 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. BIN
      src/main/resources/static/images/logo-v1.png
  2. 156 0
      src/main/resources/templates/login/login-v4.html
  3. 219 0
      src/main/resources/templates/login/login-v5.html
  4. 82 30
      src/main/resources/templates/login/login.html

BIN
src/main/resources/static/images/logo-v1.png
Vedi File


+ 156 - 0
src/main/resources/templates/login/login-v4.html
Vedi File 

@@ -0,0 +1,156 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
4 
+    <meta charset="UTF-8">
5 
+    <!-- Design by foolishdeveloper.com -->
6 
+    <title>登录页面</title>
7 
+
8 
+    <link rel="preconnect" href="https://fonts.gstatic.com">
9 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
10 
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
11 
+    <!--Stylesheet-->
12 
+    <style media="screen">
13 
+        *,
14 
+        *:before,
15 
+        *:after{
16 
+            padding: 0;
17 
+            margin: 0;
18 
+            box-sizing: border-box;
19 
+        }
20 
+        body{
21 
+            background-color: #080710;
22 
+        }
23 
+        .background{
24 
+            width: 430px;
25 
+            height: 520px;
26 
+            position: absolute;
27 
+            transform: translate(-50%,-50%);
28 
+            left: 50%;
29 
+            top: 50%;
30 
+        }
31 
+        .background .shape{
32 
+            height: 200px;
33 
+            width: 200px;
34 
+            position: absolute;
35 
+            border-radius: 50%;
36 
+        }
37 
+        .shape:first-child{
38 
+            background: linear-gradient(
39 
+                    #1845ad,
40 
+                    #23a2f6
41 
+            );
42 
+            left: -80px;
43 
+            top: -80px;
44 
+        }
45 
+        .shape:last-child{
46 
+            background: linear-gradient(
47 
+                    to right,
48 
+                    #ff512f,
49 
+                    #f09819
50 
+            );
51 
+            right: -30px;
52 
+            bottom: -80px;
53 
+        }
54 
+        form{
55 
+            height: 520px;
56 
+            width: 400px;
57 
+            background-color: rgba(255,255,255,0.13);
58 
+            position: absolute;
59 
+            transform: translate(-50%,-50%);
60 
+            top: 50%;
61 
+            left: 50%;
62 
+            border-radius: 10px;
63 
+            backdrop-filter: blur(10px);
64 
+            border: 2px solid rgba(255,255,255,0.1);
65 
+            box-shadow: 0 0 40px rgba(8,7,16,0.6);
66 
+            padding: 50px 35px;
67 
+        }
68 
+        form *{
69 
+            font-family: 'Poppins',sans-serif;
70 
+            color: #ffffff;
71 
+            letter-spacing: 0.5px;
72 
+            outline: none;
73 
+            border: none;
74 
+        }
75 
+        form h3{
76 
+            font-size: 32px;
77 
+            font-weight: 500;
78 
+            line-height: 42px;
79 
+            text-align: center;
80 
+        }
81 
+
82 
+        label{
83 
+            display: block;
84 
+            margin-top: 30px;
85 
+            font-size: 16px;
86 
+            font-weight: 500;
87 
+        }
88 
+        input{
89 
+            display: block;
90 
+            height: 50px;
91 
+            width: 100%;
92 
+            background-color: rgba(255,255,255,0.07);
93 
+            border-radius: 3px;
94 
+            padding: 0 10px;
95 
+            margin-top: 8px;
96 
+            font-size: 14px;
97 
+            font-weight: 300;
98 
+        }
99 
+        ::placeholder{
100 
+            color: #e5e5e5;
101 
+        }
102 
+        button{
103 
+            margin-top: 50px;
104 
+            width: 100%;
105 
+            background-color: #ffffff;
106 
+            color: #080710;
107 
+            padding: 15px 0;
108 
+            font-size: 18px;
109 
+            font-weight: 600;
110 
+            border-radius: 5px;
111 
+            cursor: pointer;
112 
+        }
113 
+        .social{
114 
+            margin-top: 30px;
115 
+            display: flex;
116 
+        }
117 
+        .social div{
118 
+            background: red;
119 
+            width: 150px;
120 
+            border-radius: 3px;
121 
+            padding: 5px 10px 10px 5px;
122 
+            background-color: rgba(255,255,255,0.27);
123 
+            color: #eaf0fb;
124 
+            text-align: center;
125 
+        }
126 
+        .social div:hover{
127 
+            background-color: rgba(255,255,255,0.47);
128 
+        }
129 
+        .social .fb{
130 
+            margin-left: 25px;
131 
+        }
132 
+        .social i{
133 
+            margin-right: 4px;
134 
+        }
135 
+
136 
+    </style>
137 
+</head>
138 
+<body>
139 
+<div class="background">
140 
+    <div class="shape"></div>
141 
+    <div class="shape"></div>
142 
+</div>
143 
+<form>
144 
+    <h3>科研管控平台</h3>
145 
+
146 
+    <label for="username">账户名</label>
147 
+    <input type="text" placeholder="Email or Phone" id="username">
148 
+
149 
+    <label for="password">密码</label>
150 
+    <input type="password" placeholder="Password" id="password">
151 
+
152 
+    <button>Log In</button>
153 
+
154 
+</form>
155 
+</body>
156 
+</html>

+ 219 - 0
src/main/resources/templates/login/login-v5.html
Vedi File 

@@ -0,0 +1,219 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
4 
+  <meta charset="UTF-8">
5 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 
+  <link rel="stylesheet" href="styles.css">
7 
+  <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
8 
+  <link rel="icon" th:href="@{//images/logo.ico}">
9 
+  <title>Account Login</title>
10 
+  <style>
11 
+    * {
12 
+      margin: 0;
13 
+      padding: 0;
14 
+      box-sizing: border-box;
15 
+      font-family: 'Poppins', sans-serif;
16 
+    }
17 
+
18 
+    body {
19 
+      display: flex;
20 
+      justify-content: center;
21 
+      align-items: center;
22 
+      min-height: 100vh;
23 
+      /* 以下是背景图片相关设置 */
24 
+      /*background-image: url('/images/loginbg.png');*/
25 
+/*      background-color: #0c0f13;*/
26 
+      background-image: url("/images/logo-v1.png");
27 
+      background-size: cover;
28 
+      background-position: center;
29 
+      background-repeat: no-repeat;
30 
+      width: 100%;
31 
+      overflow: hidden;
32 
+    }
33 
+    .container {
34 
+      position: relative;
35 
+      min-height: 100vh;
36 
+      width: 100%;
37 
+      background: rgba(255, 255, 255, 0.2); /* 设置半透明白色背景，使内容更易读 */
38 
+
39 
+    }
40 
+
41 
+    .logo {
42 
+      position: absolute;
43 
+      top: 50px;
44 
+      left: 50px;
45 
+      display: flex;
46 
+      align-items: center;
47 
+    }
48 
+
49 
+    .logo img {
50 
+      width: 32px;
51 
+      height: 32px;
52 
+      margin-right: 10px;
53 
+    }
54 
+
55 
+    .logo h2 {
56 
+      font-size: 24px;
57 
+      font-weight: 700;
58 
+      color: #333;
59 
+    }
60 
+
61 
+    .login-box {
62 
+      position: absolute;
63 
+      top: 50%;
64 
+      left: 50%;
65 
+      transform: translate(-50%, -50%);
66 
+      width: 350px;
67 
+      padding: 40px;
68 
+      background: #fff;
69 
+      border-radius: 20px;
70 
+      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
71 
+      text-align: center;
72 
+    }
73 
+
74 
+    .avatar {
75 
+      width: 100px;
76 
+      height: 100px;
77 
+      border-radius: 50%;
78 
+      overflow: hidden;
79 
+      margin: 0 auto 20px;
80 
+    }
81 
+
82 
+    .avatar img {
83 
+      width: 100%;
84 
+      height: 100%;
85 
+      object-fit: cover;
86 
+    }
87 
+
88 
+    .login-box h2 {
89 
+      font-size: 23px;
90 
+      font-weight: 700;
91 
+      color: #2980b9;
92 
+      margin-bottom: 20px;
93 
+    }
94 
+
95 
+    .input-box {
96 
+      position: relative;
97 
+      width: 100%;
98 
+      margin-bottom: 20px;
99 
+    }
100 
+
101 
+    .input-box input {
102 
+      width: 100%;
103 
+      padding: 10px;
104 
+      border: 1px solid #ccc;
105 
+      border-radius: 10px;
106 
+      outline: none;
107 
+      font-size: 16px;
108 
+    }
109 
+
110 
+    .input-box i {
111 
+      position: absolute;
112 
+      top: 50%;
113 
+      right: 10px;
114 
+      transform: translateY(-50%);
115 
+      font-size: 18px;
116 
+      color: #ccc;
117 
+    }
118 
+
119 
+    .login-btn {
120 
+      width: 100%;
121 
+      padding: 10px;
122 
+      background: #007bff;
123 
+      color: #fff;
124 
+      border: none;
125 
+      border-radius: 10px;
126 
+      font-size: 16px;
127 
+      cursor: pointer;
128 
+    }
129 
+
130 
+    .login-box p {
131 
+      margin-top: 10px;
132 
+      font-size: 14px;
133 
+    }
134 
+
135 
+    .login-box p a {
136 
+      color: #007bff;
137 
+      text-decoration: none;
138 
+    }
139 
+    .container .input-box .icon-2{
140 
+      background: url("/images/icon-login.png") no-repeat -54px 0;
141 
+    }
142 
+  </style>
143 
+</head>
144 
+
145 
+<body>
146 
+<div class="container">
147 
+  <div class="logo">
148 
+    <img src="/images/logo.png" alt="User Icon">
149 
+    <h2>科研管控平台</h2>
150 
+  </div>
151 
+  <div class="login-box">
152 
+    <div class="avatar">
153 
+      <img src="/images/logo.png" alt="Avatar">
154 
+    </div>
155 
+    <h2>Welcome back</h2>
156 
+    <form class="layui-form">
157 
+      <div class="input-box">
158 
+        <span class="icon icon-2"></span>
159 
+        <input type="text" name="username" id="username" lay-verify="required" placeholder="账户名" maxlength="24" autocomplete="current-password"/>
160 
+        <i class="fas fa-user"></i>
161 
+      </div>
162 
+      <div class="input-box">
163 
+        <span class="icon icon-2"></span>
164 
+        <input type="password" placeholder="密码" id="password" name="password" lay-verify="required" maxlength="18" autocomplete="current-password">
165 
+        <i class="fas fa-lock"></i>
166 
+      </div>
167 
+      <button type="submit" class="login-btn" id="logn">登录</button>
168 
+     <!-- <p>Don't have an account? <a href="#">signup</a></p>-->
169 
+    </form>
170 
+  </div>
171 
+</div>
172 
+<script>
173 
+  const  inputs = [
174 
+          document.getElementById('username'),
175 
+          document.getElementById('password')
176 
+  ]
177 
+
178 
+  inputs.forEach(input =>{
179 
+   input.addEventListener('input',function () {
180 
+     this.value = this.value.replace(/\s+/g,'');
181 
+   })
182 
+  })
183 
+</script>
184 
+<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
185 
+<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
186 
+<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
187 
+<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
188 
+<script>
189 
+  AjaxUtil.ctx = /*[[@{/}]]*/'';
190 
+  // 在页面加载完毕后调用拦截器函数
191 
+  layui.use(['form','layNotify','layer'],function () {
192 
+    var form = layer.form,
193 
+            layNotify = layui.layNotify;
194 
+    layer = layui.layer;
195 
+
196 
+    const logn = document.getElementById('logn');
197 
+    const username = document.getElementById('username');
198 
+    const password = document.getElementById('password');
199 
+    // 登录
200 
+    logn.addEventListener('click',function () {
201 
+      console.log('我登录了');
202 
+      if (username.value != null){
203 
+        layer.msg('用户名不能为空！',{icon:2},function () {
204 
+
205 
+        });
206 
+      }
207 
+      if (password.value != null){
208 
+        layer.msg('密码不能为空！',{icon:2},function () {
209 
+
210 
+        })
211 
+      }
212 
+
213 
+    });
214 
+
215 
+  })
216 
+
217 
+</script>
218 
+</body>
219 
+</html>

+ 82 - 30
src/main/resources/templates/login/login.html
Vedi File 

@@ -9,18 +9,22 @@
9 9 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
10 10 
     <meta name="apple-mobile-web-app-capable" content="yes">
11 11 
     <meta name="format-detection" content="telephone=no">
12 
-    <link rel="icon" th:href="@{//images/logo.ico}">
12 
+    <link rel="icon" th:href="@{/images/logo.ico}">
13 13 
     <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
14 14 
     <style th:inline="text">
15 15 
         .main-body {
16 
+            position: absolute;
16 17 
             top: 50%;
17 18 
             left: 50%;
18 
-            position: absolute;
19 
+            transform: translate(-50%, -50%);
20 
+            width: 350px;
21 
+            background: #fff;
22 
+            border-radius: 20px;
23 
+            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
19 24 
             -webkit-transform: translate(-50%, -50%);
20 25 
             -moz-transform: translate(-50%, -50%);
21 26 
             -ms-transform: translate(-50%, -50%);
22 27 
             -o-transform: translate(-50%, -50%);
23 
-            transform: translate(-50%, -50%);
24 28 
             overflow: hidden;
25 29 
         }
26 30 
 
@@ -94,21 +98,22 @@
94 98 
         }
95 99
96 100 
         .login-main .login-bottom .center .item {
97 
-            width: 288px;
101 
+            width: 260px;
98 102 
             height: 35px;
99 103 
             border-bottom: 1px solid #dae1e6;
100 104 
             margin-bottom: 35px;
101 105 
         }
102 106
103 107 
         .login-main {
104 
-            width: 500px;
108 
+            width: 350px;
109 
+            height: 500px;
105 110 
             position: relative;
106 111 
             float: left;
107 112 
         }
108 113
109 114 
         .login-main .login-top {
110 
-            height: 117px;
111 
-            background-color: #1aa094;
115 
+            height: 150px;
116 
+            margin-top: 40px;
112 117 
             border-radius: 12px 12px 0 0;
113 118 
             font-family: SourceHanSansCN-Regular;
114 119 
             font-size: 30px;
 
@@ -116,7 +121,7 @@
116 121 
             font-stretch: normal;
117 122 
             letter-spacing: 0;
118 123 
             color: #fff;
119 
-            line-height: 117px;
124 
+            line-height: 30px;
120 125 
             text-align: center;
121 126 
             overflow: hidden;
122 127 
             -webkit-transform: rotate(0);
 
@@ -125,6 +130,27 @@
125 130 
             -o-transform: rotate(0);
126 131 
             transform: rotate(0);
127 132 
         }
133 
+        .login-main .login-top .avatar{
134 
+            width: 100px;
135 
+            height: 100px;
136 
+            border-radius: 50%;
137 
+            overflow: hidden;
138 
+            margin: 0 auto 20px;
139 
+            display: flex;
140 
+            justify-content: center;
141 
+            align-items: center;
142 
+        }
143 
+        .login-main .login-top .avatar img{
144 
+            width: 90%;
145 
+            height: 90%;
146 
+            object-fit: cover;
147 
+        }
148 
+        .login-main .login-top h2{
149 
+            font-size: 23px;
150 
+            font-weight: 700;
151 
+            color: #2980b9;
152 
+            margin-bottom: 20px;
153 
+        }
128 154
129 155 
         .login-main .login-top .bg1 {
130 156 
             display: inline-block;
 
@@ -151,14 +177,14 @@
151 177 
         }
152 178
153 179 
         .login-main .login-bottom {
154 
-            width: 500px;
180 
+            width: 340px;
155 181 
             background: #fff;
156 182 
             border-radius: 0 0 12px 12px;
157 183 
             padding-bottom: 53px;
158 184 
         }
159 185
160 186 
         .login-main .login-bottom .center {
161 
-            width: 288px;
187 
+            width: 260px;
162 188 
             margin: 0 auto;
163 189 
             padding-top: 40px;
164 190 
             padding-bottom: 15px;
 
@@ -169,12 +195,12 @@
169 195 
             clear: both;
170 196 
             height: 16px;
171 197 
             line-height: 16px;
172 
-            width: 288px;
198 
+            width: 260px;
173 199 
             margin: 0 auto;
174 200 
         }
175 201
176 202 
         body {
177 
-            background: url("/images/loginbg.jpg") 0% 0% / cover no-repeat;
203 
+            background: url("/images/logo-v1.png") 0% 0% / cover no-repeat;
178 204 
             position: static;
179 205 
             font-size: 12px;
180 206 
         }
 
@@ -207,7 +233,7 @@
207 233 
             clear: both;
208 234 
             height: 16px;
209 235 
             line-height: 16px;
210 
-            width: 288px;
236 
+            width: 260px;
211 237 
             margin: 0 auto;
212 238 
         }
213 239 
 
@@ -219,21 +245,22 @@
219 245 
             letter-spacing: 0;
220 246 
             color: #9abcda;
221 247 
             cursor: pointer;
248 
+            margin-top: 5px;
222 249 
         }
223 250
224 251 
         .login-main .login-bottom .tip .forget-password {
225 252 
             font-stretch: normal;
226 253 
             letter-spacing: 0;
227 
-            color: #1aa094;
254 
+            color: #2980b9;
228 255 
             text-decoration: none;
229 256 
             position: absolute;
230 257 
             right: 62px;
231 258 
         }
232 259
233 260 
         .login-main .login-bottom .login-btn {
234 
-            width: 288px;
261 
+            width: 260px;
235 262 
             height: 40px;
236 
-            background-color: #1aa094;
263 
+            background-color: #2980b9;
237 264 
             border-radius: 16px;
238 265 
             margin: 24px auto 0;
239 266 
             text-align: center;
 
@@ -273,6 +300,23 @@
273 300 
         .footer a, .footer span {
274 301 
             color: #fff;
275 302 
         }
303 
+        .logo{
304 
+            position: absolute;
305 
+            top: 50px;
306 
+            left: 50px;
307 
+            display: flex;
308 
+            align-items: center;
309 
+        }
310 
+        .logo img{
311 
+            width: 32px;
312 
+            height: 32px;
313 
+            margin-right: 10px;
314 
+        }
315 
+        .logo h2{
316 
+            font-size: 24px;
317 
+            font-weight: 700;
318 
+            color: #333;
319 
+        }
276 320
277 321 
         @media screen and (max-width: 428px) {
278 322 
             .login-main {
 
@@ -291,13 +335,17 @@
291 335
292 336 
 </head>
293 337 
 <body>
294 
-
338 
+<div class="logo">
339 
+    <img src="/images/logo.png" alt="User Icon">
340 
+    <h2>科研管控平台</h2>
341 
+</div>
295 342 
 <div class="main-body">
296 343 
     <div class="login-main">
297 344 
         <div class="login-top">
298 
-            <span>科研管控平台</span>
299 
-            <span class="bg1"></span>
300 
-            <span class="bg2"></span>
345 
+            <div class="avatar">
346 
+                <img src="/images/logo.png" alt="Avatar">
347 
+            </div>
348 
+            <h2>Welcome back</h2>
301 349 
         </div>
302 350 
         <form class="layui-form login-bottom">
303 351 
             <div class="center">
 
@@ -306,25 +354,17 @@
306 354 
                     <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入登录账号"
307 355 
                            maxlength="24" autocomplete="current-password" />
308 356 
                 </div>
309 
-
310 357 
                 <div class="item">
311 358 
                     <span class="icon icon-3"></span>
312 359 
                     <input type="password" name="password" id="password" lay-verify="required" placeholder="请输入密码"
313 360 
                            maxlength="20" autocomplete="current-password">
314 361 
                     <span class="bind-password icon icon-4"></span>
315 362 
                 </div>
316 
-
317 
-                <!--                <div id="validatePanel" class="item" style="width: 167px;">-->
318 
-                <!--                    <span class="icon icon-1"></span>-->
319 
-                <!--                    <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" maxlength="4">-->
320 
-                <!--                    <img id="ver_btn" class="validateImg" alt="看不清? 点击刷新" title="看不清? 点击刷新"/>-->
321 
-                <!--                </div>-->
322 
-
323 363 
             </div>
324 364 
             <div class="tip">
325 365 
                 <span class="icon-nocheck"></span>
326 
-                <span class="login-tip">记住密码</span><!--
327 
-                <a href="javascript:" class="forget-password">忘记密码？</a>-->
366 
+                <span class="login-tip">记住密码</span>
367 
+                <!--<a href="javascript:" class="forget-password">忘记密码？</a>-->
328 368 
             </div>
329 369 
             <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
330 370 
                 <button id="btn_login" class="login-btn" lay-submit lay-filter="login">
 
@@ -339,6 +379,18 @@
339 379 
 <div class="footer">
340 380 
     Copyright© 2023 <span class="padding-5">|</span>
341 381 
 </div>
382 
+<script>
383 
+    const  inputs = [
384 
+        document.getElementById('username'),
385 
+        document.getElementById('password')
386 
+    ]
387 
+
388 
+    inputs.forEach(input =>{
389 
+        input.addEventListener('input',function () {
390 
+            this.value = this.value.replace(/\s+/g,'');
391 
+        })
392 
+    })
393 
+</script>
342 394 
 <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
343 395 
 <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
344 396 
 <script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>