登录页样式调整

src/styles/themeA/login.scss

@@ -3,12 +3,32 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  background-image: url("../../assets/image/login-background.jpg");
+  width: 1920px;
+  height: 953px;
+  background-image: url("../../assets/image/login-bg.png");
   background-size: cover;
+  .el-checkbox__input.is-checked .el-checkbox__inner{
+    width: 14px;
+    height: 14px;
+    background: #214e90;
+    border-radius: 2px;
+    border-color: #214e90;
+  }
+  .el-checkbox .el-checkbox__inner:hover{
+    border: 1px solid #214e90!important;
+  }
+  .el-checkbox__input.is-focus .el-checkbox__inner{
+    border: 1px solid #214e90!important;
+  }
+  .el-checkbox__input.is-checked+.el-checkbox__label{
+    font-size: 14px;
+    font-family: Microsoft YaHei, Microsoft YaHei-400;
+    font-weight: 400;
+    color: #333333;
+  }
   .login_logoRow{
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: 50px;
+    padding-bottom: 39px;
     display: flex;
     justify-content: center;
     width: 100%;
@@ -22,7 +42,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    margin-top: 20px;
+    margin-bottom: 40px;
     .title {
       font-size: 24px;
       font-family: Microsoft YaHei, Microsoft YaHei-700;
@@ -46,7 +66,7 @@
     font-size: 16px;
   }
   .el-form-item {
-    margin-bottom: 4vh;
+    margin-bottom: 30px;
   }
 }
 
@@ -54,31 +74,23 @@
   position: absolute;
   backdrop-filter: blur(4px);
   display: inline;
-  flex-direction: column;
-  align-items: flex-end;
-  border-radius: 6px;
-  background: #ffffff no-repeat;
-  background-size: 59%;
-  background-position-y: 57px;
-  width: 650px;
-  height: 550px;
-  padding: 25px 25px 5px 25px;
+  width: 499px;
+  height: 560px;
+  background-image: url("../../assets/image/loginForm-bg.png");
+  border-radius: 20px;
   .login-form-content{
-    position: absolute;
-    top: 40%;
-    right: 28%;
-    width: 45%;
     display: flex;
     flex-direction: column;
     align-items: center;
     .el-form-item{
       width: 343px;
+      height: 44px;
       .el-input__inner{
         border-radius: 4px;
       }
     }
     .loginCode_formItem{
-      width: 21.4375rem;
+      width: 343px;
       display: flex;
       justify-content: space-between;
       //align-items: center;
@@ -86,18 +98,25 @@
       .el-form-item{
         width: 400px;
       }
+        .el-form-item__content{
+          width: 210px!important;
+        }
     }
     .blue-btn{
       width: 343px;
-      height: 40px;
+      height: 44px;
+      background: #214e90;
       border-radius: 4px;
-      font-size: 18px;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      color: #ffffff;
     }
   }
   .el-input {
-    height: 38px;
+    height: 44px;
     input {
-      height: 38px;
+      height: 44px;
     }
   }
   .input-icon {
@@ -113,10 +132,10 @@
 }
 .login-code {
   //width: 33%;
-  height: 38px;
+  height: 44px;
   //float: right;
   img {
-    height: 38px;
+    height: 44px;
     cursor: pointer;
     vertical-align: middle;
   }
@@ -138,7 +157,10 @@
   width: 343px;
   justify-content: space-between;
   .rem-code span{
-    color: $font-dark;
+    font-size: 14px!important;
+    font-family: Microsoft YaHei, Microsoft YaHei-400;
+    font-weight: 400!important;
+    color: #333333!important;
   }
   .el-link span{
     color: $color-theme;

src/views/login/login.vue

 <template>
   <div class="login">
-<!--    v-loading="vLoading"-->
-    <el-form ref="loginForm"  :model="loginForm" :rules="rules" class="login-form">
+    <el-form ref="loginForm"  v-loading="vLoading" :model="loginForm" :rules="rules" class="login-form">
       <!--      <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
       <div class="login_logoRow">
         <div class="login_form_logo" />
       </div>
       <div class="loginTitleRow">
-        <div class="title">教学资源云平台</div>
+        <div class="title">教学资源云后台管理</div>
       </div>
       <div class="login-form-content">
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+          <el-input v-model="loginForm.username" auto-complete="off" placeholder="账号">
             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
-            type="password"
             auto-complete="off"
             placeholder="密码"
             @keypress.enter.native="handleLogin"
@@ -87,10 +85,9 @@
             :loading="loading"
             size="medium"
             type="primary"
-
+            :disabled="!verify"
             @click.native.prevent="handleLogin"
           >
-<!--            :disabled="!verify"-->
             <span v-if="!loading">{{ '登 录' }}</span>
             <span v-else>登 录 中...</span>
           </el-button>