81 lines
2.8 KiB
HTML
81 lines
2.8 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/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> |