登录注册页的背景动画在移动端上默认关闭

修复侧边栏在移动端点击未收起的问题

vue/src/layout/components/Sidebar/index.vue

@@ -92,6 +92,8 @@
                     this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
                 }
                 else this.$router.push(index)
+                //mobile时激活隐藏侧边栏
+                this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
             }
         },
         mounted() {

vue/src/layout/mixin/ResizeHandler.js

@@ -1,20 +1,13 @@
 import {debounce} from '@/utils'
-
+import {isMobile} from "@/utils/browser"
-const {body} = document
-const WIDTH = 768
-
-function $_isMobile() {
-    const rect = body.getBoundingClientRect()
-    return rect.width - 1 < WIDTH
-}
 
 export default {
     methods: {
         $_resizeHandler() {
             if (!document.hidden) {
-                const isMobile = $_isMobile()
+                const mobile = isMobile()
-                this.$store.commit('app/device', isMobile ? 'mobile' : 'pc')
+                this.$store.commit('app/device', mobile ? 'mobile' : 'pc')
-                isMobile && this.$store.commit('setting/sidebarCollapse', true)
+                mobile && this.$store.commit('setting/sidebarCollapse', true)
             }
         }
     },

vue/src/store/modules/app.js

@@ -1,11 +1,12 @@
 import {getLocalPersonalSettings} from "@/utils/localStorage"
 import {createMutations} from "@/utils"
+import {isMobile} from "@/utils/browser"
 
 const localSettings = getLocalPersonalSettings()
 
 const state = {
     //区分pc和移动端（mobile）
-    device: 'pc',
+    device: isMobile() ? 'mobile' : 'pc',
     //登陆页背景动画
     loginPageBackgroundAnimation: 'firework',
     //注册页背景动画

vue/src/utils/browser.js

@@ -0,0 +1,7 @@
+const {body} = document
+const WIDTH = 768
+
+export function isMobile() {
+    const rect = body.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+}

vue/src/views/app/login.vue

@@ -62,8 +62,9 @@
 </template>
 
 <script>
-    import {isEmpty} from "@/utils"
+    import {mapState} from 'vuex'
     import md5 from "js-md5"
+    import {isEmpty} from "@/utils"
     import {elSuccess} from "@/utils/message"
     import SetAnimation from "./components/SetAnimation"
 
@@ -90,17 +91,16 @@
                 animation: null
             }
         },
-        computed: {
+        computed: mapState('app', {
-            loginPageBackgroundAnimation() {
+            device: state => state.device,
-                return this.$store.state.app.loginPageBackgroundAnimation
+            loginPageBackgroundAnimation: state => state.loginPageBackgroundAnimation
-            }
+        }),
-        },
         methods: {
             showPwd() {
                 this.passwordType = this.passwordType === 'password' ? '' : 'password'
                 this.$nextTick(() => this.$refs.password.focus())
             },
-            login({pageX, pageY}) {
+            login() {
                 if (this.loading) return
                 this.$refs.form.validate(valid => {
                     if (!valid) return
@@ -144,7 +144,8 @@
             }
         },
         mounted() {
-            this.setAnimation(this.loginPageBackgroundAnimation)
+            //移动端关闭动画，太卡
+            this.device !== 'mobile' && this.setAnimation(this.loginPageBackgroundAnimation)
             this.addCapsLockEvent()
             if (isEmpty(this.form.username)) this.$refs.username.focus()
             else this.$refs.password.focus()

vue/src/views/app/register.vue

@@ -48,6 +48,7 @@
 </template>
 
 <script>
+    import {mapState} from 'vuex'
     import md5 from "js-md5"
     import {register} from "@/api/account"
     import {checkName} from "@/api/system/user"
@@ -93,11 +94,10 @@
                 animation: null
             }
         },
-        computed: {
+        computed: mapState('app', {
-            registerPageBackgroundAnimation() {
+            device: state => state.device,
-                return this.$store.state.app.registerPageBackgroundAnimation
+            registerPageBackgroundAnimation: state => state.registerPageBackgroundAnimation
-            }
+        }),
-        },
         methods: {
             register() {
                 if (this.loading) return
@@ -136,7 +136,8 @@
             }
         },
         mounted() {
-            this.setAnimation(this.registerPageBackgroundAnimation)
+            //移动端关闭动画，太卡
+            this.device !== 'mobile' && this.setAnimation(this.registerPageBackgroundAnimation)
             this.addEvent()
             this.$nextTick(() => this.$refs.username.focus())
         },