From cf54c1756d58756cefe902f20fd183dfcadc320a Mon Sep 17 00:00:00 2001
From: qiankanghui <11284155+qian-kanghui@user.noreply.gitee.com>
Date: Thu, 2 Apr 2026 14:09:54 +0800
Subject: [PATCH] =?UTF-8?q?style(login):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除背景部分和登录表单部分的注释
- 调整登录表单位置为居中显示
- 移除工厂、用户名、密码的标签文字
- 修改输入框宽度为100%并调整样式
- 移除登录按钮的大尺寸设置
- 调整CSS样式包括字体大小、边距、圆角等
- 优化输入框和按钮的尺寸和间距
- 简化整体页面布局结构
---
 src/views/common/login.vue | 113 +++++++------------------------------
 1 file changed, 19 insertions(+), 94 deletions(-)

diff --git a/src/views/common/login.vue b/src/views/common/login.vue
index 31c655a..42613cb 100644
--- a/src/views/common/login.vue
+++ b/src/views/common/login.vue
@@ -1,21 +1,18 @@
 <template>
   <div class="site-wrapper site-page--login">
     <div style="display: flex;height: 100vh">
-      <!-- 背景部分 -->
       <div class="login-bg"></div>
-
-      <!-- 登录表单部分 -->
-      <div style="width: 35%; display: flex; justify-content: center; align-items: center;">
-        <div style="max-width: 400px; width: 100%; padding: 40px 30px; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);">
-          <div style="text-align: center;">
+      <div style="width: 35%">
+        <div style="height: 27vh;">
+          <div style="text-align: right;padding: 0px 20px">
             <img width="60%" height="72" style="object-fit: contain" src="~@/assets/img/xj.png">
           </div>
+        </div>
+        <div style="padding: 30px 130px">
           <h3 class="login-title">用户登录</h3>
           <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
             <el-form-item>
-              <div class="input-with-label">
-                <span class="input-label">工厂</span>
-              <el-select v-model="dataForm.site" style="width: 230px"
+              <el-select v-model="dataForm.site" style="width: 100%"
                          placeholder="请选择工厂">
                 <el-option
                   v-for="(item,index) in siteList"
@@ -25,33 +22,15 @@
                 >
                 </el-option>
               </el-select>
-              </div>
             </el-form-item>
-            <el-form-item prop="userName">
-              <div class="input-with-label">
-                <span class="input-label">用户名</span>
-                <el-input
-                  v-model="dataForm.userName"
-                  placeholder="请输入账号"
-                  size="large"
-                  prefix-icon="el-icon-user">
-                </el-input>
-              </div>
+            <el-form-item prop="userName" style="margin-top: 20px">
+              <el-input v-model="dataForm.userName" placeholder="帐号" size="large"></el-input>
             </el-form-item>
             <el-form-item prop="password" style="margin-top: 20px">
-              <div class="input-with-label">
-                <span class="input-label">密码</span>
-                <el-input
-                  v-model="dataForm.password"
-                  type="password"
-                  placeholder="请输入密码"
-                  size="large"
-                  prefix-icon="el-icon-lock">
-                </el-input>
-              </div>
+              <el-input v-model="dataForm.password" type="password" placeholder="密码" size="large"></el-input>
             </el-form-item>
             <el-form-item style="margin-top: 20px">
-              <el-button style="width: 100%" type="primary" @click="dataFormSubmit()" size="large">登录</el-button>
+              <el-button style="width: 100%" type="primary" @click="dataFormSubmit()">登录</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -187,87 +166,33 @@ export default {
 .site-wrapper.site-page--login {
   .login-title {
     font-size: 30px;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 20px;
-    text-align: center;
   }
-
   .login-main .el-input__inner {
     border: 1px solid #e1e5eb;
-    border-radius: 25px;
-    padding: 12px 15px;
-    font-size: 15px;
-    height: 45px;
-    width: 70%;  /* 缩短输入框长度 */
-    transition: all 0.3s ease;
-
-    &:focus {
-      border-color: #409EFF;
-      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
-    }
-  }
-
-  .el-input {
-    width: 70%;  /* 缩短输入框长度 */
-  }
-
-  .el-input__inner {
-    border: 1px solid #e1e5eb;
-    border-radius: 25px;
-    padding: 12px 15px;
+    border-radius: 8px;
+    padding: 8px 15px;
     font-size: 15px;
-    height: 45px;
+    height: 40px;
     transition: all 0.3s ease;
 
     &:focus {
       border-color: #409EFF;
-      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
     }
   }
-
-  .input-with-label {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .input-label {
-    margin-right: 15px;
-    font-size: 15px;
-    color: #606266;
-    min-width: 60px;
-    text-align: left;
-    font-weight: 500;
-  }
-
-  .el-input__prefix {
-    color: #909399;
-  }
-
   .el-button--medium {
-    margin-top: 10px;
-    padding: 10px 0;  /* 减小按钮高度 */
+    margin-top: 0px;
+    padding: 5px 11px;
     font-size: 16px;
-    border-radius: 8px;
-    background-color: #409EFF;
-    color: white;
-    transition: background-color 0.3s ease;
+    border-radius: 4px;
   }
-
-  .el-button--medium:hover {
-    background-color: #3381d2;
-  }
-
   .el-form-item {
-    margin-bottom: 20px;
+    margin-bottom: 5px;
   }
 }
-
-.login-bg {
+.login-bg{
   background-image: url(~@/assets/img/login_bg.jpg);
   background-size: cover;
-  background-position: center;
   width: 65%;
 }
 </style>