docs: update readme with detailed project structure and features

README.md

@@ -1,5 +1,7 @@
 # 米家智能家居 - 课程设计项目
 
+**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
+
 这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。
 
 ## 项目特色
@@ -12,37 +14,75 @@
 
 ### 📱 功能模块
 
-#### 1. 首页 - 设备控制
+#### 1. 米家首页 (home.html) - 设备控制中心
 - 房间切换导航（全屋、出租屋、十五中、客厅、卧室）
-- 空气质量显示
+- 空气质量显示和环境监测
 - 智能设备网格展示
 - 设备状态控制（开关、离线状态）
 - 温湿度传感器实时数据
 - 蓝牙连接状态指示
+- 设备分类管理
 
-#### 2. 智能场景页面
-- 推荐场景和自定义场景切换
-- 预设智能场景：
-  - 离家：关灯、开安防、开始清扫
-  - 回家：开灯、开空调、关闭窗帘
-  - 晚安：关灯、关电器、安心入睡
-  - 起床：开灯、开窗帘、活力唤醒
-  - 夜间勿扰：降低媒体音、关闭声光提示
-  - 运动：开空调除净、舒爽运动
-  - 结束运动：关空调除净、省心省力
-- 一键执行场景功能
-- 自定义场景创建
+#### 2. 智能场景页面 (scene.html)
+- 四个导航标签：智能推荐、语音通知、智能清洁、智能控制
+- 主场景卡片："欢迎回家"场景展示
+- 设备项目展示：空气净化器、小爱音箱等
+- 推荐场景卡片：
+  - 洗衣监测：洗衣机状态监控
+  - 一键起灯：智能照明控制
+  - 轻松家务：家务自动化
+  - 护眼开灯：护眼模式照明
+- 产品网格展示和推荐
+- 响应式设计和动画效果
 
-#### 3. 商城页面
-- 直接嵌入小米官方商城页面
-- 完整的购物体验
+#### 3. 米家众测页面 (mijiazhongce.html)
+- 众测产品展示（6个产品卡片）
+- 产品信息：期数、状态、市场价格、名额
+- 申请者头像和申请人数显示
+- 产品状态标识：新品试用、已结束、0元抽奖
+- 特殊标记：我的众测、免费试用等
+- 卡片式布局和交互动画
 
-#### 4. 个人中心
-- 用户信息展示
+#### 4. 个人资料页面 (user-profile.html)
+- 大头像展示和编辑功能
+- 基础资料管理：头像、账号、姓名
+- 账号绑定：微信账号绑定状态
+- 密保资料：手机号、账号安全
+- 注销登录功能
+- 开关按钮交互效果
+
+#### 5. 个人中心 (profile.html)
+- 用户信息展示（可点击跳转到详细资料页面）
 - 功能快捷入口：智能场景、米家众测、产品百科、全屋智能
 - 小米室外摄像机4C众测推广
 - 设置菜单：共享、设备耗材、语音设置、我的有品、家庭网络、中枢与网关、设置
 
+#### 6. 商城页面 (mall.html)
+- 直接嵌入小米官方商城页面
+- 完整的购物体验
+
+#### 7. 通知中心页面 (notifications.html)
+- 家庭成员选择器和消息分类
+- 消息状态管理：未读消息计数、全部标记已读
+- 消息列表展示：场景、设备、安全、系统消息
+- 消息类型图标和时间显示
+- 空状态页面和动画效果
+- 橙色主题配色方案
+
+#### 8. 环境设置页面 (environment-settings.html)
+- 家庭环境信息设置和管理
+- 分区域环境监测：客厅、卧室、厨房、空气质量、空调
+- 设备状态显示和控制
+- 温度、湿度、空气质量数据展示
+- 响应式布局和渐变背景设计
+
+#### 9. 其他功能页面
+- **智能页面** (smart.html)：智能设备管理
+- **产品页面** (product.html)：产品展示和介绍
+- **设置页面** (settings.html)：应用设置和配置
+- **全部产品页面** (all-products.html)：完整产品目录
+- **日志页面** (log.html)：系统日志和历史记录
+
 ### 🛠 技术特点
 
 #### 前端技术栈
