md
This commit is contained in:
linfso
parent
85fe01e1c2
commit
b7059bbd1a
177
src/assets/styles/unlock.scss
Normal file
177
src/assets/styles/unlock.scss
Normal file
@ -0,0 +1,177 @@
|
||||
.unlock-body-con {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -200px;
|
||||
transform-origin: center center;
|
||||
z-index: 10000;
|
||||
.unlock-avator-con {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
z-index: 12;
|
||||
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
|
||||
.unlock-avator-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 7;
|
||||
}
|
||||
.unlock-avator-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 11600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
color: white;
|
||||
span {
|
||||
display: block;
|
||||
margin: 20px auto 5px;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&:hover .unlock-avator-cover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
.unlock-avator-under-back {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-45px, -50%);
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background:rgb(16, 22, 44);;
|
||||
transition: all 0.5s;
|
||||
z-index: 5;
|
||||
}
|
||||
.unlock-input-con {
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
width: 350px;
|
||||
top: 15px;
|
||||
right: 0px;
|
||||
.unlock-input-overflow-con {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
.unlock-overflow-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease 0.5s;
|
||||
.unlock-input {
|
||||
float: left;
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
height: 22px;
|
||||
width: 230px;
|
||||
font-size: 18px;
|
||||
outline: none;
|
||||
padding: 11px 10px 11px 30px;
|
||||
border: 2px solid #e2ddde;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.unlock-btn {
|
||||
float: left;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
padding: 7px 30px;
|
||||
cursor: pointer;
|
||||
border-radius: 0 25px 25px 0;
|
||||
border: 2px solid #e2ddde;
|
||||
border-left: none;
|
||||
background: #2d8cf0;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
margin-top: 10px;
|
||||
&:hover {
|
||||
background: #5cadff;
|
||||
box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
.click-unlock-btn {
|
||||
background: #2b85e4 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.unlock-locking-tip-con {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
bottom: -50px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@keyframes unlock-in {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
80% {
|
||||
transform: scale(0);
|
||||
}
|
||||
88% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes unlock-out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
.show-unlock-enter-active {
|
||||
animation: unlock-in 1.4s ease;
|
||||
}
|
||||
.show-unlock-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.show-unlock-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.unlock-con {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
69
src/components/LockScreen/lock.vue
Normal file
69
src/components/LockScreen/lock.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div @click="lockScreen"
|
||||
style="cursor:pointer;">
|
||||
<i class="iconfont iconsuopingmima"
|
||||
v-show="false"
|
||||
@click="lockScreen"
|
||||
style="cursor: pointer;color:white"></i>
|
||||
<span style="font-size:14px;color:white;margin-left:5px" v-show="false">锁屏</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookies from 'js-cookie';
|
||||
const setLockBackSize = () => {
|
||||
let x = document.body.clientWidth;
|
||||
let y = document.body.clientHeight;
|
||||
let r = Math.sqrt(x * x + y * y);
|
||||
return parseInt(r);
|
||||
};
|
||||
export default {
|
||||
name: 'lockScreen',
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
lockScreen () {
|
||||
let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
lockScreenBack.style.transition = 'all 3s';
|
||||
lockScreenBack.style.zIndex = 10000;
|
||||
lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px rgb(16, 22, 44) inset';
|
||||
this.showUnlock = true;
|
||||
Cookies.set('pageRoute', this.$route.path); // 本地存储锁屏之前打开的页面以便解锁后打开
|
||||
setTimeout(() => {
|
||||
lockScreenBack.style.transition = 'all 0s';
|
||||
this.$router.push({
|
||||
name: 'locking'
|
||||
});
|
||||
}, 800);
|
||||
Cookies.set('locking', '1');
|
||||
this.$emit('clearTime')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let lockScreenBack;
|
||||
if (!document.getElementById('lock_screen_back')) {
|
||||
let lockdiv = document.createElement('div');
|
||||
lockdiv.setAttribute('id', 'lock_screen_back');
|
||||
lockdiv.setAttribute('class', 'lock-screen-back');
|
||||
document.body.appendChild(lockdiv);
|
||||
lockScreenBack = document.getElementById('lock_screen_back');
|
||||
window.addEventListener('resize', () => {
|
||||
let size = setLockBackSize();
|
||||
this.lockScreenSize = size;
|
||||
lockScreenBack.style.transition = 'all 0s';
|
||||
lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
|
||||
});
|
||||
} else {
|
||||
lockScreenBack = document.getElementById('lock_screen_back');
|
||||
}
|
||||
let size = setLockBackSize();
|
||||
this.lockScreenSize = size;
|
||||
lockScreenBack.style.transition = 'all 3s';
|
||||
lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
66
src/components/LockScreen/locking-page.vue
Normal file
66
src/components/LockScreen/locking-page.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%;background: rgb(16, 22, 44)">
|
||||
<div class="unlock-con"
|
||||
style="z-index:10000">
|
||||
<unlock :show-unlock="showUnlock"
|
||||
@on-unlock="handleUnlock"
|
||||
@on-unlockFalse="handleUnlockFalse"></unlock>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import unlock from './unlock.vue';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
unlock
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showUnlock: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleUnlock () {
|
||||
let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
this.showUnlock = false;
|
||||
lockScreenBack.style.zIndex = 1005;
|
||||
lockScreenBack.style.boxShadow = '0 0 0 0 #667aa6 inset';
|
||||
this.$router.push({
|
||||
path: Cookies.get('pageRoute') // 解锁之后跳转到锁屏之前的页面
|
||||
});
|
||||
}
|
||||
,
|
||||
handleUnlockFalse () {
|
||||
let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
this.showUnlock = false;
|
||||
lockScreenBack.style.zIndex = 1005;
|
||||
lockScreenBack.style.boxShadow = '0 0 0 0 #667aa6 inset';
|
||||
sessionStorage.clear()
|
||||
localStorage.clear()
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
});
|
||||
window.document.title = '登录'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showUnlock = true;
|
||||
history.pushState(null, null, document.URL);
|
||||
window.addEventListener('popstate', function () {
|
||||
history.pushState(null, null, document.URL);
|
||||
});
|
||||
|
||||
if (!document.getElementById('lock_screen_back')) {
|
||||
let lockdiv = document.createElement('div');
|
||||
lockdiv.setAttribute('id', 'lock_screen_back');
|
||||
lockdiv.setAttribute('class', 'lock-screen-back');
|
||||
document.body.appendChild(lockdiv);
|
||||
}
|
||||
let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
lockScreenBack.style.zIndex = 1005;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
147
src/components/LockScreen/unlock.vue
Normal file
147
src/components/LockScreen/unlock.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<style lang="scss">
|
||||
@import "@/assets/styles/unlock.scss";
|
||||
.unlock-btn {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<transition name="show-unlock">
|
||||
<div class="unlock-body-con"
|
||||
v-if="showUnlock"
|
||||
@keydown.enter="handleUnlock"
|
||||
style="z-index:10000">
|
||||
<div @click="handleClickAvator"
|
||||
class="unlock-avator-con"
|
||||
:style="{marginLeft: avatorLeft}"
|
||||
style="padding:18px">
|
||||
<img class="unlock-avator-img"
|
||||
:src="headPortrait">
|
||||
<div class="unlock-avator-cover">
|
||||
<span>
|
||||
<i class="el-icon-key"></i>
|
||||
</span>
|
||||
<p>解锁</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unlock-avator-under-back"
|
||||
:style="{marginLeft: avatorLeft}"></div>
|
||||
<div class="unlock-input-con">
|
||||
<div class="unlock-input-overflow-con">
|
||||
<div class="unlock-overflow-body"
|
||||
:style="{right: inputLeft}"
|
||||
style="display: flex;align-items: center">
|
||||
<input ref="inputEle"
|
||||
v-model="password"
|
||||
autocomplete="new-password"
|
||||
class="unlock-input"
|
||||
type="password"
|
||||
placeholder="密码同登录密码" />
|
||||
<button ref="unlockBtn"
|
||||
@mousedown="unlockMousedown"
|
||||
@mouseup="unlockMouseup"
|
||||
@click="handleUnlock"
|
||||
class="unlock-btn"
|
||||
style="display: flex;align-items: center;height:48px">
|
||||
<i class="el-icon-key" style="font-size:25px;color:white;transform:rotate(90deg)"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unlock-locking-tip-con">已锁定</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Cookies from 'js-cookie';
|
||||
export default {
|
||||
name: 'Unlock',
|
||||
data () {
|
||||
return {
|
||||
avatorLeft: '0px',
|
||||
inputLeft: '400px',
|
||||
password: '',
|
||||
check: null,
|
||||
errorNum: 0,
|
||||
headPortrait:require('@/assets/images/guideLogo.png'),
|
||||
keyLogo:require('@/assets/images/logo/short_logo.png'),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
showUnlock: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['name'])
|
||||
},
|
||||
methods: {
|
||||
validator () {
|
||||
let params = {
|
||||
username:this.name,
|
||||
password:this.password,
|
||||
rememberMe:false
|
||||
}
|
||||
if(this.isEmpty(this.password)){
|
||||
this.$modal.msgWarning('请输入解锁密码!')
|
||||
return
|
||||
}
|
||||
this.$store.dispatch("Login", params).then(() => {
|
||||
this.avatorLeft = '0px';
|
||||
this.inputLeft = '400px';
|
||||
this.password = '';
|
||||
Cookies.set('locking', '0');
|
||||
this.$emit('on-unlock');
|
||||
let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
lockScreenBack.style.zIndex = -1;
|
||||
this.errorNum = 0;
|
||||
this.$modal.msgSuccess('密码正确，解锁成功');
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
handleClickAvator () {
|
||||
this.avatorLeft = '-184px';
|
||||
this.inputLeft = '0px';
|
||||
this.$refs.inputEle.focus();
|
||||
},
|
||||
handleUnlock (e) {
|
||||
this.validator()
|
||||
// if (this.password == sessionStorage.loginPwd) {
|
||||
// this.avatorLeft = '0px';
|
||||
// this.inputLeft = '400px';
|
||||
// this.password = '';
|
||||
// Cookies.set('locking', '0');
|
||||
// this.$emit('on-unlock');
|
||||
// let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
// lockScreenBack.style.zIndex = -1;
|
||||
// this.errorNum = 0;
|
||||
// this.$modal.msgSuccess('密码正确，解锁成功');
|
||||
// } else {
|
||||
// this.errorNum = this.errorNum + 1;
|
||||
// if (this.errorNum === 3) {
|
||||
// this.avatorLeft = '0px';
|
||||
// this.inputLeft = '400px';
|
||||
// this.password = '';
|
||||
// Cookies.set('locking', '0');
|
||||
// this.$emit('on-unlockFalse');
|
||||
// let lockScreenBack = document.getElementById('lock_screen_back');
|
||||
// lockScreenBack.style.zIndex = -1;
|
||||
// this.errorNum = 0;
|
||||
// } else {
|
||||
// this.$modal.msgWarning('密码错误' + this.errorNum + '次,连续三次将自动退出！请重新输入');
|
||||
// }
|
||||
// }
|
||||
},
|
||||
unlockMousedown () {
|
||||
this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
|
||||
},
|
||||
unlockMouseup () {
|
||||
this.$refs.unlockBtn.className = 'unlock-btn';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user