style(login): 优化登录页面样式和布局

- 调整了登录表单的样式，增加了标签和重新排版
-优化了输入框的样式，移除了不必要的背景和边框
- 添加了登录页面的底部提示信息
- 调整了登录表单在页面中的位置

src/views/app/login/index.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="login-container">
+    <div class="login-form" style="padding: 39px 26px;">
       <el-form
         ref="loginForm"
         :model="loginForm"
         :rules="loginRules"
-      class="login-form"
         auto-complete="on"
-      label-position="left"
       >
         <div class="title-container flex">
           <img :src="xing" alt="" />
           <h3 class="title">欢迎登录</h3>
         </div>
 
-      <el-form-item prop="userName">
+        <el-form-item prop="userName" class="login-input" label="账号ID">
           <!--        <span class="svg-container">-->
           <!--          <svg-icon icon-class="user" />-->
           <!--        </span>-->
@@ -28,7 +27,7 @@
           />
         </el-form-item>
 
-      <el-form-item prop="password">
+        <el-form-item prop="password" class="login-input">
           <!--        <span class="svg-container">-->
           <!--          <svg-icon icon-class="password" />-->
           <!--        </span>-->
@@ -55,7 +54,8 @@
             <!--          />-->
           </span>
         </el-form-item>
-
+      </el-form>
+      <div>
         <el-button
           :loading="loading"
           type="primary"
@@ -64,7 +64,13 @@
           @click.native.prevent="handleLogin"
           >登录 <i class="iconfont icon-chuansuoyou"></i
         ></el-button>
-    </el-form>
+      </div>
+    </div>
+
+    <div class="tip">
+      <!--      <p>版权所有© 天津易商数科科技股份有限公司2025</p>-->
+      <!--      <p>京公网安备 ICP许可证号：津ICP备14004859号-4</p>-->
+    </div>
   </div>
 </template>
 
@@ -189,43 +195,64 @@ $cursor: #fff;
 .login-container {
   background-image: url('../../../../src/assets/images/login.png');
   background-size: cover;
-  //background-size: 100% 100%;
+  background-position: center;
-  .el-input {
+  & .tip {
-    display: inline-block;
+    position: fixed;
-    height: 47px;
+    bottom: 20px;
-    width: 85%;
+    width: 100%;
+    text-align: center;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 13px;
+    color: #3f4c75;
+    line-height: 22px;
+    font-style: normal;
+  }
+}
 
-    input {
+.login-input {
-      background: transparent !important;
+  position: relative;
-      border: 0px;
+  border: 1px solid #eaecf5;
-      -webkit-appearance: none;
+  border-radius: 8px;
-      padding: 12px 5px 12px 15px;
+
-      color: #333;
+  & .el-form-item__label {
-      height: 40px;
+    position: absolute;
-      caret-color: #4f47f5;
+    top: -5px;
+    font-size: 12px;
+    z-index: 2;
+    left: 0;
+    font-weight: normal;
+    background: #f5fbff;
+    margin: 0 5px 0 10px;
+    padding: 0 5px;
+    line-height: 1;
+    &:before {
+      content: '';
+      display: none;
+    }
+  }
+
+  & .el-input {
+    & input {
+      // 清除 input 自动填充背景色
+      background-color: transparent;
+      color: #000;
+      border: none;
+      outline: none;
+
+      &:-webkit-autofill {
+        transition: background-color 5000s ease-in-out 0s;
+      }
 
       &:focus {
-        //border-color: #4f47f5 !important;
+        border: 1px solid #4f47f5;
-        border-color: #4f47f5;
-        background-color: transparent;
       }
     }
-    &:-webkit-autofill {
-      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-      box-shadow: 0 0 0px 1000px transparent inset !important;
-    }
   }
 
-  .el-form-item {
+  // 添加 :focus-within 伪类来改变 el-form-item__label 的颜色
-    border: 1px solid rgba(0, 0, 0, 0.1);
+  &:focus-within .el-form-item__label {
-    background: rgba(0, 0, 0, 0.03);
+    color: #4f47f5;
-    border-radius: 5px;
-    color: #454545;
-
-    &:focus-within {
-      border-color: #4f47f5 !important;
-      border-width: 1px;
-    }
   }
 }
 </style>
@@ -241,16 +268,21 @@ $light_gray: #eee;
   background-color: #f0f4fa;
   overflow: hidden;
 
-  .login-form {
+  & .login-form {
-    background-color: rgba(255, 255, 255, 0.8);
+    border: 2px solid #fff;
+
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.93) 0%,
+      rgba(235, 246, 255, 0.82) 100%
+    );
     width: 427px;
-    padding: 39px 26px;
     margin: 0 auto;
     overflow: hidden;
-    position: fixed;
+    top: 15vh;
-    bottom: 23vh;
+    right: 25vh;
-    right: 14vw;
     border-radius: 8px;
+    position: fixed;
   }
 
   .tips {
@@ -295,58 +327,4 @@ $light_gray: #eee;
     user-select: none;
   }
 }
-input -internal-autofill-selected {
-  background-color: transparent !important;
-}
-/deep/ .el-form-item__content {
-  height: 40px;
-  line-height: 40px;
-  background-color: #fff;
-  border-radius: 8px;
-}
-/deep/ .el-form-item__inner {
-  background-color: transparent !important;
-  color: #000;
-}
-.el-input .el-input__inner {
-  background-color: transparent !important;
-  &:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-    box-shadow: 0 0 0px 1000px transparent inset !important;
-  }
-}
-.el-input .el-input__inner:hover,
-.el-select .el-input__inner:hover,
-.el-range-editor .el-input__inner:hover {
-  background-color: transparent !important;
-  color: #000;
-}
-.el-input .el-input__inner:hover,
-.el-select .el-input__inner:hover,
-.el-range-editor .el-input__inner:hover {
-  color: #4f47f5;
-}
-/deep/ .el-input__inner {
-  background-color: transparent !important;
-}
-// 在全局样式或组件样式中添加以下规则
-.el-input input:-webkit-autofill,
-.el-input input:-webkit-autofill:hover,
-.el-input input:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-  box-shadow: 0 0 0px 1000px transparent inset !important;
-  background-color: transparent !important;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-// 如果使用scoped样式需要穿透
-::v-deep {
-  .el-input__inner {
-    &:-webkit-autofill {
-      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-      box-shadow: 0 0 0px 1000px transparent inset !important;
-      background-color: transparent !important;
-    }
-  }
-}
 </style>