修改登陆界面

ruoyi-ui/src/views/login.vue

@@ -1,22 +1,23 @@
 <template>
   <div class="login">
+    <div class="formBox">
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
         <!--h3 class="title">{{ $t('login.title') }}</h3-->
         <lang-select class="set-language"/>
         <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.username')">
+          <el-input v-model="loginForm.username" :placeholder="$t('login.username')" auto-complete="off" type="text">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+            <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
             :placeholder="$t('login.password')"
+            auto-complete="off"
+            type="password"
             @keyup.enter.native="handleLogin"
           >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+            <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/>
           </el-input>
         </el-form-item>
         <el-form-item prop="code">
@@ -27,10 +28,10 @@
             style="width: 63%"
             @keyup.enter.native="handleLogin"
           >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/>
           </el-input>
           <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+            <img :src="codeUrl" class="login-code-img" @click="getCode"/>
           </div>
         </el-form-item>
         <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
@@ -38,8 +39,8 @@
           <el-button
             :loading="loading"
             size="medium"
-          type="primary"
             style="width:100%;"
+            type="primary"
             @click.native.prevent="handleLogin"
           >
             <span v-if="!loading">{{ $t('login.logIn') }}</span>
@@ -52,6 +53,7 @@
         <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
       </div>-->
     </div>
+  </div>
 </template>
 
 <script>
@@ -146,16 +148,17 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style lang="scss" rel="stylesheet/scss">
 .login {
-  display: flex;
+  position: absolute;
-  justify-content: right;
+  top:0;
-  padding-right:260px;
+  left: 0;
-  align-items: center;
   height: 100%;
+  width: 100%;
   background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+  background-size: 100% 100%;
 }
+
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
@@ -164,35 +167,42 @@ export default {
 
 .login-form {
   border-radius: 6px;
-  background: #ffffff;
+  width: 100%;
-  width: 400px;
+  height: 100%;
   padding: 25px 25px 5px 25px;
+
   .el-input {
     height: 38px;
+
     input {
       height: 38px;
     }
   }
+
   .input-icon {
     height: 39px;
     width: 14px;
     margin-left: 2px;
   }
 }
+
 .login-tip {
   font-size: 13px;
   text-align: center;
   color: #bfbfbf;
 }
+
 .login-code {
   width: 33%;
   height: 38px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
   }
 }
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
@@ -209,4 +219,13 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.formBox{
+
+  position: absolute;
+  top: 50%;
+  left: 74.7%;
+  width: 26%;
+  //height: 400px;
+  transform: translate(-50%,-50%);
+}
 </style>