123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- <template>
- <div class="vab-lock">
- <vab-icon icon="lock-line" @click="handleLock" />
- <el-collapse-transition>
- <div v-show="lock" class="vab-screen-lock">
- <div
- class="vab-screen-lock-background"
- :style="{
- background: `fixed url(${background}) center`,
- backgroundSize: '100% 100%',
- filter: 'blur(10px)',
- transform: 'scale(1.05)',
- }"
- ></div>
- <div class="vab-screen-lock-content">
- <div class="vab-screen-lock-content-title">
- <el-avatar :size="180" :src="avatar" />
- <vab-icon icon="lock-line" />
- {{ title }} {{ translate('屏幕已锁定') }}
- </div>
- <div class="vab-screen-lock-content-form">
- <el-form ref="formRef" :model="form" :rules="rules" @submit.prevent>
- <el-form-item label="" :label-width="0" prop="password">
- <el-input v-model="form.password" v-focus autocomplete="off" :placeholder="translate('请输入密码123456')" type="password">
- <template #suffix>
- <el-button native-type="submit" type="primary" @click="handleUnLock">
- <vab-icon icon="lock-line" />
- <span>{{ translate('解锁') }}</span>
- </el-button>
- </template>
- </el-input>
- </el-form-item>
- </el-form>
- </div>
- <span @click="randomBackground">{{ translate('切换壁纸') }}</span>
- </div>
- </div>
- </el-collapse-transition>
- </div>
- </template>
- <script lang="ts" setup>
- import { translate } from '/@/i18n'
- import { useSettingsStore } from '/@/store/modules/settings'
- import { useUserStore } from '/@/store/modules/user'
- defineOptions({
- name: 'VabLock',
- })
- const userStore = useUserStore()
- const { avatar } = storeToRefs(userStore)
- const settingsStore = useSettingsStore()
- const { lock, title } = storeToRefs(settingsStore)
- const { handleLock: _handleLock, handleUnLock: _handleUnLock } = settingsStore
- const url = 'https://gcore.jsdelivr.net/gh/chuzhixin/image/vab-image-lock/'
- const background = ref(`${url}${Math.round(Math.random() * 31)}.jpg`)
- const randomBackground = () => {
- background.value = `${url}${Math.round(Math.random() * 31)}.jpg`
- }
- const validatePass = (rule: any, value: string, callback: any) => {
- if (value === '' || value !== '123456') {
- callback(new Error('请输入正确的密码'))
- } else {
- callback()
- }
- }
- const formRef = ref()
- const form = ref({
- password: '123456',
- })
- const rules = {
- password: [{ validator: validatePass, trigger: 'blur' }],
- }
- const handleUnLock = () => {
- formRef.value.validate(async (valid: boolean) => {
- if (valid) {
- setTimeout(async () => {
- await _handleUnLock()
- }, 500)
- }
- })
- }
- const handleLock = () => {
- _handleLock()
- }
- </script>
- <style lang="scss" scoped>
- .vab-screen-lock {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: var(--el-z-index);
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- font-weight: bold;
- background: var(--el-mask-color);
- backdrop-filter: blur(10px);
- opacity: var(--opacity-value);
- &-background {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: calc(var(--el-z-index) - 1);
- }
- &-content {
- z-index: var(--el-z-index);
- width: 400px;
- padding: 40px 55px 40px 55px;
- color: var(--el-color-grey);
- text-align: center;
- background: var(--el-mask-color);
- backdrop-filter: blur(10px);
- border-radius: 15px;
- > span {
- font-size: var(--el-font-size-small);
- cursor: pointer;
- }
- &-title {
- line-height: 50px;
- color: var(--el-color-grey);
- text-align: center;
- :deep() {
- .el-avatar {
- width: 150px;
- height: 150px;
- img {
- padding: 30px;
- cursor: pointer;
- }
- }
- .ri-lock-line {
- display: block;
- margin: auto !important;
- font-size: 30px;
- color: var(--el-color-grey) !important;
- }
- }
- }
- &-form {
- :deep() {
- .el-input {
- position: relative;
- width: 100%;
- height: 40px;
- line-height: 40px;
- .el-input__wrapper {
- padding-right: 0;
- border: 1px solid var(--el-color-primary);
- box-shadow: none;
- .el-input__suffix {
- .el-button {
- position: absolute;
- right: -1px;
- height: 40px;
- margin-left: 0 !important;
- line-height: 40px;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- .ri-lock-line {
- margin-left: 0 !important;
- }
- }
- .el-input__validateIcon {
- display: none;
- }
- }
- }
- }
- }
- }
- }
- @media (max-width: 576px) {
- .vab-screen-lock-content {
- width: 100% !important;
- margin: 5vw;
- }
- }
- }
- </style>
|