diff --git a/log.html b/log.html new file mode 100644 index 0000000..4c6be0c --- /dev/null +++ b/log.html @@ -0,0 +1,172 @@ + + + + + + 日志 - 米家智能家居 + + + + + +
+ +
+
+ + 日志 +
+
+ +
+
+ + +
+ +
+
+ 20 + 六月 + 星期五 +
+ +
+
+
07:10
+
+
+
定时-打开
+
执行成功
+
+
+ +
+
03:10
+
+
+
定时-关闭
+
执行成功
+
+
+
+
+ + +
+
+ 17 + 六月 + 星期二 +
+ +
+
+
14:02
+
+
+
定时-打开
+
执行成功
+
+
+
+
+ + +
+
+ 12 + 六月 + 星期四 +
+ +
+
+
07:00
+
+
+
定时-打开
+
执行成功
+
+
+
+
+ + +
+
+ 11 + 六月 + 星期三 +
+ +
+
+
12:03
+
+
+
兰山温度高于28°C-空调制冷/22°...
+
执行失败
+
+
+ +
+
+
+
+ + +
+
+ 9 + 六月 + 星期一 +
+ +
+
+
10:00
+
+
+
定时-打开
+
执行成功
+
+
+
+
+
+ + +
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/smart.html b/smart.html index eec0b30..7dbddeb 100644 --- a/smart.html +++ b/smart.html @@ -17,7 +17,7 @@
- +
@@ -292,6 +292,11 @@ function executeControl(controlName) { showToast(`正在执行 ${controlName}...`); } + + // 打开日志页面 + function openLogPage() { + window.location.href = 'log.html'; + } \ No newline at end of file diff --git a/styles/log.css b/styles/log.css new file mode 100644 index 0000000..562a3ea --- /dev/null +++ b/styles/log.css @@ -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); } +} \ No newline at end of file