修改登陆界面

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" />
+        <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,17 +53,18 @@
         <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
       </div>-->
     </div>
+  </div>
 </template>
 
 <script>
 import LangSelect from '@/components/LangSelect'
-import { getCodeImg } from "@/api/login";
+import {getCodeImg} from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import {encrypt, decrypt} from '@/utils/jsencrypt'
 
 export default {
   name: "Login",
-  components: { LangSelect },
+  components: {LangSelect},
   data() {
     return {
       codeUrl: "",
@@ -76,12 +78,12 @@ export default {
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "用户名不能为空" }
+          {required: true, trigger: "blur", message: "用户名不能为空"}
         ],
         password: [
-          { required: true, trigger: "blur", message: "密码不能为空" }
+          {required: true, trigger: "blur", message: "密码不能为空"}
         ],
-        code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
+        code: [{required: true, trigger: "change", message: "验证码不能为空"}]
       },
       loading: false,
       redirect: undefined
@@ -89,7 +91,7 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
       immediate: true
@@ -121,9 +123,9 @@ export default {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("username", this.loginForm.username, {expires: 30});
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
@@ -133,7 +135,7 @@ export default {
             .dispatch("Login", this.loginForm)
             .then(() => {
               this.loading = false;
-              this.$router.push({ path: this.redirect || "/" });
+              this.$router.push({path: this.redirect || "/"});
             })
             .catch(() => {
               this.loading = false;
@@ -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>