Skip to content

D
DC-TOM
Commit 96391413 authored by Cai Wei's avatar Cai Wei
Browse files
Options

feat(*): 样式修改

parent b5fe419e
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 44 deletions
src/assets/img_bg.png 0 → 100644
View file @ 96391413
This diff is collapsed.
src/style.css
View file @ 96391413
......@@ -73,7 +73,7 @@
.login-container .el-input__wrapper {
background: #181d21 !important;
border-radius: 0 !important;
border-radius: 4px !important;
}
input:-webkit-autofill,
......
src/views/dustMonitoring/index.vue
View file @ 96391413
......@@ -25,11 +25,11 @@
<el-form-item label="分析时间">
<el-date-picker
v-model="form.dateValue"
type="datetimerange"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 450px"
popper-class="date-picker-popper"
popper-class="date-picker-popper"
@calendar-change="calendarChange"
@visible-change="visibleChange"
:disabled-date="disabledFn"
......
src/views/login/index.vue
View file @ 96391413
<template>
<div class="login-container">
<div class="login-container-title">
<!-- <div class="login-container-title">
<h1 class="title">DCTOM 除尘器智能管控治平台</h1>
</div> -->
<div class="platform-title">
<h1>DCTOM <span style="font-weight: 300;">除尘器数字孪生与优化平台</span></h1>
<p>基于人工智能的工业除尘系统实时监控与优化平台</p>
</div>
<el-form
v-if="loginShow"
ref="loginOldForm"
......@@ -12,10 +18,10 @@
autocomplete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title">用户登录</h3>
<span>User login</span>
</div>
<div class="login-header">
<div class="login-title">用户登录</div>
<div class="login-subtitle">User Login</div>
</div>
<div class="gap-20">
<el-form-item prop="account">
......@@ -85,12 +91,35 @@
<el-button
:loading="oldloading"
type="primary"
class="login-btn"
@click.prevent="handleLoginNew"
@keyup.enter="handleLoginNew"
>登录</el-button
>
</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
title="修改密码"
v-model="dialogChangePassword"
......@@ -1115,13 +1144,13 @@ $cursor: #ccc;
}
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px #fff inset !important;
-webkit-text-fill-color: $cursor !important;
box-shadow: 0 0 0px 1000px #181d21 inset !important;
-webkit-text-fill-color: #d9dbdc !important;
}
}
}
.el-input__wrapper {
width: 95%;
width: 100%;
}
.dialogChangePasswordform {
.el-input {
......@@ -1140,7 +1169,7 @@ $cursor: #ccc;
border: none;
border-bottom: 1px solid #fff;
background: #fff;
padding-right: 10px;
padding-right: 0px;
box-sizing: border-box;
}
......@@ -1160,39 +1189,121 @@ $light_gray: #eee;
height: calc(100% - 2px);
border-top: none;
border-bottom: none;
background: #181d21;
border-color: #434343;
}
.login-container {
min-height: 100vh;
width: 100%;
background: url("../../assets/bg.png") no-repeat;
background-size: 100% 500px;
background-position: calc(50% - 640px) center;
background-color: #000;
background: url("../../assets/img_bg.png") no-repeat;
background-size: cover;
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 {
margin: 60px 0 0 70px;
.title {
font-size: 38px;
color: #fff;
color: #ccc;
text-align: right;
padding-right: 4%;
}
}
.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;
right:4%;
top: calc(50% - 250px);
border-radius: 4px;
top: 50%;
right: 10%;
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 {
margin-top: 20px;
......@@ -1200,10 +1311,11 @@ $light_gray: #eee;
button {
width: 100%;
margin-top: 40px;
background: #181d21 !important;
color: #36f1cd !important;
border: 1px solid #2a2a2a !important;
height: 40px;
background: linear-gradient(90deg, #0099ff, #00c2a9) !important;
color: #ffffff !important;
border-radius: 6px;
// border: 1px solid #434343 !important;
height: 46px;
transition: border 0.5s ease;
}
button:hover {
......@@ -1240,8 +1352,9 @@ $light_gray: #eee;
.login-btn {
width: 100%;
margin-top: 40px;
background-color: var(--bg-primary);
background-color: linear-gradient(90deg, #0099ff, #00c2a9);
height: 40px;
}
.captcha-btn {
......@@ -1278,20 +1391,22 @@ $light_gray: #eee;
display: inline-block;
}
.title-container {
position: relative;
.login-header {
text-align: center;
margin-bottom: 30px;
}
.title {
font-size: 26px;
display: inline-block;
color: #36f1cd;
}
.login-title {
font-size: 22px;
color: var(--text-primary);
margin-bottom: 5px;
font-weight: 500;
}
span {
color: #29ad93;
margin-left: 10px;
}
}
.login-subtitle {
font-size: 14px;
color: var(--text-secondary);
}
.thirdparty-button {
position: absolute;
......@@ -1315,7 +1430,7 @@ $light_gray: #eee;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
.captcha-value {
width: 60%;
}
......@@ -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>
\ 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