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

init: add initial project files for Mi Home smart home interface clone

Browse Source
This commit is contained in:
shenghuo2
2025-06-20 17:34:00 +08:00
commit 51962faa87
16 changed files with 3963 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/project-fin-takeaway.iml" filepath="$PROJECT_DIR$/.idea/project-fin-takeaway.iml" />
</modules>
</component>
</project>

12
.idea/project-fin-takeaway.iml generated Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

1
.wakatime-project Normal file
View File

@ -0,0 +1 @@
term-final-proj

162
README.md Normal file
View File

@ -0,0 +1,162 @@
# 米家智能家居 - 课程设计项目
这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。
## 项目特色
### 🎨 界面设计
- 完全仿制米家app的UI设计风格
- 响应式布局，适配移动端设备
- 现代化的渐变色彩和圆角设计
- 流畅的动画效果和交互反馈
### 📱 功能模块
#### 1. 首页 - 设备控制
- 房间切换导航（全屋、出租屋、十五中、客厅、卧室）
- 空气质量显示
- 智能设备网格展示
- 设备状态控制（开关、离线状态）
- 温湿度传感器实时数据
- 蓝牙连接状态指示
#### 2. 智能场景页面
- 推荐场景和自定义场景切换
- 预设智能场景：
- 离家：关灯、开安防、开始清扫
- 回家：开灯、开空调、关闭窗帘
- 晚安：关灯、关电器、安心入睡
- 起床：开灯、开窗帘、活力唤醒
- 夜间勿扰：降低媒体音、关闭声光提示
- 运动：开空调除净、舒爽运动
- 结束运动：关空调除净、省心省力
- 一键执行场景功能
- 自定义场景创建
#### 3. 商城页面
- 直接嵌入小米官方商城页面
- 完整的购物体验
#### 4. 个人中心
- 用户信息展示
- 功能快捷入口：智能场景、米家众测、产品百科、全屋智能
- 小米室外摄像机4C众测推广
- 设置菜单：共享、设备耗材、语音设置、我的有品、家庭网络、中枢与网关、设置
### 🛠 技术特点
#### 前端技术栈
- **HTML5**: 语义化标签，良好的页面结构
- **CSS3**:
- Flexbox和Grid布局
- CSS变量和渐变
- 动画和过渡效果
- 响应式设计
- **JavaScript ES6+**:
- 模块化代码组织
- 事件驱动编程
- DOM操作和状态管理
- 定时器和异步处理
#### 设计模式
- 组件化思维
- 状态管理
- 事件委托
- 响应式设计原则
## 项目结构
```
project-fin-takeaway/
├── index.html # 主页面文件
├── styles/
│ └── main.css # 主样式文件
├── scripts/
│ └── main.js # 主JavaScript文件
└── README.md # 项目说明文档
```
## 功能演示
### 设备控制
- 点击设备卡片可以切换设备状态
- 智能插座支持电源开关控制
- 传感器数据每30秒自动更新
- 设备离线状态显示
### 场景执行
- 点击场景执行按钮触发场景
- 显示执行进度和完成提示
- 支持自定义场景创建
### 页面导航
- 底部导航栏支持页面切换
- 平滑的页面过渡效果
- 导航状态同步更新
## 使用方法
1. **直接打开**: 在浏览器中打开 `index.html` 文件
2. **本地服务器**: 使用任意HTTP服务器托管项目文件
3. **移动端体验**: 在移动设备浏览器中访问，获得最佳体验
## 浏览器兼容性
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
- ✅ 移动端浏览器
## 项目亮点
### 1. 高度还原
- 像素级还原米家app界面
- 保持原有的交互逻辑
- 符合用户使用习惯
### 2. 交互体验
- 触摸反馈效果
- 流畅的动画过渡
- 实时状态更新
- 友好的提示信息
### 3. 代码质量
- 清晰的代码结构
- 良好的注释说明
- 模块化设计
- 易于维护和扩展
### 4. 响应式设计
- 适配不同屏幕尺寸
- 移动端优先设计
- 灵活的布局系统
## 扩展功能
项目预留了扩展接口，可以轻松添加以下功能：
- 🔐 用户登录和权限管理
- 📊 设备数据统计和图表
- 🔔 消息推送和通知
- 🎵 语音控制集成
- 🌐 云端数据同步
- 📱 PWA支持
## 开发说明
这是一个纯前端项目，所有的数据都是模拟数据，主要用于展示界面效果和交互逻辑。在实际应用中，需要：
1. 集成真实的设备API
2. 添加用户认证系统
3. 实现数据持久化
4. 添加错误处理机制
5. 优化性能和安全性
## 致谢
感谢小米公司提供的优秀设计参考，本项目仅用于学习和课程设计目的。
---
**注意**: 本项目仅供学习交流使用，不得用于商业用途。

169
home.html Normal file
View File