@@ -68,12 +108,44 @@
 
 ```
 project-fin-takeaway/
-├── index.html          # 主页面文件
-├── styles/
-│   └── main.css       # 主样式文件
-├── scripts/
-│   └── main.js        # 主JavaScript文件
-└── README.md          # 项目说明文档
+├── index.html              # 项目入口页面
+├── home.html               # 米家首页 - 设备控制中心
+├── smart.html              # 智能页面
+├── product.html            # 产品页面
+├── mall.html               # 商城页面
+├── profile.html            # 个人中心页面
+├── scene.html              # 智能场景页面
+├── mijiazhongce.html       # 米家众测页面
+├── user-profile.html       # 个人资料详情页面
+├── notifications.html      # 通知中心页面
+├── environment-settings.html # 环境设置页面
+├── settings.html           # 设置页面
+├── all-products.html       # 全部产品页面
+├── log.html                # 日志页面
+├── styles/                 # 样式文件目录
+│   ├── common.css          # 公共样式
+│   ├── main.css            # 主样式文件
+│   ├── home.css            # 首页样式
+│   ├── smart.css           # 智能页面样式
+│   ├── product.css         # 产品页面样式
+│   ├── mall.css            # 商城页面样式
+│   ├── profile.css         # 个人中心样式
+│   ├── scene.css           # 智能场景样式
+│   ├── mijiazhongce.css    # 米家众测样式
+│   ├── user-profile.css    # 个人资料样式
+│   ├── notifications.css   # 通知中心样式
+│   ├── environment-settings.css # 环境设置样式
+│   ├── settings.css        # 设置页面样式
+│   ├── all-products.css    # 全部产品样式
+│   └── log.css             # 日志页面样式
+├── scripts/                # JavaScript文件目录
+│   └── main.js             # 主JavaScript文件
+├── images/                 # 图片资源目录
+│   └── profile/            # 个人中心相关图片
+│       ├── mijiazhongce/   # 米家众测图片
+│       └── zhinengchangjing/ # 智能场景图片
+├── .gitignore              # Git忽略文件配置
+└── README.md               # 项目说明文档
 ```
 
 ## 功能演示
@@ -83,30 +155,81 @@ project-fin-takeaway/
 - 智能插座支持电源开关控制
 - 传感器数据每30秒自动更新
 - 设备离线状态显示
+- 房间切换和设备分类管理
 
-### 场景执行
-- 点击场景执行按钮触发场景
-- 显示执行进度和完成提示
-- 支持自定义场景创建
+### 智能场景
+- 四个导航标签切换：智能推荐、语音通知、智能清洁、智能控制
+- 主场景卡片展示和设备项目管理
+- 推荐场景卡片交互和产品网格展示
+- 响应式布局和动画效果
+
+### 米家众测
+- 众测产品卡片展示和状态标识
+- 申请者信息和申请人数显示
+- 产品详情查看和申请功能
+- 特殊标记和状态区分
+
+### 个人资料管理
+- 用户头像点击跳转到详细资料页面
+- 大头像展示和编辑功能
+- 基础资料、账号绑定、密保资料管理
+- 开关按钮交互和注销登录
 
 ### 页面导航
 - 底部导航栏支持页面切换
 - 平滑的页面过渡效果
 - 导航状态同步更新
+- 多级页面跳转和返回功能
 
 ## 使用方法
 
+### 快速启动
+
 1. **直接打开**: 在浏览器中打开 `index.html` 文件
 2. **本地服务器**: 使用任意HTTP服务器托管项目文件
-3. **移动端体验**: 在移动设备浏览器中访问，获得最佳体验
+   ```bash
+   # 使用Python启动本地服务器
+   python3 -m http.server 8000
+   
+   # 使用Node.js http-server
+   npx http-server
+   
+   # 使用Live Server (VS Code扩展)
+   # 右键点击index.html -> Open with Live Server
+   ```
 
-## 浏览器兼容性
+### 页面导航
 
-- ✅ Chrome 60+
-- ✅ Firefox 55+
-- ✅ Safari 12+
-- ✅ Edge 79+
-- ✅ 移动端浏览器
+- **入口页面**: `index.html` - 项目主入口
+- **米家首页**: `home.html` - 设备控制中心
+- **智能场景**: `scene.html` - 智能场景管理
+- **米家众测**: `mijiazhongce.html` - 众测产品展示
+- **个人中心**: `profile.html` - 用户信息和设置
+- **个人资料**: `user-profile.html` - 详细个人资料管理
+- **通知中心**: `notifications.html` - 消息通知和管理
+- **环境设置**: `environment-settings.html` - 家庭环境信息设置
+- **商城页面**: `mall.html` - 购物和产品浏览
+
+### 功能体验
+
+1. **设备控制**: 在首页点击设备卡片体验开关控制
+2. **环境监测**: 点击首页空气质量模块跳转到环境设置页面
+3. **消息通知**: 点击首页右上角消息图标查看通知中心
+4. **场景管理**: 访问智能场景页面体验场景切换和推荐
+5. **众测参与**: 查看米家众测页面的产品信息和申请状态
+6. **个人资料**: 点击个人中心的头像或用户名进入详细资料页面
+7. **页面跳转**: 使用底部导航栏在不同功能模块间切换
+
+### 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+### 移动端体验
+
+项目采用响应式设计，建议在移动设备或浏览器开发者工具的移动设备模拟模式下体验，以获得最佳的米家App仿制效果。
 
 ## 项目亮点
 
@@ -132,6 +255,13 @@ project-fin-takeaway/
 - 移动端优先设计
 - 灵活的布局系统
 
