lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add lock page

Browse Source
This commit is contained in:
huzhushan 2021-04-23 19:26:10 +08:00
parent 2a6d0d9630
commit 939daa426c
19 changed files with 1907 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue3 Element Admin</title>
<title>Vue3-Element-Admin</title>
</head>
<body>
<div id="app"></div>

6
package-lock.json generated
View File

@ -1433,6 +1433,12 @@
}
}
},
"crypto-js": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
"integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==",
"dev": true
},
"css-select": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",

1
package.json
View File

@ -32,6 +32,7 @@
"@vue/eslint-config-prettier": "^6.0.0",
"autoprefixer": "^10.2.5",
"babel-eslint": "^10.1.0",
"crypto-js": "^4.0.0",
"element-plus": "^1.0.2-beta.35",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",

170
src/layout/components/Topbar/LockModal.vue Normal file
View File

@ -0,0 +1,170 @@
<!--
* |~~~~~~~|
* | |
* | |
* | |
* | |
* | |
* |~.\\\_\~~~~~~~~~~~~~~xx~~~ ~~~~~~~~~~~~~~~~~~~~~/_//;~|
* | \ o \_ ,XXXXX), _..-~ o / |
* | ~~\ ~-. XXXXX`)))), _.--~~ .-~~~ |
* ~~~~~~~`\ ~\~~~XXX' _/ ';)) |~~~~~~..-~ _.-~ ~~~~~~~
* `\ ~~--`_\~\, ;;;\)__.---.~~~ _.-~
* ~-. `:;;/;; \ _..-~~
* ~-._ `'' /-~-~
* `\ / /
* | , | |
* | ' / |
* \/; |
* ;; |
* `; . |
* |~~~-----.....|
* | \ \
* | /\~~--...__ |
* (| `\ __-\|
* || \_ /~ |
* |) \~-' |
* | | \ '
* | | \ :
* \ | | |
* | ) ( )
* \ /; /\ |
* | |/ |
* | | |
* \ .' ||
* | | | |
* ( | | |
* | \ \ |
* || o `.)|
* |`\\) |
* | |
* | |
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 14:15:50
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 15:24:54
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
<el-dropdown-item @click="dialogVisible = true">锁定屏幕</el-dropdown-item>
<el-dialog
title="锁定屏幕"
v-model="dialogVisible"
width="640px"
custom-class="lock-modal"
append-to-body
>
<div class="userinfo">
<template v-if="!userinfo">
<i class="el-icon-user" />
<h3>admin</h3>
</template>
<template v-else>
<img class="avatar" :src="userinfo.avatar" />
<h3>{{ userinfo.name }}</h3>
</template>
</div>
<el-form :model="lockModel" :rules="lockRules" ref="lockForm">
<el-form-item label="锁屏密码" prop="password">
<el-input
type="password"
v-model.trim="lockModel.password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button
size="small"
class="submit-btn"
type="primary"
@click="submitForm"
>
锁定屏幕
</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue'
import { useUserinfo } from './hooks/useUserinfo'
import { setItem } from '@/utils/storage'
import { AesEncryption } from '@/utils/encrypt'
import { useRouter } from 'vue-router'
export default defineComponent({
setup() {
const router = useRouter()
const dialogVisible = ref(false)
const { userinfo } = useUserinfo()
const lockForm = ref(null)
const lockModel = reactive({
password: '',
})
const lockRules = reactive({
password: [{ required: true, message: '请输入锁屏密码' }],
})
const submitForm = () => {
lockForm.value.validate(valid => {
if (!valid) {
return false
}
// 对密码加密
const encryption = new AesEncryption()
const pwd = encryption.encryptByAES(lockModel.password)
// 存储到localStorage
setItem('__VEA_SCREEN_LOCKED__', pwd)
// 跳转到锁屏页面
router.push('/lock')
})
}
return {
dialogVisible,
userinfo,
lockForm,
lockModel,
lockRules,
submitForm,
}
},
})
</script>
<style lang="scss">
.lock-modal[aria-modal] {
max-width: 90%;
}
</style>
<style lang="scss" scoped>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
i {
font-size: 48px;
color: $mainColor;
}
h3 {
font-size: 14px;
font-weight: normal;
margin: 8px 0;
}
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
}
}
.submit-btn {
width: 100%;
}
</style>

21
src/layout/components/Topbar/Userinfo.vue
View File

@ -37,7 +37,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:47:50
* @LastEditTime: 2021-04-23 15:01:18
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -60,27 +60,40 @@
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>锁定屏幕</el-dropdown-item>
<lock-modal />
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script>
import { computed, defineComponent } from 'vue'
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { useUserinfo } from './hooks/useUserinfo'
import LockModal from './LockModal.vue'
export default defineComponent({
components: {
LockModal,
},
setup() {
const store = useStore()
const router = useRouter()
const userinfo = computed(() => store.state.account.userinfo)
const { userinfo } = useUserinfo()
// 退出
const logout = () => {
// 清除token
store.commit('app/clearToken')
// 清除用户信息
store.commit('account/clearUserinfo')
// 清除标签栏
store.dispatch('tags/delAllTags')
router.push('/login')
}
return {
userinfo,
logout,

45
src/layout/components/Topbar/hooks/useLock.js Normal file
View File

@ -0,0 +1,45 @@
/*
* ::
* :;J7, :, ::;7:
* ,ivYi, , ;LLLFS:
* :iv7Yi :7ri;j5PL
* ,:ivYLvr ,ivrrirrY2X,
* :;r@Wwz.7r: :ivu@kexianli.
* :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur
* ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17
* ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i
* :,, ,,: ,::ir@mingyi.irii:i:::j1jri7ZBOS7ivv,
* ,::, ::rv77iiiriii:iii:i::,rvLq@huhao.Li
* ,, ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:
* ::: ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri
* , 2OBBOi,iiir;r:: ,irriiii::,, ,iv7Luur:
* ,, i78MBBi,:,:::,:, :7FSL: ,iriii:::i::,,:rLqXv::
* : iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::
* , ::::i ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii
* , : , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:
* , ,,,,::::i: @arqiao. ,:,, ,:::ii;i7:
* :, rjujLYLi ,,:::::,:::::::::,, ,:i,:,,,,,::i:iii
* :: BBBBBBBBB0, ,,::: , ,:::::: , ,,,, ,,:::::::
* i, , ,8BMMBBBBBBi ,,:,, ,,, , , , , , :,::ii::i::
* : iZMOMOMBBM2::::::::::,,,, ,,,,,,:,,,::::i:irr:i:::,
* i ,,:;u0MBMOG1L:::i:::::: ,,,::, ,,, ::::::i:i:iirii:i:i:
* : ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::
* : :rk@Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,
* : 5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i@petermu.,
* , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::
* :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:
* ,: :@kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,
* ,,, ,,:,::::::i:iiiii:i::::,, ::::iiiir@xingjief.r;7:i,
* , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::
* :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;@Secbone.ii:::
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 14:08:17
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 14:08:18
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
*/

35
src/layout/components/Topbar/hooks/useUserinfo.js Normal file
View File

@ -0,0 +1,35 @@
/*
* ┌─────────────────────────────────────────────────────────────┐
* │┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐│
* ││Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\ │`~ ││
* │├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┤│
* ││ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{[ │}] │ BS ││
* │├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤│
* ││ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter ││
* │├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───┤│
* ││ Shift │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│Shift │Fn ││
* │└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘│
* │ │Fn │ Alt │ Space │ Alt │Win│ HHKB │
* │ └───┴─────┴───────────────────────┴─────┴───┘ │
* └─────────────────────────────────────────────────────────────┘
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 14:56:06
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 15:00:31
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
*/
import { computed } from 'vue'
import { useStore } from 'vuex'
export const useUserinfo = () => {
const store = useStore()
const userinfo = computed(() => store.state.account.userinfo)
return { userinfo }
}

