From 0317061c4d672f27c46e159279c0c05d8ed70866 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Sat, 14 Jun 2025 14:27:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E7=99=BB=E9=99=86?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84css=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
=?UTF-8?q?=E6=B2=A1=E9=82=A3=E4=B9=88=E6=8A=BD=E8=B1=A1=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/login_module.vue | 46 ---------------
src/components/register_module.vue | 54 -----------------
src/views/backend/Login.vue | 93 +++++++++++++++---------------
3 files changed, 48 insertions(+), 145 deletions(-)
diff --git a/src/components/login_module.vue b/src/components/login_module.vue
index 84bd4f5..4db10e3 100644
--- a/src/components/login_module.vue
+++ b/src/components/login_module.vue
@@ -83,52 +83,6 @@ const showError = ref(false)
const errorTitle = ref('错误提示')
const errorMessage = ref('')
-const validateUsername = () => {
- if (!username.value) {
- usernameError.value = '请输入QQ号码'
- return false
- }
- if (!/^[/\d/g]+$/.test(username.value)) {
- usernameError.value = 'QQ号码只能包含数字'
- return false
- }
- if (username.value.length < 4) {
- usernameError.value = 'QQ号码长度不能小于4个字符'
- return false
- }
- usernameError.value = ''
- return true
-}
-
-const validatePassword = () => {
- if (!password.value) {
- passwordError.value = '请输入密码'
- return false
- }
- if (password.value.length < 4) {
- passwordError.value = '密码长度不能小于4个字符'
- return false
- }
- if (password.value.length > 20) {
- passwordError.value = '密码长度不能超过20个字符'
- return false
- }
- passwordError.value = ''
- return true
-}
-
-const validateCaptcha = () => {
- if (!captcha.value) {
- captchaError.value = '请输入验证码'
- return false
- }
- if (captcha.value.length !== 4) {
- captchaError.value = '验证码长度不正确'
- return false
- }
- captchaError.value = ''
- return true
-}
const isFormValid = computed(() => {
return !usernameError.value &&
diff --git a/src/components/register_module.vue b/src/components/register_module.vue
index 0e1346e..c5282a4 100644
--- a/src/components/register_module.vue
+++ b/src/components/register_module.vue
@@ -90,60 +90,6 @@ const showErrorMessage = (message, title = '错误提示') => {
showError.value = true
}
-// 表单验证规则
-const validateUsername = () => {
- if (!username.value) {
- usernameError.value = '请输入QQ号码'
- return false
- }
- // 只允许纯数字
- if (!/^\d+$/.test(username.value)) {
- usernameError.value = 'QQ号只能包含数字'
- return false
- }
- usernameError.value = ''
- return true
-}
-
-const validatePassword = () => {
- if (!password.value) {
- passwordError.value = '请输入密码'
- return false
- }
- if (password.value.length < 6) {
- passwordError.value = '密码长度不能小于6个字符'
- return false
- }
- passwordError.value = ''
- return true
-}
-
-const validateConfirmPassword = () => {
- if (!confirmPassword.value) {
- confirmPasswordError.value = '请再次输入密码'
- return false
- }
- if (confirmPassword.value !== password.value) {
- confirmPasswordError.value = '两次输入的密码不一致'
- return false
- }
- confirmPasswordError.value = ''
- return true
-}
-
-const validateCaptcha = () => {
- if (!captcha.value) {
- captchaError.value = '请输入验证码'
- return false
- }
- if (captcha.value.length !== 4) {
- captchaError.value = '验证码长度不正确'
- return false
- }
- captchaError.value = ''
- return true
-}
-
const refreshCaptcha = async () => {
try {
const response = await getCaptcha()
diff --git a/src/views/backend/Login.vue b/src/views/backend/Login.vue
index 08b1a17..b13ff7b 100644
--- a/src/views/backend/Login.vue
+++ b/src/views/backend/Login.vue
@@ -7,13 +7,13 @@
© Byz解忧杂货铺
@@ -64,35 +64,30 @@ const handleBack = () => {
}
.content-container {
- position: absolute;
- top: 0;
- right: 0;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
width: 25%;
min-width: 320px;
- height: 100%;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: flex-start;
z-index: 2;
-}
-
-.login-right {
- position: relative;
- width: 100%;
- height: calc(100vh - 120px);
- margin: 0;
- background: linear-gradient(135deg, #afe9ef 0%, #a0c4ff 100%);
- border-radius: 16px 0 0 20px;
- box-shadow: -8px 0 25px rgba(0, 0, 0, 0.51);
- display: flex;
- align-items: center;
- justify-content: center;
+ padding: 2rem;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 16px;
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
}
.back-btn {
position: absolute;
top: 18px;
- left: 28px;
+ left: 18px;
background: #e6f7ff;
color: #409eff;
border: none;
@@ -113,41 +108,49 @@ const handleBack = () => {
color: #1976d2;
}
+.form-content {
+ width: 100%;
+ margin-top: 48px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
@media (max-width: 900px) {
.content-container {
width: 40%;
min-width: 220px;
}
- .login-right {
- }
- .login-form {
- max-width: 220px;
- }
}
@media (max-width: 600px) {
.content-container {
- width: 100%;
- min-width: 0;
- left: 0;
- right: 0;
- }
- .login-right {
- border-radius: 0;
- margin: 0;
+ width: 100vw;
height: 100vh;
min-width: 0;
- max-width: 100vw;
- box-shadow: none;
- background: linear-gradient(135deg, #afe9ef 0%, #b6d0ff 100%);
- }
- .login-form {
- width: 96%;
- min-width: 0;
- max-width: 100vw;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ transform: none;
+ border-radius: 0;
+ background: rgba(0,0,0,0.18);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ padding: 0 8px;
+ justify-content: flex-start;
}
.back-btn {
- display: none;
+ top: 18px;
+ left: 18px;
+ border-radius: 16px;
+ font-size: 15px;
+ padding: 6px 14px;
+ }
+ .form-content {
+ margin-top: 64px;
+ width: 100%;
+ align-items: center;
}
}