fix：登录页面
This commit is contained in:
小张
parent
dc912c3842
commit
d841224536
@ -47,15 +47,20 @@
|
||||
size="large"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<n-form-item path="studentId" label="学号">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<n-input
|
||||
v-model:value="formData.studentId"
|
||||
placeholder="2014195268"
|
||||
class="form-input"
|
||||
/>
|
||||
<div class="input-hint">
|
||||
没有账号？<n-button text type="primary" size="small">立即注册</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="password" label="密码">
|
||||
@ -68,16 +73,14 @@
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<div class="form-options">
|
||||
<n-checkbox v-model:checked="rememberMe" size="small">
|
||||
下次自动登录
|
||||
</n-checkbox>
|
||||
<n-button text type="primary" size="small">
|
||||
忘记密码？
|
||||
</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<div class="form-options">
|
||||
<n-checkbox v-model:checked="rememberMe" size="small">
|
||||
下次自动登录
|
||||
</n-checkbox>
|
||||
<n-button text type="primary" size="small">
|
||||
忘记密码？
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<n-form-item>
|
||||
<n-button
|
||||
@ -370,59 +373,255 @@ const handleSubmit = async () => {
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user