From 7c6c19d8f9084860c999fd17df4cc57b81c7c8db 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:39:15 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=A0=B7=E5=BC=8FUI=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Login.vue | 167 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 141 insertions(+), 26 deletions(-) diff --git a/src/views/Login.vue b/src/views/Login.vue index b12d9c8..6b4330f 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -37,7 +37,7 @@
-

账号密码登录

+

{{ isRegisterMode ? '账号注册' : '账号密码登录' }}

+ + + + + @@ -73,7 +82,8 @@ /> -
+ +
下次自动登录 @@ -82,6 +92,11 @@
+ +
+ 8-12位字符，需同时包含数字/字母/符号 +
+

- 登录即同意我们的用户协议 + {{ isRegisterMode ? '登录即代表阅读并同意' : '登录即同意我们的用户协议' }} 《服务协议和隐私政策》

@@ -121,11 +136,13 @@ const userStore = useUserStore() const formRef = ref(null) const rememberMe = ref(false) const activeTab = ref('student') // 当前选中的标签页 +const isRegisterMode = ref(false) // 注册模式状态 // 表单数据 const formData = reactive({ studentId: '', - password: '' + password: '', + inviteCode: '' // 添加邀请码字段 }) // 表单验证规则 @@ -133,7 +150,17 @@ const rules: FormRules = { studentId: [ { required: true, - message: '请输入学号', + message: () => { + if (isRegisterMode.value) return '请输入工号' + return activeTab.value === 'teacher' ? '请输入工号' : '请输入学号' + }, + trigger: ['input', 'blur'] + } + ], + inviteCode: [ + { + required: true, + message: '请输入邀请码', trigger: ['input', 'blur'] } ], @@ -144,13 +171,35 @@ const rules: FormRules = { trigger: ['input', 'blur'] }, { - min: 3, - message: '密码长度不能少于3位', + min: isRegisterMode.value ? 8 : 3, + max: isRegisterMode.value ? 12 : undefined, + message: isRegisterMode.value ? '密码长度需8-12位字符' : '密码长度不能少于3位', + trigger: ['input', 'blur'] + }, + { + pattern: isRegisterMode.value ? /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).*$/ : undefined, + message: '密码需同时包含数字/字母/符号', trigger: ['input', 'blur'] } ] } +// 获取ID标签文字 +const getIdLabel = () => { + if (isRegisterMode.value) { + return '工号' // 注册模式统一显示工号 + } + return activeTab.value === 'teacher' ? '工号' : '学号' +} + +// 获取ID输入框占位符 +const getIdPlaceholder = () => { + if (isRegisterMode.value) { + return '请输入您的工号' + } + return activeTab.value === 'teacher' ? '请输入您的工号' : '2014195268' +} + // 处理表单提交 const handleSubmit = async () => { if (!formRef.value) return @@ -303,7 +352,7 @@ const handleSubmit = async () => { .user-type-tabs { display: flex; justify-content: center; - gap: 40px; /* 增加按钮间距 */ + gap: 60px; /* 进一步增加按钮间距 */ margin-bottom: 40px; position: relative; } @@ -339,10 +388,10 @@ const handleSubmit = async () => { bottom: -8px; left: 50%; transform: translateX(-50%); - width: 40px; - height: 3px; - background: #0288D1; - border-radius: 2px; + width: 84px; /* 固定宽度84px */ + height: 2px; /* 高度2px */ + background: #0088D1; /* 使用指定颜色 */ + border-radius: 1px; } /* 悬停效果 */ @@ -356,7 +405,7 @@ const handleSubmit = async () => { padding: 40px 35px; /* 减少内边距 */ border-radius: 12px; /* 添加适度的圆角 */ border: 2px solid #FFFFFF; - max-height: 630px; /* 限制最大高度 */ + max-height: 730px; /* 限制最大高度 */ } /* 表单样式 */ @@ -373,7 +422,8 @@ const handleSubmit = async () => { } :deep(.n-form-item-label) { - width: 48px; + width: auto; /* 改为自动宽度，防止换行 */ + min-width: 48px; /* 设置最小宽度 */ height: 32px; font-family: PingFangSC, PingFang SC; font-weight: 400; @@ -382,6 +432,7 @@ const handleSubmit = async () => { line-height: 32px; text-align: left; font-style: normal; + white-space: nowrap; /* 防止换行 */ } /* 隐藏必填字段的星号 */ @@ -466,18 +517,67 @@ const handleSubmit = async () => { margin-bottom: 8px; } +/* 调整输入框内文字和占位符位置 */ +:deep(.n-input .n-input__input-el) { + line-height: 45px !important; /* 使用输入框的高度作为行高 */ + padding: 0 16px !important; /* 左右边距 */ + height: 45px !important; /* 确保输入框内部高度 */ + display: flex !important; + align-items: center !important; /* 垂直居中 */ +} + +:deep(.n-input .n-input__placeholder) { + line-height: 45px !important; /* 占位符使用相同高度 */ + display: flex !important; + align-items: center !important; /* 占位符也垂直居中 */ + top: 0 !important; /* 重置顶部位置 */ + left: 16px !important; /* 与输入文字对齐 */ +} + +/* 确保输入框外部容器高度正确 */ +:deep(.n-input) { + height: 45px !important; /* 外部容器高度 */ +} + +:deep(.n-input__input) { + height: 45px !important; /* 输入区域高度 */ + min-height: 45px !important; +} + /* 表单项间距调整 */ :deep(.n-form-item) { - margin-bottom: 16px; /* 表单项之间16px间距 */ + margin-bottom: 8px; /* 进一步减少表单项之间的间距 */ } :deep(.n-form-item-label) { - margin-bottom: 16px; /* 标签和输入框之间16px间距 */ + margin-bottom: 8px; /* 进一步减少标签和输入框之间的间距 */ +} + +/* 减少表单项内部的默认间距 */ +:deep(.n-form-item-blank) { + min-height: auto !important; + padding: 0 !important; +} + +/* 减少表单项的整体高度 */ +:deep(.n-form-item__feedback-wrapper) { + min-height: auto !important; + margin-top: 4px !important; } /* 密码表单项特殊间距 */ :deep(.n-form-item:nth-child(2)) { - margin-top: -12px; /* 减少密码项与上方的距离 */ + margin-top: -6px; /* 减少密码项与上方的距离 */ +} + +/* 邀请码表单项间距（注册模式下的第二个表单项） */ +:deep(.n-form-item:nth-child(2)[path="inviteCode"]) { + margin-top: -6px; /* 减少邀请码与学号的距离 */ +} + +/* 进一步减少所有表单项的内部间距 */ +:deep(.n-form-item-label__text) { + margin-bottom: 0 !important; } @@ -656,6 +756,21 @@ const handleSubmit = async () => { margin-left: 4px; } +/* 密码提示样式 */ +.password-hint { + margin-top: -24px; /* 与form-options相同的位置 */ + margin-bottom: 20px; + width: 400px; + height: 28px; + font-family: AppleSystemUIFont; + font-size: 16px; + color: #999999; + line-height: 28px; + text-align: left; + font-style: normal; + text-transform: none; +} + /* 响应式设计 */ @media (max-width: 1400px) { .login-page { @@ -701,7 +816,7 @@ const handleSubmit = async () => { .user-type-tabs { justify-content: center; - gap: 32px; /* 中等屏幕间距 */ + gap: 50px; /* 中等屏幕间距 */ } .type-tab { @@ -736,7 +851,7 @@ const handleSubmit = async () => { .user-type-tabs { margin-bottom: 30px; - gap: 28px; /* 小屏幕间距 */ + gap: 40px; /* 小屏幕间距 */ } .type-tab { @@ -747,7 +862,7 @@ const handleSubmit = async () => { } .type-tab.active::after { - width: 30px; + width: 60px; /* 中等屏幕下划线宽度 */ height: 2px; } } @@ -784,7 +899,7 @@ const handleSubmit = async () => { } .type-tab.active::after { - width: 25px; + width: 50px; /* 小屏幕下划线宽度 */ height: 2px; } }