+### 5. 最新优化
+- 统一的橙色主题配色方案
+- 修复了设备卡片文字与按钮重叠问题
+- 优化了空气质量显示格式
+- 增强了页面间的导航体验
+- 完善了消息通知系统
+
 ## 扩展功能
 
 项目预留了扩展接口，可以轻松添加以下功能：
@@ -159,4 +289,6 @@ project-fin-takeaway/
 
 ---
 
-**注意**: 本项目仅供学习交流使用，不得用于商业用途。
+**注意**: 本项目仅供学习交流使用，不得用于商业用途。
+
+**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**

environment-settings.html

@@ -0,0 +1,350 @@
+<!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/environment-settings.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="environment-settings-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="settings-description">
+            <p>设置家庭环境、温度、空气质量等信息的显示</p>
+        </div>
+
+        <!-- 环境设置列表 -->
+        <div class="settings-list">
+            <!-- 卧室 -->
+            <div class="room-section">
+                <h3 class="room-title">卧室</h3>
+                
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-thermometer-half"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>米家空气净化器 4 Lite</h4>
+                            <p class="device-location">卧室</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <span class="value-number">25</span>
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="bedroom-air-1" checked>
+                            <label for="bedroom-air-1"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-tint"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>湿度监测</h4>
+                            <p class="device-location">卧室</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="bedroom-humidity">
+                            <label for="bedroom-humidity"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卧室间</h4>
+                            <p class="device-location">卧室</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="bedroom-temp">
+                            <label for="bedroom-temp"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卧室</h4>
+                            <p class="device-location">卧室</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="bedroom-temp-2">
+                            <label for="bedroom-temp-2"></label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 客厅 -->
+            <div class="room-section">
+                <h3 class="room-title">客厅</h3>
+                
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-thermometer-half"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>米家空气净化器 4 Lite</h4>
+                            <p class="device-location">客厅</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <span class="value-number">25</span>
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="living-air-1" checked>
+                            <label for="living-air-1"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-tint"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>湿度监测</h4>
+                            <p class="device-location">客厅</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="living-humidity">
+                            <label for="living-humidity"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卫生间</h4>
+                            <p class="device-location">客厅</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="living-temp">
+                            <label for="living-temp"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卧室</h4>
+                            <p class="device-location">客厅</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="living-temp-2">
+                            <label for="living-temp-2"></label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 厨房 -->
+            <div class="room-section">
+                <h3 class="room-title">厨房</h3>
+                
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-thermometer-half"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>米家空气净化器 4 Lite</h4>
+                            <p class="device-location">厨房</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <span class="value-number">64</span>
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="kitchen-air-1" checked>
+                            <label for="kitchen-air-1"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-tint"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>湿度监测</h4>
+                            <p class="device-location">厨房</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="kitchen-humidity">
+                            <label for="kitchen-humidity"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卫生间</h4>
+                            <p class="device-location">厨房</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="kitchen-temp">
+                            <label for="kitchen-temp"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卧室</h4>
+                            <p class="device-location">厨房</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="kitchen-temp-2">
+                            <label for="kitchen-temp-2"></label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 空气质量 -->
+            <div class="room-section">
+                <h3 class="room-title">空气质量</h3>
+                
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-thermometer-half"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>米家空气净化器 4 Lite</h4>
+                            <p class="device-location">空气质量</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <span class="value-number">64</span>
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="air-quality-1" checked>
+                            <label for="air-quality-1"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-tint"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>湿度监测</h4>
+                            <p class="device-location">空气质量</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="air-humidity">
+                            <label for="air-humidity"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卫生间</h4>
+                            <p class="device-location">空气质量</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="air-temp">
+                            <label for="air-temp"></label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-icon">
+                            <i class="fas fa-leaf"></i>
+                        </div>
+                        <div class="device-details">
+                            <h4>百度大温湿度计-卧室</h4>
+                            <p class="device-location">空气质量</p>
+                        </div>
+                    </div>
+                    <div class="device-value">
+                        <span class="value-number">14</span>
+                        <div class="toggle-switch">
+                            <input type="checkbox" id="air-temp-2" checked>
+                            <label for="air-temp-2"></label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="scripts/main.js"></script>
+</body>
+</html>

index.html

@@ -18,7 +18,7 @@
                 <i class="fas fa-chevron-down"></i>
             </div>
             <div class="header-right">
-                <i class="fas fa-comment-dots"></i>
+                <i class="fas fa-comment-dots" onclick="location.href='notifications.html'" style="cursor: pointer;"></i>
                 <i class="fas fa-plus-circle"></i>
             </div>
         </header>
@@ -36,8 +36,8 @@
         </nav>
 
         <!-- 空气质量 -->
