yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化登录界面逻辑与 ui

Browse Source
This commit is contained in:
yml
2026-06-14 11:07:07 +08:00
parent bd9c88d659
commit 16b171442a
2 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/auth/views/LoginView.vue
+18 -18
View File
@@ -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 {
frontend/src/features/auth/views/MobileLoginView.vue
+15 -16
View File
@@ -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;