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

feat: add notifications and environment settings pages

Browse Source
This commit is contained in:
shenghuo2
2025-06-21 10:38:04 +08:00
parent b99f4810b5
commit ccb4cf909f
6 changed files with 1070 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
notifications.html Normal file
View File

@ -0,0 +1,81 @@
<!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/notifications.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="notifications-page">
<!-- 头部导航 -->
<header class="page-header">
<div class="header-content">
<button class="back-btn" onclick="history.back()">
<i class="fas fa-chevron-left"></i>
</button>
<h1 class="page-title">通知</h1>
<button class="settings-btn">
<i class="fas fa-cog"></i>
</button>
</div>
</header>
<!-- 家庭选择器 -->
<div class="family-selector">
<div class="selector-content">
<span class="family-name">全部家庭</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<!-- 消息分类 -->
<div class="message-categories">
<div class="category-item active">
<span>消息</span>
</div>
</div>
<!-- 消息状态 -->
<div class="message-status">
<div class="status-info">
<span class="unread-count">0条未读</span>
<button class="mark-all-read">全部已读</button>
</div>
</div>
<!-- 消息列表 -->
<div class="message-list">
<div class="message-item">
<div class="message-icon">
<div class="icon-wrapper scene">
<i class="fas fa-heart"></i>
</div>
</div>
<div class="message-content">
<div class="message-header">
<span class="message-type">场景日志</span>
<span class="message-time">昨天</span>
</div>
<div class="message-text">
<h4>定时-打开 07:10 执行成功</h4>
</div>
</div>
</div>
</div>
<!-- 空状态提示 -->
<div class="empty-state" style="display: none;">
<div class="empty-icon">
<i class="fas fa-bell-slash"></i>
</div>
<p class="empty-text">暂无通知消息</p>
<p class="empty-subtext">设备状态变化、场景执行等消息会在这里显示</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>