@ -0,0 +1,169 @@
<!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/main.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="home-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<span class="home-name">shenghuo2的家</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="header-right">
<i class="fas fa-comment-dots"></i>
<i class="fas fa-plus-circle"></i>
</div>
</header>
<!-- 房间导航 -->
<nav class="room-nav">
<div class="room-tabs">
<span class="room-tab active">全屋</span>
<span class="room-tab">出租屋</span>
<span class="room-tab">十五中</span>
<span class="room-tab">客厅</span>
<span class="room-tab">卧室</span>
</div>
<i class="fas fa-bars home-menu-icon"></i>
</nav>
<!-- 空气质量 -->
<div class="air-quality">
<span>空气质量 4</span>
<i class="fas fa-chevron-right"></i>
</div>
<!-- 设备网格 -->
<div class="device-grid">
<!-- 手机红外遥控器 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="device-name">手机红外遥控器</div>
<div class="device-status">已连接</div>
</div>
<!-- 小米智能插座 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-plug"></i>
</div>
<div class="device-name">小米智能插座</div>
<div class="device-status off">已关闭</div>
</div>
<!-- 小米台灯 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-lightbulb"></i>
</div>
<div class="device-name">小米台灯</div>
<div class="device-status">已开启</div>
</div>
<!-- 空调 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-snowflake"></i>
</div>
<div class="device-name">空调</div>
<div class="device-status off">已关闭</div>
</div>
<!-- 小爱音箱 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-volume-up"></i>
</div>
<div class="device-name">小爱音箱</div>
<div class="device-status">播放中</div>
</div>
<!-- 扫地机器人 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-robot"></i>
</div>
<div class="device-name">扫地机器人</div>
<div class="device-status off">待机中</div>
</div>
</div>
<!-- 传感器数据 -->
<div class="sensor-grid">
<div class="sensor-card">
<div class="sensor-icon">
<i class="fas fa-thermometer-half"></i>
</div>
<div class="sensor-data">
<span class="sensor-value" id="temperature">23°C</span>
<span class="sensor-label">温度</span>
</div>
</div>
<div class="sensor-card">
<div class="sensor-icon">
<i class="fas fa-tint"></i>
</div>
<div class="sensor-data">
<span class="sensor-value" id="humidity">65%</span>
<span class="sensor-label">湿度</span>
</div>
</div>
<div class="sensor-card">
<div class="sensor-icon">
<i class="fas fa-wind"></i>
</div>
<div class="sensor-data">
<span class="sensor-value" id="air-quality">良好</span>
<span class="sensor-label">空气质量</span>
</div>
</div>
<div class="sensor-card">
<div class="sensor-icon">
<i class="fas fa-sun"></i>
</div>
<div class="sensor-data">
<span class="sensor-value" id="light">450 lux</span>
<span class="sensor-label">光照</span>
</div>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item active">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

178
index.html Normal file
View File

@ -0,0 +1,178 @@
<!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/main.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="home-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<span class="home-name">shenghuo2的家</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="header-right">
<i class="fas fa-comment-dots"></i>
<i class="fas fa-plus-circle"></i>
</div>
</header>
<!-- 房间导航 -->
<nav class="room-nav">
<div class="room-tabs">
<span class="room-tab active">全屋</span>
<span class="room-tab">出租屋</span>
<span class="room-tab">十五中</span>
<span class="room-tab">客厅</span>
<span class="room-tab">卧室</span>
</div>
<i class="fas fa-bars home-menu-icon"></i>
</nav>
<!-- 空气质量 -->
<div class="air-quality">
<span>空气质量 4</span>
<i class="fas fa-chevron-right"></i>
</div>
<!-- 设备网格 -->
<div class="device-grid">
<!-- 手机红外遥控器 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="device-name">手机红外遥控器</div>
<div class="device-status">手机 | 设备离线</div>
</div>
<!-- 万能遥控器 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-satellite-dish"></i>
</div>
<div class="device-name">万能遥控器</div>
<div class="device-status">设备离线 | 长期离线</div>
</div>
<!-- 空调 -->
<div class="device-card">
<div class="device-icon">
<div class="ac-icon"></div>
</div>
<div class="device-name">空调</div>
<div class="device-status">卧室 | 设备离线</div>
</div>
<!-- 客厅空调 -->
<div class="device-card">
<div class="device-icon">
<div class="ac-icon"></div>
</div>
<div class="device-name">客厅空调</div>
<div class="device-status">客厅 | 设备离线</div>
</div>
<!-- 盒子 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-tv"></i>
</div>
<div class="device-name">盒子</div>
<div class="device-status">客厅 | 设备离线</div>
</div>
<!-- 投影仪 -->
<div class="device-card">
<div class="device-icon">
<i class="fas fa-video"></i>
</div>
<div class="device-name">投影仪</div>
<div class="device-status">客厅 | 设备离线</div>
</div>
<!-- 卧室空调 -->
<div class="device-card">
<div class="device-icon">
<div class="ac-icon"></div>
</div>
<div class="device-name">卧室空调</div>
<div class="device-status">卧室 | 设备离线</div>
</div>
<!-- 智能插座2 蓝牙网关版 -->
<div class="device-card active">
<div class="device-icon">
<i class="fas fa-plug"></i>
</div>
<div class="device-name">智能插座2 蓝牙网关版</div>
<div class="device-status">出租屋</div>
<div class="power-button">
<i class="fas fa-power-off"></i>
</div>
</div>
</div>
<!-- 温湿度计 -->
<div class="sensor-grid">
<div class="sensor-card">
<div class="sensor-icon">
<span class="temp-display">26°</span>
</div>
<div class="sensor-name">温湿度计</div>
<div class="sensor-status">客厅</div>
<div class="bluetooth-icon">
<i class="fab fa-bluetooth-b"></i>
</div>
</div>
<div class="sensor-card">
<div class="sensor-icon">
<span class="temp-display">26.5°</span>
<span class="humidity-display">60%</span>
</div>
<div class="sensor-name">日博士温湿度计-卫生间</div>
<div class="sensor-status">十五中 | 16.8°C 39%</div>
<div class="bluetooth-icon">
<i class="fab fa-bluetooth-b"></i>
</div>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item active">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

