refactor: 重构登录页面布局样式

src/views/login/index.vue

@@ -1,106 +1,112 @@
 <template>
-  <div
-    :class="[
-      'login-wrapper',
-      ['', 'login-form-right', 'login-form-left'][direction]
-    ]"
-  >
-    <!-- 左侧标题区域 -->
-    <div class="login-header">
-      <h1 class="login-title">
-        工业互联网<span class="highlight">平台</span>
-      </h1>
-      <p class="login-subtitle">让工业更智能,让生产更可信,让运营更高效</p>
-    </div>
+  <div class="login-wrapper">
+    <!-- 登录卡片 - 左右一体 -->
+    <div class="login-card">
+      <!-- 左侧蓝色插画区域 -->
+      <div class="login-card-left">
+        <div class="login-illustration"></div>
+      </div>
 
-    <!-- 登录表单 -->
-    <el-form
-      ref="form"
-      size="large"
-      :model="form"
-      :rules="rules"
-      class="login-form"
-      @keyup.enter.native="submit"
-    >
-      <el-popover width="150" trigger="hover">
-        <div>
-          <img style="width: 100%" :src="qrcodeUrl" alt="" srcset="" />
-          <div style="text-align: center">浏览器扫一扫下载</div>
-        </div>
-        <div slot="reference" class="switch-btn"></div>
-      </el-popover>
-
-      <h4 class="form-title">欢迎登录</h4>
-      <el-form-item prop="loginName">
-        <el-input
-          clearable
-          v-model="form.loginName"
-          prefix-icon="el-icon-user"
-          placeholder="请输入登录账号"
-          class="login-input"
-        />
-      </el-form-item>
-      <el-form-item prop="loginPwd">
-        <el-input
-          show-password
-          v-model="form.loginPwd"
-          prefix-icon="el-icon-lock"
-          placeholder="请输入登录密码"
-          class="login-input"
-        />
-      </el-form-item>
-      <el-form-item prop="captcha">
-        <div class="login-input-group">
-          <el-input
-            clearable
-            v-model="form.captcha"
-            prefix-icon="el-icon-_vercode"
-            placeholder="请输入验证码"
-            class="login-input"
-          />
-          <img
-            alt=""
-            :src="captcha"
-            class="login-captcha"
-            @click="changeCaptcha"
-          />
-        </div>
-      </el-form-item>
-      <div class="el-form-item">
-        <el-button
+      <!-- 右侧表单区域 -->
+      <div class="login-card-right">
+        <el-form
+          ref="form"
           size="large"
-          type="primary"
-          class="login-btn"
-          :loading="loading"
-          @click="submit"
+          :model="form"
+          :rules="rules"
+          class="login-form"
+          @keyup.enter.native="submit"
         >
-          {{ loading ? $t('login.loading') : '登 录' }}
-        </el-button>
+          <!-- 二维码按钮 -->
+          <el-popover width="150" trigger="hover">
+            <div>
+              <img style="width: 100%" :src="qrcodeUrl" alt="" srcset="" />
+              <div style="text-align: center">浏览器扫一扫下载</div>
+            </div>
+            <div slot="reference" class="switch-btn"></div>
+          </el-popover>
+
+          <!-- 标题 -->
+          <div class="form-header">
+            <h1 class="form-title">
+              <span class="title-dark">工业互联网</span><span class="title-light">平台</span>
+            </h1>
+          </div>
+
+          <!-- 账号输入 -->
+          <el-form-item prop="loginName">
+            <div class="input-wrapper">
+              <i class="el-icon-user input-icon"></i>
+              <el-input
+                clearable
+                v-model="form.loginName"
+                placeholder="账号"
+                class="login-input"
+              />
+            </div>
+          </el-form-item>
+
+          <!-- 密码输入 -->
+          <el-form-item prop="loginPwd">
+            <div class="input-wrapper">
+              <i class="el-icon-lock input-icon"></i>
+              <el-input
+                show-password
+                v-model="form.loginPwd"
+                placeholder="密码"
+                class="login-input"
+              />
+            </div>
+          </el-form-item>
+
+          <!-- 验证码 -->
+          <el-form-item prop="captcha">
+            <div class="input-wrapper captcha-wrapper">
+              <i class="el-icon-first-aid-kit input-icon"></i>
+              <el-input
+                clearable
+                v-model="form.captcha"
+                placeholder="验证码"
+                class="login-input"
+              />
+              <img
+                alt=""
+                :src="captcha"
+                class="login-captcha"
+                @click="changeCaptcha"
+              />
+            </div>
+          </el-form-item>
+
+          <!-- 记住密码 -->
+          <!-- <div class="remember-wrapper">
+            <el-checkbox v-model="form.remember" class="remember-checkbox">
+              记住密码
+            </el-checkbox>
+          </div> -->
+
+          <!-- 登录按钮 -->
+          <el-form-item>
+            <el-button
+              size="large"
+              type="primary"
+              class="login-btn"
+              :loading="loading"
+              @click="submit"
+            >
+              {{ loading ? $t('login.loading') : '登录' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
       </div>
-    </el-form>
-
-    <div class="login-copyright">
-      <!-- copyright © 2022 eleadmin.com all rights reserved. -->
     </div>
 
     <!-- 多语言切换 -->
-    <div style="position: absolute; right: 30px; top: 20px">
+    <div class="lang-switch">
       <i18n-icon
-        :icon-style="{ fontSize: '22px', color: '#fff', cursor: 'pointer' }"
+        :icon-style="{ fontSize: '20px', color: '#fff', cursor: 'pointer' }"
       />
     </div>
-
-    <!-- 实际项目去掉这段 -->
-    <div
-      class="hidden-xs-only"
-      style="position: absolute; right: 30px; bottom: 20px; z-index: 9"
-    >
-      <el-radio-group v-model="direction" size="mini">
-        <el-radio-button label="2">居左</el-radio-button>
-        <el-radio-button label="0">居中</el-radio-button>
-        <el-radio-button label="1">居右</el-radio-button>
-      </el-radio-group>
-    </div>
   </div>
 </template>
 
@@ -258,7 +264,7 @@
               // await this.$store.dispatch('paramsSetData/setParamsDataInfo');
               this.goHome();
             })
