fix：样式UI调整
This commit is contained in:
小张
parent
d841224536
commit
7c6c19d8f9
@ -37,7 +37,7 @@
|
||||
<!-- 登录表单 -->
|
||||
<div class="login-form">
|
||||
<div class="form-header">
|
||||
<h2>账号密码登录</h2>
|
||||
<h2>{{ isRegisterMode ? '账号注册' : '账号密码登录' }}</h2>
|
||||
</div>
|
||||
|
||||
<n-form
|
||||
@ -50,15 +50,24 @@
|
||||
<n-form-item path="studentId">
|
||||
<template #label>
|
||||
<div class="student-label-container">
|
||||
<span class="label-text">学号</span>
|
||||
<div class="input-hint-right">
|
||||
没有账号？<n-button text type="primary" size="small">立即注册</n-button>
|
||||
<span class="label-text">{{ getIdLabel() }}</span>
|
||||
<div v-if="!isRegisterMode" class="input-hint-right">
|
||||
没有账号？<n-button text type="primary" size="small" @click="isRegisterMode = true">立即注册</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<n-input
|
||||
v-model:value="formData.studentId"
|
||||
placeholder="2014195268"
|
||||
:placeholder="getIdPlaceholder()"
|
||||
class="form-input"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<!-- 邀请码输入框，仅在注册模式显示 -->
|
||||
<n-form-item v-if="isRegisterMode" path="inviteCode" label="邀请码">
|
||||
<n-input
|
||||
v-model:value="formData.inviteCode"
|
||||
placeholder="请输入邀请码"
|
||||
class="form-input"
|
||||
/>
|
||||
</n-form-item>
|
||||
@ -73,7 +82,8 @@
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<div class="form-options">
|
||||
<!-- 登录模式：显示记住我和忘记密码 -->
|
||||
<div v-if="!isRegisterMode" class="form-options">
|
||||
<n-checkbox v-model:checked="rememberMe" size="small">
|
||||
下次自动登录
|
||||
</n-checkbox>
|
||||
@ -82,6 +92,11 @@
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<!-- 注册模式：显示密码要求提示 -->
|
||||
<div v-if="isRegisterMode" class="password-hint">
|
||||
8-12位字符，需同时包含数字/字母/符号
|
||||
</div>
|
||||
|
||||
<n-form-item>
|
||||
<n-button
|
||||
type="primary"
|
||||
@ -91,14 +106,14 @@
|
||||
attr-type="submit"
|
||||
class="login-btn"
|
||||
>
|
||||
登录
|
||||
{{ isRegisterMode ? '注册' : '登录' }}
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<div class="form-footer">
|
||||
<p class="agreement-text">
|
||||
登录即同意我们的用户协议
|
||||
{{ isRegisterMode ? '登录即代表阅读并同意' : '登录即同意我们的用户协议' }}
|
||||
<n-button text type="primary" size="small">《服务协议和隐私政策》</n-button>
|
||||
</p>
|
||||
</div>
|
||||
@ -121,11 +136,13 @@ const userStore = useUserStore()
|
||||
const formRef = ref<FormInst | null>(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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user