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; } }