222
mall.html Normal file
View File

@ -0,0 +1,222 @@
<!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/main.css">
<link rel="stylesheet" href="styles/mall.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="mall-page">
<!-- 顶部促销横幅 -->
<div class="promo-banner">
<div class="promo-content">
<span class="promo-text">秒杀低至 5折</span>
<div class="promo-icon">
<i class="fas fa-running"></i>
</div>
</div>
<div class="notification-badge">3</div>
</div>
<!-- 搜索框 -->
<div class="search-section">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="pp棉拖芯">
</div>
</div>
<!-- 主要产品展示 -->
<div class="main-product-section">
<!-- K80 至尊版手机 -->
<div class="featured-product">
<div class="product-content">
<h2 class="product-title">K80 至尊版</h2>
<p class="product-subtitle">高端旗舰 豪华质感</p>
<p class="product-description">还约换更多重的好礼</p>
<button class="cta-button">预约最新旗舰手机</button>
</div>
<div class="product-images">
<div class="phone-mockup phone-1"></div>
<div class="phone-mockup phone-2"></div>
</div>
</div>
<!-- 产品卡片组 -->
<div class="product-cards">
<div class="product-card">
<div class="card-image kpad-image"></div>
<div class="card-content">
<h3>K Pad</h3>
<p>玩游戏很好礼</p>
</div>
</div>
<div class="product-card">
<div class="card-image mix-flip-image"></div>
<div class="card-content">
<h3>XIAOMI MIX Flip 2</h3>
<p>预约最新旗舰手机</p>
</div>
</div>
<div class="product-card">
<div class="card-image smart-device-image"></div>
<div class="card-content">
<h3>智能家电技术新</h3>
<p>全屋智能新体验</p>
</div>
</div>
</div>
</div>
<!-- 分类导航 -->
<div class="category-grid">
<div class="category-item">
<div class="category-icon phone-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<span>小米手机</span>
</div>
<div class="category-item">
<div class="category-icon tv-icon">
<i class="fas fa-tv"></i>
</div>
<span>小米家电</span>
</div>
<div class="category-item">
<div class="category-icon grid-icon">
<i class="fas fa-th"></i>
</div>
<span>分类</span>
</div>
<div class="category-item">
<div class="category-icon percent-icon">
<i class="fas fa-percent"></i>
</div>
<span>小米众筹</span>
</div>
<div class="category-item">
<div class="category-icon smart-icon">
<i class="fas fa-brain"></i>
</div>
<span>米家智能</span>
</div>
</div>
<div class="category-grid">
<div class="category-item">
<div class="category-icon clock-icon">
<i class="fas fa-clock"></i>
</div>
<span>有品秒杀</span>
</div>
<div class="category-item">
<div class="category-icon home-icon">
<i class="fas fa-home"></i>
</div>
<span>生活电器</span>
</div>
<div class="category-item">
<div class="category-icon filter-icon">
<i class="fas fa-filter"></i>
</div>
<span>净水滤芯</span>
</div>
<div class="category-item">
<div class="category-icon xiaomi-icon">
<span>MI</span>
</div>
<span>小米自营</span>
</div>
<div class="category-item">
<div class="category-icon shirt-icon">
<i class="fas fa-tshirt"></i>
</div>
<span>鞋服饰品</span>
</div>
</div>
<!-- 促销活动区域 -->
<div class="promotion-section">
<!-- 小米618活动 -->
<div class="promo-card large">
<div class="promo-header">
<span class="promo-badge">小米618</span>
</div>
<h3>科技生态 一步到位</h3>
<p>部分有礼200减30</p>
<button class="promo-btn">立即查看</button>
<div class="promo-visual">
<div class="tech-icon"></div>
</div>
</div>
<!-- 其他促销卡片 -->
<div class="promo-cards-grid">
<div class="promo-card small">
<div class="speaker-visual"></div>
<h4>米家音箱专场</h4>
<p>20点抢5折券</p>
</div>
<div class="promo-card small">
<div class="card-visual"></div>
<h4>米家好卡</h4>
<p>限时19元享优惠</p>
</div>
</div>
<!-- 底部促销网格 -->
<div class="bottom-promo-grid">
<div class="promo-item">
<div class="item-visual appliance-visual"></div>
<h5>小家电盛典</h5>
<p>全场立减500元</p>
</div>
<div class="promo-item">
<div class="item-visual quality-visual"></div>
<h5>品质大家电</h5>
<p>全场优惠400元</p>
</div>
<div class="promo-item">
<div class="item-visual shopping-visual"></div>
<h5>美食好物购</h5>
<p>五折优惠1500元</p>
</div>
<div class="promo-item">
<div class="item-visual lifestyle-visual"></div>
<h5>智能生活好物</h5>
<p>全场立减2000元</p>
</div>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='index.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item active">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

