登录后刷新首页，自动退出登录，登录页背景优化

src/layouts/header/index.vue

@@ -23,11 +23,9 @@
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>
-            <div v-else-if="!isLogin">
+            <div class="login" v-else-if="!isLogin" @click="toLogin">
-                <router-link class="login" to="/login" target="_blank">
               <img src="@/assets/img/user.png" alt="">
               <span>登录</span>
-                </router-link>
             </div>
         </div>
 
@@ -116,6 +114,10 @@ export default {
           avatar: userInfo.userAvatars,
           userName: userInfo.userName
         })
+        // 如果没有用户名，说明是客户，那就从客户接口里去取
+        userInfo.userName || this.$get(this.api.isClient).then(res => {
+          res.customerName && this.setInfo({userName: res.customerName})
+        }).catch(res => {})
       }).catch(err => { })
     },
     hideSetting() {
@@ -131,10 +133,7 @@ export default {
       }
     },
     toLogin() {
-      this.$refs.nav.jump({
+      window.open(this.$router.resolve('/login').href)
-        index: '/login',
-        title: '登录'
-      })
     },
     // 跳转到管理员后台
     toManager() {
@@ -209,7 +208,6 @@ export default {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            max-width: $max-width;
             min-width: $min-width;
             padding: 0 80px 0 10px;
             margin: 0 auto;

src/layouts/home/index.vue

@@ -1,18 +1,10 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-03 14:33:21
- * @LastEditTime: 2021-11-05 17:58:45
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \questionnaired:\code\FE_huoran_data\src\layouts\home\index.vue
--->
 <template>
     <div class="main">
         <v-head></v-head>
         <div class="layout">
             <div class="content">
                 <transition name="move" mode="out-in">
-                    <keep-alive :include="tagsList">
+                    <keep-alive>
                         <router-view class="view"></router-view>
                     </keep-alive>
                 </transition>
@@ -26,21 +18,41 @@
 <script>
 import vHead from '../header'
 import vFooter from '../footer'
+import { mapActions } from 'vuex'
+import Setting from '@/setting'
+import util from '@/libs/util'
 export default {
     data() {
         return {
-            tagsList: [],
+            
         };
     },
     components: {
         vHead,
         vFooter
     },
-    computed: {
+    mounted() {
-        
+        this.autoLogout()
     },
-    created() {
+    methods: {
-        
+        ...mapActions('user', [
+            'logout'
+        ]),
+        // 长时间未操作,自动退出登录
+        autoLogout() {
+            let lastTime = new Date().getTime()
+            document.onmousedown = () => {
+                lastTime = new Date().getTime()
+            };
+            const autoLogoutTime = Setting.autoLogoutTime
+            const timer = setInterval(() => {
+                if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > autoLogoutTime) {
+                    util.errorMsg('用户登录过期，请重新登录')
+                    clearInterval(timer)
+                    setTimeout(this.logout, 1500)
+                }
+            }, 1000)
+        }
     }
 };
 </script>

src/pages/account/login/index.vue

@@ -1,13 +1,5 @@
 <template>
     <div class="wrap">
-        <div class="shapes">
-            <img class="shape1" src="@/assets/img/shapes/shape1.png" alt="">
-            <img class="shape2" src="@/assets/img/shapes/shape2.png" alt="">
-            <img class="shape3" src="@/assets/img/shapes/shape3.png" alt="">
-            <img class="shape4" src="@/assets/img/shapes/shape4.png" alt="">
-            <img class="shape5" src="@/assets/img/shapes/shape5.png" alt="">
-            <img class="shape6" src="@/assets/img/shapes/shape6.png" alt="">
-        </div>
         <div class="login">
             <div class="form">
                 <h6 class="title">欢迎使用请登录</h6>
@@ -117,6 +109,7 @@ export default {
             this.$refs.login.validate(valid => {
                 if (valid) {
                     this.login(this.form).then(() => {
+                        window.opener && window.opener.location.reload() // 刷新官网
                         let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index'
                         this.$router.replace(redirect)
                     }).catch(res => {
@@ -204,46 +197,22 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    .wrap {
+.wrap {
     min-height: 100%;
     background-color: #F3F6FA;
-        overflow: hidden;
-        .shapes{
-            img{
-                position: absolute;
-            }
-        }
-        .shape1{
-            top: 123px;
-        }
-        .shape2{
-            top: 238px;
-            left: 35px;
-        }
-        .shape3{
-            top: 485px;
-        }
-        .shape4{
-            bottom: 285px;
-            right: 0;
-        }
-        .shape5{
-            bottom: 145px;
-            right: 0;
-        }
-        .shape6{
-            bottom: 0;
-            right: 0;
-        }
     .login{
-            z-index: 4;
+        min-height: calc(100vh - 70px);
-            position: absolute;
+        padding-top: calc((100vh - 611px) / 2);
-            top: 48%;
+        background: url(../../../assets/img/shapes/shape1.png) (0 123px)/auto no-repeat,
-            left: 50%;
+                    url(../../../assets/img/shapes/shape2.png) (35px 238px)/auto no-repeat,
-            transform: translate(-50%, -50%);
+                    url(../../../assets/img/shapes/shape3.png) (0 485px)/auto no-repeat,
-            width: 436px;
+                    url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat,
+                    url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat;
         .form{
+            width: 436px;
             padding: 38px 38px 60px;
+            margin: 0 auto 0;
             border-radius: 6px;
             background-color: #fff;
             .title{
@@ -330,15 +299,8 @@ export default {
             }
         }
     }
-    }
+}
-    .footer{
+.copyright{
-        z-index: 3;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-    }
-    .copyright{
     padding: 18px 0;
     font-size: 12px;
     text-align: center;
@@ -350,11 +312,16 @@ export default {
             opacity: .8;
         }
     }
-    }
+}
-    .tips {
+.tips {
     margin: 0 0 10px 5px;
     font-size: 14px;
     text-align: center;
     color: #666;
+}
+@media (max-height: 680px) {
+    .wrap .login {
+        padding: 40px 0;
     }
+}
 </style>

src/setting.js

@@ -32,6 +32,8 @@ const Setting = {
     errorModalType: 'Message',
     // Cookies 默认保存时间，单位：天
     cookiesExpires: 1,
+    // 长时间未操作，自动退出登录时间
+    autoLogoutTime: 3600000,
     /**
      * localStorage里保存的token的key
      */