-        <div class="air-quality">
-            <span>空气质量 4</span>
+        <div class="air-quality" onclick="location.href='environment-settings.html'" style="cursor: pointer;">
+            <span>温度 25°C | 湿度 64% | 空气质量 14</span>
             <i class="fas fa-chevron-right"></i>
         </div>
 

notifications.html

@@ -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>

product-encyclopedia.html

@@ -0,0 +1,128 @@
+<!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/product-encyclopedia.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="product-encyclopedia-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>
+            </div>
+        </header>
+
+        <!-- 搜索栏 -->
+        <div class="search-section">
+            <div class="search-box">
+                <i class="fas fa-search"></i>
+                <input type="text" placeholder="请输入产品名称" class="search-input">
+            </div>
+        </div>
+
+        <!-- 分类导航 -->
+        <div class="category-nav">
+            <div class="category-item active">
+                <div class="category-icon">
+                    <i class="fas fa-home"></i>
+                </div>
+                <span>全屋智能</span>
+            </div>
+            <div class="category-item">
+                <div class="category-icon">
+                    <i class="fas fa-desktop"></i>
+                </div>
+                <span>网关攻略</span>
+            </div>
+            <div class="category-item">
+                <div class="category-icon">
+                    <i class="fas fa-server"></i>
+                </div>
+                <span>蓝牙连接</span>
+            </div>
+            <div class="category-item">
+                <div class="category-icon">
+                    <i class="fas fa-th"></i>
+                </div>
+                <span>功能更新</span>
+            </div>
+        </div>
+
+        <!-- 新上线产品 -->
+        <div class="section">
+            <div class="section-header">
+                <h2>新上线</h2>
+                <i class="fas fa-chevron-right"></i>
+            </div>
+            <div class="product-list">
+                <div class="product-item">
+                    <div class="product-image">
+                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Crect width='80' height='120' fill='%23333' rx='8'/%3E%3Crect x='10' y='20' width='60' height='80' fill='%23555' rx='4'/%3E%3Ccircle cx='40' cy='110' r='3' fill='%23777'/%3E%3C/svg%3E" alt="米家冰箱">
+                    </div>
+                    <div class="product-info">
+                        <h3>米家冰箱 对开门501L 墨羽岩</h3>
+                        <p class="product-brand">小米出品</p>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <div class="product-image">
+                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect width='100' height='60' fill='%23f5f5f5' rx='8'/%3E%3Crect x='10' y='15' width='80' height='30' fill='%23ddd' rx='4'/%3E%3Ccircle cx='20' cy='30' r='5' fill='%23666'/%3E%3Ctext x='50' y='35' text-anchor='middle' font-size='8' fill='%23666'%3E画法几何%3C/text%3E%3C/svg%3E" alt="画法几何智能鱼缸">
+                    </div>
+                    <div class="product-info">
+                        <h3>画法几何智能鱼缸 M1</h3>
+                        <p class="product-brand">画法几何</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 清洁电器 -->
+        <div class="section">
+            <div class="section-header">
+                <h2>清洁电器</h2>
+                <i class="fas fa-chevron-right"></i>
+            </div>
+            <div class="product-list">
+                <div class="product-item">
+                    <div class="product-image">
+                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23333'/%3E%3Ccircle cx='40' cy='40' r='25' fill='%23555'/%3E%3Ccircle cx='40' cy='40' r='15' fill='%23777'/%3E%3Ctext x='40' y='45' text-anchor='middle' font-size='8' fill='white'%3E云米%3C/text%3E%3C/svg%3E" alt="云米洗烘一体机">
+                    </div>
+                    <div class="product-info">
+                        <h3>云米洗烘一体机 (10kg语音版)</h3>
+                        <p class="product-brand">云米</p>
+                    </div>
+                </div>
+                <div class="product-item">
+                    <div class="product-image">
+                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23444'/%3E%3Ccircle cx='40' cy='40' r='25' fill='%23666'/%3E%3Ccircle cx='40' cy='40' r='15' fill='%23888'/%3E%3Ctext x='40' y='45' text-anchor='middle' font-size='8' fill='white'%3E云米%3C/text%3E%3C/svg%3E" alt="云米洗衣机">
+                    </div>
+                    <div class="product-info">
+                        <h3>云米洗衣机 (9kg/10kg语音版)</h3>
+                        <p class="product-brand">云米</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 安防 -->
+        <div class="section">
+            <div class="section-header">
+                <h2>安防</h2>
+                <i class="fas fa-chevron-right"></i>
+            </div>
+        </div>
+
+
+    </div>
+
+    <script src="scripts/main.js"></script>
+</body>
+</html>

profile.html

@@ -43,18 +43,18 @@
                  </div> 
                  <span>米家众测</span> 
              </div>
-            <div class="feature-card">
+            <div class="feature-card" onclick="location.href='product-encyclopedia.html'">
                 <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                     <i class="fas fa-book"></i>
                 </div>
                 <span>产品百科</span>
             </div>
