esp网页监控面板框架已成，通讯解决
This commit is contained in:
304
esp8266/web/styles.css
Normal file
304
esp8266/web/styles.css
Normal file
@@ -0,0 +1,304 @@
|
||||
/* General styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
position: fixed; /* 固定在页面左侧 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%; /* 占满页面高度 */
|
||||
overflow-y: auto; /* 如果内容过多，允许滚动 */
|
||||
width: 200px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
transition: width 0.3s, padding 0.3s;
|
||||
z-index: 1; /* 设置侧边栏层级为 1 */
|
||||
}
|
||||
|
||||
.sidebar nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar nav ul li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.sidebar nav ul li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
/* .sidebar nav ul li a:hover {
|
||||
text-decoration: underline;
|
||||
} */
|
||||
|
||||
.sidebar a {
|
||||
display: block; /* 整行可点击 */
|
||||
padding: 10px 15px;
|
||||
text-decoration: none; /* 去掉下划线 */
|
||||
color: #ecf0f1; /* 默认文字颜色 */
|
||||
background-color: #34495e; /* 默认背景颜色 */
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #1abc9c; /* 悬停时背景颜色 */
|
||||
color: #ffffff; /* 悬停时文字颜色 */
|
||||
text-decoration: none; /* 确保悬停时无下划线 */
|
||||
cursor: pointer; /* 光标变为手型 */
|
||||
}
|
||||
|
||||
.sidebar.hidden {
|
||||
width: 0px; /* 保留切换按钮的宽度 */
|
||||
padding-left: 0px; /* 去掉内边距 */
|
||||
padding-right: 0px; /* 去掉内边距 */
|
||||
overflow: hidden; /* 隐藏其他内容 */
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
/* Content styles */
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Page 2 styles */
|
||||
#drop-zone {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#drop-zone:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#upload-progress {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#upload-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#upload-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Status grid styles */
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 默认每排 4 个卡片 */
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1650px) {
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* 宽度小于 1650px 时每排 2 个卡片 */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(1, 1fr); /* 宽度小于 1000px 时每排 1 个卡片 */
|
||||
}
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
#drop-zone {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#upload-button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: #3d3d3d; /* 深色背景 */
|
||||
color: #ecf0f1; /* 浅色文字 */
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background-color: #e5e5e5; /* 深色卡片背景 */
|
||||
border: 2px solid #1abc9c; /* 突出的边框颜色 */
|
||||
min-width: 250px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
|
||||
padding: 5px;
|
||||
color: #ecf0f1;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
transform: translateY(-5px); /* 悬停时上移效果 */
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 悬停时更深的阴影 */
|
||||
}
|
||||
|
||||
.status-card h2 {
|
||||
margin-top: 0;
|
||||
color: #1abc9c; /* 标题颜色 */
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
text-align: right;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-grid .status-card .status-card-info {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
grid-template-columns: repeat(2, 1fr); /* 每行 2 个 */
|
||||
}
|
||||
|
||||
.top-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 默认每排 2 个卡片 */
|
||||
gap: 20px;
|
||||
padding: 5px 20px 5px 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.top-grid {
|
||||
grid-template-columns: repeat(1, 1fr); /* 宽度小于 1000px 时每排 1 个卡片 */
|
||||
}
|
||||
}
|
||||
|
||||
.top-grid .status-card .status-card-info{
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: repeat(4, 1fr); /* 电压、电流、功率、警报在同一行 */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1650px) {
|
||||
.top-grid .status-card .status-card-info{
|
||||
grid-template-rows: auto auto auto; /* 默认布局 */
|
||||
grid-template-columns: repeat(2, 1fr); /* 每行 2 个 */
|
||||
}
|
||||
}
|
||||
|
||||
.status-card canvas {
|
||||
width: 90%; /* 根据卡片宽度的 90% 自动调整 */
|
||||
display: block;
|
||||
margin: 0 auto; /* 居中对齐 */
|
||||
}
|
||||
|
||||
.top-grid canvas {
|
||||
height: 140px; /* 固定高度 */
|
||||
}
|
||||
|
||||
.status-grid canvas {
|
||||
height: 130px; /* 固定高度 */
|
||||
}
|
||||
|
||||
#toggle-sidebar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #1abc9c;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
/* position: fixed; */
|
||||
/* top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%); */
|
||||
|
||||
}
|
||||
|
||||
#toggle-sidebar:hover {
|
||||
background-color: #16a085;
|
||||
}
|
||||
|
||||
#side-button{
|
||||
position: fixed; /* 悬浮于页面 */
|
||||
top: 50%; /* 垂直居中 */
|
||||
left: 5px; /* 固定在页面左侧 */
|
||||
transform: translateY(-50%); /* 调整垂直居中位置 */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2; /* 设置按钮层级为 2，确保在侧边栏之上 */
|
||||
}
|
||||
|
||||
.hide-arrow #toggle-sidebar {
|
||||
transform: rotate(180deg); /* 收起时箭头旋转 */
|
||||
}
|
||||
|
||||
.show-arrow #toggle-sidebar {
|
||||
transform: rotate(0deg); /* 展开时箭头恢复 */
|
||||
}
|
||||
Reference in New Issue
Block a user