From 7cea6b0b31ffc3dd14430bce6998c3bec3e71a58 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Thu, 21 Sep 2023 10:54:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue | 181 +++++++++++---------------------------------
 1 file changed, 46 insertions(+), 135 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index f7a874b..a5521a1 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,25 +1,15 @@
 <template>
   <div class="login">
-    <el-form
-      ref="loginForm"
-      :model="loginForm"
-      :rules="loginRules"
-      class="login-form"
-    >
-      <h3 class="title">新版小程序管理系统</h3>
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">若依后台管理系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
           type="text"
           auto-complete="off"
           placeholder="账号"
-          style="width: 310px"
         >
-          <svg-icon
-            slot="prefix"
-            icon-class="user"
-            class="el-input__icon input-icon"
-          />
+          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -29,13 +19,8 @@
           auto-complete="off"
           placeholder="密码"
           @keyup.enter.native="handleLogin"
-          style="width: 310px"
         >
-          <svg-icon
-            slot="prefix"
-            icon-class="password"
-            class="el-input__icon input-icon"
-          />
+          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaOnOff">
@@ -43,59 +28,35 @@
           v-model="loginForm.code"
           auto-complete="off"
           placeholder="验证码"
-          style="width: 200px"
+          style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon
-            slot="prefix"
-            icon-class="validCode"
-            class="el-input__icon input-icon"
-          />
+          <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" />
+          <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-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: 300px;
-            height: 50px;
-            background-image: linear-gradient(to right, #01a4ff, #1259ee);
-            border-radius: -33px;
-            border: none;
-            color: #ffffff;
-            border-radius: 20px;
-          "
+          type="primary"
+          style="width:100%;"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right" v-if="register">
-          <router-link class="link-type" :to="'/register'"
-            >立即注册</router-link
-          >
+        <div style="float: right;" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
     </el-form>
-    <div class="bg" style="border-radius: 0 6px 6px 0; padding: 0">
-      <img
-        src="../assets/images/bg3.png"
-        alt=""
-        style="width: 1400px; height: 700px; border-radius: 0 6px 6px 0"
-      />
-    </div>
     <!--  底部  -->
     <div class="el-login-footer">
-      <!-- <span>Copyright © 2018-2022 xinyilu.vip All Rights Reserved.</span> -->
+      <span>Copyright © 2018-2022 xinelu.vip All Rights Reserved.</span>
     </div>
   </div>
 </template>
@@ -103,7 +64,7 @@
 <script>
 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",
@@ -115,32 +76,32 @@ export default {
         password: "",
         rememberMe: false,
         code: "",
-        uuid: "",
+        uuid: ""
       },
       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,
       // 验证码开关
       captchaOnOff: true,
       // 注册开关
       register: false,
-      redirect: undefined,
+      redirect: undefined
     };
   },
   watch: {
     $route: {
-      handler: function (route) {
+      handler: function(route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   created() {
     this.getCode();
@@ -148,9 +109,8 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then((res) => {
-        this.captchaOnOff =
-          res.captchaOnOff === undefined ? true : res.captchaOnOff;
+      getCodeImg().then(res => {
+        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
         if (this.captchaOnOff) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -160,93 +120,61 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get("rememberMe");
+      const rememberMe = Cookies.get('rememberMe')
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password:
-          password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate((valid) => {
+      this.$refs.loginForm.validate(valid => {
         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("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove("rememberMe");
+            Cookies.remove('rememberMe');
           }
-          this.$store
-            .dispatch("Login", this.loginForm)
-            .then(() => {
-              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
-              setTimeout(() => {
-                this.loading = false;
-              }, 1500);
-            })
-            .catch(() => {
-              this.loading = false;
-              if (this.captchaOnOff) {
-                this.getCode();
-              }
-            });
+          this.$store.dispatch("Login", this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          }).catch(() => {
+            this.loading = false;
+            if (this.captchaOnOff) {
+              this.getCode();
+            }
+          });
         }
       });
-    },
-  },
+    }
+  }
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-.bg {
-  position: absolute;
-}
-// .el-input el-input--medium el-input--prefix{
-//    height: 50px;
-//     line-height: 36px;
-//     background-color: red;
-//     border: none;
-//   border-radius: 10px;
-// }
-.el-input--medium ::v-deep .el-input__inner {
-  height: 50px;
-  line-height: 36px;
-  // background-color: red;
-  border: none;
-  border: 1px solid #e5e5e5;
-  border-radius: 36px;
-}
+<style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/bg2.png");
+  background-image: url("../assets/images/login-background.jpg");
   background-size: cover;
 }
 .title {
-  margin: 0px 40px 30px auto;
+  margin: 0px auto 30px auto;
   text-align: center;
   color: #707070;
 }
 
 .login-form {
-  margin-left: 20%;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
   padding: 25px 25px 5px 25px;
-  z-index: 999;
-  margin-right: 50%;
   .el-input {
     height: 38px;
     input {
@@ -256,8 +184,7 @@ export default {
   .input-icon {
     height: 39px;
     width: 14px;
-    margin-left: 5px;
-    margin-top: 5px;
+    margin-left: 2px;
   }
 }
 .login-tip {
@@ -269,7 +196,6 @@ export default {
   width: 33%;
   height: 38px;
   float: right;
-  margin-right: 30px;
   img {
     cursor: pointer;
     vertical-align: middle;
@@ -289,20 +215,5 @@ export default {
 }
 .login-code-img {
   height: 38px;
-  margin-top: 5px;
 }
-// .el-button{
-//    background-image: linear-gradient(to right , #90C8DF, #4CA8CD);
-//     border-radius: -33px;
-//     border: none;
-//     height: 50px;
-//     color: #FFFFFF;
-//     border-radius: 20px;
-
-// }
-// .el-button--primary {
-//     color: #FFFFFF;
-//     // background-color: #1890ff;
-//     // border-color: #1890ff;
-// }
 </style>