登录页提交

src/views/login/login.vue

 <template>
   <div class="login">
-    <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-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>
       <div class="login-form-content">
         <el-form-item prop="username">
           <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名" :maxlength="30">
@@ -21,7 +25,7 @@
             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
-        <el-form-item style="width:80%;margin-bottom: 20px">
+        <el-form-item style="margin-bottom: 20px;margin-top: 15px;">
           <el-button
             class="blue-btn"
             :loading="loading"
@@ -36,10 +40,11 @@
         <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>
@@ -141,8 +146,11 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../../assets/image/login-background.jpg");
+  background-image: url("../../assets/image/bg1.png");
   background-size: cover;
+  .el-form-item--small .el-form-item__error {
+    padding-top: 8px;
+  }
 	.el-input__prefix{
 		left: 14px;
 	}
@@ -151,52 +159,78 @@ export default {
 		font-size: 16px;
 	}
 	.el-form-item {
-		margin-bottom: 4vh;
+		margin-bottom: 30px;
 	}
+  .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;
-  top: 20px;
-  left: 45%;
-  width: 8vw;
+  // position: fixed;
+  margin: 0 auto;
+  width: 76px;
+  height: 88px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
 }
 .title {
-  margin: 7vh auto 7vh auto;
+  margin: 38px auto 0 auto;
   text-align: center;
-  color: black;
-  font-size: 36px;
+  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;
 }
-
 .login-form {
-  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;
+  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;
   .login-form-content{
-    position: absolute;
-    top: 40%;
-    right: 28%;
-    width: 45%;
+    margin-top: 69px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     .el-form-item{
-      width: 80%;
+      width: 100%;
       .el-input__inner{
         border-radius: 4px;
       }
     }
     .blue-btn{
-      width: 36vw;
+      width: 100%;
       height: 40px;
       border-radius: 4px;
       font-size: 18px;
+      background-color: #1f6aa2;
+      border-color: #1f6aa2;
     }
   }
   .el-input {
@@ -239,17 +273,32 @@ export default {
 }
   .buttons-content{
     display: flex;
-    width: 80%;
+    width: 100%;
     justify-content: space-between;
-    padding: 0 14px;
     .rem-code span{
-      color: $font-dark;
+      color: #fff;
     }
     .el-link span{
-      color: $color-theme;
+      color: #fff;
+    }
+    .el-checkbox__input.is-checked+.el-checkbox__label {
+      color: #fff;
     }
     .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>