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

dev_2022-04-07
yujialong 3 years ago
parent ccc152fcb8
commit 34d93e1f29
  1. 18
      src/layouts/header/index.vue
  2. 40
      src/layouts/home/index.vue
  3. 269
      src/pages/account/login/index.vue
  4. 2
      src/setting.js

@ -23,11 +23,9 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </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="">
<img src="@/assets/img/user.png" alt=""> <span>登录</span>
<span>登录</span>
</router-link>
</div> </div>
</div> </div>
@ -116,6 +114,10 @@ export default {
avatar: userInfo.userAvatars, avatar: userInfo.userAvatars,
userName: userInfo.userName userName: userInfo.userName
}) })
//
userInfo.userName || this.$get(this.api.isClient).then(res => {
res.customerName && this.setInfo({userName: res.customerName})
}).catch(res => {})
}).catch(err => { }) }).catch(err => { })
}, },
hideSetting() { hideSetting() {
@ -131,10 +133,7 @@ export default {
} }
}, },
toLogin() { toLogin() {
this.$refs.nav.jump({ window.open(this.$router.resolve('/login').href)
index: '/login',
title: '登录'
})
}, },
// //
toManager() { toManager() {
@ -209,7 +208,6 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: $max-width;
min-width: $min-width; min-width: $min-width;
padding: 0 80px 0 10px; padding: 0 80px 0 10px;
margin: 0 auto; margin: 0 auto;

@ -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> <template>
<div class="main"> <div class="main">
<v-head></v-head> <v-head></v-head>
<div class="layout"> <div class="layout">
<div class="content"> <div class="content">
<transition name="move" mode="out-in"> <transition name="move" mode="out-in">
<keep-alive :include="tagsList"> <keep-alive>
<router-view class="view"></router-view> <router-view class="view"></router-view>
</keep-alive> </keep-alive>
</transition> </transition>
@ -26,21 +18,41 @@
<script> <script>
import vHead from '../header' import vHead from '../header'
import vFooter from '../footer' import vFooter from '../footer'
import { mapActions } from 'vuex'
import Setting from '@/setting'
import util from '@/libs/util'
export default { export default {
data() { data() {
return { return {
tagsList: [],
}; };
}, },
components: { components: {
vHead, vHead,
vFooter 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> </script>

@ -1,13 +1,5 @@
<template> <template>
<div class="wrap"> <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="login">
<div class="form"> <div class="form">
<h6 class="title">欢迎使用请登录</h6> <h6 class="title">欢迎使用请登录</h6>
@ -117,6 +109,7 @@ export default {
this.$refs.login.validate(valid => { this.$refs.login.validate(valid => {
if (valid) { if (valid) {
this.login(this.form).then(() => { this.login(this.form).then(() => {
window.opener && window.opener.location.reload() //
let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index' let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : '/index'
this.$router.replace(redirect) this.$router.replace(redirect)
}).catch(res => { }).catch(res => {
@ -204,157 +197,131 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.wrap { .wrap {
min-height: 100%; min-height: 100%;
background-color: #F3F6FA; background-color: #F3F6FA;
overflow: hidden; .login{
.shapes{ min-height: calc(100vh - 70px);
img{ padding-top: calc((100vh - 611px) / 2);
position: absolute; background: url(../../../assets/img/shapes/shape1.png) (0 123px)/auto no-repeat,
} url(../../../assets/img/shapes/shape2.png) (35px 238px)/auto no-repeat,
} url(../../../assets/img/shapes/shape3.png) (0 485px)/auto no-repeat,
.shape1{ url(../../../assets/img/shapes/shape4.png) (right 50%)/auto no-repeat,
top: 123px; url(../../../assets/img/shapes/shape5.png) (right 80%)/auto no-repeat,
} url(../../../assets/img/shapes/shape6.png) (right bottom)/auto no-repeat;
.shape2{ .form{
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;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
width: 436px; width: 436px;
.form{ padding: 38px 38px 60px;
padding: 38px 38px 60px; margin: 0 auto 0;
border-radius: 6px; border-radius: 6px;
background-color: #fff; background-color: #fff;
.title{ .title{
margin-bottom: 25px; margin-bottom: 25px;
font-size: 26px; font-size: 26px;
color: #0B1D30; color: #0B1D30;
letter-spacing: 4px; letter-spacing: 4px;
} }
.tab{ .tab{
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 24px; margin-bottom: 24px;
border-bottom: 2px solid #E1E6F2; border-bottom: 2px solid #E1E6F2;
li{ li{
padding: 18px 0; padding: 18px 0;
margin-bottom: -1px; margin-bottom: -1px;
font-size: 18px; font-size: 18px;
color: #555; color: #555;
cursor: pointer; cursor: pointer;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
&:first-child{ &:first-child{
margin-right: 50px; margin-right: 50px;
} }
&.active{ &.active{
color: #006EFF;; color: #006EFF;;
border-bottom-color: #006EFF; border-bottom-color: #006EFF;
}
} }
} }
.label{ }
margin-bottom: 10px; .label{
color: #105CB2; margin-bottom: 10px;
} color: #105CB2;
/deep/.el-form-item{ }
margin-bottom: 20px; /deep/.el-form-item{
} margin-bottom: 20px;
/deep/.el-input__inner{ }
position: relative; /deep/.el-input__inner{
height: 52px; position: relative;
padding: 0 20px 0 34px; height: 52px;
line-height: 50px; padding: 0 20px 0 34px;
background-color: #FBFBFB; line-height: 50px;
border: 1px solid #E1E6F2; background-color: #FBFBFB;
border-radius: 4px !important; border: 1px solid #E1E6F2;
} border-radius: 4px !important;
.account,.password,.code{ }
z-index: 1; .account,.password,.code{
position: absolute; z-index: 1;
top: 17px; position: absolute;
left: 11px; top: 17px;
width: 18px; left: 11px;
height: 18px; width: 18px;
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat; height: 18px;
} background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
.password{ }
top: 18px; .password{
background-image: url(../../../assets/img/login/password.png); top: 18px;
} background-image: url(../../../assets/img/login/password.png);
.code{ }
top: 18px; .code{
background-image: url(../../../assets/img/login/code.png); top: 18px;
} background-image: url(../../../assets/img/login/code.png);
.ver-img{ }
position: absolute; .ver-img{
top: 1px; position: absolute;
right: 1px; top: 1px;
} right: 1px;
/deep/.el-form-item__error{ }
top: 105%; /deep/.el-form-item__error{
left: auto; top: 105%;
right: 0; left: auto;
color: #FFA94E; right: 0;
} color: #FFA94E;
.submit{ }
width: 100%; .submit{
height: 48px; width: 100%;
margin-top: 30px; height: 48px;
line-height: 48px; margin-top: 30px;
padding: 0; line-height: 48px;
font-size: 20px; padding: 0;
background-color: $main-color; font-size: 20px;
border-radius: 4px; background-color: $main-color;
border: 0; border-radius: 4px;
} border: 0;
} }
} }
} }
.footer{ }
z-index: 3; .copyright{
position: fixed; padding: 18px 0;
bottom: 0; font-size: 12px;
left: 0; text-align: center;
width: 100%; background-color: #F3F6FA;
} a{
.copyright{ color:#B1B4B8;
padding: 18px 0;
font-size: 12px; font-size: 12px;
text-align: center; &:hover{
background-color: #F3F6FA; opacity: .8;
a{
color:#B1B4B8;
font-size: 12px;
&:hover{
opacity: .8;
}
} }
} }
.tips { }
margin: 0 0 10px 5px; .tips {
font-size: 14px; margin: 0 0 10px 5px;
text-align: center; font-size: 14px;
color: #666; text-align: center;
color: #666;
}
@media (max-height: 680px) {
.wrap .login {
padding: 40px 0;
} }
}
</style> </style>

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

Loading…
Cancel
Save