add lock page
This commit is contained in:
huzhushan
parent
2a6d0d9630
commit
939daa426c
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vue3 Element Admin</title>
|
<title>Vue3-Element-Admin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -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": {
|
"css-select": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
|
||||||
|
|||||||
@ -32,6 +32,7 @@
|
|||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
"autoprefixer": "^10.2.5",
|
"autoprefixer": "^10.2.5",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
|
"crypto-js": "^4.0.0",
|
||||||
"element-plus": "^1.0.2-beta.35",
|
"element-plus": "^1.0.2-beta.35",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-prettier": "^3.1.3",
|
"eslint-plugin-prettier": "^3.1.3",
|
||||||
|
|||||||
170
src/layout/components/Topbar/LockModal.vue
Normal file
170
src/layout/components/Topbar/LockModal.vue
Normal 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>
|
||||||
@ -37,7 +37,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-20 11:06:21
|
* @Date: 2021-04-20 11:06:21
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 12:47:50
|
* @LastEditTime: 2021-04-23 15:01:18
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||||
@ -60,27 +60,40 @@
|
|||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||||
<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-item @click="logout">退出登录</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { computed, defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useUserinfo } from './hooks/useUserinfo'
|
||||||
|
import LockModal from './LockModal.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
LockModal,
|
||||||
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const userinfo = computed(() => store.state.account.userinfo)
|
|
||||||
|
const { userinfo } = useUserinfo()
|
||||||
|
|
||||||
|
// 退出
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
|
// 清除token
|
||||||
store.commit('app/clearToken')
|
store.commit('app/clearToken')
|
||||||
|
// 清除用户信息
|
||||||
store.commit('account/clearUserinfo')
|
store.commit('account/clearUserinfo')
|
||||||
|
// 清除标签栏
|
||||||
store.dispatch('tags/delAllTags')
|
store.dispatch('tags/delAllTags')
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
userinfo,
|
userinfo,
|
||||||
logout,
|
logout,
|
||||||
|
|||||||
45
src/layout/components/Topbar/hooks/useLock.js
Normal file
45
src/layout/components/Topbar/hooks/useLock.js
Normal 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
35
src/layout/components/Topbar/hooks/useUserinfo.js
Normal 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 }
|
||||||
|
}
|
||||||
@ -27,7 +27,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-20 11:06:21
|
* @Date: 2021-04-20 11:06:21
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 12:37:28
|
* @LastEditTime: 2021-04-23 11:08:56
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-20 11:06:21
|
* @Date: 2021-04-20 11:06:21
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 12:49:02
|
* @LastEditTime: 2021-04-23 15:36:32
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||||
@ -36,6 +36,7 @@
|
|||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import { TOKEN } from '@/store/modules/app' // TOKEN变量名
|
import { TOKEN } from '@/store/modules/app' // TOKEN变量名
|
||||||
|
import { getItem } from '@/utils/storage'
|
||||||
|
|
||||||
const getPageTitle = title => {
|
const getPageTitle = title => {
|
||||||
const appTitle = store.state.app.title
|
const appTitle = store.state.app.title
|
||||||
@ -64,6 +65,12 @@ router.beforeEach(async to => {
|
|||||||
replace: true,
|
replace: true,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
// 判断是否处于锁屏状态
|
||||||
|
if (to.name !== 'lock' && !!getItem('__VEA_SCREEN_LOCKED__')) {
|
||||||
|
return { name: 'lock', replace: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户角色信息，根据角色判断权限
|
||||||
let userinfo = store.state.account.userinfo
|
let userinfo = store.state.account.userinfo
|
||||||
if (!userinfo) {
|
if (!userinfo) {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-20 11:06:21
|
* @Date: 2021-04-20 11:06:21
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 12:48:02
|
* @LastEditTime: 2021-04-23 15:26:46
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/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 redirect from './modules/redirect'
|
||||||
import error from './modules/error'
|
import error from './modules/error'
|
||||||
import login from './modules/login'
|
import login from './modules/login'
|
||||||
|
import lock from './modules/lock'
|
||||||
import home from './modules/home'
|
import home from './modules/home'
|
||||||
import test from './modules/test'
|
import test from './modules/test'
|
||||||
|
|
||||||
@ -47,6 +48,7 @@ const router = createRouter({
|
|||||||
...login,
|
...login,
|
||||||
...allMenus,
|
...allMenus,
|
||||||
...error,
|
...error,
|
||||||
|
...lock,
|
||||||
],
|
],
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
if (savedPosition) {
|
if (savedPosition) {
|
||||||
|
|||||||
48
src/router/modules/lock.js
Normal file
48
src/router/modules/lock.js
Normal 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: '屏幕已锁定',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
@ -3,7 +3,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-21 09:18:32
|
* @Date: 2021-04-21 09:18:32
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 09:34:43
|
* @LastEditTime: 2021-04-23 10:49:35
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||||
|
|||||||
93
src/utils/encrypt.js
Normal file
93
src/utils/encrypt.js
Normal 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()
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
* @version:
|
* @version:
|
||||||
* @Date: 2021-04-20 11:06:21
|
* @Date: 2021-04-20 11:06:21
|
||||||
* @LastEditors: huzhushan@126.com
|
* @LastEditors: huzhushan@126.com
|
||||||
* @LastEditTime: 2021-04-21 09:32:46
|
* @LastEditTime: 2021-04-23 15:16:12
|
||||||
* @Author: huzhushan@126.com
|
* @Author: huzhushan@126.com
|
||||||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||||||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||||||
|
|||||||
232
src/views/lock/Clock.vue
Normal file
232
src/views/lock/Clock.vue
Normal 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
81
src/views/lock/CurrentTime.vue
Normal 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
70
src/views/lock/Unlock.vue
Normal 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
73
src/views/lock/index.vue
Normal 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
1021
src/views/lock/style/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user