修改登陆界面

ruoyi-ui/src/views/login.vue

@@ -1,68 +1,70 @@
 <template>
   <div class="login">
-    <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')">
-          <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="$t('login.password')"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">{{ $t('login.logIn') }}</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <!--  底部
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
-    </div>-->
+    <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" :placeholder="$t('login.username')" auto-complete="off" type="text">
+            <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"
+            :placeholder="$t('login.password')"
+            auto-complete="off"
+            type="password"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/>
+          </el-input>
+          <div class="login-code">
+            <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>
+        <el-form-item style="width:100%;">
+          <el-button
+            :loading="loading"
+            size="medium"
+            style="width:100%;"
+            type="primary"
+            @click.native.prevent="handleLogin"
+          >
+            <span v-if="!loading">{{ $t('login.logIn') }}</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <!--  底部
+      <div class="el-login-footer">
+        <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("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("username", this.loginForm.username, {expires: 30});
+            Cookies.set("password", encrypt(this.loginForm.password), {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;
-  justify-content: right;
-  padding-right:260px;
-  align-items: center;
+  position: absolute;
+  top:0;
+  left: 0;
   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: 400px;
+  width: 100%;
+  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>