登录回滚

src/views/login/login.vue

 <template>
   <div class="login">
-    <div class="login-form1"></div>
-    <div class="login-form">
-      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
-        <div class="fy-logo">
-          <img src="../../assets/image/logo_index.png">
-        </div>
-      <h3 class="title">网络设备监控管理平台</h3>
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+<!--      <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
+      <h3 class="title">信息化管理系统</h3>
       <div class="login-form-content">
         <el-form-item prop="username">
           <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" :maxlength="30">
@@ -25,7 +21,7 @@
             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
-        <el-form-item style="margin-bottom: 20px;margin-top: 15px;">
+        <el-form-item style="width:80%;margin-bottom: 20px">
           <el-button
             class="blue-btn"
             :loading="loading"
@@ -40,11 +36,10 @@
         <div
           class="buttons-content"
         >
-          <el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住用户名</el-checkbox>
+          <el-checkbox v-model="loginForm.rememberMe" class="rem-code">记住密码</el-checkbox>
         </div>
       </div>
     </el-form>
-    </div>
     <!--  底部  -->
     <div class="el-login-footer" />
   </div>
@@ -146,11 +141,8 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../../assets/image/bg1.png");
+  background-image: url("../../assets/image/login-background.jpg");
   background-size: cover;
-  .el-form-item--small .el-form-item__error {
-    padding-top: 8px;
-  }
 	.el-input__prefix{
 		left: 14px;
 	}
@@ -159,78 +151,52 @@ export default {
 		font-size: 16px;
 	}
 	.el-form-item {
-		margin-bottom: 30px;
+		margin-bottom: 4vh;
 	}
-  .login-form .el-input input {
-    height: 44px;
-  }
-  .login-form .login-form-content .el-form-item .el-input__inner {
-    border-radius: 6px;
-  }
-  .login-form .input-icon {
-    height: 44px;
-  }
-  .login-form .input-icon {
-    margin-left: 6px;
-    transform: scale(1.3, 1.5);
-    color: #1f6aa2;
-  }
 }
 .fy-logo{
-  // position: fixed;
-  margin: 0 auto;
-  width: 76px;
-  height: 88px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
+  position: fixed;
+  top: 20px;
+  left: 45%;
+  width: 8vw;
 }
 .title {
-  margin: 38px auto 0 auto;
+  margin: 7vh auto 7vh auto;
   text-align: center;
-  color: #fff;
-  font-size: 26px;
-}
-.login-form1 {
-  position: absolute;
-  left: 50%;
-  bottom: 50%;
-  transform: translate(-50%, 50%);
-  background: rgba(255,255,255,0.2) ;
-  border-radius: 15px;
-  width: 472px;
-  height: 585px;
+  color: black;
+  font-size: 36px;
 }
+
 .login-form {
-  position: absolute;
-  //background: rgba(255,255,255,.2);
-  left: 50%;
-  bottom: 50%;
-  transform: translate(-50%, 50%);
-  border-radius: 15px;
-  width: 472px;
-  height: 585px;
-  padding: 41px 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  border-radius: 6px;
+  background: #ffffff no-repeat;
+  background-size: 59%;
+  background-position-y: 57px;
+  width: 78vw;
+  height: 76vh;
+  padding: 25px 25px 5px 25px;
   .login-form-content{
-    margin-top: 69px;
-    width: 100%;
+    position: absolute;
+    top: 40%;
+    right: 28%;
+    width: 45%;
     display: flex;
     flex-direction: column;
     align-items: center;
     .el-form-item{
-      width: 100%;
+      width: 80%;
       .el-input__inner{
         border-radius: 4px;
       }
     }
     .blue-btn{
-      width: 100%;
+      width: 36vw;
       height: 40px;
       border-radius: 4px;
       font-size: 18px;
-      background-color: #1f6aa2;
-      border-color: #1f6aa2;
     }
   }
   .el-input {
@@ -273,32 +239,17 @@ export default {
 }
   .buttons-content{
     display: flex;
-    width: 100%;
+    width: 80%;
     justify-content: space-between;
+    padding: 0 14px;
     .rem-code span{
-      color: #fff;
+      color: $font-dark;
     }
     .el-link span{
-      color: #fff;
-    }
-    .el-checkbox__input.is-checked+.el-checkbox__label {
-      color: #fff;
+      color: $color-theme;
     }
     .rem-code span, .el-link span{
       font-size: 16px;
     }
-    .el-checkbox__input.is-checked+.el-checkbox__label {
-      // color: #333;
-    }
-    .el-checkbox .el-checkbox__inner:hover {
-      // border: 1px solid #333;
-    }
-    .el-checkbox__input.is-checked .el-checkbox__inner {
-      background-color: #fff;
-      // border-color: #333;
-    }
-    .el-checkbox__inner::after {
-      border-color: #333;
-    }
   }
 </style>