jlocal/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve login and signup page UI consistency

Browse Source
This commit is contained in:
jingrow 2025-11-23 02:39:18 +08:00
parent 34ec42d134
commit 64abb30172
3 changed files with 91 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/jingrow/frontend/src/locales/zh-CN.json
View File

@ -51,6 +51,7 @@
"Sign up failed": "注册失败", "Sign up failed": "注册失败",
"Sign up failed, please try again": "注册失败，请重试", "Sign up failed, please try again": "注册失败，请重试",
"Already have an account?": "已有账户？", "Already have an account?": "已有账户？",
"Don't have an account?": "没有账户？",
"System and personal settings": "系统配置和个人设置", "System and personal settings": "系统配置和个人设置",
"Personal Settings": "个人设置", "Personal Settings": "个人设置",
"Email": "邮箱", "Email": "邮箱",

53
apps/jingrow/frontend/src/views/auth/Login.vue
View File

@ -58,6 +58,7 @@
<div class="login-footer" v-if="showSignupLink"> <div class="login-footer" v-if="showSignupLink">
<n-text depth="3"> <n-text depth="3">
{{ t("Don't have an account?") }}
<router-link to="/signup" class="signup-link"> <router-link to="/signup" class="signup-link">
{{ t('Sign up') }} {{ t('Sign up') }}
</router-link> </router-link>
@ -213,29 +214,65 @@ onMounted(async () => {
} }
.signup-link { .signup-link {
color: #18a058; color: #1fc76f;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
margin-left: 4px;
transition: color 0.2s; transition: color 0.2s;
} }
.signup-link:hover { .signup-link:hover {
color: #36ad6a; color: #1fc76f;
text-decoration: underline; text-decoration: underline;
} }
:deep(.brand-button) { :deep(.brand-button) {
background-color: #18a058 !important; background: #e6f8f0 !important;
border-color: #18a058 !important; border: 1px solid #1fc76f !important;
color: #0d684b !important;
}
:deep(.brand-button .n-button__border),
:deep(.brand-button .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
:deep(.brand-button:hover) { :deep(.brand-button:hover) {
background-color: #36ad6a !important; background: #dcfce7 !important;
border-color: #36ad6a !important; border-color: #1fc76f !important;
color: #166534 !important;
box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
}
:deep(.brand-button:hover .n-button__border),
:deep(.brand-button:hover .n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
:deep(.brand-button:active) {
background: #1fc76f !important;
border-color: #1fc76f !important;
color: white !important;
box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
}
:deep(.brand-button:active .n-button__border),
:deep(.brand-button:active .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
:deep(.brand-button:focus) { :deep(.brand-button:focus) {
background-color: #18a058 !important; background: #e6f8f0 !important;
border-color: #18a058 !important; border-color: #1fc76f !important;
color: #0d684b !important;
}
:deep(.brand-button:focus .n-button__border),
:deep(.brand-button:focus .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
</style> </style>

55
apps/jingrow/frontend/src/views/auth/Signup.vue
View File

@ -284,10 +284,10 @@ onMounted(async () => {
} }
.title { .title {
font-size: 28px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: #1f2937; color: #1f2937;
margin: 0 0 6px 0; margin: 0 0 8px 0;
} }
.subtitle { .subtitle {
@ -303,7 +303,7 @@ onMounted(async () => {
} }
.login-link { .login-link {
color: #18a058; color: #1fc76f;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
margin-left: 4px; margin-left: 4px;
@ -311,23 +311,58 @@ onMounted(async () => {
} }
.login-link:hover { .login-link:hover {
color: #36ad6a; color: #1fc76f;
text-decoration: underline; text-decoration: underline;
} }
:deep(.brand-button) { :deep(.brand-button) {
background-color: #18a058 !important; background: #e6f8f0 !important;
border-color: #18a058 !important; border: 1px solid #1fc76f !important;
color: #0d684b !important;
}
:deep(.brand-button .n-button__border),
:deep(.brand-button .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
:deep(.brand-button:hover) { :deep(.brand-button:hover) {
background-color: #36ad6a !important; background: #dcfce7 !important;
border-color: #36ad6a !important; border-color: #1fc76f !important;
color: #166534 !important;
box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
}
:deep(.brand-button:hover .n-button__border),
:deep(.brand-button:hover .n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
:deep(.brand-button:active) {
background: #1fc76f !important;
border-color: #1fc76f !important;
color: white !important;
box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
}
:deep(.brand-button:active .n-button__border),
:deep(.brand-button:active .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
:deep(.brand-button:focus) { :deep(.brand-button:focus) {
background-color: #18a058 !important; background: #e6f8f0 !important;
border-color: #18a058 !important; border-color: #1fc76f !important;
color: #0d684b !important;
}
:deep(.brand-button:focus .n-button__border),
:deep(.brand-button:focus .n-button__state-border) {
border: none !important;
border-color: transparent !important;
} }
</style> </style>