登录页样式修改

src/views/login/index.vue

 <template>
   <div class="login-container">
-    <div class="login-header">葛洲坝集团交通投资有限公司投资决策分析系统</div>
     <div class="login-form-wrapper">
-      <div class="company-logo"></div>
+      <div class="left">
+        <div class="login-title">葛洲坝集团交通投资有限公司</div>
+        <div class="login-title">投资决策分析系统</div>
+        <div class="logo-wrapper">
+          <img
+            src="@/assets/images/logo_right.png"
+            alt="中国能建"
+            class="logo"
+          />
+          <img
+            src="@/assets/images/logo_left.png"
+            alt="中国能建"
+            class="logo"
+          />
+        </div>
+      </div>
+
+      <!-- 右侧表单区域（已修改为截图样式） -->
+      <div class="login-form">
+        <div class="form-head">
+          <h1 class="greeting">您好！</h1>
+          <p class="sub-title">欢迎登录投资决策分析系统</p>
+        </div>
         <el-form
           ref="loginFormRef"
           :model="loginForm"
           :rules="loginRules"
-        label-width="70px"
-        class="login-form"
-        labelPosition="top"
+          label-width="0px"
           @keydown.enter="handleLogin"
         >
-        <el-form-item label="手机号" prop="mobile">
+          <el-form-item prop="account">
             <el-input
               :prefix-icon="User"
-            v-model="loginForm.mobile"
-            placeholder="请输入手机号"
-            prefix-icon="el-icon-user"
+              v-model="loginForm.account"
+              placeholder="账号"
+              size="large"
             ></el-input>
           </el-form-item>
-        <el-form-item label="密码" prop="password">
+          <el-form-item prop="password">
             <el-input
-            prefix-icon="Lock"
+              :prefix-icon="Lock"
               v-model="loginForm.password"
               type="password"
               placeholder="请输入密码"
               show-password
+              size="large"
             ></el-input>
           </el-form-item>
           <el-form-item>
@@ -35,6 +55,7 @@
               class="login-btn"
               :loading="loading"
               @click="handleLogin"
+              size="large"
             >
               登录
             </el-button>
@@ -42,6 +63,7 @@
         </el-form>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -57,15 +79,15 @@ const router = useRouter();
 const loginFormRef = ref();
 const loading = ref(false);
 
-// 登录表单数据
+// 登录表单数据（将mobile改为account）
 const loginForm = ref({
-  mobile: "",
+  account: "",
   password: "",
 });
 
 // 表单验证规则
 const loginRules = ref({
-  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
   password: [{ required: true, message: "请输入密码", trigger: "blur" }],
 });
 
@@ -77,7 +99,7 @@ const handleLogin = async () => {
         url: "/api/user/login",
         data: {
           encryptLogStr: CryptoJS.AES.encrypt(
-            `${loginForm.value.mobile},${loginForm.value.password}`,
+            `${loginForm.value.account},${loginForm.value.password}`,
             "GFG5w5AP0Ja2rNaa",
           ).toString(),
         },
@@ -99,130 +121,122 @@ const handleLogin = async () => {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  padding-top: 15px;
-}
-
-.login-header {
-  color: #fff;
-  font-size: 42px;
-  font-weight: bold;
-  padding-left: 20px;
-  margin: 0 20px;
-  border-radius: 5px;
   display: flex;
-  justify-content: left;
   align-items: center;
-  height: 60px;
-  line-height: 60px;
-  background: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0.3),
-    rgba(0, 0, 0, 0.6),
-    rgba(0, 0, 0, 0.3)
-  );
+  justify-content: center;
 }
 
 .login-form-wrapper {
-  background-color: rgba(0, 0, 0, 0.8);
-  position: absolute;
-  top: 50%;
-  right: 1%;
-  transform: translateY(-50%);
-  padding: 15px;
+  display: flex;
+  height: 596px;
+  width: 1200px;
+  margin: 0 auto;
   box-sizing: border-box;
-  width: 375px;
-  height: 350px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
-  :deep(.el-form-item) {
-    margin-bottom: 16px;
-    .el-form-item__content {
-      .el-input {
-        height: 48px;
-        border-radius: 4px;
-        .el-input__wrapper {
-          background: rgba(255, 255, 255, 0.9);
-        }
-        .el-input__inner {
-          color: #333;
-        }
-      }
-      .el-form-item__label {
+  overflow: hidden;
+
+  // 左侧区域样式
+  .left {
+    width: 600px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(20px);
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    padding: 160px 40px 0;
+
+    .login-title {
+      font-size: 36px;
+      font-weight: 500;
       color: #fff;
+      text-align: center;
+      line-height: 1.5;
+      margin: 8px 0;
     }
+
+    .logo-wrapper {
+      display: flex;
+      justify-content: center;
+      margin-top: 30px;
+
+      .logo {
+        height: 40px;
       }
     }
-  :deep(.el-form-item__label) {
-    color: #fff;
   }
-}
 
-.company-logo {
-  width: 100%;
-  height: 45px;
+  // 右侧表单样式
+  .login-form {
+    background-color: #fff;
+
+    width: 600px;
+    padding: 104px 140px 0;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
-  align-items: center;
-  margin-bottom: 30px;
-  background-image: url(/src/assets/images/logo.png);
-  background-size: 100% 80%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
 
-.login-form {
+    .form-head {
+      margin-bottom: 40px;
+
+      .greeting {
+        font-size: 48px;
+        font-weight: 500;
+        color: #1d2129;
+        margin: 0 0 8px 0;
+        line-height: 1.2;
+      }
+
+      .sub-title {
+        font-size: 18px;
+        color: #86909c;
+        margin: 0;
+        line-height: 1.4;
+      }
+    }
+
     .login-btn {
       width: 100%;
-    height: 30px;
+      height: 36px;
       border-radius: 4px;
       background-color: #1890ff;
-    margin-top: 18px;
+      margin-top: 16px;
+      font-size: 18px;
     }
-  .forgot-password {
-    color: #fff;
-    float: right;
-    margin-top: 10px;
   }
 }
 
-.captcha-image {
-  position: absolute;
-  right: 0;
-  top: 0;
-  cursor: pointer;
-  img {
-    width: 120px;
-    height: 40px;
+// 表单通用样式
+:deep(.el-form-item) {
+  margin-bottom: 24px;
+
+  .el-input__wrapper {
+    background-color: #f5f7fa;
+    box-shadow: none;
+    padding: 1px 16px;
     border-radius: 4px;
   }
-}
 
-:deep(.el-form-item__content) {
-  position: relative;
-  &.el-form-item__content--with-captcha {
-    padding-right: 130px;
+  .el-input__inner {
+    font-size: 16px;
+    color: #1d2129;
   }
-}
 
-:deep(.el-input__inner) {
-  color: #333;
+  .el-input__prefix-inner {
+    color: #86909c;
+    font-size: 18px;
+  }
 }
 
-:deep(.el-input__prefix-inner) {
-  color: #909399;
-}
-.login-form {
-  :deep(.el-form-item) {
-    .el-form-item__content {
-      .el-input {
-        height: 30px;
-      }
-    }
-  }
-  :deep(.el-form-item--label-top) {
-    .el-form-item__label {
-      line-height: 15px;
-    }
+:deep(.el-button--primary) {
+  background-color: #1890ff;
+  border-color: #1890ff;
+
+  &:hover,
+  &:focus {
+    background-color: #40a9ff;
+    border-color: #40a9ff;
   }
 }
 </style>