登录页修改

src/views/login.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="login">
     <div class="login-container">
-      <div class="login-header">
-        <h1 class="main-title">
-          <img src="../assets/logo/logo.png" alt="logo" class="logo"/>
-          <span>智能投标系统</span>
-        </h1>
-        <h2 class="sub-title">欢迎登录 welcome to login in</h2>
-      </div>
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+        <div class="login-header">
+          <h1 class="main-title">
+            <img src="../assets/logo/logo.png" alt="logo" class="logo"/>
+            <span>智能投标系统</span>
+          </h1>
+          <h2 class="sub-title">欢迎登录 <span style="color: #666;font-size: 15px;">welcome to login in</span></h2>
+        </div>
         <el-form-item prop="username">
           <el-input
             v-model="loginForm.username"
@@ -47,7 +47,6 @@
         </el-form-item>
         <div class="form-options">
           <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
-          <a href="#" class="forgot-password">忘记密码？</a>
         </div>
         <el-form-item style="width:100%;">
           <el-button
@@ -169,7 +168,7 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   height: 100vh;
   background: #fff;
@@ -178,6 +177,7 @@ export default {
   background-position: center center;
   // background-size: contain;
   position: relative;
+  padding-right: 15%;
   
   &::before {
     content: '';
@@ -199,20 +199,23 @@ export default {
 
 .login-header {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 30px;
   
   .main-title {
-    font-size: 32px;
-    font-weight: 700;
-    color: #060F2E;
-    margin-bottom: 12px;
-    letter-spacing: 1px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #1E6BFF;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
   }
   
   .sub-title {
-    font-size: 18px;
-    color: #666;
-    font-weight: 500;
+    font-size: 24px;
+    color: #333333;
+    font-weight: bold;
     margin: 0;
   }
 }
@@ -370,7 +373,9 @@ export default {
 // 响应式优化
 @media (max-width: 768px) {
   .login {
+    justify-content: center;
     padding: 20px;
+    padding-right: 20px;
   }
   
   .login-container {
@@ -387,7 +392,7 @@ export default {
     }
     
     .sub-title {
-      font-size: 16px;
+      font-size: 20px;
     }
   }
 }
@@ -403,7 +408,7 @@ export default {
     }
     
     .sub-title {
-      font-size: 15px;
+      font-size: 18px;
     }
   }
 }