From f353be8a7d58ab4e6e0504621c7005e99bdc135c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 12 May 2025 16:15:38 +0800
Subject: [PATCH] =?UTF-8?q?layout(login):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 flex 布局实现居中对齐
-调整登录表单的位置和样式
- 优化代码结构，提高可读性
---
 src/views/app/login/index.vue | 139 ++++++++++++++++++----------------
 1 file changed, 73 insertions(+), 66 deletions(-)

diff --git a/src/views/app/login/index.vue b/src/views/app/login/index.vue
index e07e34e..5f29533 100644
--- a/src/views/app/login/index.vue
+++ b/src/views/app/login/index.vue
@@ -1,70 +1,76 @@
 <template>
-  <div class="login-container">
-    <div class="login-form" style="padding: 39px 26px;">
-      <el-form
-        ref="loginForm"
-        :model="loginForm"
-        :rules="loginRules"
-        auto-complete="on"
-      >
-        <div class="title-container flex">
-          <img :src="xing" alt="" style="width: 25px;height: 23px" />
-          <h3 class="title ml5">欢迎登录</h3>
+  <div class="login-container ">
+    <div
+      class="flex align-items-c justify-content-b"
+      style="width:100%;height: 100vh"
+    >
+      <p></p>
+      <div class="login-form" style="padding: 39px 26px;margin-right: 30vh">
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          auto-complete="on"
+        >
+          <div class="title-container flex">
+            <img :src="xing" alt="" style="width: 25px;height: 23px" />
+            <h3 class="title ml5">欢迎登录</h3>
+          </div>
+
+          <el-form-item prop="userName" class="login-input" label="账号ID">
+            <!--        <span class="svg-container">-->
+            <!--          <svg-icon icon-class="user" />-->
+            <!--        </span>-->
+            <el-input
+              ref="userName"
+              v-model="loginForm.userName"
+              placeholder="请输入用户名"
+              name="userName"
+              type="text"
+              tabindex="1"
+              auto-complete="on"
+            />
+          </el-form-item>
+
+          <el-form-item prop="password" class="login-input">
+            <!--        <span class="svg-container">-->
+            <!--          <svg-icon icon-class="password" />-->
+            <!--        </span>-->
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model="loginForm.password"
+              :type="passwordType"
+              placeholder="请输入密码"
+              name="password"
+              tabindex="2"
+              auto-complete="on"
+              @keyup.enter.native="handleLogin"
+            />
+            <span class="show-pwd" @click="showPwd">
+              <i v-if="passwordType === 'password'" class="el-icon-view"></i>
+              <i
+                v-else
+                class="iconfont icon-yanjingxianshi"
+                style="font-size: 20px"
+              ></i>
+              <!--          <svg-icon-->
+              <!--            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
+              <!--          />-->
+            </span>
+          </el-form-item>
+        </el-form>
+        <div style="height: 127px"></div>
+        <div>
+          <el-button
+            :loading="loading"
+            type="primary"
+            style="width:100%;margin-bottom: 20px;border-radius: 8px"
+            :style="buttonStyle"
+            @click.native.prevent="handleLogin"
+            >登录 <i class="iconfont icon-chuansuoyou"></i
+          ></el-button>
         </div>
-
-        <el-form-item prop="userName" class="login-input" label="账号ID">
-          <!--        <span class="svg-container">-->
-          <!--          <svg-icon icon-class="user" />-->
-          <!--        </span>-->
-          <el-input
-            ref="userName"
-            v-model="loginForm.userName"
-            placeholder="请输入用户名"
-            name="userName"
-            type="text"
-            tabindex="1"
-            auto-complete="on"
-          />
-        </el-form-item>
-
-        <el-form-item prop="password" class="login-input">
-          <!--        <span class="svg-container">-->
-          <!--          <svg-icon icon-class="password" />-->
-          <!--        </span>-->
-          <el-input
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="请输入密码"
-            name="password"
-            tabindex="2"
-            auto-complete="on"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <i v-if="passwordType === 'password'" class="el-icon-view"></i>
-            <i
-              v-else
-              class="iconfont icon-yanjingxianshi"
-              style="font-size: 20px"
-            ></i>
-            <!--          <svg-icon-->
-            <!--            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
-            <!--          />-->
-          </span>
-        </el-form-item>
-      </el-form>
-      <div style="height: 127px"></div>
-      <div>
-        <el-button
-          :loading="loading"
-          type="primary"
-          style="width:100%;margin-bottom: 20px;border-radius: 8px"
-          :style="buttonStyle"
-          @click.native.prevent="handleLogin"
-          >登录 <i class="iconfont icon-chuansuoyou"></i
-        ></el-button>
       </div>
     </div>
 
@@ -273,6 +279,7 @@ $light_gray: #eee;
   width: 100%;
   background-color: #f0f4fa;
   overflow: hidden;
+  justify-content: flex-end;
 
   & .login-form {
     border: 2px solid #fff;
@@ -288,7 +295,7 @@ $light_gray: #eee;
     top: 15vh;
     right: 25vh;
     border-radius: 8px;
-    position: fixed;
+    //position: fixed;
   }
 
   .tips {