Skip to content

D
DC-TOM
Commit 6e679ff5 authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

Merge branch 'dev' of http://app.bmetech.com/liuzhaohui/dctomproject into dev

parents dbc6b2b6 75068100
Show whitespace changes
Inline Side-by-side
Showing with 174 additions and 44 deletions
src/assets/img_bg.png 0 → 100644
View file @ 6e679ff5
This diff is collapsed.
src/style.css
View file @ 6e679ff5
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
.login-container .el-input__wrapper { .login-container .el-input__wrapper {
background: #181d21 !important; background: #181d21 !important;
border-radius: 0 !important; border-radius: 4px !important;
} }
input:-webkit-autofill, input:-webkit-autofill,
......
src/views/login/index.vue
View file @ 6e679ff5
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="login-container-title"> <!-- <div class="login-container-title">
<h1 class="title">DCTOM 除尘器智能管控治平台</h1> <h1 class="title">DCTOM 除尘器智能管控治平台</h1>
</div> -->
<div class="platform-title">
<h1>DCTOM <span style="font-weight: 300;">除尘器数字孪生与优化平台</span></h1>
<p>基于人工智能的工业除尘系统实时监控与优化平台</p>
</div> </div>
<el-form <el-form
v-if="loginShow" v-if="loginShow"
ref="loginOldForm" ref="loginOldForm"
...@@ -12,9 +18,9 @@ ...@@ -12,9 +18,9 @@
autocomplete="on" autocomplete="on"
label-position="left" label-position="left"
> >
<div class="title-container"> <div class="login-header">
<h3 class="title">用户登录</h3> <div class="login-title">用户登录</div>
<span>User login</span> <div class="login-subtitle">User Login</div>
</div> </div>
<div class="gap-20"> <div class="gap-20">
...@@ -85,12 +91,35 @@ ...@@ -85,12 +91,35 @@
<el-button <el-button
:loading="oldloading" :loading="oldloading"
type="primary" type="primary"
class="login-btn"
@click.prevent="handleLoginNew" @click.prevent="handleLoginNew"
@keyup.enter="handleLoginNew" @keyup.enter="handleLoginNew"
>登录</el-button >登录</el-button
> >
</el-form> </el-form>
<div class="data-viz">
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
<div class="data-bar"></div>
</div>
<el-dialog <el-dialog
title="修改密码" title="修改密码"
v-model="dialogChangePassword" v-model="dialogChangePassword"
...@@ -1115,13 +1144,13 @@ $cursor: #ccc; ...@@ -1115,13 +1144,13 @@ $cursor: #ccc;
} }
&:-webkit-autofill { &:-webkit-autofill {
box-shadow: 0 0 0px 1000px #fff inset !important; box-shadow: 0 0 0px 1000px #181d21 inset !important;
-webkit-text-fill-color: $cursor !important; -webkit-text-fill-color: #d9dbdc !important;
} }
} }
} }
.el-input__wrapper { .el-input__wrapper {
width: 95%; width: 100%;
} }
.dialogChangePasswordform { .dialogChangePasswordform {
.el-input { .el-input {
...@@ -1140,7 +1169,7 @@ $cursor: #ccc; ...@@ -1140,7 +1169,7 @@ $cursor: #ccc;
border: none; border: none;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
background: #fff; background: #fff;
padding-right: 10px; padding-right: 0px;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -1160,39 +1189,121 @@ $light_gray: #eee; ...@@ -1160,39 +1189,121 @@ $light_gray: #eee;
height: calc(100% - 2px); height: calc(100% - 2px);
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
background: #181d21;
border-color: #434343;
} }
.login-container { .login-container {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
background: url("../../assets/bg.png") no-repeat; background: url("../../assets/img_bg.png") no-repeat;
background-size: 100% 500px; background-size: cover;
background-position: calc(50% - 640px) center;
background-color: #000;
overflow: hidden; overflow: hidden;
.platform-title {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
z-index: 1;
}
.platform-title h1 {
font-size: 36px;
font-weight: 600;
margin-bottom: 15px;
color: var(--text-primary);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.platform-title p {
font-size: 18px;
color: var(--text-secondary);
max-width: 500px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.data-viz {
position: absolute;
bottom: 50px;
left: 10%;
width: 40%;
height: 60px;
z-index: 1;
display: flex;
align-items: flex-end;
}
.data-bar {
flex: 1;
margin: 0 2px;
background: linear-gradient(to top, #0099ff, transparent);
opacity: 0.8;
animation: data-pulse 2s infinite;
}
@keyframes data-pulse {
0%, 100% {
height: 20%;
}
50% {
height: 100%;
}
}
.data-bar:nth-child(1) { animation-delay: 0.0s; }
.data-bar:nth-child(2) { animation-delay: 0.1s; }
.data-bar:nth-child(3) { animation-delay: 0.2s; }
.data-bar:nth-child(4) { animation-delay: 0.3s; }
.data-bar:nth-child(5) { animation-delay: 0.4s; }
.data-bar:nth-child(6) { animation-delay: 0.5s; }
.data-bar:nth-child(7) { animation-delay: 0.6s; }
.data-bar:nth-child(8) { animation-delay: 0.7s; }
.data-bar:nth-child(9) { animation-delay: 0.8s; }
.data-bar:nth-child(10) { animation-delay: 0.9s; }
.data-bar:nth-child(11) { animation-delay: 1.0s; }
.data-bar:nth-child(12) { animation-delay: 1.1s; }
.data-bar:nth-child(13) { animation-delay: 1.2s; }
.data-bar:nth-child(14) { animation-delay: 1.3s; }
.data-bar:nth-child(15) { animation-delay: 1.4s; }
.data-bar:nth-child(16) { animation-delay: 1.5s; }
.data-bar:nth-child(17) { animation-delay: 1.6s; }
.data-bar:nth-child(18) { animation-delay: 1.7s; }
.data-bar:nth-child(19) { animation-delay: 1.8s; }
.data-bar:nth-child(20) { animation-delay: 1.9s; }
// background-size: 100% 500px;
// background-position: calc(50% - 640px) center;
// background-color: #000;
// overflow: hidden;
.login-container-title { .login-container-title {
margin: 60px 0 0 70px; margin: 60px 0 0 70px;
.title { .title {
font-size: 38px; font-size: 38px;
color: #fff; color: #ccc;
text-align: right; text-align: right;
padding-right: 4%; padding-right: 4%;
} }
} }
.login-old { .login-old {
width: 457px;
height: 500px;
// background: rgba(255, 255, 255, 1);
background: #191c21;
box-shadow: 0px 15px 30px 0px rgba(255, 255, 255, 0.2);
padding: 40px;
position: absolute; position: absolute;
right:4%; top: 50%;
top: calc(50% - 250px); right: 10%;
border-radius: 4px; transform: translateY(-50%);
width: 380px;
height: 475px;
background-color: rgba(18, 24, 32, 0.65);
border-radius: 12px;
padding: 40px 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
.el-checkbox-group label { .el-checkbox-group label {
margin-top: 20px; margin-top: 20px;
...@@ -1200,10 +1311,11 @@ $light_gray: #eee; ...@@ -1200,10 +1311,11 @@ $light_gray: #eee;
button { button {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
background: #181d21 !important; background: linear-gradient(90deg, #0099ff, #00c2a9) !important;
color: #36f1cd !important; color: #ffffff !important;
border: 1px solid #2a2a2a !important; border-radius: 6px;
height: 40px; // border: 1px solid #434343 !important;
height: 46px;
transition: border 0.5s ease; transition: border 0.5s ease;
} }
button:hover { button:hover {
...@@ -1240,8 +1352,9 @@ $light_gray: #eee; ...@@ -1240,8 +1352,9 @@ $light_gray: #eee;
.login-btn { .login-btn {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
background-color: var(--bg-primary); background-color: linear-gradient(90deg, #0099ff, #00c2a9);
height: 40px; height: 40px;
} }
.captcha-btn { .captcha-btn {
...@@ -1278,19 +1391,21 @@ $light_gray: #eee; ...@@ -1278,19 +1391,21 @@ $light_gray: #eee;
display: inline-block; display: inline-block;
} }
.title-container { .login-header {
position: relative; text-align: center;
margin-bottom: 30px;
.title {
font-size: 26px;
display: inline-block;
color: #36f1cd;
} }
span { .login-title {
color: #29ad93; font-size: 22px;
margin-left: 10px; color: var(--text-primary);
margin-bottom: 5px;
font-weight: 500;
} }
.login-subtitle {
font-size: 14px;
color: var(--text-secondary);
} }
.thirdparty-button { .thirdparty-button {
...@@ -1315,7 +1430,7 @@ $light_gray: #eee; ...@@ -1315,7 +1430,7 @@ $light_gray: #eee;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
.captcha-value { .captcha-value {
width: 60%; width: 60%;
} }
...@@ -1327,4 +1442,19 @@ $light_gray: #eee; ...@@ -1327,4 +1442,19 @@ $light_gray: #eee;
} }
} }
} }
.monitoringmap-btn {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<style lang="scss">
.dialogChangePassword {
.el-input input:-webkit-autofill {
box-shadow: 0 0 0px 0px #181d21 inset !important;
-webkit-text-fill-color: #d9dbdc !important;
}
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment