diff --git a/README.md b/README.md index a8a764b..6e79f39 100644 --- a/README.md +++ b/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/ --- -**注意**: 本项目仅供学习交流使用,不得用于商业用途。 \ No newline at end of file +**注意**: 本项目仅供学习交流使用,不得用于商业用途。 + +**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业** \ No newline at end of file