leisure-core 0.6.19 → 0.6.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/le-login/src/main.vue +624 -156
- package/package.json +1 -1
package/le-login/src/main.vue
CHANGED
|
@@ -1,77 +1,118 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="login-wrapper">
|
|
3
3
|
<div class="login-card">
|
|
4
|
-
<!--
|
|
5
|
-
<div class="
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
<!-- 左右布局容器 -->
|
|
5
|
+
<div class="login-layout">
|
|
6
|
+
<!-- 左侧Logo区域 -->
|
|
7
|
+
<div class="left-section">
|
|
8
|
+
<div class="logo-content">
|
|
9
|
+
<div class="logo-circle">
|
|
10
|
+
<i class="el-icon-s-data"></i>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="system-info">
|
|
13
|
+
<h2>{{ title }}</h2>
|
|
14
|
+
<p class="subtitle">{{ title1 }}</p>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<!-- 浏览器提示移到Logo区域 -->
|
|
18
|
+
<div class="system-tips">
|
|
19
|
+
<p class="tip">
|
|
20
|
+
<i class="el-icon-warning-outline"></i>
|
|
21
|
+
建议使用Chrome、Edge等现代浏览器
|
|
22
|
+
</p>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<!-- 左侧装饰元素 -->
|
|
26
|
+
<div class="decorative-line"></div>
|
|
27
|
+
</div>
|
|
8
28
|
</div>
|
|
9
|
-
<div class="system-info">
|
|
10
|
-
<h2>{{ title }}</h2>
|
|
11
|
-
<p class="subtitle">{{ title1 }}</p>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
29
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
prefix-icon="el-icon-user"
|
|
31
|
-
class="custom-input"
|
|
32
|
-
@keydown.enter.native="nextFocus(0)"
|
|
33
|
-
autocomplete="username"
|
|
34
|
-
/>
|
|
35
|
-
</el-form-item>
|
|
36
|
-
|
|
37
|
-
<!-- 密码 -->
|
|
38
|
-
<el-form-item label="密码" prop="pwd" class="form-item">
|
|
39
|
-
<el-input
|
|
40
|
-
v-model="formdata.pwd"
|
|
41
|
-
type="password"
|
|
42
|
-
placeholder="请输入密码"
|
|
43
|
-
show-password
|
|
44
|
-
prefix-icon="el-icon-lock"
|
|
45
|
-
class="custom-input"
|
|
46
|
-
@keydown.enter.native="nextFocus(1)"
|
|
47
|
-
autocomplete="current-password"
|
|
48
|
-
/>
|
|
49
|
-
</el-form-item>
|
|
50
|
-
|
|
51
|
-
<!-- 验证码插槽 -->
|
|
52
|
-
<slot></slot>
|
|
53
|
-
|
|
54
|
-
<!-- 登录按钮 -->
|
|
55
|
-
<el-form-item class="login-btn-item">
|
|
56
|
-
<el-button
|
|
57
|
-
type="primary"
|
|
58
|
-
class="login-btn"
|
|
59
|
-
:loading="loading"
|
|
60
|
-
@click="handleLodin"
|
|
30
|
+
<!-- 右侧表单区域 -->
|
|
31
|
+
<div class="right-section">
|
|
32
|
+
<!-- 表单容器 -->
|
|
33
|
+
<div class="form-container">
|
|
34
|
+
<div class="form-header">
|
|
35
|
+
<h3>用户登录</h3>
|
|
36
|
+
<p>请输入您的账号信息</p>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<el-form
|
|
40
|
+
ref="loginForm"
|
|
41
|
+
:model="formdata"
|
|
42
|
+
:rules="rules"
|
|
43
|
+
class="login-form"
|
|
44
|
+
@submit.native.prevent="handleLodin"
|
|
61
45
|
>
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
46
|
+
<!-- 用户名 -->
|
|
47
|
+
<el-form-item label="用户名" prop="account" class="form-item">
|
|
48
|
+
<el-input
|
|
49
|
+
v-model="formdata.account"
|
|
50
|
+
placeholder="请输入用户名"
|
|
51
|
+
prefix-icon="el-icon-user"
|
|
52
|
+
class="custom-input"
|
|
53
|
+
@keydown.enter.native="nextFocus(0)"
|
|
54
|
+
autocomplete="username"
|
|
55
|
+
/>
|
|
56
|
+
</el-form-item>
|
|
57
|
+
|
|
58
|
+
<!-- 密码 -->
|
|
59
|
+
<el-form-item label="密码" prop="pwd" class="form-item">
|
|
60
|
+
<el-input
|
|
61
|
+
v-model="formdata.pwd"
|
|
62
|
+
type="password"
|
|
63
|
+
placeholder="请输入密码"
|
|
64
|
+
show-password
|
|
65
|
+
prefix-icon="el-icon-lock"
|
|
66
|
+
class="custom-input"
|
|
67
|
+
@keydown.enter.native="nextFocus(1)"
|
|
68
|
+
autocomplete="current-password"
|
|
69
|
+
/>
|
|
70
|
+
</el-form-item>
|
|
71
|
+
|
|
72
|
+
<!-- 验证码区域（移除label） -->
|
|
73
|
+
<el-form-item
|
|
74
|
+
prop="captcha"
|
|
75
|
+
class="captcha-item"
|
|
76
|
+
v-if="captchaRequired"
|
|
77
|
+
>
|
|
78
|
+
<div class="captcha-wrapper">
|
|
79
|
+
<el-input
|
|
80
|
+
v-model="formdata.captcha"
|
|
81
|
+
placeholder="请输入6位验证码"
|
|
82
|
+
class="captcha-input"
|
|
83
|
+
prefix-icon="el-icon-message"
|
|
84
|
+
maxlength="6"
|
|
85
|
+
@keydown.enter.native="handleLodin"
|
|
86
|
+
></el-input>
|
|
87
|
+
<el-button
|
|
88
|
+
class="captcha-button"
|
|
89
|
+
type="primary"
|
|
90
|
+
:disabled="isDis || isCounting"
|
|
91
|
+
@click="sendCaptcha"
|
|
92
|
+
:loading="sending"
|
|
93
|
+
>
|
|
94
|
+
<span class="button-text">
|
|
95
|
+
{{ isCounting ? `${retime}秒` : "获取验证码" }}
|
|
96
|
+
</span>
|
|
97
|
+
</el-button>
|
|
98
|
+
</div>
|
|
99
|
+
</el-form-item>
|
|
100
|
+
|
|
101
|
+
<!-- 登录按钮 -->
|
|
102
|
+
<el-form-item class="login-btn-item">
|
|
103
|
+
<el-button
|
|
104
|
+
type="primary"
|
|
105
|
+
class="login-btn"
|
|
106
|
+
:loading="loading"
|
|
107
|
+
@click="handleLodin"
|
|
108
|
+
>
|
|
109
|
+
<span v-if="!loading">登录系统</span>
|
|
110
|
+
<span v-else>登录中...</span>
|
|
111
|
+
</el-button>
|
|
112
|
+
</el-form-item>
|
|
113
|
+
</el-form>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
75
116
|
</div>
|
|
76
117
|
</div>
|
|
77
118
|
</div>
|
|
@@ -93,12 +134,18 @@ export default {
|
|
|
93
134
|
type: String,
|
|
94
135
|
default: "Wine Culture Museum Management System",
|
|
95
136
|
},
|
|
137
|
+
// 添加验证码相关props
|
|
138
|
+
captchaRequired: {
|
|
139
|
+
type: Boolean,
|
|
140
|
+
default: true,
|
|
141
|
+
},
|
|
96
142
|
},
|
|
97
143
|
data() {
|
|
98
144
|
return {
|
|
99
145
|
formdata: {
|
|
100
146
|
account: "",
|
|
101
147
|
pwd: "",
|
|
148
|
+
captcha: "",
|
|
102
149
|
},
|
|
103
150
|
rules: {
|
|
104
151
|
account: [
|
|
@@ -119,8 +166,25 @@ export default {
|
|
|
119
166
|
trigger: "blur",
|
|
120
167
|
},
|
|
121
168
|
],
|
|
169
|
+
captcha: this.captchaRequired
|
|
170
|
+
? [
|
|
171
|
+
{ required: true, message: "请输入验证码", trigger: "blur" },
|
|
172
|
+
{ len: 6, message: "验证码长度为6位", trigger: "blur" },
|
|
173
|
+
{
|
|
174
|
+
pattern: /^\d{6}$/,
|
|
175
|
+
message: "验证码必须是6位数字",
|
|
176
|
+
trigger: "blur",
|
|
177
|
+
},
|
|
178
|
+
]
|
|
179
|
+
: [],
|
|
122
180
|
},
|
|
123
181
|
loading: false,
|
|
182
|
+
// 验证码相关数据
|
|
183
|
+
sending: false, // 发送中状态
|
|
184
|
+
isCounting: false, // 是否正在倒计时
|
|
185
|
+
retime: 60, // 倒计时时间
|
|
186
|
+
isDis: false, // 按钮是否禁用
|
|
187
|
+
countdownTimer: null, // 倒计时定时器
|
|
124
188
|
};
|
|
125
189
|
},
|
|
126
190
|
mounted() {
|
|
@@ -131,6 +195,13 @@ export default {
|
|
|
131
195
|
firstInput.focus();
|
|
132
196
|
}
|
|
133
197
|
});
|
|
198
|
+
|
|
199
|
+
// 组件销毁前清除定时器
|
|
200
|
+
this.$once("hook:beforeDestroy", () => {
|
|
201
|
+
if (this.countdownTimer) {
|
|
202
|
+
clearInterval(this.countdownTimer);
|
|
203
|
+
}
|
|
204
|
+
});
|
|
134
205
|
},
|
|
135
206
|
methods: {
|
|
136
207
|
nextFocus(index) {
|
|
@@ -149,6 +220,7 @@ export default {
|
|
|
149
220
|
{
|
|
150
221
|
account: this.formdata.account,
|
|
151
222
|
pwd: this.formdata.pwd,
|
|
223
|
+
captcha: this.captchaRequired ? this.formdata.captcha : undefined,
|
|
152
224
|
},
|
|
153
225
|
this.loginAfter,
|
|
154
226
|
this.nav2Home,
|
|
@@ -177,6 +249,44 @@ export default {
|
|
|
177
249
|
getUserInfo() {
|
|
178
250
|
return this.formdata;
|
|
179
251
|
},
|
|
252
|
+
|
|
253
|
+
// 发送验证码
|
|
254
|
+
sendCaptcha() {
|
|
255
|
+
// 验证用户名是否已输入
|
|
256
|
+
if (!this.formdata.account) {
|
|
257
|
+
this.$message.warning("请输入用户名");
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
this.sending = true;
|
|
262
|
+
|
|
263
|
+
// 触发发送验证码事件，父组件可以监听这个事件来处理发送逻辑
|
|
264
|
+
this.$emit("sendCaptcha", {
|
|
265
|
+
account: this.formdata.account,
|
|
266
|
+
success: this.startCountdown,
|
|
267
|
+
fail: () => {
|
|
268
|
+
this.sending = false;
|
|
269
|
+
},
|
|
270
|
+
});
|
|
271
|
+
},
|
|
272
|
+
|
|
273
|
+
// 开始倒计时
|
|
274
|
+
startCountdown() {
|
|
275
|
+
this.sending = false;
|
|
276
|
+
this.isCounting = true;
|
|
277
|
+
this.isDis = true;
|
|
278
|
+
this.retime = 60;
|
|
279
|
+
|
|
280
|
+
this.countdownTimer = setInterval(() => {
|
|
281
|
+
this.retime--;
|
|
282
|
+
if (this.retime <= 0) {
|
|
283
|
+
clearInterval(this.countdownTimer);
|
|
284
|
+
this.isCounting = false;
|
|
285
|
+
this.isDis = false;
|
|
286
|
+
this.retime = 60;
|
|
287
|
+
}
|
|
288
|
+
}, 1000);
|
|
289
|
+
},
|
|
180
290
|
},
|
|
181
291
|
};
|
|
182
292
|
</script>
|
|
@@ -184,11 +294,15 @@ export default {
|
|
|
184
294
|
<style lang="scss" scoped>
|
|
185
295
|
.login-wrapper {
|
|
186
296
|
width: 100%;
|
|
187
|
-
max-width:
|
|
297
|
+
max-width: 900px;
|
|
188
298
|
margin: 0 auto;
|
|
189
299
|
padding: 0 20px;
|
|
190
300
|
|
|
191
|
-
@media (max-width:
|
|
301
|
+
@media (max-width: 1024px) {
|
|
302
|
+
max-width: 800px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
@media (max-width: 768px) {
|
|
192
306
|
max-width: 100%;
|
|
193
307
|
padding: 0 15px;
|
|
194
308
|
}
|
|
@@ -196,101 +310,323 @@ export default {
|
|
|
196
310
|
|
|
197
311
|
.login-card {
|
|
198
312
|
background: rgba(255, 255, 255, 0.98);
|
|
199
|
-
border-radius:
|
|
200
|
-
padding: 40px
|
|
201
|
-
box-shadow: 0 20px
|
|
202
|
-
border: 1px solid rgba(255, 255, 255, 0.
|
|
313
|
+
border-radius: 20px;
|
|
314
|
+
padding: 40px;
|
|
315
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.08);
|
|
316
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
317
|
+
overflow: hidden;
|
|
203
318
|
|
|
204
319
|
@media (max-width: 768px) {
|
|
205
|
-
padding:
|
|
206
|
-
border-radius:
|
|
320
|
+
padding: 30px 25px;
|
|
321
|
+
border-radius: 16px;
|
|
207
322
|
}
|
|
208
323
|
|
|
209
324
|
@media (max-width: 480px) {
|
|
210
|
-
padding:
|
|
325
|
+
padding: 25px 20px;
|
|
211
326
|
}
|
|
212
327
|
}
|
|
213
328
|
|
|
214
|
-
.
|
|
215
|
-
|
|
216
|
-
|
|
329
|
+
.login-layout {
|
|
330
|
+
display: flex;
|
|
331
|
+
min-height: 500px;
|
|
332
|
+
max-height: 500px;
|
|
217
333
|
|
|
218
334
|
@media (max-width: 768px) {
|
|
219
|
-
|
|
335
|
+
flex-direction: column;
|
|
336
|
+
min-height: auto;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* 左侧Logo区域 */
|
|
341
|
+
.left-section {
|
|
342
|
+
flex: 1;
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
justify-content: center;
|
|
346
|
+
padding: 40px;
|
|
347
|
+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
348
|
+
border-radius: 16px 0 0 16px;
|
|
349
|
+
|
|
350
|
+
@media (max-width: 768px) {
|
|
351
|
+
padding: 30px 25px;
|
|
352
|
+
border-radius: 16px 16px 0 0;
|
|
353
|
+
margin-bottom: 20px;
|
|
220
354
|
}
|
|
221
355
|
|
|
356
|
+
@media (max-width: 480px) {
|
|
357
|
+
padding: 25px 20px;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.logo-content {
|
|
362
|
+
text-align: center;
|
|
363
|
+
max-width: 320px;
|
|
364
|
+
display: flex;
|
|
365
|
+
flex-direction: column;
|
|
366
|
+
height: 100%;
|
|
367
|
+
justify-content: center;
|
|
368
|
+
|
|
222
369
|
.logo-circle {
|
|
223
|
-
width:
|
|
224
|
-
height:
|
|
370
|
+
width: 100px;
|
|
371
|
+
height: 100px;
|
|
225
372
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
226
|
-
border-radius:
|
|
373
|
+
border-radius: 20px;
|
|
227
374
|
display: flex;
|
|
228
375
|
align-items: center;
|
|
229
376
|
justify-content: center;
|
|
230
|
-
margin: 0 auto
|
|
231
|
-
box-shadow: 0
|
|
377
|
+
margin: 0 auto 30px;
|
|
378
|
+
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.25),
|
|
379
|
+
0 5px 15px rgba(59, 130, 246, 0.15);
|
|
232
380
|
|
|
233
381
|
i {
|
|
234
|
-
font-size:
|
|
382
|
+
font-size: 48px;
|
|
235
383
|
color: white;
|
|
236
384
|
}
|
|
237
385
|
}
|
|
238
386
|
|
|
239
387
|
.system-info {
|
|
388
|
+
margin-bottom: 30px;
|
|
389
|
+
|
|
240
390
|
h2 {
|
|
241
|
-
font-size:
|
|
242
|
-
font-weight:
|
|
391
|
+
font-size: 28px;
|
|
392
|
+
font-weight: 700;
|
|
243
393
|
color: #1e293b;
|
|
244
|
-
margin: 0 0
|
|
394
|
+
margin: 0 0 15px 0;
|
|
245
395
|
line-height: 1.3;
|
|
396
|
+
letter-spacing: 0.5px;
|
|
246
397
|
}
|
|
247
398
|
|
|
248
399
|
.subtitle {
|
|
249
|
-
font-size:
|
|
400
|
+
font-size: 16px;
|
|
250
401
|
color: #64748b;
|
|
251
402
|
margin: 0;
|
|
252
403
|
font-weight: 400;
|
|
404
|
+
letter-spacing: 0.5px;
|
|
405
|
+
line-height: 1.5;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
/* 左侧浏览器提示 */
|
|
410
|
+
.system-tips {
|
|
411
|
+
margin-top: auto;
|
|
412
|
+
padding-top: 20px;
|
|
413
|
+
text-align: center;
|
|
414
|
+
width: 100%;
|
|
415
|
+
|
|
416
|
+
.tip {
|
|
417
|
+
display: inline-flex;
|
|
418
|
+
align-items: center;
|
|
419
|
+
justify-content: center;
|
|
420
|
+
font-size: 12px;
|
|
421
|
+
color: #64748b;
|
|
422
|
+
margin: 0;
|
|
423
|
+
line-height: 1.5;
|
|
424
|
+
|
|
425
|
+
i {
|
|
426
|
+
margin-right: 6px;
|
|
427
|
+
font-size: 13px;
|
|
428
|
+
color: #94a3b8;
|
|
429
|
+
}
|
|
253
430
|
}
|
|
254
431
|
}
|
|
432
|
+
|
|
433
|
+
.decorative-line {
|
|
434
|
+
width: 60px;
|
|
435
|
+
height: 4px;
|
|
436
|
+
background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
|
|
437
|
+
border-radius: 2px;
|
|
438
|
+
margin: 20px auto 0;
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
/* 右侧表单区域 */
|
|
443
|
+
.right-section {
|
|
444
|
+
flex: 1.2;
|
|
445
|
+
display: flex;
|
|
446
|
+
flex-direction: column;
|
|
447
|
+
padding: 40px 40px 40px 50px;
|
|
448
|
+
|
|
449
|
+
@media (max-width: 1024px) {
|
|
450
|
+
padding: 40px 40px 40px 40px;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
@media (max-width: 768px) {
|
|
454
|
+
padding: 0;
|
|
455
|
+
}
|
|
255
456
|
}
|
|
256
457
|
|
|
257
458
|
.form-container {
|
|
258
|
-
|
|
459
|
+
flex: 1;
|
|
460
|
+
display: flex;
|
|
461
|
+
flex-direction: column;
|
|
462
|
+
justify-content: center;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.form-header {
|
|
466
|
+
margin-bottom: 40px;
|
|
467
|
+
|
|
468
|
+
h3 {
|
|
469
|
+
font-size: 24px;
|
|
470
|
+
font-weight: 700;
|
|
471
|
+
color: #1e293b;
|
|
472
|
+
margin: 0 0 8px 0;
|
|
473
|
+
}
|
|
259
474
|
|
|
475
|
+
p {
|
|
476
|
+
font-size: 14px;
|
|
477
|
+
color: #64748b;
|
|
478
|
+
margin: 0;
|
|
479
|
+
font-weight: 400;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.login-form {
|
|
260
484
|
.form-item {
|
|
261
|
-
margin-bottom:
|
|
485
|
+
margin-bottom: 28px;
|
|
262
486
|
|
|
263
487
|
&:last-of-type {
|
|
264
|
-
margin-bottom:
|
|
488
|
+
margin-bottom: 32px;
|
|
265
489
|
}
|
|
266
490
|
|
|
267
491
|
.el-form-item__label {
|
|
268
492
|
display: block;
|
|
269
493
|
font-size: 14px;
|
|
270
|
-
font-weight:
|
|
494
|
+
font-weight: 600;
|
|
271
495
|
color: #475569;
|
|
272
|
-
margin-bottom:
|
|
496
|
+
margin-bottom: 10px;
|
|
273
497
|
padding-bottom: 0;
|
|
274
498
|
}
|
|
275
499
|
}
|
|
500
|
+
|
|
501
|
+
/* 验证码区域 */
|
|
502
|
+
.captcha-item {
|
|
503
|
+
margin-bottom: 32px;
|
|
504
|
+
|
|
505
|
+
.captcha-wrapper {
|
|
506
|
+
display: flex;
|
|
507
|
+
gap: 12px;
|
|
508
|
+
align-items: center;
|
|
509
|
+
|
|
510
|
+
.captcha-input {
|
|
511
|
+
flex: 3; /* 增大输入框宽度比例 */
|
|
512
|
+
|
|
513
|
+
::v-deep .el-input__inner {
|
|
514
|
+
height: 52px;
|
|
515
|
+
border-radius: 12px;
|
|
516
|
+
border: 2px solid #e2e8f0;
|
|
517
|
+
font-size: 15px;
|
|
518
|
+
color: #334155;
|
|
519
|
+
padding-left: 48px !important;
|
|
520
|
+
padding-right: 16px;
|
|
521
|
+
transition: all 0.2s ease;
|
|
522
|
+
box-sizing: border-box;
|
|
523
|
+
|
|
524
|
+
&:hover {
|
|
525
|
+
border-color: #cbd5e1;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
&:focus {
|
|
529
|
+
border-color: #3b82f6;
|
|
530
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
531
|
+
outline: none;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
&::placeholder {
|
|
535
|
+
color: #94a3b8;
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
::v-deep .el-input__prefix {
|
|
540
|
+
left: 16px;
|
|
541
|
+
display: flex;
|
|
542
|
+
align-items: center;
|
|
543
|
+
justify-content: center;
|
|
544
|
+
pointer-events: none;
|
|
545
|
+
|
|
546
|
+
.el-icon {
|
|
547
|
+
color: #94a3b8;
|
|
548
|
+
font-size: 20px;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.captcha-button {
|
|
554
|
+
flex: 1; /* 减小按钮宽度比例 */
|
|
555
|
+
min-width: 120px; /* 设置最小宽度 */
|
|
556
|
+
height: 52px;
|
|
557
|
+
border-radius: 12px;
|
|
558
|
+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
559
|
+
border: none;
|
|
560
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
561
|
+
position: relative;
|
|
562
|
+
overflow: hidden;
|
|
563
|
+
|
|
564
|
+
&:hover:not(.is-disabled) {
|
|
565
|
+
transform: translateY(-2px);
|
|
566
|
+
box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4);
|
|
567
|
+
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
&:active {
|
|
571
|
+
transform: translateY(0);
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
&:focus {
|
|
575
|
+
outline: none;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.button-text {
|
|
579
|
+
font-size: 14px;
|
|
580
|
+
font-weight: 600;
|
|
581
|
+
letter-spacing: 0.5px;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
&::after {
|
|
585
|
+
content: "";
|
|
586
|
+
position: absolute;
|
|
587
|
+
top: 50%;
|
|
588
|
+
left: 50%;
|
|
589
|
+
width: 5px;
|
|
590
|
+
height: 5px;
|
|
591
|
+
background: rgba(255, 255, 255, 0.5);
|
|
592
|
+
opacity: 0;
|
|
593
|
+
border-radius: 100%;
|
|
594
|
+
transform: scale(1, 1) translate(-50%);
|
|
595
|
+
transform-origin: 50% 50%;
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
&:focus:not(:active)::after {
|
|
599
|
+
animation: ripple 1s ease-out;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
@keyframes ripple {
|
|
607
|
+
0% {
|
|
608
|
+
transform: scale(0, 0);
|
|
609
|
+
opacity: 0.5;
|
|
610
|
+
}
|
|
611
|
+
100% {
|
|
612
|
+
transform: scale(20, 20);
|
|
613
|
+
opacity: 0;
|
|
614
|
+
}
|
|
276
615
|
}
|
|
277
616
|
|
|
278
617
|
::v-deep .custom-input {
|
|
279
|
-
// 修复图标重叠的关键：确保图标区域有正确的padding
|
|
280
618
|
.el-input {
|
|
281
|
-
// 确保输入框内部布局正确
|
|
282
619
|
display: flex;
|
|
283
620
|
align-items: center;
|
|
284
621
|
}
|
|
285
622
|
|
|
286
623
|
.el-input__inner {
|
|
287
|
-
height:
|
|
288
|
-
border-radius:
|
|
289
|
-
border:
|
|
624
|
+
height: 52px;
|
|
625
|
+
border-radius: 12px;
|
|
626
|
+
border: 2px solid #e2e8f0;
|
|
290
627
|
font-size: 15px;
|
|
291
628
|
color: #334155;
|
|
292
|
-
|
|
293
|
-
padding-left: 40px !important;
|
|
629
|
+
padding-left: 48px !important;
|
|
294
630
|
padding-right: 16px;
|
|
295
631
|
transition: all 0.2s ease;
|
|
296
632
|
box-sizing: border-box;
|
|
@@ -311,27 +647,26 @@ export default {
|
|
|
311
647
|
}
|
|
312
648
|
|
|
313
649
|
.el-input__prefix {
|
|
314
|
-
left:
|
|
650
|
+
left: 16px;
|
|
315
651
|
display: flex;
|
|
316
652
|
align-items: center;
|
|
317
653
|
justify-content: center;
|
|
318
|
-
pointer-events: none;
|
|
654
|
+
pointer-events: none;
|
|
319
655
|
|
|
320
656
|
.el-icon {
|
|
321
657
|
color: #94a3b8;
|
|
322
|
-
font-size:
|
|
658
|
+
font-size: 20px;
|
|
323
659
|
}
|
|
324
660
|
}
|
|
325
661
|
|
|
326
|
-
// 密码显示/隐藏图标
|
|
327
662
|
.el-input__suffix {
|
|
328
|
-
right:
|
|
663
|
+
right: 16px;
|
|
329
664
|
display: flex;
|
|
330
665
|
align-items: center;
|
|
331
666
|
|
|
332
667
|
.el-icon {
|
|
333
668
|
color: #94a3b8;
|
|
334
|
-
font-size:
|
|
669
|
+
font-size: 20px;
|
|
335
670
|
cursor: pointer;
|
|
336
671
|
transition: color 0.2s ease;
|
|
337
672
|
|
|
@@ -341,9 +676,8 @@ export default {
|
|
|
341
676
|
}
|
|
342
677
|
}
|
|
343
678
|
|
|
344
|
-
// 修复密码输入框的显示/隐藏图标位置
|
|
345
679
|
&.el-input--suffix .el-input__inner {
|
|
346
|
-
padding-right:
|
|
680
|
+
padding-right: 48px !important;
|
|
347
681
|
}
|
|
348
682
|
}
|
|
349
683
|
|
|
@@ -353,17 +687,17 @@ export default {
|
|
|
353
687
|
|
|
354
688
|
.login-btn {
|
|
355
689
|
width: 100%;
|
|
356
|
-
height:
|
|
690
|
+
height: 52px;
|
|
357
691
|
font-size: 16px;
|
|
358
692
|
font-weight: 600;
|
|
359
|
-
border-radius:
|
|
693
|
+
border-radius: 12px;
|
|
360
694
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
361
695
|
border: none;
|
|
362
696
|
transition: all 0.2s ease;
|
|
363
697
|
|
|
364
698
|
&:hover {
|
|
365
699
|
transform: translateY(-2px);
|
|
366
|
-
box-shadow: 0
|
|
700
|
+
box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
|
|
367
701
|
}
|
|
368
702
|
|
|
369
703
|
&:active {
|
|
@@ -375,39 +709,45 @@ export default {
|
|
|
375
709
|
}
|
|
376
710
|
}
|
|
377
711
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
712
|
+
/* 暗色主题适配 */
|
|
713
|
+
@media (prefers-color-scheme: dark) {
|
|
714
|
+
.login-card {
|
|
715
|
+
background: rgba(30, 41, 59, 0.95);
|
|
716
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
717
|
+
}
|
|
382
718
|
|
|
383
|
-
.
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
719
|
+
.left-section {
|
|
720
|
+
background: linear-gradient(
|
|
721
|
+
135deg,
|
|
722
|
+
rgba(30, 41, 59, 0.8) 0%,
|
|
723
|
+
rgba(15, 23, 42, 0.9) 100%
|
|
724
|
+
);
|
|
725
|
+
}
|
|
389
726
|
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
727
|
+
.logo-content .system-info {
|
|
728
|
+
h2 {
|
|
729
|
+
color: #f1f5f9;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.subtitle {
|
|
393
733
|
color: #94a3b8;
|
|
394
734
|
}
|
|
395
735
|
}
|
|
396
|
-
}
|
|
397
736
|
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
737
|
+
.logo-content .system-tips .tip {
|
|
738
|
+
color: #94a3b8;
|
|
739
|
+
|
|
740
|
+
i {
|
|
741
|
+
color: #64748b;
|
|
742
|
+
}
|
|
403
743
|
}
|
|
404
744
|
|
|
405
|
-
.
|
|
406
|
-
|
|
745
|
+
.form-header {
|
|
746
|
+
h3 {
|
|
407
747
|
color: #f1f5f9;
|
|
408
748
|
}
|
|
409
749
|
|
|
410
|
-
|
|
750
|
+
p {
|
|
411
751
|
color: #94a3b8;
|
|
412
752
|
}
|
|
413
753
|
}
|
|
@@ -416,9 +756,10 @@ export default {
|
|
|
416
756
|
color: #cbd5e1;
|
|
417
757
|
}
|
|
418
758
|
|
|
419
|
-
::v-deep .custom-input
|
|
759
|
+
::v-deep .custom-input,
|
|
760
|
+
::v-deep .captcha-input {
|
|
420
761
|
.el-input__inner {
|
|
421
|
-
background: rgba(15, 23, 42, 0.
|
|
762
|
+
background: rgba(15, 23, 42, 0.5);
|
|
422
763
|
border-color: #475569;
|
|
423
764
|
color: #f1f5f9;
|
|
424
765
|
|
|
@@ -448,40 +789,167 @@ export default {
|
|
|
448
789
|
}
|
|
449
790
|
}
|
|
450
791
|
|
|
451
|
-
.
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
.tip {
|
|
455
|
-
color: #94a3b8;
|
|
792
|
+
.captcha-button {
|
|
793
|
+
background: linear-gradient(135deg, #047857 0%, #065f46 100%);
|
|
456
794
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
795
|
+
&:hover:not(.is-disabled) {
|
|
796
|
+
background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
|
|
797
|
+
box-shadow: 0 12px 30px rgba(6, 95, 70, 0.4);
|
|
460
798
|
}
|
|
461
799
|
}
|
|
462
800
|
}
|
|
463
801
|
|
|
464
|
-
|
|
465
|
-
@keyframes
|
|
802
|
+
/* 动画效果 */
|
|
803
|
+
@keyframes fadeInLeft {
|
|
466
804
|
from {
|
|
467
805
|
opacity: 0;
|
|
468
|
-
transform:
|
|
806
|
+
transform: translateX(-20px);
|
|
469
807
|
}
|
|
470
808
|
to {
|
|
471
809
|
opacity: 1;
|
|
472
|
-
transform:
|
|
810
|
+
transform: translateX(0);
|
|
473
811
|
}
|
|
474
812
|
}
|
|
475
813
|
|
|
476
|
-
|
|
477
|
-
|
|
814
|
+
@keyframes fadeInRight {
|
|
815
|
+
from {
|
|
816
|
+
opacity: 0;
|
|
817
|
+
transform: translateX(20px);
|
|
818
|
+
}
|
|
819
|
+
to {
|
|
820
|
+
opacity: 1;
|
|
821
|
+
transform: translateX(0);
|
|
822
|
+
}
|
|
478
823
|
}
|
|
479
824
|
|
|
480
|
-
.
|
|
481
|
-
animation:
|
|
825
|
+
.left-section {
|
|
826
|
+
animation: fadeInLeft 0.6s ease-out;
|
|
482
827
|
}
|
|
483
828
|
|
|
484
|
-
.
|
|
485
|
-
animation:
|
|
829
|
+
.right-section {
|
|
830
|
+
animation: fadeInRight 0.6s ease-out 0.1s both;
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
/* 响应式调整 */
|
|
834
|
+
@media (max-width: 768px) {
|
|
835
|
+
.login-wrapper {
|
|
836
|
+
max-width: 500px;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.login-layout {
|
|
840
|
+
min-height: auto;
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
.left-section {
|
|
844
|
+
animation: none;
|
|
845
|
+
padding: 25px 20px;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.right-section {
|
|
849
|
+
animation: none;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
.logo-content .logo-circle {
|
|
853
|
+
width: 80px;
|
|
854
|
+
height: 80px;
|
|
855
|
+
margin-bottom: 25px;
|
|
856
|
+
|
|
857
|
+
i {
|
|
858
|
+
font-size: 40px;
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.logo-content .system-info {
|
|
863
|
+
margin-bottom: 25px;
|
|
864
|
+
|
|
865
|
+
h2 {
|
|
866
|
+
font-size: 24px;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.subtitle {
|
|
870
|
+
font-size: 14px;
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
.logo-content .system-tips {
|
|
875
|
+
margin-top: 20px;
|
|
876
|
+
padding-top: 15px;
|
|
877
|
+
|
|
878
|
+
.tip {
|
|
879
|
+
font-size: 11px;
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.form-header {
|
|
884
|
+
margin-bottom: 30px;
|
|
885
|
+
|
|
886
|
+
h3 {
|
|
887
|
+
font-size: 22px;
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
::v-deep .custom-input .el-input__inner,
|
|
892
|
+
::v-deep .captcha-input .el-input__inner {
|
|
893
|
+
height: 48px;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.captcha-button {
|
|
897
|
+
height: 48px;
|
|
898
|
+
min-width: 90px;
|
|
899
|
+
|
|
900
|
+
.button-text {
|
|
901
|
+
font-size: 13px;
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.login-btn {
|
|
906
|
+
height: 48px;
|
|
907
|
+
}
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
@media (max-width: 480px) {
|
|
911
|
+
.logo-content .logo-circle {
|
|
912
|
+
width: 70px;
|
|
913
|
+
height: 70px;
|
|
914
|
+
margin-bottom: 20px;
|
|
915
|
+
|
|
916
|
+
i {
|
|
917
|
+
font-size: 36px;
|
|
918
|
+
}
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.logo-content .system-info {
|
|
922
|
+
h2 {
|
|
923
|
+
font-size: 22px;
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.form-header {
|
|
928
|
+
margin-bottom: 25px;
|
|
929
|
+
|
|
930
|
+
h3 {
|
|
931
|
+
font-size: 20px;
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.login-form .form-item,
|
|
936
|
+
.login-form .captcha-item {
|
|
937
|
+
margin-bottom: 24px;
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
/* 移动端验证码区域垂直排列 */
|
|
941
|
+
.captcha-item .captcha-wrapper {
|
|
942
|
+
flex-direction: column;
|
|
943
|
+
gap: 12px;
|
|
944
|
+
|
|
945
|
+
.captcha-input {
|
|
946
|
+
width: 100%;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.captcha-button {
|
|
950
|
+
width: 100%;
|
|
951
|
+
min-width: 100%;
|
|
952
|
+
}
|
|
953
|
+
}
|
|
486
954
|
}
|
|
487
955
|
</style>
|