|
|
@ -1,92 +1,73 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div |
|
|
|
<div :class="prefixCls" |
|
|
|
:class="prefixCls" |
|
|
|
class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center" |
|
|
|
class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center" |
|
|
|
|
|
|
|
> |
|
|
|
> |
|
|
|
<div |
|
|
|
<!--解锁区域--> |
|
|
|
:class="`${prefixCls}__unlock`" |
|
|
|
<div v-show="showDate" |
|
|
|
class=" |
|
|
|
:class="`${prefixCls}__unlock`" |
|
|
|
absolute |
|
|
|
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" |
|
|
|
top-0 |
|
|
|
@click="handleShowForm(false)" |
|
|
|
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 /> |
|
|
|
<LockOutlined/> |
|
|
|
<span>{{ t('sys.lock.unlock') }}</span> |
|
|
|
<span>{{ t('sys.lock.unlock') }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--锁屏时间区域--> |
|
|
|
<div class="flex w-screen h-screen justify-center items-center"> |
|
|
|
<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"> |
|
|
|
<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>{{ 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 }} |
|
|
|
{{ meridiem }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `"> |
|
|
|
<div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `"> |
|
|
|
<span> {{ minute }}</span> |
|
|
|
<span>{{ minute }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--锁屏登录区域--> |
|
|
|
<transition name="fade-slide"> |
|
|
|
<transition name="fade-slide"> |
|
|
|
<div :class="`${prefixCls}-entry`" v-show="!showDate"> |
|
|
|
<div :class="`${prefixCls}-entry`" v-show="!showDate"> |
|
|
|
<div :class="`${prefixCls}-entry-content`"> |
|
|
|
<div :class="`${prefixCls}-entry-content`"> |
|
|
|
<div :class="`${prefixCls}-entry__header enter-x`"> |
|
|
|
<div :class="`${prefixCls}-entry__header enter-x`"> |
|
|
|
<img :src="userinfo.avatar" :class="`${prefixCls}-entry__header-img`" /> |
|
|
|
<img :src="userinfo.avatar" :class="`${prefixCls}-entry__header-img`"/> |
|
|
|
<p :class="`${prefixCls}-entry__header-name`"> |
|
|
|
<p :class="`${prefixCls}-entry__header-name`"> |
|
|
|
{{ userinfo.realName }} |
|
|
|
{{ userinfo.nickName }} |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<InputPassword |
|
|
|
<InputPassword v-model:value="password" |
|
|
|
:placeholder="t('sys.lock.placeholder')" |
|
|
|
:placeholder="t('sys.lock.placeholder')" |
|
|
|
class="enter-x" |
|
|
|
class="enter-x" |
|
|
|
v-model:value="password" |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
<span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg"> |
|
|
|
<span :class="`${prefixCls}-entry__err-msg enter-x`" v-if="errMsg"> |
|
|
|
{{ t('sys.lock.alert') }} |
|
|
|
{{ t('sys.lock.alert') }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div :class="`${prefixCls}-entry__footer enter-x`"> |
|
|
|
<div :class="`${prefixCls}-entry__footer enter-x`"> |
|
|
|
<a-button |
|
|
|
<a-button type="link" |
|
|
|
type="link" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
class="mt-2 mr-2 enter-x" |
|
|
|
class="mt-2 mr-2 enter-x" |
|
|
|
:disabled="loading" |
|
|
|
:disabled="loading" |
|
|
|
@click="handleShowForm(true)" |
|
|
|
@click="handleShowForm(true)" |
|
|
|
>{{ t('common.back') }}</a-button> |
|
|
|
> |
|
|
|
<a-button type="link" |
|
|
|
{{ t('common.back') }} |
|
|
|
size="small" |
|
|
|
</a-button> |
|
|
|
class="mt-2 mr-2 enter-x" |
|
|
|
<a-button |
|
|
|
:disabled="loading" |
|
|
|
type="link" |
|
|
|
@click="goLogin" |
|
|
|
size="small" |
|
|
|
>{{ t('sys.lock.backToLogin') }}</a-button> |
|
|
|
class="mt-2 mr-2 enter-x" |
|
|
|
<a-button type="link" |
|
|
|
:disabled="loading" |
|
|
|
size="small" |
|
|
|
@click="goLogin" |
|
|
|
class="mt-2" |
|
|
|
> |
|
|
|
:loading="loading" |
|
|
|
{{ t('sys.lock.backToLogin') }} |
|
|
|
@click="unLock()" |
|
|
|
</a-button> |
|
|
|
>{{ t('sys.lock.entry') }}</a-button> |
|
|
|
<a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loading"> |
|
|
|
|
|
|
|
{{ t('sys.lock.entry') }} |
|
|
|
|
|
|
|
</a-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
</transition> |
|
|
|
|
|
|
|
<!--锁屏登录时间区域--> |
|
|
|
<div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y"> |
|
|
|
<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"> |
|
|
|
<div v-show="!showDate" class="text-5xl mb-4 enter-x"> |
|
|
|
{{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span> |
|
|
|
{{ hour }}:{{ minute }} |
|
|
|
|
|
|
|
<span class="text-3xl">{{ meridiem }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div> |
|
|
|
<div class="text-2xl"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -100,34 +81,26 @@ |
|
|
|
import { useI18n } from '/@/hooks/web/useI18n'; |
|
|
|
import { useI18n } from '/@/hooks/web/useI18n'; |
|
|
|
import { useNow } from './useNow'; |
|
|
|
import { useNow } from './useNow'; |
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
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 InputPassword = Input.Password; |
|
|
|
|
|
|
|
|
|
|
|
const password = ref(''); |
|
|
|
const password = ref(''); |
|
|
|
const loading = ref(false); |
|
|
|
const loading = ref(false); |
|
|
|
const errMsg = ref(false); |
|
|
|
const errMsg = ref(false); |
|
|
|
const showDate = ref(true); |
|
|
|
const showDate = ref(true); |
|
|
|
|
|
|
|
|
|
|
|
const { prefixCls } = useDesign('lock-page'); |
|
|
|
const { prefixCls } = useDesign('lock-page'); |
|
|
|
const lockStore = useLockStore(); |
|
|
|
const lockStore = useLockStore(); |
|
|
|
const userStore = useUserStore(); |
|
|
|
const userStore = useUserStore(); |
|
|
|
|
|
|
|
|
|
|
|
const { hour, month, minute, meridiem, year, day, week } = useNow(true); |
|
|
|
const { hour, month, minute, meridiem, year, day, week } = useNow(true); |
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
|
const { t } = useI18n(); |
|
|
|
|
|
|
|
const userinfo = computed<UserInfo>(() => { |
|
|
|
const userinfo = computed(() => { |
|
|
|
|
|
|
|
return userStore.getUserInfo || {}; |
|
|
|
return userStore.getUserInfo || {}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** 解锁 */ |
|
|
|
* @description: unLock |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
async function unLock() { |
|
|
|
async function unLock() { |
|
|
|
if (!password.value) { |
|
|
|
if (!password.value) return; |
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
let pwd = password.value; |
|
|
|
let pwd = password.value; |
|
|
|
try { |
|
|
|
try { |
|
|
|
loading.value = true; |
|
|
|
loading.value = true; |
|
|
@ -138,11 +111,13 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 跳转登陆页面 */ |
|
|
|
function goLogin() { |
|
|
|
function goLogin() { |
|
|
|
userStore.logout(true); |
|
|
|
userStore.logout(true); |
|
|
|
lockStore.resetLockInfo(); |
|
|
|
lockStore.resetLockInfo(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 处理显示锁屏登录区域 */ |
|
|
|
function handleShowForm(show = false) { |
|
|
|
function handleShowForm(show = false) { |
|
|
|
showDate.value = show; |
|
|
|
showDate.value = show; |
|
|
|
} |
|
|
|
} |
|
|
|