116
product.html Normal file
View File

@ -0,0 +1,116 @@
<!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/main.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-page">
<header class="product-header">
<div class="header-title">已接入米家</div>
</header>
<!-- 搜索框 -->
<div class="search-section">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索更多智能产品">
</div>
</div>
<!-- 米家众测推广 -->
<div class="promo-section">
<div class="promo-card">
<div class="promo-content">
<div class="promo-badge">米家众测</div>
<div class="promo-title">小米室外摄像机 4C</div>
<div class="promo-subtitle">
<span class="promo-tag">免费抽</span>
<span class="promo-count">16台</span>
</div>
</div>
<div class="promo-image">
<div class="camera-icon">
<i class="fas fa-video"></i>
</div>
</div>
</div>
</div>
<!-- 30天激活榜 -->
<div class="ranking-section">
<div class="ranking-header">
<h3>30天激活榜</h3>
</div>
<div class="ranking-list">
<div class="ranking-item">
<div class="ranking-number">1</div>
<div class="product-image">
<div class="ac-product-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米空调巨省电 1.5匹 一级 适...</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="ranking-item">
<div class="ranking-number">2</div>
<div class="product-image">
<div class="scale-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家体脂秤 S400</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="ranking-item">
<div class="ranking-number">3</div>
<div class="product-image">
<div class="speaker-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小爱音箱Play</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
</div>
<div class="view-all">
<span>查看全部榜单</span>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='home.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item active">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

177
profile.html Normal file
View File

@ -0,0 +1,177 @@
<!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/main.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="profile-page">
<!-- 头部用户信息 -->
<div class="profile-header">
<div class="header-top">
<div class="user-info">
<div class="user-avatar">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234A90E2'/%3E%3Cpath d='M50 30c8 0 15 7 15 15s-7 15-15 15-15-7-15-15 7-15 15-15zm0 35c12 0 22 6 22 14v6H28v-6c0-8 10-14 22-14z' fill='white'/%3E%3C/svg%3E" alt="用户头像">
</div>
<div class="user-details">
<h2>shenghuo2</h2>
<p>10个智能设备</p>
</div>
</div>
<div class="header-actions">
<i class="fas fa-list"></i>
<i class="fas fa-plus"></i>
</div>
</div>
</div>
<!-- 功能卡片 -->
<div class="feature-cards">
<div class="feature-card">
<div class="feature-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-cube"></i>
</div>
<span>智能场景</span>
</div>
<div class="feature-card">
<div class="feature-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-chart-line"></i>
</div>
<span>米家众测</span>
</div>
<div class="feature-card">
<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>
<!-- 米家众测推广 -->
<div class="promotion-banner">
<div class="promotion-content">
<div class="promotion-text">
<h3>米家众测</h3>
<h4>小米室外摄像机 4C</h4>
<div class="promotion-tag">
<span>免费试</span>
<span class="tag-number">16台</span>
</div>
</div>
<div class="promotion-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%3Ccircle cx='60' cy='35' r='15' fill='%23333'/%3E%3Ccircle cx='60' cy='35' r='8' fill='%23666'/%3E%3Crect x='45' y='50' width='30' height='8' fill='%23999' rx='4'/%3E%3Ctext x='60' y='70' text-anchor='middle' font-size='8' fill='%23666'%3E摄像机%3C/text%3E%3C/svg%3E" alt="小米室外摄像机">
</div>
</div>
</div>
<!-- 功能菜单 -->
<div class="menu-section">
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-share-alt"></i>
</div>
<div class="menu-content">
<span class="menu-title">共享</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-layer-group"></i>
</div>
<div class="menu-content">
<span class="menu-title">设备耗材</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<i class="fas fa-microphone"></i>
</div>
<div class="menu-content">
<span class="menu-title">语音设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
<i class="fas fa-shopping-bag"></i>
</div>
<div class="menu-content">
<span class="menu-title">我的有品</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
<i class="fas fa-wifi"></i>
</div>
<div class="menu-content">
<span class="menu-title">家庭网络</span>
<span class="menu-status">良好</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item">
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
<i class="fas fa-broadcast-tower"></i>
</div>
<div class="menu-content">
<span class="menu-title">中枢与网关</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="menu-item" onclick="location.href='settings.html'">
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
<i class="fas fa-cog"></i>
</div>
<div class="menu-content">
<span class="menu-title">设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='home.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item active">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

332
scripts/main.js Normal file
View File

