172 lines
6.6 KiB
HTML
172 lines
6.6 KiB
HTML
<!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> |