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>