登录页面样式调整

src/styles/themeA/login.scss

@@ -5,12 +5,37 @@
   height: 100%;
   background-image: url("../../assets/image/login-background.jpg");
   background-size: cover;
-  .title {
-    margin: 7vh auto 7vh auto;
-    text-align: center;
-    color: black;
-    font-size: 36px;
+  .login_logoRow{
+    padding-top: 40px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    .login_form_logo{
+      width: 64px;
+      height: 64px;
+      background-image: url("../../assets/themeBImage/login_logo.png");
+    }
+  }
+  .loginTitleRow{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    .title {
+      font-size: 36px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      text-align: CENTER;
+      color: #333333;
+      line-height: 28px;
+    }
   }
+  //.title {
+  //  margin: 7vh auto 7vh auto;
+  //  text-align: center;
+  //  color: black;
+    font-size: 36px;
+  //}
   .el-input__prefix{
     left: 14px;
   }
@@ -48,6 +73,16 @@
         border-radius: 4px;
       }
     }
+    .loginCode_formItem{
+      width: 80%;
+      display: flex;
+      justify-content: space-between;
+      //align-items: center;
+      line-height: 0;
+      .el-form-item{
+        width: 400px;
+      }
+    }
     .blue-btn{
       width: 36vw;
       height: 40px;
@@ -73,10 +108,11 @@
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
+  //width: 33%;
   height: 38px;
-  float: right;
+  //float: right;
   img {
+    height: 38px;
     cursor: pointer;
     vertical-align: middle;
   }

src/styles/themeB/login.scss

@@ -3,13 +3,32 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../../assets/image/login-background.jpg");
+  background-image: url("../../assets/themeBImage/login-background.png");
   background-size: cover;
-  .title {
-    margin: 7vh auto 7vh auto;
-    text-align: center;
-    color: black;
-    font-size: 36px;
+  .login_logoRow{
+    padding-top: 40px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    .login_form_logo{
+      width: 64px;
+      height: 64px;
+      background-image: url("../../assets/themeBImage/login_logo.png");
+    }
+  }
+  .loginTitleRow{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    .title {
+      font-size: 24px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      text-align: CENTER;
+      color: #333333;
+      line-height: 28px;
+    }
   }
   .el-input__prefix{
     left: 14px;
@@ -24,41 +43,61 @@
 }
 
 .login-form {
+  width: 479px;
+  height: 540px;
+  background: rgba(255,255,255,0.90);
+  border-radius: 20px;
   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{
-    position: absolute;
-    top: 40%;
-    right: 28%;
-    width: 45%;
+    padding-top: 35px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     .el-form-item{
-      width: 80%;
+      width: 343px;
+      height: 44px;
+      background: #ffffff;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      margin-bottom: 30px!important;
       .el-input__inner{
         border-radius: 4px;
       }
     }
+    .loginCode_formItem{
+      width: 343px;
+      display: flex;
+      justify-content: space-between;
+      .el-form-item{
+        width: 200px;
+      }
+    }
+    .loginBtn_formItem{
+      margin: 10px 0 20px!important;
+    }
     .blue-btn{
-      width: 36vw;
-      height: 40px;
+      width: 343px;
+      height: 44px;
+      background: #03a487;
       border-radius: 4px;
-      font-size: 18px;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-700;
+      font-weight: 700;
+      text-align: CENTER;
+      color: #ffffff;
+      line-height: 19px;
     }
   }
   .el-input {
-    height: 38px;
+    height: 44px;
     input {
-      height: 38px;
+      height: 44px;
     }
   }
   .input-icon {
@@ -73,10 +112,9 @@
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
+  height: 44px;
   img {
+    height: 44px;
     cursor: pointer;
     vertical-align: middle;
   }
@@ -95,9 +133,8 @@
 }
 .login_buttons-content{
   display: flex;
-  width: 80%;
+  width: 343px;
   justify-content: space-between;
-  padding: 0 14px;
   .rem-code span{
     color: $font-dark;
   }

src/views/login/login.vue

 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" v-loading="vLoading">
-      <!--      <img class="fy-logo" src="../../assets/image/denglu_logo.png">-->
-      <h3 class="title">信息化管理系统</h3>
+    <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>
       <div class="login-form-content">
         <el-form-item prop="username">
           <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
@@ -20,20 +25,21 @@
             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
-        <el-form-item v-if="captchaType === 'MATH' || captchaType === 'CHAR'" prop="code">
-          <el-input
-            v-model="loginForm.code"
-            auto-complete="off"
-            placeholder="验证码"
-            style="width: 63%"
-            @keypress.enter.native="handleLogin"
-          >
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-          </el-input>
+        <div class="loginCode_formItem">
+          <el-form-item v-if="captchaType === 'MATH' || captchaType === 'CHAR'" prop="code">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="验证码"
+              @keypress.enter.native="handleLogin"
+            >
+              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            </el-input>
+          </el-form-item>
           <div class="login-code">
-            <img :src="codeUrl" @click="getCode">
+            <img class="login-codeImg" :src="codeUrl" @click="getCode">
           </div>
-        </el-form-item>
+        </div>
         <Verify
           v-if="captchaType === 'BLOCK' || captchaType === 'WORD'"
           ref="verify"
@@ -42,7 +48,7 @@
           :img-size="{ width: '330px', height: '155px' }"
           @success="capctchaCheckSuccess"
         />
-        <el-form-item style="width:80%;margin-bottom: 20px">
+        <el-form-item class="loginBtn_formItem">
           <el-button
             class="blue-btn"
             :loading="loading"