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

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

@ -1,18 +1,95 @@
<template> <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">
<div class="layout-lock-screen-date-box"> <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-time">22:14</div>
<div class="layout-lock-screen-date-box-info">1月11日，星期一</div> <div class="layout-lock-screen-date-box-info">1月11日，星期一</div>
</div> </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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { nextTick, onMounted, reactive, toRefs } from "vue";
export default { export default {
name: "layoutLockScreen", 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> </script>
@ -24,23 +101,32 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.layout-lock-screen-filter {
filter: blur(5px);
}
.layout-lock-screen-mask { .layout-lock-screen-mask {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
@extend .layout-lock-screen-fixed; @extend .layout-lock-screen-fixed;
z-index: 9999990;
} }
.layout-lock-screen { .layout-lock-screen-img {
@extend .layout-lock-screen-fixed; @extend .layout-lock-screen-fixed;
background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG"); background-image: url("https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG");
background-size: 100% 100%; background-size: 100% 100%;
z-index: 9999999; z-index: 9999991;
}
.layout-lock-screen {
@extend .layout-lock-screen-fixed;
z-index: 9999992;
&-date { &-date {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0;
top: 0; top: 0;
right: 0; width: 100%;
height: 100%;
color: #ffffff; color: #ffffff;
border: 1px solid red; z-index: 9999993;
user-select: none;
&-box { &-box {
position: absolute; position: absolute;
left: 30px; 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> </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 { .layout-navbars-tagsview-ul-li {
height: 34px !important; height: 34px !important;
line-height: 34px !important; line-height: 34px !important;
border: 1px solid #e6e6e6 !important; border-right: 1px solid #f6f6f6 !important;
border-top: none !important; border-top: none !important;
border-bottom: none !important;
border-left: none !important; border-left: none !important;
border-radius: 0 !important; border-radius: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
&:first-of-type { &:first-of-type {
border-left: 1px solid #e6e6e6 !important; border-left: 1px solid #f6f6f6 !important;
} }
.layout-icon-active { .layout-icon-active {
display: none; display: none;
@ -240,8 +241,8 @@ export default {
.is-active { .is-active {
background: white !important; background: white !important;
color: var(--color-primary) !important; color: var(--color-primary) !important;
border-bottom: 1px solid !important; border-top: 1px solid !important;
border-bottom-color: var(--color-primary) !important; border-top-color: var(--color-primary) !important;
} }
} }
// 风格4 // 风格4