-            .catch((e) => {
+            .catch(() => {
               this.changeCaptcha();
               this.loading = false;
               // this.$message.error(e.message);
@@ -279,7 +285,7 @@
             this.captcha = URL.createObjectURL(data.data);
             this.$refs?.form?.clearValidate();
           })
-          .catch((e) => {
+          .catch(() => {
             // this.$message.error(e.message);
           });
       },
@@ -309,168 +315,185 @@
 </script>
 
 <style lang="scss" scoped>
-  .switch-btn {
-    background: url(@/assets/qr-code-sprites.png) 0 0 / 40px auto no-repeat;
-    cursor: pointer;
-    height: 40px;
-    left: 8px;
-    position: absolute;
-    top: 8px;
-    width: 40px;
-    z-index: 1;
+  .login-wrapper {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image: url('@/assets/bg-login.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
   }
 
-  .switch-btn:hover {
-    background-position: 0 -40px;
+  /* 登录卡片 - 左右一体 */
+  .login-card {
+    display: flex;
+    width: 1000px;
+    height: 500px;
+    background: #ffffff;
+    border-radius: 4px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
   }
 
-  /* 背景 */
-  .login-wrapper {
-    padding: 50px 20px;
-    position: relative;
-    box-sizing: border-box;
-    background-image: url('@/assets/bg-login.png');
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center bottom;
-    min-height: 100vh;
+  /* 左侧插画区域 */
+  .login-card-left {
+    width: 50%;
+    background: linear-gradient(135deg, #1e5bb5 0%, #2c7ad6 50%, #3d8deb 100%);
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
 
-    &:before {
-      content: '';
-      background: linear-gradient(180deg, rgba(135, 180, 255, 0.3) 0%, rgba(200, 220, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+    .login-illustration {
+      width: 100%;
+      height: 100%;
+      background-image: url('@/assets/bg-login-left.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
     }
   }
 
-  /* 头部标题区域 */
-  .login-header {
-    position: relative;
-    z-index: 2;
-    text-align: center;
-    margin-top: 8vh;
-    margin-bottom: 30px;
+  /* 右侧表单区域 */
+  .login-card-right {
+    width: 50%;
+    padding: 45px 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: #ffffff;
+    box-sizing: border-box;
   }
 
-  .login-title {
-    font-size: 42px;
-    font-weight: 600;
-    color: #1a3a5c;
-    margin: 0 0 12px 0;
-    letter-spacing: 4px;
+  /* 登录表单 */
+  .login-form {
+    width: 100%;
+    position: relative;
+
+    /* 二维码按钮 */
+    .switch-btn {
+      background: url(@/assets/qr-code-sprites.png) 0 0 / 36px auto no-repeat;
+      cursor: pointer;
+      height: 36px;
+      width: 36px;
+      position: absolute;
+      right: -10px;
+      top: -65px;
+      z-index: 10;
 
-    .highlight {
-      color: #409eff;
-      font-weight: 700;
+      &:hover {
+        background-position: 0 -36px;
+      }
     }
   }
 
-  .login-subtitle {
-    font-size: 16px;
-    color: #4a6a8a;
-    margin: 0;
-    letter-spacing: 2px;
+  /* 表单标题 */
+  .form-header {
+    margin-bottom: 35px;
+
+    .form-title {
+      font-size: 28px;
+      font-weight: 600;
+      margin: 0;
+      letter-spacing: 2px;
+
+      .title-dark {
+        color: #1a3a5c;
+      }
+
+      .title-light {
+        color: #409eff;
+      }
+    }
   }
 
-  /* 卡片 */
-  .login-form {
-    margin: 0 auto;
-    width: 400px;
-    max-width: 100%;
-    padding: 35px 40px;
+  /* 输入框包装器 */
+  .input-wrapper {
     position: relative;
-    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 8px 32px rgba(31, 100, 200, 0.15);
-    box-sizing: border-box;
-    border-radius: 12px;
-    z-index: 2;
-    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
 
-    .form-title {
-      text-align: center;
-      margin: 0 0 30px 0;
-      font-size: 20px;
-      font-weight: 500;
-      color: #303133;
+    .input-icon {
+      position: absolute;
+      left: 12px;
+      color: #909399;
+      font-size: 16px;
+      z-index: 1;
     }
 
-    & > .el-form-item {
-      margin-bottom: 22px;
+    &.captcha-wrapper {
+      .el-input {
+        flex: 1;
+      }
     }
   }
 
   /* 输入框样式 */
   .login-input {
+    width: 100%;
+
     :deep(.el-input__inner) {
-      border-radius: 6px;
       height: 44px;
       line-height: 44px;
-      padding-left: 40px;
+      padding-left: 38px;
+      border-radius: 4px;
       border: 1px solid #dcdfe6;
+      font-size: 14px;
       transition: all 0.3s;
 
+      &::placeholder {
+        color: #c0c4cc;
+      }
+
       &:focus {
         border-color: #409eff;
-        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
       }
     }
 
-    :deep(.el-input__prefix) {
-      left: 12px;
-      color: #909399;
-      font-size: 16px;
-    }
-  }
-
-  .login-form-right .login-form {
-    margin: 0 15% 0 auto;
-  }
-
-  .login-form-left .login-form {
-    margin: 0 auto 0 15%;
-  }
-
-  /* 验证码 */
-  .login-input-group {
-    display: flex;
-    align-items: center;
-
-    :deep(.el-input) {
-      flex: 1;
+    :deep(.el-input__suffix) {
+      right: 10px;
     }
   }
 
+  /* 验证码图片 */
   .login-captcha {
     height: 44px;
-    width: 110px;
-    margin-left: 12px;
-    border-radius: 6px;
+    width: 100px;
+    margin-left: 10px;
+    border-radius: 4px;
     border: 1px solid #dcdfe6;
-    text-align: center;
     cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    flex-shrink: 0;
 
     &:hover {
       opacity: 0.85;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
   }
 
+  /* 记住密码 */
+  .remember-wrapper {
+    margin-bottom: 20px;
+
+    .remember-checkbox {
+      :deep(.el-checkbox__label) {
+        font-size: 13px;
+        color: #606266;
+        padding-left: 6px;
+      }
+    }
+  }
+
+  /* 登录按钮 */
   .login-btn {
-    display: block;
     width: 100%;
     height: 46px;
     font-size: 16px;
     font-weight: 500;
-    border-radius: 6px;
-    margin-top: 8px;
+    border-radius: 4px;
     background: linear-gradient(135deg, #409eff 0%, #2c8cf0 100%);
     border: none;
     box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
@@ -487,78 +510,46 @@
     }
   }
 
-  /* 第三方登录图标 */
-  .login-oauth-icon {
-    color: #fff;
-    padding: 5px;
-    margin: 0 10px;
-    font-size: 18px;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  /* 底部版权 */
-  .login-copyright {
-    color: #eee;
-    padding-top: 20px;
-    text-align: center;
-    position: relative;
-    z-index: 1;
+  /* 多语言切换 */
+  .lang-switch {
+    position: absolute;
+    right: 30px;
+    top: 20px;
+    z-index: 10;
   }
 
   /* 响应式 */
-  @media screen and (min-height: 550px) {
-    .login-form {
-      margin-top: 0;
-    }
-
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: auto;
-      right: 15%;
-      transform: translateX(0);
-      margin: 0 15% 0 auto;
+  @media screen and (max-width: 860px) {
+    .login-card {
+      width: 400px;
+      height: auto;
+      flex-direction: column;
     }
 
-    .login-form-left .login-form {
-      right: auto;
-      left: 15%;
-      margin: 0 auto 0 15%;
+    .login-card-left {
+      display: none;
     }
 
-    .login-copyright {
-      position: absolute;
-      bottom: 20px;
-      right: 0;
-      left: 0;
+    .login-card-right {
+      width: 100%;
+      padding: 40px 40px;
     }
   }
 
-  @media screen and (max-width: 768px) {
-    .login-header {
-      margin-top: 5vh;
-    }
-
-    .login-title {
-      font-size: 28px;
+  @media screen and (max-width: 480px) {
+    .login-card {
+      width: 90%;
+      max-width: 360px;
     }
 
-    .login-subtitle {
-      font-size: 14px;
+    .login-card-right {
+      padding: 35px 25px;
     }
 
     .login-form {
-      width: 100%;
-      max-width: 360px;
-      padding: 25px 25px;
-    }
-
-    .login-form-right .login-form,
-    .login-form-left .login-form {
-      left: 50%;
-      right: auto;
-      transform: translateX(-50%);
-      margin: 0 auto;
+      .form-title {
+        font-size: 22px;
+      }
     }
   }
 </style>