chenxing/mi-home-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat(log): add log page with styling and navigation

Browse Source
This commit is contained in:
shenghuo2
2025-06-21 08:58:01 +08:00
parent baedcc608b
commit 83e566b183
3 changed files with 431 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
log.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日志 - 米家智能家居</title>
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/log.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container" id="log-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="goBack()"></i>
<span class="page-title">日志</span>
</div>
<div class="header-right">
<i class="fas fa-plus"></i>
</div>
</header>
<!-- 日志内容 -->
<div class="log-content">
<!-- 日期分组 -->
<div class="log-date-group">
<div class="log-date-header">
<span class="log-date">20</span>
<span class="log-month">六月</span>
<span class="log-weekday">星期五</span>
</div>
<div class="log-timeline">
<div class="log-item">
<div class="log-time">07:10</div>
<div class="log-dot"></div>
<div class="log-details">
<div class="log-title">定时-打开</div>
<div class="log-status success">执行成功</div>
</div>
</div>
<div class="log-item">
<div class="log-time">03:10</div>
<div class="log-dot"></div>
<div class="log-details">
<div class="log-title">定时-关闭</div>
<div class="log-status success">执行成功</div>
</div>
</div>
</div>
</div>
<!-- 日期分组 -->
<div class="log-date-group">
<div class="log-date-header">
<span class="log-date">17</span>
<span class="log-month">六月</span>
<span class="log-weekday">星期二</span>
</div>
<div class="log-timeline">
<div class="log-item">
<div class="log-time">14:02</div>
<div class="log-dot"></div>
<div class="log-details">
<div class="log-title">定时-打开</div>
<div class="log-status success">执行成功</div>
</div>
</div>
</div>
</div>
<!-- 日期分组 -->
<div class="log-date-group">
<div class="log-date-header">
<span class="log-date">12</span>
<span class="log-month">六月</span>
<span class="log-weekday">星期四</span>
</div>
<div class="log-timeline">
<div class="log-item">
<div class="log-time">07:00</div>
<div class="log-dot"></div>
<div class="log-details">
<div class="log-title">定时-打开</div>
<div class="log-status success">执行成功</div>
</div>
</div>
</div>
</div>
<!-- 日期分组 -->
<div class="log-date-group">
<div class="log-date-header">
<span class="log-date">11</span>
<span class="log-month">六月</span>
<span class="log-weekday">星期三</span>
</div>
<div class="log-timeline">
<div class="log-item">
<div class="log-time">12:03</div>
<div class="log-dot error"></div>
<div class="log-details">
<div class="log-title">兰山温度高于28°C-空调制冷/22°...</div>
<div class="log-status error">执行失败</div>
</div>
<div class="log-expand">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
<!-- 日期分组 -->
<div class="log-date-group">
<div class="log-date-header">
<span class="log-date">9</span>
<span class="log-month">六月</span>
<span class="log-weekday">星期一</span>
</div>
<div class="log-timeline">
<div class="log-item">
<div class="log-time">10:00</div>
<div class="log-dot"></div>
<div class="log-details">
<div class="log-title">定时-打开</div>
<div class="log-status success">执行成功</div>
</div>
</div>
</div>
</div>
</div>
<!-- 悬浮删除按钮 -->
<div class="floating-delete-btn" onclick="showDeleteOptions()">
<i class="fas fa-trash"></i>
</div>
</div>
<!-- 底部导航已隐藏 -->
<script src="scripts/main.js"></script>
<script>
function goBack() {
window.history.back();
}
function showDeleteOptions() {
alert('删除日志功能');
}
// 日志项展开/收起
document.querySelectorAll('.log-expand').forEach(expand => {
expand.addEventListener('click', function() {
const icon = this.querySelector('i');
if (icon.classList.contains('fa-chevron-down')) {
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
});
</script>
</body>
</html>

7
smart.html
View File

@ -17,7 +17,7 @@
<i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-down"></i>
</div> </div>
<div class="header-right"> <div class="header-right">
<i class="fas fa-bars"></i> <i class="fas fa-bars" onclick="openLogPage()"></i>
<i class="fas fa-plus-circle"></i> <i class="fas fa-plus-circle"></i>
</div> </div>
</header> </header>
@ -292,6 +292,11 @@
function executeControl(controlName) { function executeControl(controlName) {
showToast(`正在执行 ${controlName}...`); showToast(`正在执行 ${controlName}...`);
} }
// 打开日志页面
function openLogPage() {
window.location.href = 'log.html';
}
</script> </script>
</body> </body>
</html> </html>

253
styles/log.css Normal file
View File

@ -0,0 +1,253 @@
/* 日志页面样式 */
/* 页面标题 */
.page-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-left: 15px;
}
/* 日志内容 */
.log-content {
padding: 20px;
padding-bottom: 30px;
}
/* 日期分组 */
.log-date-group {
margin-bottom: 40px;
}
.log-date-header {
display: flex;
align-items: baseline;
margin-bottom: 20px;
padding-left: 20px;
}
.log-date {
font-size: 48px;
font-weight: 300;
color: #333;
margin-right: 10px;
line-height: 1;
}
.log-month {
font-size: 14px;
color: #666;
margin-right: 20px;
}
.log-weekday {
font-size: 14px;
color: #999;
margin-left: auto;
}
/* 时间轴 */
.log-timeline {
position: relative;
padding-left: 80px;
}
.log-timeline::before {
content: '';
position: absolute;
left: 55px;
top: 0;
bottom: 0;
width: 2px;
background: #f0f0f0;
}
/* 日志项目 */
.log-item {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 30px;
padding: 15px 0;
}
.log-item:last-child {
margin-bottom: 0;
}
/* 时间 */
.log-time {
display: none;
}
/* 时间轴圆点 */
.log-dot {
position: absolute;
left: -59px;
top: 18px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ddd;
border: 2px solid white;
box-shadow: 0 0 0 2px #f0f0f0;
}
.log-dot.error {
background: #FF5722;
box-shadow: 0 0 0 2px #FF5722;
}
/* 日志详情 */
.log-details {
flex: 1;
background: white;
border-radius: 12px;
padding: 15px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
margin-left: 15px;
}
.log-title {
font-size: 16px;
color: #333;
margin-bottom: 5px;
line-height: 1.4;
}
.log-status {
font-size: 14px;
color: #666;
}
.log-status.success {
color: #4CAF50;
}
.log-status.error {
color: #FF5722;
}
/* 展开按钮 */
.log-expand {
margin-left: 10px;
padding: 15px 10px;
cursor: pointer;
color: #999;
transition: color 0.2s;
}
.log-expand:hover {
color: #666;
}
.log-expand i {
font-size: 14px;
}
/* 悬浮删除按钮 */
.floating-delete-btn {
position: fixed;
bottom: 30px;
right: 20px;
width: 56px;
height: 56px;
background: #999;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
z-index: 100;
}
.floating-delete-btn:hover {
background: #666;
transform: scale(1.1);
}
/* 响应式设计 */
@media (max-width: 414px) {
.log-content {
padding: 15px;
}
.log-date-header {
padding-left: 15px;
}
.log-date {
font-size: 40px;
}
.log-timeline {
padding-left: 35px;
}
.log-time {
left: -35px;
width: 30px;
}
.log-dot {
left: -20px;
}
.log-details {
margin-left: 10px;
padding: 12px 15px;
}
.floating-delete-btn {
width: 48px;
height: 48px;
font-size: 18px;
bottom: 20px;
}
}
/* 动画效果 */
.log-item {
animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 加载状态 */
.log-loading {
text-align: center;
padding: 40px 0;
color: #999;
font-size: 14px;
}
.log-loading::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #f0f0f0;
border-top: 2px solid #999;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}