xy

src/views/login/index.vue

@@ -1,87 +1,140 @@
 <template>
   <div class="login-container" v-if="showLogin">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+    <div ref="formContainer" class="form-container">
-      label-position="left">
-
       <div class="title-container">
-        <h3 class="title">内控业务管理系统</h3>
+        <img :src="require('@/assets/imgs/login-title.png')" alt="" />
       </div>
 
-      <el-form-item prop="username">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          padding: 0 41px 0 104px;
+          margin-top: 57px;
+        "
+      >
+        <div class="left">
+          <img :src="require('@/assets/imgs/login-img1.png')" alt="" />
+        </div>
+        <div class="right">
+          <el-form
+            ref="loginForm"
+            :model="loginForm"
+            :rules="loginRules"
+            class="login-form"
+            auto-complete="on"
+            label-position="left"
+          >
+            <el-form-item class="form-item" prop="username">
               <span class="svg-container">
                 <svg-icon icon-class="user" />
               </span>
-        <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text"
+              <el-input
-          tabindex="1" auto-complete="off" />
+                ref="username"
+                v-model="loginForm.username"
+                placeholder="请输入账号"
+                name="username"
+                type="text"
+                tabindex="1"
+                auto-complete="off"
+              />
             </el-form-item>
 
-      <el-form-item prop="password">
+            <el-form-item class="form-item" prop="password">
               <span class="svg-container">
                 <svg-icon icon-class="password" />
               </span>
-        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+              <el-input
-          placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
+                :key="passwordType"
-        <!-- <span class="show-pwd" @click="showPwd">
+                ref="password"
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+                v-model="loginForm.password"
-        </span> -->
+                :type="passwordType"
+                placeholder="请输入密码"
+                name="password"
+                tabindex="2"
+                auto-complete="off"
+                @keyup.enter.native="handleLogin"
+              />
             </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+            <el-checkbox size="large" style="margin-top: 18px;zoom: 1.3;" v-model="isRemember">记住密码</el-checkbox>
-        @click.native.prevent="handleLogin">登录</el-button>
 
+            <el-button
+              :loading="loading"
+              type="primary"
+              round
+              style="
+                margin-top: 35px;
+                font-size: 18px;
+                letter-spacing: 3px;
+                border-radius: 50px;
+                height: 50px;
+                width: 100%;
+                background-color: #3d7af6;
+                filter: drop-shadow(0px 4px 9px rgba(72, 93, 237, 0.63));
+              "
+              @click.native.prevent="handleLogin"
+              >登录</el-button
+            >
           </el-form>
         </div>
+      </div>
+    </div>
+  </div>
   <div v-else class="login-container-w"></div>
 </template>
 
 <script>
-  import {
+import drawMixin from "@/views/login/mixin/drawMixin";
-    validUsername
+import { validUsername } from "@/utils/validate";
-  } from '@/utils/validate'
+import Cookies from "js-cookie";
-
+export default {
-  export default {
+  mixins: [drawMixin],
-    name: 'Login',
+  name: "Login",
   data() {
     const validateUsername = (rule, value, callback) => {
       if (false) {
-          callback(new Error('请正确输入登录名'))
+        callback(new Error("请正确输入登录名"));
       } else {
-          callback()
+        callback();
-        }
       }
+    };
     const validatePassword = (rule, value, callback) => {
       if (false) {
-          callback(new Error('请正确输入密码'))
+        callback(new Error("请正确输入密码"));
       } else {
-          callback()
+        callback();
-        }
       }
+    };
     return {
+      isRemember: false,
       showLogin: false,
       loginForm: {
-          username: '',
+        username: "",
-          password: ''
+        password: "",
       },
       loginRules: {
-          username: [{
+        username: [
+          {
             required: true,
-            trigger: 'blur',
+            trigger: "blur",
-            validator: validateUsername
+            validator: validateUsername,
-          }],
+          },
-          password: [{
+        ],
+        password: [
+          {
             required: true,
-            trigger: 'blur',
+            trigger: "blur",
-            validator: validatePassword
+            validator: validatePassword,
-          }]
           },
-        loading: false,
+        ],
-        passwordType: 'password',
-        redirect: undefined
-      }
       },
-    beforeCreate() {
+      loading: false,
-
+      passwordType: "password",
+      redirect: undefined,
+    };
   },
