style: 调整登录表单样式和按钮布局

- 更新 `login/style.scss` 中的输入框内边距和字体大小
- 在 `ant-input.scss` 中添加自动填充样式
- 修改 `login-form/index.vue` 中忘记密码按钮的显示逻辑
This commit is contained in:
rd
2025-09-15 17:57:39 +08:00
parent b626f5a35b
commit 348ad2a6ad
3 changed files with 32 additions and 12 deletions

View File

@ -20,6 +20,7 @@
color: var(--Text-4, #939499); color: var(--Text-4, #939499);
} }
&:hover { &:hover {
background-color: #fff !important; background-color: #fff !important;
} }
@ -43,6 +44,15 @@
border-color: $color-error !important; border-color: $color-error !important;
} }
} }
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out,
background-color 99999s ease-out;
}
} }
input.ant-input { input.ant-input {
height: 32px; height: 32px;
@ -64,11 +74,17 @@ textarea.ant-input {
background-color: var(--BG-200, #f2f3f5) !important; background-color: var(--BG-200, #f2f3f5) !important;
} }
&.ant-input-affix-wrapper-status-error { &:not(.ant-input-affix-wrapper-disabled) {
&:not(.ant-input-affix-wrapper-disabled) { &.ant-input-affix-wrapper-status-error {
border-color: $color-error !important; border-color: $color-error !important;
} }
&:hover {
border-color: $color-primary !important;
}
} }
&:focus, &:focus,
&-focused { &-focused {
box-shadow: none !important; box-shadow: none !important;

View File

@ -67,14 +67,18 @@
登录 登录
</Button> </Button>
<div class="flex justify-between btn-row"> <div class="flex justify-between btn-row">
<Button <div>
type="text" <Button
class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE" v-show="!isCaptchaLogin"
size="small" class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE"
@click="onForgetPassword" size="small"
> type="text"
忘记密码 @click="onForgetPassword"
</Button> >
忘记密码
</Button>
</div>
<Button <Button
type="text" type="text"
class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE" class="!color-#939499 !p-0 !h-22px hover:color-#6D4CFE"

View File

@ -6,11 +6,11 @@
} }
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
height: 48px; height: 48px;
padding: 0 10px; padding: 10px 16px;
border-radius: 8px !important; border-radius: 8px !important;
.ant-input { .ant-input {
border-radius: 8px !important; border-radius: 8px !important;
font-size: 16px; font-size: 16px !important;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;