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, please try again": "注册失败，请重试",
"Already have an account?": "已有账户？",
"Don't have an account?": "没有账户？",
"System and personal settings": "系统配置和个人设置",
"Personal Settings": "个人设置",
"Email": "邮箱",

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

@ -58,6 +58,7 @@
<div class="login-footer" v-if="showSignupLink">
<n-text depth="3">
{{ t("Don't have an account?") }}
<router-link to="/signup" class="signup-link">
{{ t('Sign up') }}
</router-link>
@ -213,29 +214,65 @@ onMounted(async () => {
}
.signup-link {
color: #18a058;
color: #1fc76f;
text-decoration: none;
font-weight: 500;
margin-left: 4px;
transition: color 0.2s;
}
.signup-link:hover {
color: #36ad6a;
color: #1fc76f;
text-decoration: underline;
}
:deep(.brand-button) {
background-color: #18a058 !important;
border-color: #18a058 !important;
background: #e6f8f0 !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) {
background-color: #36ad6a !important;
border-color: #36ad6a !important;
background: #dcfce7 !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) {
background-color: #18a058 !important;
border-color: #18a058 !important;
background: #e6f8f0 !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>

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

@ -284,10 +284,10 @@ onMounted(async () => {
}
.title {
font-size: 28px;
font-size: 32px;
font-weight: 700;
color: #1f2937;
margin: 0 0 6px 0;
margin: 0 0 8px 0;
}
.subtitle {
@ -303,7 +303,7 @@ onMounted(async () => {
}
.login-link {
color: #18a058;
color: #1fc76f;
text-decoration: none;
font-weight: 500;
margin-left: 4px;
@ -311,23 +311,58 @@ onMounted(async () => {
}
.login-link:hover {
color: #36ad6a;
color: #1fc76f;
text-decoration: underline;
}
:deep(.brand-button) {
background-color: #18a058 !important;
border-color: #18a058 !important;
background: #e6f8f0 !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) {
background-color: #36ad6a !important;
border-color: #36ad6a !important;
background: #dcfce7 !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) {
background-color: #18a058 !important;
border-color: #18a058 !important;
background: #e6f8f0 !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>