huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

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

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent ccc152fcb8
commit 34d93e1f29
4 changed files with 154 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

18
src/layouts/header/index.vue
Unescape View File

@ -23,11 +23,9 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div v-else-if="!isLogin">
<router-link class="login" to="/login" target="_blank">
<img src="@/assets/img/user.png" alt="">
<span>登录</span>
</router-link>
<div class="login" v-else-if="!isLogin" @click="toLogin">
<img src="@/assets/img/user.png" alt="">
<span>登录</span>
</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({
index: '/login',
title: '登录'
})
window.open(this.$router.resolve('/login').href)
},
// 跳转到管理员后台
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;

40
src/layouts/home/index.vue
Unescape View File

@ -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>

269
src/pages/account/login/index.vue
Unescape View File

@ -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,157 +197,131 @@ export default {
</script>
<style scoped lang="scss">
.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;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
.wrap {
min-height: 100%;
background-color: #F3F6FA;
.login{
min-height: calc(100vh - 70px);
padding-top: calc((100vh - 611px) / 2);
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,
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;
.form{
padding: 38px 38px 60px;
border-radius: 6px;
background-color: #fff;
.title{
margin-bottom: 25px;
font-size: 26px;
color: #0B1D30;
letter-spacing: 4px;
}
.tab{
display: flex;
align-items: center;
margin-bottom: 24px;
border-bottom: 2px solid #E1E6F2;
li{
padding: 18px 0;
margin-bottom: -1px;
font-size: 18px;
color: #555;
cursor: pointer;
border-bottom: 4px solid transparent;
&:first-child{
margin-right: 50px;
}
&.active{
color: #006EFF;;
border-bottom-color: #006EFF;
}
padding: 38px 38px 60px;
margin: 0 auto 0;
border-radius: 6px;
background-color: #fff;
.title{
margin-bottom: 25px;
font-size: 26px;
color: #0B1D30;
letter-spacing: 4px;
}
.tab{
display: flex;
align-items: center;
margin-bottom: 24px;
border-bottom: 2px solid #E1E6F2;
li{
padding: 18px 0;
margin-bottom: -1px;
font-size: 18px;
color: #555;
cursor: pointer;
border-bottom: 4px solid transparent;
&:first-child{
margin-right: 50px;
}
&.active{
color: #006EFF;;
border-bottom-color: #006EFF;
}
}
.label{
margin-bottom: 10px;
color: #105CB2;
}
/deep/.el-form-item{
margin-bottom: 20px;
}
/deep/.el-input__inner{
position: relative;
height: 52px;
padding: 0 20px 0 34px;
line-height: 50px;
background-color: #FBFBFB;
border: 1px solid #E1E6F2;
border-radius: 4px !important;
}
.account,.password,.code{
z-index: 1;
position: absolute;
top: 17px;
left: 11px;
width: 18px;
height: 18px;
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
}
.password{
top: 18px;
background-image: url(../../../assets/img/login/password.png);
}
.code{
top: 18px;
background-image: url(../../../assets/img/login/code.png);
}
.ver-img{
position: absolute;
top: 1px;
right: 1px;
}
/deep/.el-form-item__error{
top: 105%;
left: auto;
right: 0;
color: #FFA94E;
}
.submit{
width: 100%;
height: 48px;
margin-top: 30px;
line-height: 48px;
padding: 0;
font-size: 20px;
background-color: $main-color;
border-radius: 4px;
border: 0;
}
}
.label{
margin-bottom: 10px;
color: #105CB2;
}
/deep/.el-form-item{
margin-bottom: 20px;
}
/deep/.el-input__inner{
position: relative;
height: 52px;
padding: 0 20px 0 34px;
line-height: 50px;
background-color: #FBFBFB;
border: 1px solid #E1E6F2;
border-radius: 4px !important;
}
.account,.password,.code{
z-index: 1;
position: absolute;
top: 17px;
left: 11px;
width: 18px;
height: 18px;
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
}
.password{
top: 18px;
background-image: url(../../../assets/img/login/password.png);
}
.code{
top: 18px;
background-image: url(../../../assets/img/login/code.png);
}
.ver-img{
position: absolute;
top: 1px;
right: 1px;
}
/deep/.el-form-item__error{
top: 105%;
left: auto;
right: 0;
color: #FFA94E;
}
.submit{
width: 100%;
height: 48px;
margin-top: 30px;
line-height: 48px;
padding: 0;
font-size: 20px;
background-color: $main-color;
border-radius: 4px;
border: 0;
}
}
}
.footer{
z-index: 3;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.copyright{
padding: 18px 0;
}
.copyright{
padding: 18px 0;
font-size: 12px;
text-align: center;
background-color: #F3F6FA;
a{
color:#B1B4B8;
font-size: 12px;
text-align: center;
background-color: #F3F6FA;
a{
color:#B1B4B8;
font-size: 12px;
&:hover{
opacity: .8;
}
&:hover{
opacity: .8;
}
}
.tips {
margin: 0 0 10px 5px;
font-size: 14px;
text-align: center;
color: #666;
}
.tips {
margin: 0 0 10px 5px;
font-size: 14px;
text-align: center;
color: #666;
}
@media (max-height: 680px) {
.wrap .login {
padding: 40px 0;
}
}
</style>

2
src/setting.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save