+  beforeCreate() {},
   created() {
     var query = this.$route.query;
     if (query.tp) {
@@ -90,83 +143,108 @@
       this.showLogin = true;
     }
     if (query.token && query.userid && query.tp) {
-        this.loading = true
+      this.loading = true;
-        this.$store.dispatch('user/loginskip', {
+      this.$store
+        .dispatch("user/loginskip", {
           token: query.token,
-          tp: query.tp
+          tp: query.tp,
-        }).then(() => {
-          this.$router.push({
-            path: "/"
         })
-          this.loading = false
+        .then(() => {
-        }).catch((error) => {
+          this.$router.push({
-          console.log(error)
+            path: "/",
-          this.loading = false
+          });
+          this.loading = false;
         })
+        .catch((error) => {
+          console.log(error);
+          this.loading = false;
+        });
+    }
+
+    let lgifStr = Cookies.get('lgif')
+    if (lgifStr) {
+      try {
+        this.isRemember = true;
+        this.loginForm = JSON.parse(window.atob(lgifStr))
+      } catch (e) {
+        this.loginForm = {
+          username: "",
+          password: "",
+        }
+      }
+
     }
   },
   watch: {
     $route: {
-        handler: function(route) {
+      handler: function (route) {
-          this.redirect = route.query && route.query.redirect
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
     },
-        immediate: true
-      }
   },
   methods: {
     showPwd() {
-        if (this.passwordType === 'password') {
+      if (this.passwordType === "password") {
-          this.passwordType = ''
+        this.passwordType = "";
       } else {
-          this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-          this.$refs.password.focus()
+        this.$refs.password.focus();
-        })
+      });
     },
     handleLogin() {
-        this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-            this.loading = true
+          this.loading = true;
-            this.$store.dispatch('user/login', this.loginForm).then(() => {
+          this.$store
-              console.log(this.redirect)
+            .dispatch("user/login", this.loginForm)
-              this.$router.push({
+            .then(() => {
-                path: this.redirect || '/'
+              console.log(this.redirect);
-              })
+              if (this.isRemember) {
-              this.loading = false
+                Cookies.set('lgif',window.btoa(JSON.stringify(this.loginForm)))
-            }).catch(() => {
-              this.loading = false
-            })
               } else {
-            console.log('error submit!!')
+                Cookies.remove('lgif')
-            return false
               }
+              this.$router.push({
+                path: this.redirect || "/",
+              });
+              this.loading = false;
             })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
         }
-    }
+      });
-  }
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  /* 修复input 背景不协调 和光标变色 */
+/* 修复input 背景不协调 和光标变色 */
-  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
+$bg: #283443;
-  $light_gray:#fff;
+$light_gray: #fff;
-  $cursor: #fff;
+$cursor: #fff;
 
-  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
     color: $cursor;
   }
-  }
+}
 
-  /* reset element-ui css */
+/* reset element-ui css */
-  .login-container {
+.login-container {
   .el-input {
     display: inline-block;
     height: 47px;
-      width: 85%;
+    width: 70%;
 
     input {
       background: transparent;
@@ -174,7 +252,7 @@
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
-        color: $light_gray;
+      color: #666;
       height: 47px;
       caret-color: $cursor;
 
@@ -186,39 +264,54 @@
   }
 
   .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #0003;
-      background: rgba(0, 0, 0, 0.1);
+    font-size: 16px;
-      border-radius: 5px;
+    line-height: 24px;
-      color: #454545;
+    border-radius: 6px;
-    }
+    background-color: #ffffff;
+    border: 1px solid #d9d9d9;
   }
+}
 </style>
 
 <style lang="scss" scoped>
-  $bg:#2d3a4b;
+::v-deep .el-checkbox__inner {}
-  $dark_gray:#889aa4;
+$bg: #2d3a4b;
-  $light_gray:#eee;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
-  .login-container-w {
+.login-container-w {
   min-height: 100%;
   width: 100%;
   background-color: #ffffff;
   overflow: hidden;
-  }
+}
 
-  .login-container {
+.login-container {
   min-height: 100%;
   width: 100%;
-    background-color: $bg;
+  background: url("../../assets/imgs/login-bkg.png") no-repeat;
+  background-size: cover;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .login-form {
+
-      position: relative;
+  .form-container {
-      width: 520px;
+    width: 930px;
-      max-width: 100%;
+    max-width: 100vw;
-      padding: 160px 35px 0;
+    background: #fff;
-      margin: 0 auto;
+    border-radius: 14px;
-      overflow: hidden;
+    padding-bottom: 53px;
+    filter: drop-shadow(0px 5px 24.5px rgba(74, 113, 240, 0.23));
+
+
+    .left {
+      img {
+        width: 310px;
+      }
+    }
   }
 
   .tips {
@@ -233,23 +326,30 @@
     }
   }
 
+  .form-item {
+    width: 361px;
+    height: 51px;
+
+    margin-bottom: 0;
+
+  }
   .svg-container {
-      padding: 6px 5px 6px 15px;
+    padding: 6px 0;
     color: $dark_gray;
     vertical-align: middle;
-      width: 30px;
+    width: 25px;
     display: inline-block;
+
+    margin-left: 15px;
   }
 
   .title-container {
+    display: flex;
+    justify-content: center;
     position: relative;
-
+    margin-top: 85px;
-      .title {
+    img {
-        font-size: 26px;
+      width: 754px;
-        color: $light_gray;
-        margin: 0px auto 40px auto;
-        text-align: center;
-        font-weight: bold;
     }
   }
 
@@ -262,5 +362,8 @@
     cursor: pointer;
     user-select: none;
   }
-  }
+}
+.form-item + .form-item {
+  margin-top: 18px;
+}
 </style>

src/views/login/mixin/drawMixin.js

@@ -0,0 +1,57 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted () {
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate () {
+      const appRef = this.$refs["formContainer"]
+      if (!appRef) return
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+        }
+      }
+    },
+    resize () {
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}