登陆页样式修改

雨滴效果自适应

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,10 +23,21 @@ $cursor: #fff;
         background: #2d3a4b;
     }
 
-    .login-form {
-        width: 520px;
-        padding: 0 35px;
-        margin: 160px auto;
+    .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;
+            font-weight: bold;
+            position: relative;
         }
 
         .svg-container {
@@ -36,18 +48,6 @@ $cursor: #fff;
             display: inline-block;
         }
 
-    .title-container {
-        position: relative;
-
-        .title {
-            font-size: 26px;
-            color: #eee;
-            margin: 0 auto 40px auto;
-            text-align: center;
-            font-weight: bold;
-        }
-    }
-
         .show-pwd {
             position: absolute;
             right: 10px;
@@ -83,7 +83,7 @@ $cursor: #fff;
         .el-form-item {
             border: 1px solid rgba(255, 255, 255, 0.1);
             background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-        color: #454545;
+            margin-bottom: 30px;
+        }
     }
 }

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)
     }

vue/src/views/app/login.vue

@@ -1,10 +1,9 @@
 <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>
+        <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"/>
@@ -52,6 +51,7 @@
                 </div>
             </el-form>
         </div>
+    </div>
 </template>
 
 <script>
@@ -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({
+                        this.rain = new _.default(
+                            {
                                 rainDropCount: 500,
                                 rainColor: 'rgba(150,180,255,0.8)',
                                 backgroundColor: '#2d3a4b'
-                        }, document.getElementById('login-background'))
+                            },
+                            document.getElementById('login-background'))
                     })
             }
             this.addCapsLockEvent()

vue/src/views/app/register.vue

@@ -1,10 +1,9 @@
 <template>
+    <div class="login-page">
+        <canvas id="login-background"/>
         <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>
+            <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"/>
@@ -38,6 +37,7 @@
                 </div>
             </el-form>
         </div>
+    </div>
 </template>
 
 <script>