diff --git a/frontend/src/features/auth/views/LoginView.vue b/frontend/src/features/auth/views/LoginView.vue index b803ce8..a612f1a 100644 --- a/frontend/src/features/auth/views/LoginView.vue +++ b/frontend/src/features/auth/views/LoginView.vue @@ -71,8 +71,8 @@ async function handleSendCode() { startCountDown() } catch (error) { ElMessage.error(readError(error, '验证码发送失败')) - } finally { await loadCaptcha() + } finally { sending.value = false } } @@ -231,9 +231,9 @@ async function handleLogin() { justify-content: space-between; padding: 40px 36px; background: - radial-gradient(circle at 30% 20%, rgba(20, 119, 255, 0.08), transparent 50%), - radial-gradient(circle at 80% 90%, rgba(109, 40, 217, 0.06), transparent 50%), - linear-gradient(160deg, rgba(20, 119, 255, 0.06), rgba(109, 40, 217, 0.03)); + radial-gradient(circle at 28% 20%, rgba(255, 106, 0, 0.12), transparent 50%), + radial-gradient(circle at 82% 88%, rgba(255, 183, 77, 0.12), transparent 52%), + linear-gradient(160deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.62)); } .brand-lockup { @@ -248,8 +248,8 @@ async function handleLogin() { height: 36px; place-items: center; border-radius: 10px; - background: linear-gradient(135deg, #1477ff, #2f8dff); - box-shadow: 0 8px 24px rgba(20, 119, 255, 0.22); + background: linear-gradient(135deg, #ff6a00, #ff914d); + box-shadow: 0 8px 24px rgba(255, 106, 0, 0.24); color: #fff; font-size: 15px; font-weight: 900; @@ -298,7 +298,7 @@ async function handleLogin() { .login-header .eyebrow { margin: 0 0 8px; - color: #1477ff; + color: #ff6a00; font-size: 12px; font-weight: 700; letter-spacing: 1px; @@ -341,8 +341,8 @@ async function handleLogin() { .user-form :deep(.el-input__wrapper.is-focus) { background: #ffffff; box-shadow: - 0 0 0 1px rgba(20, 119, 255, 0.45) inset, - 0 0 0 3px rgba(20, 119, 255, 0.08); + 0 0 0 1px rgba(255, 106, 0, 0.46) inset, + 0 0 0 3px rgba(255, 106, 0, 0.1); } .user-form :deep(.el-input__inner) { color: #0f172a; @@ -377,8 +377,8 @@ async function handleLogin() { overflow: hidden; border: 1px solid #dbe5f0; border-radius: 10px; - background: #f8fafc; - color: #1477ff; + background: #fff7ed; + color: #ff6a00; cursor: pointer; font-size: 13px; font-weight: 700; @@ -403,16 +403,16 @@ async function handleLogin() { font-weight: 700; letter-spacing: 0.3px; background: #ffffff; - border-color: #1477ff; - color: #1477ff; + border-color: #ff6a00; + color: #ff6a00; box-shadow: none; transition: background 0.2s, color 0.2s; } .user-code-row .el-button:hover:not(:disabled) { - background: #1477ff; - border-color: #1477ff; + background: #ff6a00; + border-color: #ff6a00; color: #ffffff; } .user-code-row .el-button:disabled { @@ -428,16 +428,16 @@ async function handleLogin() { font-weight: 700; margin-top: 8px; letter-spacing: 0.5px; - background: linear-gradient(135deg, #1477ff, #2f8dff); + background: linear-gradient(135deg, #ff6a00, #ff8a1f); border: none; - box-shadow: 0 10px 28px rgba(20, 119, 255, 0.22); + box-shadow: 0 10px 28px rgba(255, 106, 0, 0.24); transition: transform 0.15s, box-shadow 0.2s; } .user-login-btn:hover { transform: translateY(-1px); - box-shadow: 0 14px 36px rgba(20, 119, 255, 0.28); + box-shadow: 0 14px 36px rgba(255, 106, 0, 0.3); } .login-notice { diff --git a/frontend/src/features/auth/views/MobileLoginView.vue b/frontend/src/features/auth/views/MobileLoginView.vue index 0ba9051..64a4c75 100644 --- a/frontend/src/features/auth/views/MobileLoginView.vue +++ b/frontend/src/features/auth/views/MobileLoginView.vue @@ -38,12 +38,11 @@ async function loadCaptcha() { } async function sendCode() { - const shouldRefresh = Boolean(form.captchaCode.trim()) - await handleSendCode(form.phone, { + const sent = await handleSendCode(form.phone, { captchaId: captcha.value?.captcha_id || '', captchaCode: form.captchaCode, }) - if (shouldRefresh) { + if (!sent && form.captchaCode.trim()) { await loadCaptcha() } } @@ -164,8 +163,8 @@ async function handleLogin() { .mobile-login-shell { min-height: 100dvh; background: - radial-gradient(circle at 50% 12%, rgba(20, 119, 255, 0.1), transparent 34%), - linear-gradient(180deg, #f8fbff 0%, #ffffff 70%, #f7fafc 100%); + radial-gradient(circle at 50% 12%, rgba(255, 106, 0, 0.12), transparent 34%), + linear-gradient(180deg, #fff7ed 0%, #ffffff 68%, #fffaf4 100%); color: #111827; } @@ -217,8 +216,8 @@ async function handleLogin() { height: 46px; place-items: center; border-radius: 14px; - background: linear-gradient(135deg, #1477ff, #2f8dff); - box-shadow: 0 14px 32px rgba(20, 119, 255, 0.18); + background: linear-gradient(135deg, #ff6a00, #ff914d); + box-shadow: 0 14px 32px rgba(255, 106, 0, 0.2); color: #ffffff; font-size: 19px; font-weight: 900; @@ -294,8 +293,8 @@ async function handleLogin() { overflow: hidden; border: 1px solid #dbe5f0; border-radius: 8px; - background: #f8fafc; - color: #1477ff; + background: #fff7ed; + color: #ff6a00; font-size: 12px; font-weight: 800; padding: 0; @@ -315,9 +314,9 @@ async function handleLogin() { .code-btn { min-width: 82px; height: 32px; - border-color: #1477ff !important; + border-color: #ff6a00 !important; border-radius: 8px; - color: #1477ff !important; + color: #ff6a00 !important; font-weight: 700; } @@ -333,7 +332,7 @@ async function handleLogin() { .assist-row span { min-width: 0; - color: #1477ff; + color: #ff6a00; } .assist-row a { @@ -361,7 +360,7 @@ async function handleLogin() { } .agreement-row :deep(.van-checkbox__label b) { - color: #1477ff; + color: #ff6a00; font-weight: 700; } @@ -369,8 +368,8 @@ async function handleLogin() { height: 48px; border: none !important; border-radius: 10px !important; - background: #1477ff !important; - box-shadow: 0 12px 24px rgba(20, 119, 255, 0.18); + background: linear-gradient(135deg, #ff6a00, #ff8a1f) !important; + box-shadow: 0 12px 24px rgba(255, 106, 0, 0.22); font-size: 17px; font-weight: 900; } @@ -383,7 +382,7 @@ async function handleLogin() { border: 1px solid #e4e8ee; border-radius: 10px; background: rgba(255, 255, 255, 0.82); - color: #1477ff; + color: #ff6a00; font-size: 15px; font-weight: 900; text-align: center;