-            <div class="feature-card">
-                <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
-                    <i class="fas fa-home"></i>
-                </div>
-                <span>全屋智能</span>
-            </div>
+            <div class="feature-card" onclick="window.location.href='whole-house-smart.html'"> 
+                 <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);"> 
+                     <i class="fas fa-home"></i> 
+                 </div> 
+                 <span>全屋智能</span> 
+             </div>
         </div>
 
         <!-- 米家众测推广 -->

styles/environment-settings.css

@@ -0,0 +1,286 @@
+#notifications-page {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    padding-bottom: 20px;
+}
+
+/* 页面头部 */
+.page-header {
+    background: #f6f6f6;
+    color: rgb(43, 42, 42);
+    padding: 15px 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.back-btn, .settings-btn {
+    background: none;
+    border: none;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.back-btn:hover, .settings-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.page-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+/* 设置说明 */
+.settings-description {
+    background: white;
+    margin: 20px;
+    border-radius: 12px;
+    padding: 15px 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.settings-description p {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+/* 设置列表 */
+.settings-list {
+    margin: 0 20px;
+}
+
+.room-section {
+    background: white;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.room-title {
+    background: #f8f9fa;
+    margin: 0;
+    padding: 15px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 1px solid #eee;
+}
+
+.device-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background-color 0.3s ease;
+}
+
+.device-item:last-child {
+    border-bottom: none;
+}
+
+.device-item:hover {
+    background-color: #f8f9fa;
+}
+
+.device-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex: 1;
+}
+
+.device-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #ff6900, #ff8533);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 16px;
+    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
+}
+
+.device-details h4 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.3;
+}
+
+.device-location {
+    margin: 0;
+    font-size: 12px;
+    color: #999;
+}
+
+.device-value {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.value-number {
+    font-size: 16px;
+    font-weight: 600;
+    color: #ff6900;
+    min-width: 30px;
+    text-align: right;
+}
+
+/* 开关样式 */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-switch label {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    border-radius: 24px;
+    transition: 0.3s;
+}
+
+.toggle-switch label:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.3s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch input:checked + label {
+    background-color: #ff6900;
+}
+
+.toggle-switch input:checked + label:before {
+    transform: translateX(20px);
+}
+
+.toggle-switch input:focus + label {
+    box-shadow: 0 0 1px #ff6900;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .header-content {
+        padding: 0 15px;
+    }
+    
+    .settings-description,
+    .settings-list {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+    
+    .device-item {
+        padding: 14px 16px;
+    }
+    
+    .device-icon {
+        width: 36px;
+        height: 36px;
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header {
+        padding: 12px 0;
+    }
+    
+    .header-content {
+        padding: 0 12px;
+    }
+    
+    .settings-description,
+    .settings-list {
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+    
+    .device-item {
+        padding: 12px 14px;
+        gap: 12px;
+    }
+    
+    .room-title {
+        padding: 12px 16px;
+        font-size: 15px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.settings-description,
+.room-section {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+.room-section:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+.room-section:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.room-section:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+.room-section:nth-child(4) {
+    animation-delay: 0.4s;
+}
+
+.room-section:nth-child(5) {
+    animation-delay: 0.5s;
+}

styles/home.css

@@ -75,6 +75,7 @@
     background-color: #fff;
     border-radius: 12px;
     padding: 20px;
+    padding-right: 55px;
     position: relative;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     cursor: pointer;

styles/notifications.css

@@ -0,0 +1,349 @@
+/* 通知页面样式 */
+#notifications-page {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    padding-bottom: 20px;
+}
+
+/* 页面头部 */
+.page-header {
+    background: #f6f6f6;
+    color: rgb(43, 42, 42);
+    padding: 15px 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.back-btn, .settings-btn {
+    background: none;
+    border: none;
+    color: rgb(0, 0, 0);
+    font-size: 18px;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.back-btn:hover, .settings-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.page-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+/* 家庭选择器 */
+.family-selector {
+    background: white;
+    margin: 20px;
+    border-radius: 12px;
+    padding: 15px 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.family-selector:hover {
+    background-color: #f8f9fa;
+}
+
+.selector-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.family-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+}
+
+.selector-content i {
+    color: #666;
+    font-size: 14px;
+}
+
+/* 消息分类 */
+.message-categories {
+    display: flex;
+    background: white;
+    margin: 0 20px 20px;
+    border-radius: 12px;
+    padding: 5px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.category-item {
+    flex: 1;
+    text-align: center;
+    padding: 12px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #666;
+}
+
+.category-item.active {
+    background: linear-gradient(135deg, #ff6900 0%, #ff8533 100%);
+    color: white;
+    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
+}
+
+/* 消息状态 */
+.message-status {
+    margin: 0 20px 20px;
+}
+
+.status-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+}
+
+.unread-count {
+    font-size: 14px;
+    color: #666;
+}
+
+.mark-all-read {
+    background: none;
+    border: none;
+    color: #ff6900;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 6px;
+    transition: background-color 0.3s ease;
+}
+
+.mark-all-read:hover {
+    background-color: rgba(255, 105, 0, 0.1);
+}
+
+/* 消息列表 */
+.message-list {
+    margin: 0 20px;
+}
+
+.message-item {
+    background: white;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.message-item:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.message-item:last-child {
+    margin-bottom: 0;
+}
+
+.message-icon {
+    flex-shrink: 0;
+}
+
+.icon-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 消息图标配色方案 - 橙色系 */
+.icon-wrapper.scene {
+    background: linear-gradient(135deg, #ff6900, #ff8533);
+}
+
+.icon-wrapper.device {
+    background: linear-gradient(135deg, #ff8533, #ffab66);
+}
+
+.icon-wrapper.security {
+    background: linear-gradient(135deg, #ff4500, #ff6900);
+}
+
+.icon-wrapper.system {
+    background: linear-gradient(135deg, #ffab66, #ffc299);
+}
+
+.message-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.message-type {
+    font-size: 12px;
+    color: #666;
+    background: #f0f0f0;
+    padding: 2px 8px;
+    border-radius: 10px;
+}
+
+.message-time {
+    font-size: 12px;
+    color: #999;
+}
+
+.message-text h4 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.4;
+}
+
+/* 空状态 */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #999;
+}
+
+.empty-icon {
+    font-size: 48px;
+    margin-bottom: 20px;
+    opacity: 0.5;
+}
+
+.empty-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0 0 8px 0;
+    color: #666;
+}
+
+.empty-subtext {
+    font-size: 14px;
+    margin: 0;
+    line-height: 1.5;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .header-content {
+        padding: 0 15px;
+    }
+    
+    .family-selector,
+    .message-categories,
+    .message-status,
+    .message-list {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+    
+    .message-item {
+        padding: 14px;
+    }
+    
+    .icon-wrapper {
+        width: 36px;
+        height: 36px;
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header {
+        padding: 12px 0;
+    }
+    
+    .header-content {
+        padding: 0 12px;
+    }
+    
+    .family-selector,
+    .message-categories,
+    .message-status,
+    .message-list {
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+    
+    .message-item {
+        padding: 12px;
+        gap: 12px;
+    }
+    
+    .empty-state {
+        padding: 40px 15px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.family-selector,
+.message-categories,
+.message-status,
+.message-item {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+.message-categories {
+    animation-delay: 0.1s;
+}
+
+.message-status {
+    animation-delay: 0.2s;
+}
+
+.message-item:nth-child(1) {
+    animation-delay: 0.3s;
+}
+
+.message-item:nth-child(2) {
+    animation-delay: 0.4s;
+}
+
+.message-item:nth-child(3) {
+    animation-delay: 0.5s;
+}

styles/product-encyclopedia.css

@@ -0,0 +1,309 @@
+/* 产品百科页面样式 */
+
+#product-encyclopedia-page {
+    background: #f8f9fa;
+    min-height: 100vh;
+    padding-bottom: 20px;
+}
+
+/* 页面头部 */
+.page-header {
+    background: white;
+    padding: 12px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    max-width: 414px;
+    margin: 0 auto;
+}
+
+.back-btn {
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: #333;
+    padding: 8px;
+    margin-right: 12px;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+.back-btn:hover {
+    background-color: #f5f5f5;
+}
+
+.page-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+    flex: 1;
+    text-align: center;
+    margin-right: 32px;
+}
+
+/* 搜索区域 */
+.search-section {
+    padding: 16px;
+    background: white;
+    margin-bottom: 8px;
+}
+
+.search-box {
+    position: relative;
+    background: #f5f5f5;
+    border-radius: 20px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+}
+
+.search-box i {
+    color: #999;
+    margin-right: 8px;
+    font-size: 14px;
+}
+
+.search-input {
+    border: none;
+    background: none;
+    outline: none;
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+}
+
+.search-input::placeholder {
+    color: #999;
+}
+
+/* 分类导航 */
+.category-nav {
+    display: flex;
+    justify-content: space-around;
+    background: white;
+    padding: 16px 8px;
+    margin-bottom: 8px;
+}
+
+.category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    padding: 8px;
+    border-radius: 8px;
+}
+
+.category-item:hover {
+    background-color: #f5f5f5;
+}
+
+.category-item.active .category-icon {
+    background: linear-gradient(135deg, #4ECDC4, #44A08D);
+    color: white;
+}
+
+.category-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
+    transition: all 0.2s;
+}
+
+.category-icon i {
+    font-size: 16px;
+    color: #666;
+}
+
+.category-item.active .category-icon i {
+    color: white;
+}
+
+.category-item span {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+}
+
+.category-item.active span {
+    color: #4ECDC4;
+    font-weight: 500;
+}
+
+/* 产品区域 */
+.section {
+    background: white;
+    margin-bottom: 8px;
+    padding: 16px;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+.section-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin: 0;
+}
+
+.section-header i {
+    color: #999;
+    font-size: 14px;
+}
+
+/* 产品列表 */
+.product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.product-item {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 12px;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.product-item:hover {
+    background: #f0f0f0;
+    transform: translateY(-1px);
+}
+
+.product-image {
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 12px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.product-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.product-info {
+    flex: 1;
+}
+
+.product-info h3 {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    margin: 0 0 4px 0;
+    line-height: 1.4;
+}
+
+.product-brand {
+    font-size: 12px;
+    color: #999;
+    margin: 0;
+}
+
+
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+    .category-nav {
+        padding: 12px 4px;
+    }
+    
+    .category-item {
+        padding: 4px;
+    }
+    
+    .category-icon {
+        width: 36px;
+        height: 36px;
+    }
+    
+    .category-icon i {
+        font-size: 14px;
+    }
+    
+    .category-item span {
+        font-size: 11px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.section {
+    animation: fadeInUp 0.3s ease-out;
+}
+
+.product-item {
+    animation: fadeInUp 0.3s ease-out;
+}
+
+.product-item:nth-child(2) {
+    animation-delay: 0.1s;
+}
+
+.product-item:nth-child(3) {
+    animation-delay: 0.2s;
+}
+
+/* 加载状态 */
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+    color: #999;
+}
+
+.loading::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #4ECDC4;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-left: 8px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

styles/profile.css

@@ -282,6 +282,11 @@
     width: 100%;
     height: 100%;
     line-height: 1;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .menu-content {
@@ -331,7 +336,7 @@
 
 .menu-item i:last-child {
     font-size: 14px;
-    color: #ccc;
+    color: #ffffff;
 }
 
 /* 头部信息 */

styles/whole-house-smart.css

@@ -0,0 +1,376 @@
+/* 全屋智能页面样式 */
+#whole-house-smart-page {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+    padding-bottom: 20px;
+}
+
+/* 页面头部 */
+.page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 15px 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.back-btn, .info-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 18px;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.back-btn:hover, .info-btn:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.page-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+/* 分类导航 */
+.category-section {
+    background: white;
+    margin: 20px;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.category-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 20px;
+    text-align: center;
+}
+
+.category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.category-item:hover {
+    transform: translateY(-2px);
+}
+
+.category-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    color: white;
+    font-size: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.category-item span {
+    font-size: 12px;
+    color: #333;
+    font-weight: 500;
+}
+
+/* 1V1定制服务 */
+.service-section {
+    margin: 20px;
+}
+
+.service-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.service-card h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    color: #333;
+}
+
+.service-banner {
+    background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.banner-text h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 5px 0;
+}
+
+.banner-text p {
+    font-size: 14px;
+    margin: 0 0 15px 0;
+    opacity: 0.9;
+}
+
+.detail-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.detail-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px);
+}
+
+.banner-image {
+    width: 80px;
+    height: 60px;
+}
+
+.banner-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+/* 自己动手搭建 */
+.diy-section {
+    margin: 20px;
+}
+
+.diy-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.diy-card h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    color: #333;
+}
+
+.diy-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.diy-item {
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.diy-image {
+    width: 80px;
+    height: 60px;
+    flex-shrink: 0;
+}
+
+.diy-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.diy-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.diy-info p {
+    margin: 0;
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+}
+
+.guide-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.guide-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* 全屋智能入门套餐 */
+.package-section {
+    margin: 20px;
+}
+
+.package-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.package-header {
+    margin-bottom: 15px;
+}
+
+.package-header h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 5px 0;
+    color: #333;
+}
+
+.package-header p {
+    font-size: 14px;
+    color: #666;
+    margin: 0;
+}
+
+.package-image {
+    width: 100%;
+    height: 120px;
+}
+
+.package-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .category-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 15px;
+    }
+    
+    .category-icon {
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+    
+    .category-item span {
+        font-size: 11px;
+    }
+    
+    .service-banner {
+        flex-direction: column;
+        text-align: center;
+        gap: 15px;
+    }
+    
+    .banner-image {
+        width: 100px;
+        height: 70px;
+    }
+    
+    .diy-item {
+        flex-direction: column;
+        text-align: center;
+        gap: 10px;
+    }
+    
+    .diy-info {
+        flex-direction: column;
+        gap: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .category-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    .page-header {
+        padding: 12px 0;
+    }
+    
+    .header-content {
+        padding: 0 15px;
+    }
+    
+    .service-section,
+    .diy-section,
+    .package-section,
+    .category-section {
+        margin: 15px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.category-section,
+.service-section,
+.diy-section,
+.package-section {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+.service-section {
+    animation-delay: 0.1s;
+}
+
+.diy-section {
+    animation-delay: 0.2s;
+}
+
+.package-section {
+    animation-delay: 0.3s;
+}

whole-house-smart.html

@@ -0,0 +1,124 @@
+<!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/whole-house-smart.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="whole-house-smart-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="info-btn">
+                    <i class="fas fa-info-circle"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- 分类导航 -->
+        <div class="category-section">
+            <div class="category-grid">
+                <div class="category-item">
+                    <div class="category-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
+                        <i class="fas fa-wifi"></i>
+                    </div>
+                    <span>家居中枢</span>
+                </div>
+                <div class="category-item">
+                    <div class="category-icon" style="background: linear-gradient(135deg, #FFD93D, #FF6B6B);">
+                        <i class="fas fa-lightbulb"></i>
+                    </div>
+                    <span>智能照明</span>
+                </div>
+                <div class="category-item">
+                    <div class="category-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <span>智能安防</span>
+                </div>
+                <div class="category-item">
+                    <div class="category-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
+                        <i class="fas fa-thermometer-half"></i>
+                    </div>
+                    <span>智能温控</span>
+                </div>
+                <div class="category-item">
+                    <div class="category-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
+                        <i class="fas fa-window-maximize"></i>
+                    </div>
+                    <span>智能窗帘</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 1V1定制服务 -->
+        <div class="service-section">
+            <div class="service-card">
+                <h2>1V1 定制服务</h2>
+                <div class="service-content">
+                    <div class="service-banner">
+                        <div class="banner-text">
+                            <h3>小米全屋智能定制</h3>
+                            <p>设计·安装·调试，一站式服务</p>
+                            <button class="detail-btn">了解详情</button>
+                        </div>
+                        <div class="banner-image">
+                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23FFD93D' rx='8'/%3E%3Crect x='20' y='20' width='80' height='40' fill='%23FFA500' rx='4'/%3E%3Ccircle cx='100' cy='20' r='8' fill='%23FF6B6B'/%3E%3Ctext x='60' y='45' text-anchor='middle' font-size='10' fill='white'%3E智能家居%3C/text%3E%3C/svg%3E" alt="智能家居定制">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 自己动手搭建 -->
+        <div class="diy-section">
+            <div class="diy-card">
+                <h2>自己动手，搭建全屋智能</h2>
+                <div class="diy-content">
+                    <div class="diy-item">
+                        <div class="diy-image">
+                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23f5f5f5' rx='8'/%3E%3Crect x='20' y='20' width='80' height='40' fill='%23ddd' rx='4'/%3E%3Ccircle cx='30' cy='30' r='5' fill='%23666'/%3E%3Ccircle cx='90' cy='30' r='5' fill='%23666'/%3E%3Ctext x='60' y='45' text-anchor='middle' font-size='8' fill='%23666'%3E智能开关%3C/text%3E%3C/svg%3E" alt="智能开关">
+                        </div>
+                        <div class="diy-info">
+                            <p>智能开关、智能灯如何选择？</p>
+                            <button class="guide-btn">立即查看</button>
+                        </div>
+                    </div>
+                    <div class="diy-item">
+                        <div class="diy-image">
+                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23e8f5e8' rx='8'/%3E%3Crect x='30' y='25' width='60' height='30' fill='%23a8d8a8' rx='4'/%3E%3Ccircle cx='45' cy='40' r='3' fill='%234a7c59'/%3E%3Ccircle cx='75' cy='40' r='3' fill='%234a7c59'/%3E%3Ctext x='60' y='70' text-anchor='middle' font-size='8' fill='%23666'%3E智能指南%3C/text%3E%3C/svg%3E" alt="小米全屋智能指南">
+                        </div>
+                        <div class="diy-info">
+                            <p>小米全屋智能指南</p>
+                            <button class="guide-btn">立即查看</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 全屋智能入门套餐 -->
+        <div class="package-section">
+            <div class="package-card">
+                <div class="package-header">
+                    <h2>全屋智能入门套餐</h2>
+                    <p>必备6大单品</p>
+                </div>
+                <div class="package-image">
+                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100'%3E%3Crect width='150' height='100' fill='%23f8f9fa' rx='8'/%3E%3Crect x='20' y='20' width='25' height='15' fill='%23333' rx='2'/%3E%3Crect x='55' y='20' width='25' height='15' fill='%23666' rx='2'/%3E%3Crect x='90' y='20' width='25' height='15' fill='%23999' rx='2'/%3E%3Crect x='20' y='45' width='25' height='15' fill='%23333' rx='2'/%3E%3Crect x='55' y='45' width='25' height='15' fill='%23666' rx='2'/%3E%3Crect x='90' y='45' width='25' height='15' fill='%23999' rx='2'/%3E%3Ctext x='75' y='85' text-anchor='middle' font-size='10' fill='%23666'%3E智能套餐%3C/text%3E%3C/svg%3E" alt="全屋智能套餐">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="scripts/main.js"></script>
+</body>
+</html>