fix：登录页面

src/views/Login.vue

@@ -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">
-            <div class="form-options">
+            <n-checkbox v-model:checked="rememberMe" size="small">
-              <n-checkbox v-model:checked="rememberMe" size="small">
+              下次自动登录
-                下次自动登录
+            </n-checkbox>
-              </n-checkbox>
+            <n-button text type="primary" size="small">
-              <n-button text type="primary" size="small">
+              忘记密码？
-                忘记密码？
+            </n-button>
-              </n-button>
+          </div>
-            </div>
-          </n-form-item>
 
           <n-form-item>
             <n-button
@@ -370,59 +373,255 @@ const handleSubmit = async () => {
 }
 
 :deep(.n-form-item-label) {
-  font-weight: 500;
+  width: 48px;
-  color: #333;
+  height: 32px;
-  font-size: 14px;
+  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; /* 添加轻微圆角 */
+  width: 520px;
-  border: 1px solid #e0e0e0;
+  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;
+  border: none !important; /* 聚焦时也无边框 */
-  box-shadow: none; /* 移除聚焦阴影 */
+  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;
+  height: 28px;
-  color: #999;
+  font-family: PingFangSC, PingFang SC;
-  text-align: right;
+  font-weight: 400;
-  margin-top: 4px;
+  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;
+  font-family: PingFangSC, PingFang SC;
-  color: #666;
+  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-family: AppleSystemUIFont;
-  font-size: 16px;
+  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;
+  text-align: left; /* 改为左对齐 */
-  margin-top: 32px;
+  margin-top: -25px; /* 进一步减少与登录按钮的距离 */
 }
 
 .agreement-text {
-  font-size: 12px;
+  width: 420px;
-  color: #999;
+  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;
 }
 
 /* 响应式设计 */