登录页面样式调整

acupuncture-前台/src/views/login.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="login">
+    <div class="login-left"></div>
+    <div class="login-right">
       <el-form
         ref="loginForm"
         :model="loginForm"
         :rules="loginRules"
         class="login-form"
       >
-      <h3 class="title">朱琏针灸联盟数据系统</h3>
+        <h3 class="title">
+          登录到
+          <br />
+          朱琏针灸联盟数据系统
+        </h3>
         <el-form-item prop="username">
           <el-input
             v-model="loginForm.username"
@@ -56,7 +62,7 @@
         </el-form-item>
         <el-checkbox
           v-model="loginForm.rememberMe"
-        style="margin: 0px 0px 25px 0px"
+          style="margin: 0px 0px 25px 0px; color: #fff"
           >记住密码</el-checkbox
         >
         <el-form-item style="width: 100%">
@@ -77,9 +83,6 @@
           </div>
         </el-form-item>
       </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
     </div>
   </div>
 </template>
@@ -228,19 +231,28 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("./bg.png");
   background-size: cover;
+  display: flex;
+  .login-left {
+    flex: 1.5;
+  }
+
+  .login-right {
+    flex: 1;
+  }
 }
 
 .title {
+  font-size: 26 px;
   margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+  text-align: left;
+  color: #fff;
 }
 
 .login-form {
   border-radius: 6px;
-  background: #ffffff;
+  // background: #ffffff;
   width: 400px;
   padding: 25px 25px 5px 25px;