Home Explore Help
Register Sign In
ly
/
KYGK
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

首页替换

ly 2 months ago
parent
c04a6253d6
commit
d781de2e33
4 changed files with 437 additions and 14 deletions
Split View Show 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. 62 14
      src/main/resources/templates/login/login.html

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


+ 156 - 0
src/main/resources/templates/login/login-v4.html
View 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
View 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>

+ 62 - 14
src/main/resources/templates/login/login.html
View File 

@@ -13,14 +13,19 @@
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 
+
22 
+            background: #fff;
23 
+            border-radius: 20px;
24 
+            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
19 25 
             -webkit-transform: translate(-50%, -50%);
20 26 
             -moz-transform: translate(-50%, -50%);
21 27 
             -ms-transform: translate(-50%, -50%);
22 28 
             -o-transform: translate(-50%, -50%);
23 
-            transform: translate(-50%, -50%);
24 29 
             overflow: hidden;
25 30 
         }
26 31 
 
@@ -101,14 +106,14 @@
101 106 
         }
102 107
103 108 
         .login-main {
104 
-            width: 500px;
109 
+            width: 350px;
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,7 +177,7 @@
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;
 
@@ -174,7 +200,7 @@
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 
         }
 
@@ -224,7 +250,7 @@
224 250 
         .login-main .login-bottom .tip .forget-password {
225 251 
             font-stretch: normal;
226 252 
             letter-spacing: 0;
227 
-            color: #1aa094;
253 
+            color: #2980b9;
228 254 
             text-decoration: none;
229 255 
             position: absolute;
230 256 
             right: 62px;
 
@@ -233,7 +259,7 @@
233 259 
         .login-main .login-bottom .login-btn {
234 260 
             width: 288px;
235 261 
             height: 40px;
236 
-            background-color: #1aa094;
262 
+            background-color: #2980b9;
237 263 
             border-radius: 16px;
238 264 
             margin: 24px auto 0;
239 265 
             text-align: center;
 
@@ -273,6 +299,23 @@
273 299 
         .footer a, .footer span {
274 300 
             color: #fff;
275 301 
         }
302 
+        .logo{
303 
+            position: absolute;
304 
+            top: 50px;
305 
+            left: 50px;
306 
+            display: flex;
307 
+            align-items: center;
308 
+        }
309 
+        .logo img{
310 
+            width: 32px;
311 
+            height: 32px;
312 
+            margin-right: 10px;
313 
+        }
314 
+        .logo h2{
315 
+            font-size: 24px;
316 
+            font-weight: 700;
317 
+            color: #333;
318 
+        }
276 319
277 320 
         @media screen and (max-width: 428px) {
278 321 
             .login-main {
 
@@ -291,13 +334,18 @@
291 334
292 335 
 </head>
293 336 
 <body>
294 
-
337 
+<div class="logo">
338 
+    <img src="/images/logo.png" alt="User Icon">
339 
+    <h2>科研管控平台</h2>
340 
+</div>
295 341 
 <div class="main-body">
342 
+
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">