|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="login-wrap">
|
|
|
|
|
<p class="blurBox"></p>
|
|
|
|
|
<div class="loginFilter">
|
|
|
|
|
<div class="ms-login">
|
|
|
|
|
<div class="ms-title">
|
|
|
|
@ -37,6 +38,7 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="webInfo">© 2023 可视化智能管控系统.All right reserved.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -91,46 +93,50 @@ export default {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: url(../assets/img/loginbg.jpeg) no-repeat center center;
|
|
|
|
|
background: url(../assets/img/logo.jpg) no-repeat center center;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
backdrop-filter: blur(15px);
|
|
|
|
|
-webkit-backdrop-filter: blur(5px);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.loginFilter {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.blurBox {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
|
|
|
|
|
height: 100%;
|
|
|
|
|
//background: #86b7ff;
|
|
|
|
|
-webkit-backdrop-filter: blur(30px);
|
|
|
|
|
backdrop-filter: blur(30px);
|
|
|
|
|
}
|
|
|
|
|
.loginFilter {
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 454px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: 0px 4px 12px 0px rgba(51, 51, 51, 0.15);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%;-50%);
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.ms-login {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 454px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%;-50%);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: url(../assets/img/loginBackImage.8b77ab2c.png) no-repeat;
|
|
|
|
|
// -webkit-backdrop-filter: blur(5px);
|
|
|
|
|
// backdrop-filter: blur(15px);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
//background: @color-white;
|
|
|
|
|
.ms-title {
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 1px solid @border-color-base;
|
|
|
|
|
border-bottom: 1px solid #dcdfe6;
|
|
|
|
|
padding: 40px 16px;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
width: 160px;
|
|
|
|
|
//width: 160px;
|
|
|
|
|
}
|
|
|
|
|
h3 {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
background: linear-gradient(0deg, #86b7ff, #4293fd 99.46289%);
|
|
|
|
|
background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
// font-weight: normal;
|
|
|
|
|
//background: linear-gradient(0deg, #86b7ff, #4293fd 99.46289%);
|
|
|
|
|
// background-clip: text;
|
|
|
|
|
color: @color-text-primary;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ms-content {
|
|
|
|
@ -154,5 +160,14 @@ export default {
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.webInfo {
|
|
|
|
|
bottom: 5%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%;-50%);
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: @color-white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|