@ -1,38 +1,21 @@
@@ -1,38 +1,21 @@
< template >
< div
: class = "prefixCls"
< div :class ="prefixCls"
class = "fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
>
< div
<!-- 解锁区域 -- >
< div v -show = " showDate "
: class = "`${prefixCls}__unlock`"
class = "
absolute
top - 0
left - 1 / 2
flex
pt - 5
h - 16
items - center
justify - center
sm : text - md
xl : text - xl
text - white
flex - col
cursor - pointer
transform
translate - x - 1 / 2
"
class = "absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
@ click = "handleShowForm(false)"
v - show = "showDate"
>
< LockOutlined / >
< span > { { t ( 'sys.lock.unlock' ) } } < / span >
< / div >
<!-- 锁屏时间区域 -- >
< div class = "flex w-screen h-screen justify-center items-center" >
< div :class ="`${prefixCls}__hour`" class = "relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5" >
< span > { { hour } } < / span >
< span class = "meridiem absolute left-5 top-5 text-md xl:text-xl" v-show ="showDate " >
< span v-show ="showDate" class="meridiem absolute left-5 top-5 text-md xl:text-xl" >
{ { meridiem } }
< / span >
< / div >
@ -40,53 +23,51 @@
@@ -40,53 +23,51 @@
< span > { { minute } } < / span >
< / div >
< / div >
<!-- 锁屏登录区域 -- >
< transition name = "fade-slide" >
< div :class ="`${prefixCls}-entry`" v-show ="!showDate" >
< div :class ="`${prefixCls}-entry-content`" >
< div : class = "`${prefixCls}-entry__header enter-x`" >
< img :src ="userinfo.avatar" :class ="`${prefixCls}-entry__header-img`" / >
< p :class ="`${prefixCls}-entry__header-name`" >
{ { userinfo . real Name} }
{ { userinfo . nick Name} }
< / p >
< / div >
< InputPassword
< InputPassword v -model :value ="password"
: placeholder = "t('sys.lock.placeholder')"
class = "enter-x"
v - model : value = "password"
/ >
< span : class = "`${prefixCls}-entry__err-msg enter-x`" v-if ="errMsg" >
{ { t ( 'sys.lock.alert' ) } }
< / span >
< div : class = "`${prefixCls}-entry__footer enter-x`" >
< a -button
type = "link"
< a -button type = "link"
size = "small"
class = "mt-2 mr-2 enter-x"
: disabled = "loading"
@ click = "handleShowForm(true)"
>
{ { t ( 'common.back' ) } }
< / a - b u t t o n >
< a -button
type = "link"
> { { t ( 'common.back' ) } } < / a - b u t t o n >
< a -button type = "link"
size = "small"
class = "mt-2 mr-2 enter-x"
: disabled = "loading"
@ click = "goLogin"
>
{ { t ( 'sys.lock.backToLogin' ) } }
< / a - b u t t o n >
< a -button class = "mt-2" type = "link" size = "small" @click ="unLock()" :loading ="loading" >
{ { t ( 'sys.lock.entry' ) } }
< / a - b u t t o n >
> { { t ( 'sys.lock.backToLogin' ) } } < / a - b u t t o n >
< a -button type = "link"
size = "small"
class = "mt-2"
: loading = "loading"
@ click = "unLock()"
> { { t ( 'sys.lock.entry' ) } } < / a - b u t t o n >
< / div >
< / div >
< / div >
< / transition >
<!-- 锁屏登录时间区域 -- >
< div class = "absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y" >
< div class = "text-5xl mb-4 enter-x" v-show ="!showDate" >
{ { hour } } : { { minute } } < span class = "text-3xl" > { { meridiem } } < / span >
< div v-show ="!showDate" class="text-5xl mb-4 enter-x" >
{ { hour } } : { { minute } }
< span class = "text-3xl" > { { meridiem } } < / span >
< / div >
< div class = "text-2xl" > { { year } } / { { month } } / { { day } } { { week } } < / div >
< / div >
@ -100,34 +81,26 @@
@@ -100,34 +81,26 @@
import { useI18n } from '/@/hooks/web/useI18n' ;
import { useNow } from './useNow' ;
import { useDesign } from '/@/hooks/web/useDesign' ;
import { LockOutlined } from '@ant-design/icons-vue'
import { LockOutlined } from '@ant-design/icons-vue' ;
import { UserInfo } from "/#/store" ;
const InputPassword = Input . Password ;
const password = ref ( '' ) ;
const loading = ref ( false ) ;
const errMsg = ref ( false ) ;
const showDate = ref ( true ) ;
const { prefixCls } = useDesign ( 'lock-page' ) ;
const lockStore = useLockStore ( ) ;
const userStore = useUserStore ( ) ;
const { hour , month , minute , meridiem , year , day , week } = useNow ( true ) ;
const { t } = useI18n ( ) ;
const userinfo = computed ( ( ) => {
const userinfo = computed < UserInfo > ( ( ) => {
return userStore . getUserInfo || { } ;
} ) ;
/ * *
* @ description : unLock
* /
/** 解锁 */
async function unLock ( ) {
if ( ! password . value ) {
return ;
}
if ( ! password . value ) return ;
let pwd = password . value ;
try {
loading . value = true ;
@ -138,11 +111,13 @@
@@ -138,11 +111,13 @@
}
}
/** 跳转登陆页面 */
function goLogin ( ) {
userStore . logout ( true ) ;
lockStore . resetLockInfo ( ) ;
}
/** 处理显示锁屏登录区域 */
function handleShowForm ( show = false ) {
showDate . value = show ;
}
wangxiang
3 years ago