From 9845a140efbe38428dfb257fd009278af7c61361 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Wed, 13 May 2020 09:38:20 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E9=99=86=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E9=9B=A8=E6=BB=B4=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/assets/styles/login.scss | 106 +++++++++++++++----------------
 vue/src/plugin/rain/index.js     |   3 +
 vue/src/views/app/login.vue      |  97 ++++++++++++++--------------
 vue/src/views/app/register.vue   |  58 ++++++++---------
 4 files changed, 135 insertions(+), 129 deletions(-)

diff --git a/vue/src/assets/styles/login.scss b/vue/src/assets/styles/login.scss
index 569530d..d5dd539 100644
--- a/vue/src/assets/styles/login.scss
+++ b/vue/src/assets/styles/login.scss
@@ -9,10 +9,11 @@ $cursor: #fff;
     }
 }
 
-.login-container {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
+.login-page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
 
     canvas {
         position: absolute;
@@ -22,68 +23,67 @@ $cursor: #fff;
         background: #2d3a4b;
     }
 
-    .login-form {
-        width: 520px;
-        padding: 0 35px;
-        margin: 160px auto;
-    }
-
-    .svg-container {
-        padding: 6px 5px 6px 15px;
-        color: $dark_gray;
-        vertical-align: middle;
-        width: 30px;
-        display: inline-block;
-    }
-
-    .title-container {
-        position: relative;
+    .login-container {
+        flex: 1;
+        padding: 32px 0;
+        text-align: center;
+        width: 384px;
+        margin: 0 auto;
 
         .title {
+            padding-top: 120px;
+            margin-bottom: 40px;
+            cursor: pointer;
             font-size: 26px;
             color: #eee;
-            margin: 0 auto 40px auto;
-            text-align: center;
             font-weight: bold;
+            position: relative;
         }
-    }
 
-    .show-pwd {
-        position: absolute;
-        right: 10px;
-        top: 7px;
-        font-size: 16px;
-        color: $dark_gray;
-        cursor: pointer;
-        user-select: none;
-    }
+        .svg-container {
+            padding: 6px 5px 6px 15px;
+            color: $dark_gray;
+            vertical-align: middle;
+            width: 30px;
+            display: inline-block;
+        }
 
-    .el-input {
-        display: inline-block;
-        height: 47px;
-        width: 85%;
+        .show-pwd {
+            position: absolute;
+            right: 10px;
+            top: 7px;
+            font-size: 16px;
+            color: $dark_gray;
+            cursor: pointer;
+            user-select: none;
+        }
 
-        input {
-            background: transparent;
-            border: 0;
-            -webkit-appearance: none;
-            border-radius: 0;
-            padding: 12px 5px 12px 15px;
-            color: $light_gray;
+        .el-input {
+            display: inline-block;
             height: 47px;
-            caret-color: $cursor;
+            width: 85%;
 
-            &:-webkit-autofill {
-                box-shadow: 0 0 0 1000px $bg inset !important;
-                -webkit-text-fill-color: $cursor !important;
+            input {
+                background: transparent;
+                border: 0;
+                -webkit-appearance: none;
+                border-radius: 0;
+                padding: 12px 5px 12px 15px;
+                color: $light_gray;
+                height: 47px;
+                caret-color: $cursor;
+
+                &:-webkit-autofill {
+                    box-shadow: 0 0 0 1000px $bg inset !important;
+                    -webkit-text-fill-color: $cursor !important;
+                }
             }
         }
-    }
 
-    .el-form-item {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-        color: #454545;
+        .el-form-item {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(0, 0, 0, 0.1);
+            margin-bottom: 30px;
+        }
     }
 }
diff --git a/vue/src/plugin/rain/index.js b/vue/src/plugin/rain/index.js
index e2531b1..56d8606 100644
--- a/vue/src/plugin/rain/index.js
+++ b/vue/src/plugin/rain/index.js
@@ -9,6 +9,7 @@ export default class Rain {
         this.stopSign = false
         this.canvas = canvas
         this.ctx = canvas.getContext('2d')
+        this.resize = this.resize.bind(this)
         this.start()
     }
 
@@ -49,11 +50,13 @@ export default class Rain {
     }
 
     start() {
+        window.addEventListener('resize', this.resize)
         this.resize()
         this.loop()
     }
 
     stop() {
+        window.removeEventListener('resize', this.resize)
         this.stopSign = true
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     }
diff --git a/vue/src/views/app/login.vue b/vue/src/views/app/login.vue
index 1fc7feb..ab374dd 100644
--- a/vue/src/views/app/login.vue
+++ b/vue/src/views/app/login.vue
@@ -1,56 +1,56 @@
 <template>
-    <div class="login-container">
+    <div class="login-page">
         <canvas id="login-background"/>
-        <el-form ref="form" :model="form" :rules="rules" autocomplete="on" class="login-form" label-position="left">
-            <div class="title-container">
-                <h3 class="title">进销存管理系统</h3>
-            </div>
-            <el-form-item prop="username">
+        <div class="login-container">
+            <div class="title">进销存管理系统</div>
+            <el-form ref="form" :model="form" :rules="rules" autocomplete="on" label-position="left">
+                <el-form-item prop="username">
                 <span class="svg-container">
                     <svg-icon icon="user"/>
                 </span>
-                <el-input
-                        ref="username"
-                        v-model="form.username"
-                        :maxlength="20"
-                        autocomplete="on"
-                        name="username"
-                        placeholder="请输入用户名"
-                        type="text"
-                />
-            </el-form-item>
-            <el-form-item prop="password">
-                <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
+                    <el-input
+                            ref="username"
+                            v-model="form.username"
+                            :maxlength="20"
+                            autocomplete="on"
+                            name="username"
+                            placeholder="请输入用户名"
+                            type="text"
+                    />
+                </el-form-item>
+                <el-form-item prop="password">
+                    <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
                     <span class="svg-container">
                         <svg-icon icon="password"/>
                     </span>
-                </el-tooltip>
-                <el-input
-                        ref="password"
-                        v-model="form.password"
-                        :key="passwordType"
-                        :type="passwordType"
-                        :maxlength="20"
-                        autocomplete="on"
-                        name="password"
-                        placeholder="请输入密码"
-                        @keyup.enter.native="login"
-                />
-                <span @click="showPwd" class="show-pwd">
+                    </el-tooltip>
+                    <el-input
+                            ref="password"
+                            v-model="form.password"
+                            :key="passwordType"
+                            :type="passwordType"
+                            :maxlength="20"
+                            autocomplete="on"
+                            name="password"
+                            placeholder="请输入密码"
+                            @keyup.enter.native="login"
+                    />
+                    <span @click="showPwd" class="show-pwd">
                     <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                 </span>
-            </el-form-item>
-            <el-button :loading="loading" style="width: 100%" type="primary" @click="login">登录</el-button>
-            <div class="flex" style="margin-top: 20px">
-                <p class="other-ways">
-                    其他方式登录
-                    <span v-for="i in otherWays" :key="i" @click="$message.info('假装可以第三方登录')">
+                </el-form-item>
+                <el-button :loading="loading" style="width: 100%" type="primary" @click="login">登录</el-button>
+                <div class="flex" style="margin-top: 20px">
+                    <p class="other-ways">
+                        其他方式登录
+                        <span v-for="i in otherWays" :key="i" @click="$message.info('假装可以第三方登录')">
                         <svg-icon :icon="i"/>
                     </span>
-                </p>
-                <el-button type="text" @click="!loading&&$router.push('/register')">注册账户</el-button>
-            </div>
-        </el-form>
+                    </p>
+                    <el-button type="text" @click="!loading&&$router.push('/register')">注册账户</el-button>
+                </div>
+            </el-form>
+        </div>
     </div>
 </template>
 
@@ -100,7 +100,8 @@
             success() {
                 elSuccess('登陆成功')
                 let redirect = this.$route.query.redirect || '/'
-                window.location.href = '/#' + redirect
+                //由于清除消息时会造成卡顿，所以延迟0.5s跳转
+                setTimeout(() => window.location.href = '/#' + redirect, 500)
             },
             capsLockTip({keyCode}) {
                 if (keyCode === 20) this.capsTooltip = !this.capsTooltip
@@ -116,11 +117,13 @@
             if (loginBackgroundAnimate) {
                 import('@/plugin/rain')
                     .then(_ => {
-                        this.rain = new _.default({
-                            rainDropCount: 500,
-                            rainColor: 'rgba(150,180,255,0.8)',
-                            backgroundColor: '#2d3a4b'
-                        }, document.getElementById('login-background'))
+                        this.rain = new _.default(
+                            {
+                                rainDropCount: 500,
+                                rainColor: 'rgba(150,180,255,0.8)',
+                                backgroundColor: '#2d3a4b'
+                            },
+                            document.getElementById('login-background'))
                     })
             }
             this.addCapsLockEvent()
diff --git a/vue/src/views/app/register.vue b/vue/src/views/app/register.vue
index 8372790..58d2a99 100644
--- a/vue/src/views/app/register.vue
+++ b/vue/src/views/app/register.vue
@@ -1,42 +1,42 @@
 <template>
-    <div class="login-container">
-        <canvas/>
-        <el-form ref="form" :model="form" :rules="rules" class="login-form" label-position="left">
-            <div class="title-container">
-                <h3 class="title">用户注册</h3>
-            </div>
-            <el-form-item prop="username">
+    <div class="login-page">
+        <canvas id="login-background"/>
+        <div class="login-container">
+            <div class="title">用户注册</div>
+            <el-form ref="form" :model="form" :rules="rules" label-position="left">
+                <el-form-item prop="username">
                 <span class="svg-container">
                     <svg-icon icon="user"/>
                 </span>
-                <el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
-            </el-form-item>
-            <el-form-item prop="pwd">
-                <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
+                    <el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
+                </el-form-item>
+                <el-form-item prop="pwd">
+                    <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
                     <span class="svg-container">
                         <svg-icon icon="password"/>
                     </span>
-                </el-tooltip>
-                <el-input v-model="form.pwd" placeholder="请输入密码" type="password" :maxlength="20"/>
-            </el-form-item>
-            <el-form-item prop="repwd">
+                    </el-tooltip>
+                    <el-input v-model="form.pwd" placeholder="请输入密码" type="password" :maxlength="20"/>
+                </el-form-item>
+                <el-form-item prop="repwd">
                 <span class="svg-container">
                     <svg-icon icon="password"/>
                 </span>
-                <el-input
-                        v-model="form.repwd"
-                        placeholder="请确认密码"
-                        type="password"
-                        :maxlength="20"
-                        @keyup.enter.native="register"
-                />
-            </el-form-item>
-            <el-button :loading="loading" style="width: 100%" type="primary" @click="register">注册</el-button>
-            <div class="flex" style="margin-top: 20px">
-                <p/>
-                <el-button type="text" @click="!loading&&$router.push('/login')">已有账户登陆</el-button>
-            </div>
-        </el-form>
+                    <el-input
+                            v-model="form.repwd"
+                            placeholder="请确认密码"
+                            type="password"
+                            :maxlength="20"
+                            @keyup.enter.native="register"
+                    />
+                </el-form-item>
+                <el-button :loading="loading" style="width: 100%" type="primary" @click="register">注册</el-button>
+                <div class="flex" style="margin-top: 20px">
+                    <p/>
+                    <el-button type="text" @click="!loading&&$router.push('/login')">已有账户登陆</el-button>
+                </div>
+            </el-form>
+        </div>
     </div>
 </template>