@ -0,0 +1,332 @@
// 页面切换功能
function showPage(pageId) {
// 隐藏所有页面
const pages = document.querySelectorAll('.container');
pages.forEach(page => {
page.classList.add('hidden');
});
// 显示目标页面
const targetPage = document.getElementById(pageId);
if (targetPage) {
targetPage.classList.remove('hidden');
}
// 更新底部导航状态
updateBottomNav(pageId);
}
// 更新底部导航状态
function updateBottomNav(activePageId) {
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.classList.remove('active');
});
// 根据页面ID设置对应的导航项为活跃状态
const pageNavMap = {
'home-page': 0,
'smart-page': 1,
'mall-page': 2,
'profile-page': 4
};
const activeIndex = pageNavMap[activePageId];
if (activeIndex !== undefined) {
const currentPageNavItems = document.querySelectorAll(`#${activePageId} .nav-item`);
if (currentPageNavItems[activeIndex]) {
currentPageNavItems[activeIndex].classList.add('active');
}
}
}
// 设备控制功能
function toggleDevice(deviceElement) {
deviceElement.classList.toggle('active');
// 模拟设备状态切换
const statusElement = deviceElement.querySelector('.device-status');
const deviceName = deviceElement.querySelector('.device-name').textContent;
if (deviceElement.classList.contains('active')) {
// 保持原有状态信息，只更新开启状态
const originalStatus = statusElement.textContent;
if (!originalStatus.includes('已开启')) {
statusElement.textContent = originalStatus.replace('设备离线', '已开启');
}
showToast(`${deviceName} 已开启`);
} else {
// 恢复为离线状态
const originalStatus = statusElement.textContent;
statusElement.textContent = originalStatus.replace('已开启', '设备离线');
showToast(`${deviceName} 已关闭`);
}
}
// 场景执行功能
function executeScene(sceneName) {
// 显示执行提示
showToast(`正在执行"${sceneName}"场景...`);
// 模拟场景执行
setTimeout(() => {
showToast(`"${sceneName}"场景执行完成`);
}, 2000);
}
// 显示提示信息
function showToast(message) {
// 创建提示元素
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
// 添加样式
toast.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 9999;
animation: fadeInOut 3s ease-in-out;
`;
// 添加动画样式
if (!document.querySelector('#toast-styles')) {
const style = document.createElement('style');
style.id = 'toast-styles';
style.textContent = `
@keyframes fadeInOut {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
`;
document.head.appendChild(style);
}
document.body.appendChild(toast);
// 3秒后移除提示
setTimeout(() => {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 3000);
}
// 房间切换功能
function switchRoom(roomName) {
// 更新房间标签状态
const roomTabs = document.querySelectorAll('.room-tab');
roomTabs.forEach(tab => {
tab.classList.remove('active');
if (tab.textContent === roomName) {
tab.classList.add('active');
}
});
// 模拟房间设备过滤 - 显示/隐藏相关设备
const deviceCards = document.querySelectorAll('.device-card');
deviceCards.forEach(card => {
const deviceStatus = card.querySelector('.device-status').textContent;
if (roomName === '全屋') {
// 显示所有设备
card.style.display = 'flex';
} else {
// 根据房间名称过滤设备
if (deviceStatus.includes(roomName)) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
}
});
showToast(`已切换到"${roomName}"`);
}
// 智能场景标签切换
function switchSmartTab(tabName) {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.classList.remove('active');
if (tab.textContent === tabName) {
tab.classList.add('active');
}
});
// 根据标签显示不同内容
if (tabName === '自定义') {
showCustomScenes();
} else {
showRecommendedScenes();
}
}
// 显示推荐场景
function showRecommendedScenes() {
// 这里可以动态加载推荐场景
console.log('显示推荐场景');
}
// 显示自定义场景
function showCustomScenes() {
const sceneSection = document.querySelector('.scene-section');
if (sceneSection) {
sceneSection.innerHTML = `
<div class="scene-item">
<div class="scene-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<i class="fas fa-plus"></i>
</div>
<div class="scene-info">
<div class="scene-name">添加自定义场景</div>
<div class="scene-desc">创建个性化的智能场景</div>
</div>
<button class="scene-button" onclick="showToast('功能开发中...')">创建</button>
</div>
<div class="scene-item">
<div class="scene-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<i class="fas fa-lightbulb"></i>
</div>
<div class="scene-info">
<div class="scene-name">批量控制</div>
<div class="scene-desc">空调关空调</div>
</div>
<button class="scene-button" onclick="executeScene('批量控制')">执行</button>
</div>
<div class="scene-item">
<div class="scene-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<i class="fas fa-bell"></i>
</div>
<div class="scene-info">
<div class="scene-name">自动化</div>
<div class="scene-desc">进入TP-LINK_9CC6-向手机发送通知</div>
</div>
<button class="scene-button" onclick="executeScene('自动化')">执行</button>
</div>
`;
}
}
// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
// 绑定设备卡片点击事件
const deviceCards = document.querySelectorAll('.device-card');
deviceCards.forEach(card => {
card.addEventListener('click', function() {
toggleDevice(this);
});
});
// 绑定场景按钮点击事件
const sceneButtons = document.querySelectorAll('.scene-button');
sceneButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.stopPropagation();
const sceneName = this.parentElement.querySelector('.scene-name').textContent;
executeScene(sceneName);
});
});
// 绑定房间标签点击事件
const roomTabs = document.querySelectorAll('.room-tab');
roomTabs.forEach(tab => {
tab.addEventListener('click', function() {
switchRoom(this.textContent);
});
});
// 绑定智能场景标签点击事件
const smartTabs = document.querySelectorAll('.tab');
smartTabs.forEach(tab => {
tab.addEventListener('click', function() {
switchSmartTab(this.textContent);
});
});
// 底部导航切换
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', () => {
const targetPage = item.dataset.page;
// 特殊处理商城页面，显示外部链接
if (targetPage === 'mall') {
showPage('mall-page-external');
} else {
showPage(targetPage);
}
// 更新导航状态
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');
});
});
// 绑定菜单项点击事件
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', function() {
const menuName = this.querySelector('span').textContent;
showToast(`打开"${menuName}"功能`);
});
});
// 模拟实时数据更新
setInterval(updateSensorData, 30000); // 每30秒更新一次传感器数据
});
// 更新传感器数据
function updateSensorData() {
const tempDisplays = document.querySelectorAll('.temp-display');
tempDisplays.forEach(display => {
const currentTemp = parseFloat(display.textContent);
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
display.textContent = newTemp + '°';
});
const humidityDisplays = document.querySelectorAll('.humidity-display');
humidityDisplays.forEach(display => {
const currentHumidity = parseInt(display.textContent);
const newHumidity = Math.max(30, Math.min(70, currentHumidity + Math.floor((Math.random() - 0.5) * 10)));
display.textContent = newHumidity + '%';
});
}
// 添加触摸反馈
function addTouchFeedback() {
const interactiveElements = document.querySelectorAll('.device-card, .scene-item, .menu-item, .nav-item');
interactiveElements.forEach(element => {
element.addEventListener('touchstart', function() {
this.style.transform = 'scale(0.95)';
this.style.transition = 'transform 0.1s';
});
element.addEventListener('touchend', function() {
this.style.transform = 'scale(1)';
});
element.addEventListener('touchcancel', function() {
this.style.transform = 'scale(1)';
});
});
}
// 在页面加载完成后添加触摸反馈
document.addEventListener('DOMContentLoaded', addTouchFeedback);
// 导出函数供HTML使用
window.showPage = showPage;
window.executeScene = executeScene;
window.toggleDevice = toggleDevice;
window.switchRoom = switchRoom;
window.switchSmartTab = switchSmartTab;

192
settings.html Normal file
View File

@ -0,0 +1,192 @@
<!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/main.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="settings-page">
<!-- 头部导航 -->
<div class="settings-header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="history.back()"></i>
<h1>设置</h1>
</div>
</div>
<!-- 设置内容 -->
<div class="settings-content">
<!-- 更新设置 -->
<div class="settings-section">
<div class="section-title">更新</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">检查更新</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 首页设置 -->
<div class="settings-section">
<div class="section-title">首页</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">快捷开关音效</span>
</div>
<div class="toggle-switch active">
<div class="toggle-slider"></div>
</div>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">快捷卡片</span>
<span class="item-subtitle">关</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">家庭房间管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 设备设置 -->
<div class="settings-section">
<div class="section-title">设备</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">紧急事件电话通知</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">自动发现设备</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">人脸识别管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">云存储管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 安全设置 -->
<div class="settings-section">
<div class="section-title">安全设置</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">消息设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">单位设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">人脸识别管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">云存储管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">安全设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">消息设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">单位设置</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 商城页面 -->
<div class="settings-section">
<div class="section-title">商城页面</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">商城页面</span>
<span class="item-subtitle">已开启</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 隐私与安全 -->
<div class="settings-section">
<div class="section-title">隐私与安全</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">地区</span>
<span class="item-subtitle">中国大陆</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">语言</span>
<span class="item-subtitle">简体</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 帮助 -->
<div class="settings-section">
<div class="section-title">帮助</div>
<div class="settings-item">
<div class="item-content">
<span class="item-title">系统权限管理</span>
</div>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
</div>
<script>
// 切换开关功能
document.addEventListener('DOMContentLoaded', function() {
const toggleSwitches = document.querySelectorAll('.toggle-switch');
toggleSwitches.forEach(toggle => {
toggle.addEventListener('click', function() {
this.classList.toggle('active');
});
});
});
</script>
</body>
</html>

296
smart.html Normal file
View File

@ -0,0 +1,296 @@
<!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/main.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="smart-page">
<!-- 顶部导航 -->
<header class="header">
<div class="header-left">
<span class="home-name">shenghuo2的家</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="header-right">
<i class="fas fa-bars"></i>
<i class="fas fa-plus-circle"></i>
</div>
</header>
<!-- 智能场景标签页 -->
<div class="smart-tabs">
<div class="smart-tab active" data-tab="recommended">推荐</div>
<div class="smart-tab" data-tab="custom">自定义</div>
</div>
<!-- 推荐场景内容 -->
<div class="smart-content" id="recommended-content">
<!-- 未开启提示 -->
<div class="empty-state">
<span class="empty-text">未开启</span>
</div>
<!-- 场景列表 -->
<div class="scene-list">
<!-- 离家场景 -->
<div class="scene-item">
<div class="scene-icon blue">
<i class="fas fa-door-open"></i>
</div>
<div class="scene-info">
<div class="scene-name">离家</div>
<div class="scene-desc">关灯，开安防，开始清扫</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('离家')">去开启</button>
</div>
<!-- 回家场景 -->
<div class="scene-item">
<div class="scene-icon yellow">
<i class="fas fa-home"></i>
</div>
<div class="scene-info">
<div class="scene-name">回家</div>
<div class="scene-desc">开灯，开空调，关闭窗帘</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('回家')">去开启</button>
</div>
<!-- 晚安场景 -->
<div class="scene-item">
<div class="scene-icon purple">
<i class="fas fa-moon"></i>
</div>
<div class="scene-info">
<div class="scene-name">晚安</div>
<div class="scene-desc">关灯，关电器，安心入睡</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('晚安')">去开启</button>
</div>
<!-- 起床场景 -->
<div class="scene-item">
<div class="scene-icon orange">
<i class="fas fa-sun"></i>
</div>
<div class="scene-info">
<div class="scene-name">起床</div>
<div class="scene-desc">开灯，开窗帘，活力晨醒</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('起床')">去开启</button>
</div>
<!-- 夜间勿扰场景 -->
<div class="scene-item">
<div class="scene-icon dark-purple">
<i class="fas fa-volume-mute"></i>
</div>
<div class="scene-info">
<div class="scene-name">夜间勿扰</div>
<div class="scene-desc">降低媒体音，关闭声光提醒</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('夜间勿扰')">去开启</button>
</div>
<!-- 运动场景 -->
<div class="scene-item">
<div class="scene-icon green">
<i class="fas fa-running"></i>
</div>
<div class="scene-info">
<div class="scene-name">运动</div>
<div class="scene-desc">开空调空净，舒爽运动</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('运动')">去开启</button>
</div>
<!-- 结束运动场景 -->
<div class="scene-item">
<div class="scene-icon blue-light">
<i class="fas fa-stop"></i>
</div>
<div class="scene-info">
<div class="scene-name">结束运动</div>
<div class="scene-desc">关空调空净，省心省力</div>
</div>
<button class="scene-execute-btn" onclick="executeScene('结束运动')">去开启</button>
</div>
</div>
</div>
<!-- 自定义场景内容 -->
<div class="smart-content hidden" id="custom-content">
<!-- 全部下拉选择 -->
<div class="filter-section">
<div class="filter-dropdown">
<span>全部</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<!-- 批量控制 -->
<div class="control-section">
<h3 class="section-title">批量控制</h3>
<div class="control-item">
<div class="control-icon purple">
<i class="fas fa-times"></i>
</div>
<div class="control-info">
<div class="control-name">空调关空调</div>
<div class="control-count">0</div>
</div>
<button class="control-btn" onclick="executeControl('空调关空调')">▶</button>
</div>
<div class="control-item">
<div class="control-icon purple">
<i class="fas fa-times"></i>
</div>
<div class="control-info">
<div class="control-name">空调开空调</div>
<div class="control-count">0</div>
</div>
<button class="control-btn" onclick="executeControl('空调开空调')">▶</button>
</div>
</div>
<!-- 自动化 -->
<div class="automation-section">
<h3 class="section-title">自动化</h3>
<div class="automation-item">
<div class="automation-left">
<div class="automation-icon">
<i class="fas fa-wifi"></i>
</div>
<div class="automation-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="automation-notification">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="automation-info">
<div class="automation-name">进入TP-LINK_9CC6-向手机发送通知</div>
<div class="automation-count">0</div>
</div>
<div class="automation-toggle">
<input type="checkbox" class="toggle-switch" checked>
</div>
</div>
<div class="automation-item">
<div class="automation-left">
<div class="automation-icon">
<i class="fas fa-thermometer-half"></i>
</div>
<div class="automation-arrow">
<i class="fas fa-minus"></i>
</div>
</div>
<div class="automation-info">
<div class="automation-name">兰川温度高于28°C-空调制冷/22°C...</div>
<div class="automation-count">0</div>
</div>
<div class="automation-toggle">
<input type="checkbox" class="toggle-switch" checked>
</div>
</div>
<div class="automation-item">
<div class="automation-left">
<div class="automation-icon gray">
<i class="fas fa-clock"></i>
</div>
</div>
<div class="automation-info">
<div class="automation-name">19:55-投影仪电源</div>
<div class="automation-count">0</div>
</div>
<div class="automation-toggle">
<input type="checkbox" class="toggle-switch">
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='index.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item active">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item" onclick="location.href='product.html'">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
<script>
// 智能页面标签切换
document.addEventListener('DOMContentLoaded', function() {
const smartTabs = document.querySelectorAll('.smart-tab');
const smartContents = document.querySelectorAll('.smart-content');
smartTabs.forEach(tab => {
tab.addEventListener('click', function() {
const targetTab = this.dataset.tab;
// 更新标签状态
smartTabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
// 切换内容
smartContents.forEach(content => {
content.classList.add('hidden');
});
const targetContent = document.getElementById(targetTab + '-content');
if (targetContent) {
targetContent.classList.remove('hidden');
}
});
});
// 自动化开关切换
const toggleSwitches = document.querySelectorAll('.toggle-switch');
toggleSwitches.forEach(toggle => {
toggle.addEventListener('change', function() {
const automationItem = this.closest('.automation-item');
const automationName = automationItem.querySelector('.automation-name').textContent;
if (this.checked) {
showToast(`${automationName} 已启用`);
} else {
showToast(`${automationName} 已禁用`);
}
});
});
});
// 执行控制功能
function executeControl(controlName) {
showToast(`正在执行 ${controlName}...`);
}
</script>
</body>
</html>

1623
styles/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

461
styles/mall.css Normal file
View File

@ -0,0 +1,461 @@
/* 商城页面专用样式 */
/* 顶部促销横幅 */
.promo-banner {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
border-radius: 0 0 20px 20px;
margin-bottom: 15px;
}
.promo-content {
display: flex;
align-items: center;
gap: 10px;
}
.promo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.promo-icon {
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.notification-badge {
background-color: #ff4444;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
/* 搜索框样式 */
.search-section {
padding: 0 20px 20px;
}
.search-box {
background-color: #f5f5f5;
border-radius: 25px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.search-box i {
color: #999;
font-size: 16px;
}
.search-box input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 14px;
color: #333;
}
.search-box input::placeholder {
color: #999;
}
/* 主要产品展示区域 */
.main-product-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
margin: 0 20px 20px;
border-radius: 16px;
padding: 25px;
color: white;
position: relative;
overflow: hidden;
}
.featured-product {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.product-content {
flex: 1;
}
.product-title {
font-size: 28px;
font-weight: 700;
margin: 0 0 8px 0;
color: white;
}
.product-subtitle {
font-size: 14px;
color: #ccc;
margin: 0 0 8px 0;
}
.product-description {
font-size: 14px;
color: #aaa;
margin: 0 0 20px 0;
}
.cta-button {
background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.cta-button:hover {
transform: translateY(-2px);
}
.product-images {
display: flex;
gap: 15px;
align-items: center;
}
.phone-mockup {
width: 60px;
height: 120px;
border-radius: 12px;
position: relative;
}
.phone-1 {
background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
transform: rotate(-5deg);
}
.phone-2 {
background: linear-gradient(135deg, #6a8a6a 0%, #4a6a4a 100%);
transform: rotate(5deg);
}
/* 产品卡片组 */
.product-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.product-card {
background: rgba(255,255,255,0.1);
border-radius: 12px;
padding: 15px;
text-align: center;
backdrop-filter: blur(10px);
}
.card-image {
width: 50px;
height: 50px;
margin: 0 auto 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.kpad-image {
background: linear-gradient(135deg, #a8d8ff 0%, #7bb3ff 100%);
}
.mix-flip-image {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}
.smart-device-image {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.card-content h3 {
font-size: 12px;
font-weight: 600;
margin: 0 0 5px 0;
color: white;
}
.card-content p {
font-size: 10px;
color: #ccc;
margin: 0;
}
/* 分类导航网格 */
.category-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
padding: 20px;
margin-bottom: 10px;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: transform 0.2s;
}
.category-item:hover {
transform: translateY(-2px);
}
.category-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
font-size: 20px;
color: white;
}
.phone-icon {
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
}
.tv-icon {
background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
}
.grid-icon {
background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}
.percent-icon {
background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}
.smart-icon {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.clock-icon {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.home-icon {
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}
.filter-icon {
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}
.xiaomi-icon {
background: linear-gradient(135deg, #ff6900 0%, #e55100 100%);
font-weight: bold;
font-size: 16px;
}
.shirt-icon {
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}
.category-item span {
font-size: 12px;
color: #333;
font-weight: 500;
}
/* 促销活动区域 */
.promotion-section {
padding: 0 20px 20px;
}
.promo-card.large {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
border-radius: 16px;
padding: 25px;
margin-bottom: 15px;
color: white;
position: relative;
overflow: hidden;
}
.promo-header {
margin-bottom: 15px;
}
.promo-badge {
background-color: rgba(255,255,255,0.2);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
.promo-card h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px 0;
}
.promo-card p {
font-size: 14px;
margin: 0 0 20px 0;
opacity: 0.9;
}
.promo-btn {
background-color: rgba(0,0,0,0.2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.tech-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
}
/* 促销卡片网格 */
.promo-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.promo-card.small {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.speaker-visual,
.card-visual {
width: 50px;
height: 50px;
margin: 0 auto 15px;
border-radius: 8px;
background: linear-gradient(135deg, #333 0%, #666 100%);
}
.promo-card.small h4 {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px 0;
color: #333;
}
.promo-card.small p {
font-size: 12px;
color: #666;
margin: 0;
}
/* 底部促销网格 */
.bottom-promo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.promo-item {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.item-visual {
width: 40px;
height: 40px;
margin: 0 auto 12px;
border-radius: 6px;
}
.appliance-visual {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.quality-visual {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.shopping-visual {
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}
.lifestyle-visual {
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}
.promo-item h5 {
font-size: 14px;
font-weight: 600;
margin: 0 0 6px 0;
color: #333;
}
.promo-item p {
font-size: 12px;
color: #666;
margin: 0;
}
/* 响应式设计 */
@media (max-width: 480px) {
.category-grid {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
padding: 15px;
}
.product-cards {
grid-template-columns: 1fr 1fr;
}
.bottom-promo-grid {
grid-template-columns: 1fr;
}
}