From d8412245361393382102d158cbace7f5eff03afe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com> Date: Fri, 29 Aug 2025 03:09:49 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Login.vue | 286 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 249 insertions(+), 37 deletions(-) diff --git a/src/views/Login.vue b/src/views/Login.vue index 9a00b29..b12d9c8 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -47,15 +47,20 @@ size="large" @submit.prevent="handleSubmit" > - + + -
- 没有账号？立即注册 -
@@ -68,16 +73,14 @@ /> - -
- - 下次自动登录 - - - 忘记密码？ - -
- +
+ + 下次自动登录 + + + 忘记密码？ + +
{ } :deep(.n-form-item-label) { - font-weight: 500; - color: #333; - font-size: 14px; + width: 48px; + height: 32px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 18px; /* 减小字体大小 */ + color: #000000; + line-height: 32px; + text-align: left; + font-style: normal; } +/* 隐藏必填字段的星号 */ +:deep(.n-form-item-label__asterisk) { + display: none; +} + +/* 学号标签行样式 */ + + :deep(.n-input) { - border-radius: 6px; /* 添加轻微圆角 */ - border: 1px solid #e0e0e0; + width: 520px; + height: 48x; /* 恢复到64px高度 */ + background: #F5F8FB !important; /* 设置背景色 */ + border-radius: 2px; + border: none !important; /* 移除边框 */ } :deep(.n-input:hover) { - border-color: #1890ff; + border: none !important; /* 悬停时也无边框 */ + background: #F5F8FB !important; /* 保持背景色 */ } :deep(.n-input.n-input--focus) { - border-color: #1890ff; - box-shadow: none; /* 移除聚焦阴影 */ + border: none !important; /* 聚焦时也无边框 */ + box-shadow: none !important; /* 移除聚焦阴影 */ + background: #F5F8FB !important; /* 保持背景色 */ } +/* 输入框内部元素样式 */ :deep(.n-input__input-el) { padding: 12px 16px; font-size: 14px; + height: 48px; /* 与容器高度一致 */ + line-height: 40px; /* 调整行高让文字垂直居中 */ + background: transparent !important; + background-color: transparent !important; +} + +:deep(.n-input__input) { + background: transparent !important; + background-color: transparent !important; +} + +:deep(.n-input-wrapper) { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +:deep(.n-input__state-border) { + display: none !important; /* 完全隐藏状态边框 */ +} + +/* 密码输入框特殊处理 */ +:deep(.n-input--password) { + border: none !important; + background: #F5F8FB !important; +} + +:deep(.n-input--password:hover) { + border: none !important; + background: #F5F8FB !important; +} + +:deep(.n-input--password.n-input--focus) { + border: none !important; + box-shadow: none !important; + background: #F5F8FB !important; +} + +/* 移除所有可能的边框元素 */ +:deep(.n-input__border), +:deep(.n-input__state-border), +:deep(.n-base-suffix__border), +:deep(.n-base-selection__border) { + display: none !important; + border: none !important; } .form-input { margin-bottom: 8px; } +/* 表单项间距调整 */ +:deep(.n-form-item) { + margin-bottom: 16px; /* 表单项之间16px间距 */ +} + +:deep(.n-form-item-label) { + margin-bottom: 16px; /* 标签和输入框之间16px间距 */ +} + +/* 密码表单项特殊间距 */ +:deep(.n-form-item:nth-child(2)) { + margin-top: -12px; /* 减少密码项与上方的距离 */ +} + + + .input-hint { - font-size: 12px; - color: #999; - text-align: right; - margin-top: 4px; + height: 28px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 15px; + color: #999999; + line-height: 28px; + font-style: normal; + display: flex; + align-items: center; + justify-content: flex-end; + margin-left: auto; /* 自动推到最右侧 */ + flex-shrink: 0; /* 防止被压缩 */ +} + +/* 学号标签容器 */ +.student-label-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + min-width: 400px; /* 确保有足够宽度 */ +} + +/* 学号标签文字 */ +.label-text { + width: 48px; + height: 32px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 18px; + color: #000000; + line-height: 32px; + text-align: left; + font-style: normal; + flex-shrink: 0; +} + +/* 右侧注册提示 */ +.input-hint-right { + height: 28px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 15px; + color: #999999; + line-height: 28px; + font-style: normal; + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; +} + +/* 立即注册按钮样式 */ +.input-hint-right :deep(.n-button) { + font-size: 15px !important; + padding: 0 !important; + margin-left: 4px; } .form-options { display: flex; justify-content: space-between; align-items: center; - margin: 20px 0; + margin-top: -24px; /* 进一步向上移动 */ + margin-bottom: 20px; /* 与下方登录按钮的间距 */ + width: 400px; /* 增加宽度，让两个元素有合适间距 */ + height: 28px; /* 固定高度 */ + padding: 0; /* 移除内边距 */ + box-sizing: border-box; /* 确保宽度包含边框 */ + white-space: nowrap; /* 防止整个容器内容换行 */ +} + +/* 下次自动登录样式 */ +:deep(.n-checkbox) { + width: auto; /* 改为自动宽度 */ + height: 28px; + white-space: nowrap; /* 防止换行 */ + flex-shrink: 0; /* 防止被压缩 */ + display: flex; + align-items: center; /* 垂直居中对齐 */ +} + +/* 勾选框本身的对齐和高度 */ +:deep(.n-checkbox .n-checkbox__input) { + align-self: flex-start; /* 改为顶部对齐 */ + margin-top: 2px; /* 微调位置让它与文字基线对齐 */ +} + +/* 勾选框图标的高度调整 */ +:deep(.n-checkbox .n-checkbox-box) { + height: 16px !important; /* 调整勾选框图标高度 */ + width: 16px !important; /* 调整勾选框图标宽度 */ + margin-top: 2px; /* 减少向下偏移，让勾选框往上 */ } :deep(.n-checkbox .n-checkbox__label) { - font-size: 14px; - color: #666; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 16px; /* 调整为16px */ + color: #999999; + line-height: 28px; + text-align: left; + font-style: normal; + text-transform: none; + white-space: nowrap; /* 防止标签文字换行 */ + display: flex; + align-items: center; /* 文字垂直居中 */ +} + +/* 忘记密码按钮样式 */ +.form-options :deep(.n-button) { + width: 91px; + height: 28px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 16px !important; /* 调整为16px */ + color: #0288D1 !important; + line-height: 28px; + text-align: left; + font-style: normal; + text-transform: none; + padding: 0 !important; + margin: 0 !important; + flex-shrink: 0; /* 防止按钮被压缩 */ } .login-btn { - background: #1890ff; + width: 420px; + height: 56px; /* 调整为56px */ + background: #0288D1; border: none; border-radius: 6px; /* 添加轻微圆角 */ - height: 48px; - font-size: 16px; + font-family: AppleSystemUIFont; + font-size: 22px; + color: #FFFFFF; + line-height: 39px; + text-align: center; /* 改为居中对齐 */ + font-style: normal; + text-transform: none; font-weight: 500; margin-top: 20px; transition: background-color 0.3s ease; @@ -433,15 +632,28 @@ const handleSubmit = async () => { } .form-footer { - text-align: center; - margin-top: 32px; + text-align: left; /* 改为左对齐 */ + margin-top: -25px; /* 进一步减少与登录按钮的距离 */ } .agreement-text { - font-size: 12px; - color: #999; + width: 420px; + height: 28px; + font-family: AppleSystemUIFont; + font-size: 16px; /* 调整为16px */ + color: #999999; + line-height: 28px; + text-align: left; + font-style: normal; + text-transform: none; margin: 0; - line-height: 1.6; +} + +/* 协议链接按钮样式 */ +.agreement-text :deep(.n-button) { + font-size: 16px !important; /* 确保按钮字体也是16px */ + padding: 0 !important; + margin-left: 4px; } /* 响应式设计 */