修改登录注册忘记密码样式

frontend/src/renderer/src/views/Login.vue

@@ -5,7 +5,12 @@
     <div class="login-content">
       <!-- 系统标题 -->
       <div style="margin-right: 150px;">
-        <h1 class="system-login-title">欢迎登录</h1>
+        <h1 class="system-login-title">
+          <span v-if="!isRegisterMode && !isForgotPasswordMode">欢迎登录</span>
+          <span v-if="isRegisterMode && !isForgotPasswordMode">注册</span>
+          <span v-if="isForgotPasswordMode">找回密码</span>
+          
+        </h1>
         <h1 class="system-title">平衡体态检测系统</h1>
 
         <!-- 登录页面 -->
@@ -67,9 +72,7 @@
           </el-form>
         </el-card>
       <!-- 注册页面 -->
-      <el-card v-if="isRegisterMode && !isForgotPasswordMode" class="register-card">
+      <el-card v-if="isRegisterMode && !isForgotPasswordMode" class="register-card">  
-        <div class="card-header">注册</div>
-        
         <div class="register-form">
           <div class="form-item">
             <div class="input-wrapper">
@@ -146,8 +149,6 @@
       </el-card>
       <!-- 忘记密码页面 -->
       <el-card v-if="isForgotPasswordMode" class="forgot-password-card">
-        <div class="card-header">找回密码</div>
-        
         <!-- 未显示密码时的输入表单 -->
         <div v-if="!showRetrievedPassword" class="forgot-password-form">
           <div class="form-item">
@@ -229,7 +230,7 @@ import { getBackendUrl,systemAPI } from '../services/api.js'
 const BACKEND_URL = getBackendUrl()
 const router = useRouter()
 const authStore = useAuthStore()
-
+const loginTitle =ref('欢迎登录')
 // 页面状态控制
 const isRegisterMode = ref(false)
 const isForgotPasswordMode = ref(false)
@@ -706,13 +707,14 @@ const copyPassword = async () => {
 /* 注册卡片 */
 .register-card {
   width: 482px;
-  background-color: #1D1C21;
+  background-color: transparent;
   box-sizing: border-box;
   border-width: 3px;
   border-style: solid;
-  border-color: #1D1C21;
+  border-color: transparent;
   border-radius: 5px;
-  padding: 30px 25px !important;
+  padding: 0px 0px !important;
+  box-shadow: 0 0 0  transparent;
 }
 
 /* 卡片头部标题 */
@@ -918,20 +920,13 @@ const copyPassword = async () => {
   border-color: #999;
 }
 
-.confirm-btn {
-  background-color: #266fff ;
-  border-color: #266fff ;
-  color: #fff;
-  font-weight: 500;
-}
-
 .confirm-btn:hover {
   transform: translateY(-1px);
 }
 
 /* 注册表单样式 */
 .register-form {
-  padding: 20px 0;
+  padding: 0px 0;
 }
 
 .form-item {
@@ -942,21 +937,22 @@ const copyPassword = async () => {
   position: relative;
   display: flex;
   align-items: center;
-  background: transparent;
+  height: 60px;
-  color: #fff;
+  background-color: rgba(255, 255, 255, 0.1);
-  font-size: 16px;
+  box-sizing: border-box;
-  height: 49px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 3px;
   /* background-color: #004080;
  
   border-radius: 6px; */
-  border: 1px solid rgb(67, 67, 67);
   padding: 0 15px;
   transition: all 0.2s ease;
 }
 
 .input-wrapper:focus-within {
-  border-color: #cccccc;
+  border-color: rgba(11, 148, 213, 1);
-  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
 }
 
 .input-icon {
@@ -971,7 +967,7 @@ const copyPassword = async () => {
   border: none;
   outline: none;
   color: #fff;
-  font-size: 14px;
+  font-size: 16px;
   padding: 12px 0;
 }
 
@@ -1012,9 +1008,15 @@ const copyPassword = async () => {
 }
 
 .back-btn {
-  background-color: transparent;
+  border-color: #597194;
-  border-color: #266fff;
+  background-color: #597194;
-  color: #266fff;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: 'Noto Sans SC';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
 }
 
 .back-btn:hover {
@@ -1024,9 +1026,13 @@ const copyPassword = async () => {
 }
 
 .submit-btn {
-  background-color: #266fff;
+  background-color: rgba(11, 148, 213, 1);
-  border-color: #266fff;
+  border-color: rgba(11, 148, 213, 1) !important;
-  color: #fff;
+  font-family: 'Noto Sans SC';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
 }
 
 .submit-btn:hover {
@@ -1036,17 +1042,18 @@ const copyPassword = async () => {
 /* 忘记密码页面样式 */
 .forgot-password-card {
   width: 482px;
-  background-color: #1D1C21;
+  background-color: transparent;
   box-sizing: border-box;
   border-width: 3px;
   border-style: solid;
-  border-color: #1D1C21;
+  border-color: transparent;
   border-radius: 5px;
-  padding: 30px 25px !important;
+  box-shadow: 0 0 0 transparent;
+  padding: 0px 0px !important;
 }
 
 .forgot-password-form {
-  padding: 20px 0;
+  padding: 0px 0px;
 }
 
 .forgot-input {
@@ -1127,10 +1134,13 @@ const copyPassword = async () => {
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
-  border: 1px solid;
+  background-color: rgba(11, 148, 213, 1);
-  background-color: #266fff;
+  border-color: rgba(11, 148, 213, 1) !important;
-  border-color: #266fff;
+  font-family: 'Noto Sans SC';
-  color: #fff;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
 }
 .confirm-btn:hover {
   transform: translateY(-1px);
@@ -1140,7 +1150,7 @@ const copyPassword = async () => {
   display: flex;
   align-items: center;
   width: 450px;
-    height: 60px;
+  height: 60px;
   background-color: rgba(255, 255, 255, 0.1);
   box-sizing: border-box;
   border-width: 1px;
@@ -1148,6 +1158,9 @@ const copyPassword = async () => {
   border-color: transparent;
   border-radius: 3px;
 }
+.input-box:focus-within {
+  border-color: rgba(11, 148, 213, 1);
+}
 </style>
 <style>