2
src/main.js
View File

@ -27,7 +27,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:37:28
* @LastEditTime: 2021-04-23 11:08:56
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin

9
src/permission.js
View File

@ -26,7 +26,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:49:02
* @LastEditTime: 2021-04-23 15:36:32
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -36,6 +36,7 @@
import router from '@/router'
import store from '@/store'
import { TOKEN } from '@/store/modules/app' // TOKEN变量名
import { getItem } from '@/utils/storage'
const getPageTitle = title => {
const appTitle = store.state.app.title
@ -64,6 +65,12 @@ router.beforeEach(async to => {
replace: true,
}
} else {
// 判断是否处于锁屏状态
if (to.name !== 'lock' && !!getItem('__VEA_SCREEN_LOCKED__')) {
return { name: 'lock', replace: true }
}
// 获取用户角色信息，根据角色判断权限
let userinfo = store.state.account.userinfo
if (!userinfo) {
try {

4
src/router/index.js
View File

@ -18,7 +18,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 12:48:02
* @LastEditTime: 2021-04-23 15:26:46
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
@ -30,6 +30,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
import redirect from './modules/redirect'
import error from './modules/error'
import login from './modules/login'
import lock from './modules/lock'
import home from './modules/home'
import test from './modules/test'
@ -47,6 +48,7 @@ const router = createRouter({
...login,
...allMenus,
...error,
...lock,
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {

48
src/router/modules/lock.js Normal file
View File

@ -0,0 +1,48 @@
/*
* _______________#########_______________________
* ______________############_____________________
* ______________#############____________________
* _____________##__###########___________________
* ____________###__######_#####__________________
* ____________###_#######___####_________________
* ___________###__##########_####________________
* __________####__###########_####_______________
* ________#####___###########__#####_____________
* _______######___###_########___#####___________
* _______#####___###___########___######_________
* ______######___###__###########___######_______
* _____######___####_##############__######______
* ____#######__#####################_#######_____
* ____#######__##############################____
* ___#######__######_#################_#######___
* ___#######__######_######_#########___######___
* ___#######____##__######___######_____######___
* ___#######________######____#####_____#####____
* ____######________#####_____#####_____####_____
* _____#####________####______#####_____###______
* ______#####______;###________###______#________
* ________##_______####________####______________
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 15:25:15
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 15:29:50
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
*/
const Lock = () => import('@/views/lock/index.vue')
export default [
{
path: '/lock',
name: 'lock',
component: Lock,
meta: {
title: '屏幕已锁定',
},
},
]

2
src/router/modules/test.js
View File

@ -3,7 +3,7 @@
* @version:
* @Date: 2021-04-21 09:18:32
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 09:34:43
* @LastEditTime: 2021-04-23 10:49:35
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin

93
src/utils/encrypt.js Normal file
View File

@ -0,0 +1,93 @@
/*
*
* 　　┏┓　　　┏┓+ +
* 　┏┛┻━━━┛┻┓ + +
* 　┃　　　　　　　┃
* 　┃　　　━　　　┃ ++ + + +
* ████━████ ┃+
* 　┃　　　　　　　┃ +
* 　┃　　　┻　　　┃
* 　┃　　　　　　　┃ + +
* 　┗━┓　　　┏━┛
* 　　　┃　　　┃
* 　　　┃　　　┃ + + + +
* 　　　┃　　　┃
* 　　　┃　　　┃ + 神兽保佑
* 　　　┃　　　┃ 代码无bug
* 　　　┃　　　┃　　+
* 　　　┃　 　　┗━━━┓ + +
* 　　　┃ 　　　　　　　┣┓
* 　　　┃ 　　　　　　　┏┛
* 　　　┗┓┓┏━┳┓┏┛ + + + +
* 　　　　┃┫┫　┃┫┫
* 　　　　┗┻┛　┗┻┛+ + + +
*
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 12:35:44
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 13:59:04
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
*/
import { encrypt, decrypt } from 'crypto-js/aes'
import { parse } from 'crypto-js/enc-utf8'
import pkcs7 from 'crypto-js/pad-pkcs7'
import ECB from 'crypto-js/mode-ecb'
import md5 from 'crypto-js/md5'
import UTF8 from 'crypto-js/enc-utf8'
import Base64 from 'crypto-js/enc-base64'
// 16位密钥
export const KEY_IV = {
key: '_11111000001111@',
iv: '@11111000001111_',
}
// AES加密和解密
export class AesEncryption {
constructor(opt = KEY_IV) {
const { key, iv } = opt
if (key) {
this.key = parse(key)
}
if (iv) {
this.iv = parse(iv)
}
}
get getOptions() {
return {
mode: ECB,
padding: pkcs7,
iv: this.iv,
}
}
encryptByAES(cipherText) {
return encrypt(cipherText, this.key, this.getOptions).toString()
}
decryptByAES(cipherText) {
return decrypt(cipherText, this.key, this.getOptions).toString(UTF8)
}
}
// Base64加密
export function encryptByBase64(cipherText) {
return Base64.stringify(UTF8.parse(cipherText))
}
// Base64解密
export function decryptByBase64(cipherText) {
return Base64.parse(cipherText).toString(UTF8)
}
// MD5加密，不可逆
export function encryptByMd5(password) {
return md5(password).toString()
}

2
src/views/home/index.vue
View File

@ -3,7 +3,7 @@
* @version:
* @Date: 2021-04-20 11:06:21
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-21 09:32:46
* @LastEditTime: 2021-04-23 15:16:12
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin

232
src/views/lock/Clock.vue Normal file
View File

@ -0,0 +1,232 @@
<!--
*
* 　　┏┓　　　┏┓+ +
* 　┏┛┻━━━┛┻┓ + +
* 　┃　　　　　　　┃ 　
* 　┃　　　━　　　┃ ++ + + +
* ████━████ ┃+
* 　┃　　　　　　　┃ +
* 　┃　　　┻　　　┃
* 　┃　　　　　　　┃ + +
* 　┗━┓　　　┏━┛
* 　　　┃　　　┃　　　　　　　　　　　
* 　　　┃　　　┃ + + + +
* 　　　┃　　　┃
* 　　　┃　　　┃ + 神兽保佑
* 　　　┃　　　┃ 代码无bug　　
* 　　　┃　　　┃　　+　　　　　　　　　
* 　　　┃　 　　┗━━━┓ + +
* 　　　┃ 　　　　　　　┣┓
* 　　　┃ 　　　　　　　┏┛
* 　　　┗┓┓┏━┳┓┏┛ + + + +
* 　　　　┃┫┫　┃┫┫
* 　　　　┗┻┛　┗┻┛+ + + +
*
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 15:43:29
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 19:11:44
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
<!-- <div class="clock" ref="oDiv">
<div ref="oH" class="hour"></div>
<div ref="oM" class="min"></div>
<div ref="oS" class="sec"></div>
<div class="dot"></div>
<span
v-for="(item, i) in 60"
:key="i"
:class="i % 5 === 0 ? 'bigScale' : 'scale'"
:style="{ transform: `rotate(${i * 6}deg)` }"
>
<template v-if="i % 5 == 0">
<em v-if="i === 0" :style="{ transform: `rotate(${-1 * i * 6}deg)` }"
>12</em
>
<em v-else :style="{ transform: `rotate(${-1 * i * 6}deg)` }">{{
i / 5
}}</em>
</template>
</span>
</div> -->
<div class="clock-wrapper">
<div class="clock-border">
<div class="clock">
<ul class="minute-marks">
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="five"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="hour" :style="!!h ? { transform: h } : {}">
<div class="hand"></div>
</div>
<div class="minute" :style="!!m ? { transform: m } : {}">
<div class="hand"></div>
</div>
<div class="second" :style="!!s ? { transform: s } : {}">
<div class="hand"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue'
export default defineComponent({
setup() {
const rotate = reactive({
h: '',
m: '',
s: '',
})
const getDeg = () => {
var oDate = new Date()
var h = oDate.getHours()
var m = oDate.getMinutes()
var s = oDate.getSeconds()
var ms = oDate.getMilliseconds()
rotate.h =
'rotate(' + (h + m / 60 + s / 3600 + ms / 3600000) * 30 + 'deg)'
rotate.m = 'rotate(' + (m + s / 60 + ms / 60000) * 6 + 'deg)'
rotate.s = 'rotate(' + (s + ms / 1000) * 6 + 'deg)'
}
onBeforeMount(() => {
getDeg()
})
return toRefs(rotate)
},
})
</script>
<style lang="scss">
@import './style/style.css';
// .clock {
// width: 300px;
// height: 300px;
// background: #ccc;
// border: 1px solid #222;
// border-radius: 50%;
// box-shadow: 2px 2px 5px #222, inset 0 0 10px #222;
// position: relative;
// }
// .clock div {
// transform-origin: center bottom;
// }
// .clock .hour {
// width: 8px;
// height: 60px;
// background: #222;
// position: absolute;
// left: 50%;
// margin-left: -4px;
// top: 50%;
// margin-top: -60px;
// }
// .clock .min {
// width: 6px;
// height: 80px;
// background: #222;
// position: absolute;
// left: 50%;
// margin-left: -3px;
// top: 50%;
// margin-top: -80px;
// }
// .clock .sec {
// width: 4px;
// height: 100px;
// background: #f00;
// position: absolute;
// left: 50%;
// margin-left: -2px;
// top: 50%;
// margin-top: -100px;
// }
// .clock span {
// transform-origin: center 150px;
// }
// .clock span.scale {
// position: absolute;
// left: 50%;
// width: 2px;
// margin-left: -1px;
// height: 8px;
// background: #222;
// }
// .clock span.bigScale {
// position: absolute;
// left: 50%;
// width: 4px;
// margin-left: -2px;
// height: 12px;
// background: #222;
// }
// .clock span em {
// font-style: normal;
// position: absolute;
// width: 80px;
// height: 30px;
// line-height: 30px;
// text-align: center;
// left: 0;
// top: 0;
// margin-left: -40px;
// top: 10px;
// }
// .clock .dot {
// width: 20px;
// height: 20px;
// background: radial-gradient(#999, #222);
// position: absolute;
// left: 50%;
// margin-left: -10px;
// top: 50%;
// margin-top: -10px;
// border-radius: 50%;
// }
</style>

81
src/views/lock/CurrentTime.vue Normal file
View File

@ -0,0 +1,81 @@
<!--
*
* ┏┓　　　┏┓
* ┏┛┻━━━┛┻┓
* ┃　　　　　　　┃
* ┃　　　━　　　┃
* ┃　＞　　　＜　┃
* ┃　　　　　　　┃
* ┃...　⌒　...　┃
* ┃　　　　　　　┃
* ┗━┓　　　┏━┛
* ┃　　　┃　
* ┃　　　┃
* ┃　　　┃
* ┃　　　┃ 神兽保佑
* ┃　　　┃ 代码无bug　　
* ┃　　　┃
* ┃　　　┗━━━┓
* ┃　　　　　　　┣┓
* ┃　　　　　　　┏┛
* ┗┓┓┏━┳┓┏┛
* ┃┫┫　┃┫┫
* ┗┻┛　┗┻┛
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 16:21:00
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 16:50:50
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
<div class="current-time" v-html="currentTime"></div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue'
import { parseTime } from '@/utils'
export default defineComponent({
setup() {
const currentTime = ref(null)
const getTime = () => {
currentTime.value = parseTime(
new Date(),
'<div class="time">{h}:{i}:{s}</div><div class="date">{y}-{m}-{d} 周{a}</div>'
)
requestAnimationFrame(getTime)
}
onMounted(() => {
requestAnimationFrame(getTime)
})
return {
currentTime,
}
},
})
</script>
<style lang="scss" scoped>
.current-time {
color: #fff;
text-align: center;
::v-deep {
.time {
font-family: Arial;
font-size: 48px;
font-weight: 700;
}
.date {
font-size: 20px;
margin-top: 16px;
}
}
}
</style>

70
src/views/lock/Unlock.vue Normal file
View File

@ -0,0 +1,70 @@
<!--
* ::
* :;J7, :, ::;7:
* ,ivYi, , ;LLLFS:
* :iv7Yi :7ri;j5PL
* ,:ivYLvr ,ivrrirrY2X,
* :;r@Wwz.7r: :ivu@kexianli.
* :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur
* ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17
* ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i
* :,, ,,: ,::ir@mingyi.irii:i:::j1jri7ZBOS7ivv,
* ,::, ::rv77iiiriii:iii:i::,rvLq@huhao.Li
* ,, ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:
* ::: ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri
* , 2OBBOi,iiir;r:: ,irriiii::,, ,iv7Luur:
* ,, i78MBBi,:,:::,:, :7FSL: ,iriii:::i::,,:rLqXv::
* : iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::
* , ::::i ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii
* , : , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:
* , ,,,,::::i: @arqiao. ,:,, ,:::ii;i7:
* :, rjujLYLi ,,:::::,:::::::::,, ,:i,:,,,,,::i:iii
* :: BBBBBBBBB0, ,,::: , ,:::::: , ,,,, ,,:::::::
* i, , ,8BMMBBBBBBi ,,:,, ,,, , , , , , :,::ii::i::
* : iZMOMOMBBM2::::::::::,,,, ,,,,,,:,,,::::i:irr:i:::,
* i ,,:;u0MBMOG1L:::i:::::: ,,,::, ,,, ::::::i:i:iirii:i:i:
* : ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::
* : :rk@Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,
* : 5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i@petermu.,
* , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::
* :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:
* ,: :@kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,
* ,,, ,,:,::::::i:iiiii:i::::,, ::::iiiir@xingjief.r;7:i,
* , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::
* :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;@Secbone.ii:::
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 19:17:20
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 19:24:53
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
<h1 class="title">
⚡屏幕已锁定
<div class="unlock"><i class="el-icon-lock"></i>解锁</div>
</h1>
</template>
<style lang="scss" scoped>
.title {
color: #fff;
text-align: center;
font-size: 32px;
margin: 0;
display: flex;
align-items: flex-end;
.unlock {
color: #aaa;
font-size: 16px;
font-weight: normal;
margin-left: 10px;
cursor: pointer;
}
}
</style>

73
src/views/lock/index.vue Normal file
View File

@ -0,0 +1,73 @@
<!--
*
* 　　┏┓　　　┏┓+ +
* 　┏┛┻━━━┛┻┓ + +
* 　┃　　　　　　　┃ 　
* 　┃　　　━　　　┃ ++ + + +
* ████━████ ┃+
* 　┃　　　　　　　┃ +
* 　┃　　　┻　　　┃
* 　┃　　　　　　　┃ + +
* 　┗━┓　　　┏━┛
* 　　　┃　　　┃　　　　　　　　　　　
* 　　　┃　　　┃ + + + +
* 　　　┃　　　┃
* 　　　┃　　　┃ + 神兽保佑
* 　　　┃　　　┃ 代码无bug　　
* 　　　┃　　　┃　　+　　　　　　　　　
* 　　　┃　 　　┗━━━┓ + +
* 　　　┃ 　　　　　　　┣┓
* 　　　┃ 　　　　　　　┏┛
* 　　　┗┓┓┏━┳┓┏┛ + + + +
* 　　　　┃┫┫　┃┫┫
* 　　　　┗┻┛　┗┻┛+ + + +
*
*
* @Descripttion:
* @version:
* @Date: 2021-04-23 15:25:51
* @LastEditors: huzhushan@126.com
* @LastEditTime: 2021-04-23 19:18:50
* @Author: huzhushan@126.com
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
* @Github: https://github.com/huzhushan/vue3-element-admin
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
<div class="lock-wrap">
<Unlock />
<Clock />
<current-time />
</div>
</template>
<script>
import { defineComponent } from 'vue'
import Unlock from './Unlock.vue'
import Clock from './Clock.vue'
import CurrentTime from './CurrentTime.vue'
export default defineComponent({
name: 'lock',
components: {
Unlock,
Clock,
CurrentTime,
},
setup() {},
})
</script>
<style lang="scss" scoped>
.lock-wrap {
background: #222;
height: 100%;
min-height: 480px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
overflow: hidden;
}
</style>

1021
src/views/lock/style/style.css Normal file
View File

File diff suppressed because it is too large Load Diff