init: add initial project files for Mi Home smart home interface clone
This commit is contained in:
shenghuo2
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal 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
8
.idea/modules.xml
generated
Normal 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
12
.idea/project-fin-takeaway.iml
generated
Normal 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
6
.idea/vcs.xml
generated
Normal 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
1
.wakatime-project
Normal file
@ -0,0 +1 @@
|
|||||||
|
term-final-proj
|
||||||
162
README.md
Normal file
162
README.md
Normal 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
169
home.html
Normal 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
178
index.html
Normal 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
222
mall.html
Normal 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
116
product.html
Normal 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
177
profile.html
Normal 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
332
scripts/main.js
Normal 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
192
settings.html
Normal 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
296
smart.html
Normal 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
1623
styles/main.css
Normal file
File diff suppressed because it is too large
Load Diff
461
styles/mall.css
Normal file
461
styles/mall.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user