hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.12:增加布局配置自动锁屏界面'

Browse Source
This commit is contained in:
lyt 2021-01-12 17:07:56 +08:00
parent 967469ffb6
commit 95a6e1bbb4
4 changed files with 150 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
vue-admin-wonderful-next-images/user/photo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

2
vue-admin-wonderful-next/index.html
View File

@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue-admin-wonderful</title>
<title>demos</title>
</head>
<body>
<div id="app">

151
vue-admin-wonderful-next/src/views/layout/lockScreen/index.vue
View File

@ -1,18 +1,95 @@
<template>
<div class="layout-lock-screen layout-lock-screen-mask">
<div class="layout-lock-screen-mask"></div>
<div class="layout-lock-screen-img" :class="{'layout-lock-screen-filter':isShowLoockLogin}"></div>
<div class="layout-lock-screen">
<div class="layout-lock-screen-date">
<div class="layout-lock-screen-date-box">
<div class="layout-lock-screen-date-box-time">22:14</div>
<div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
</div>
</div>
<transition name="el-zoom-in-center">
<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
<div class="layout-lock-screen-login-box">
<div class="layout-lock-screen-login-box-img">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
</div>
<div class="layout-lock-screen-login-box-name">Administrator</div>
<div class="layout-lock-screen-login-box-value">
<el-input placeholder="密码">
<template #append>
<el-button icon="el-icon-right"></el-button>
</template>
</el-input>
</div>
</div>
<div class="layout-lock-screen-login-icon">
<i class="el-icon-microphone"></i>
<i class="el-icon-alarm-clock"></i>
<i class="el-icon-switch-button"></i>
</div>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { nextTick, onMounted, reactive, toRefs } from "vue";
export default {
name: "layoutLockScreen",
setup() {},
setup() {
const state = reactive({
moveDifference: 0,
transparency: 1,
isShowLoockLogin: false,
});
const initGetElement = () => {
nextTick(() => {
const el = document.querySelector(".layout-lock-screen-date");
el.onmousedown = (down) => {
document.onmousemove = (move) => {
let opacitys = (state.transparency -= 1 / 200);
state.moveDifference = move.clientY - down.clientY;
if (state.moveDifference >= 0) return false;
el.setAttribute(
"style",
`top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`
);
if (state.moveDifference < -400) {
el.setAttribute(
"style",
`top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`
);
state.moveDifference = -el.clientHeight;
setTimeout(() => {
el.remove();
}, 300);
}
if (state.moveDifference === -el.clientHeight) {
state.isShowLoockLogin = true;
}
};
document.onmouseup = (seup) => {
state.transparency = 1;
if (state.moveDifference >= -400) {
el.setAttribute(
"style",
`top:0px;opacity:1;transition:all 0.3s ease;`
);
}
document.onmousemove = null;
document.onmouseup = null;
};
};
});
};
onMounted(() => {
initGetElement();
});
return {
...toRefs(state),
};
},
};
</script>
@ -24,23 +101,32 @@ export default {
width: 100%;
height: 100%;
}
.layout-lock-screen-filter {
filter: blur(5px);
}
.layout-lock-screen-mask {
background: rgba(255, 255, 255, 1);
@extend .layout-lock-screen-fixed;
z-index: 9999990;
}
.layout-lock-screen {
.layout-lock-screen-img {
@extend .layout-lock-screen-fixed;
background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG");
background-size: 100% 100%;
z-index: 9999999;
z-index: 9999991;
}
.layout-lock-screen {
@extend .layout-lock-screen-fixed;
z-index: 9999992;
&-date {
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
color: #ffffff;
border: 1px solid red;
z-index: 9999993;
user-select: none;
&-box {
position: absolute;
left: 30px;
@ -53,5 +139,56 @@ export default {
}
}
}
&-login {
position: relative;
z-index: 9999994;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
&-box {
text-align: center;
margin: auto;
&-img {
width: 180px;
height: 180px;
margin: auto;
img {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
&-name {
font-size: 26px;
margin: 15px 0 30px;
}
}
&-icon {
position: absolute;
right: 30px;
bottom: 30px;
i {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
}
}
::v-deep(.el-input-group__append) {
background: #ffffff;
padding: 0px 15px;
}
::v-deep(.el-input__inner) {
border-right-color: #f6f6f6;
}
</style>

9
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -222,13 +222,14 @@ export default {
.layout-navbars-tagsview-ul-li {
height: 34px !important;
line-height: 34px !important;
border: 1px solid #e6e6e6 !important;
border-right: 1px solid #f6f6f6 !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-radius: 0 !important;
margin-right: 0 !important;
&:first-of-type {
border-left: 1px solid #e6e6e6 !important;
border-left: 1px solid #f6f6f6 !important;
}
.layout-icon-active {
display: none;
@ -240,8 +241,8 @@ export default {
.is-active {
background: white !important;
color: var(--color-primary) !important;
border-bottom: 1px solid !important;
border-bottom-color: var(--color-primary) !important;
border-top: 1px solid !important;
border-top-color: var(--color-primary) !important;
}
}
// 风格4