Compare commits
5 Commits
f72cc369ac
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 5b6ad327eb | |||
| efbb542d83 | |||
| 35145dbf76 | |||
| ef5eda8cf4 | |||
| f8452b319c |
3
.gitignore
vendored
3
.gitignore
vendored
@ -1 +1,2 @@
|
||||
images/profile/*
|
||||
images/profile/*
|
||||
.trae/rules/project_rules.md
|
||||
|
||||
402
README.md
402
README.md
@ -2,126 +2,135 @@
|
||||
|
||||
**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
|
||||
|
||||
这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。
|
||||
基于纯HTML、CSS和JavaScript开发的米家App界面仿制项目，采用模块化设计和响应式布局。
|
||||
|
||||
## 项目特色
|
||||
## 🏗️ 项目架构
|
||||
|
||||
### 🎨 界面设计
|
||||
- 完全仿制米家app的UI设计风格
|
||||
- 响应式布局，适配移动端设备
|
||||
- 现代化的渐变色彩和圆角设计
|
||||
- 流畅的动画效果和交互反馈
|
||||
|
||||
### 📱 功能模块
|
||||
|
||||
#### 1. 米家首页 (home.html) - 设备控制中心
|
||||
- 房间切换导航（全屋、出租屋、十五中、客厅、卧室）
|
||||
- 空气质量显示和环境监测
|
||||
- 智能设备网格展示
|
||||
- 设备状态控制（开关、离线状态）
|
||||
- 温湿度传感器实时数据
|
||||
- 蓝牙连接状态指示
|
||||
- 设备分类管理
|
||||
|
||||
#### 2. 智能场景页面 (scene.html)
|
||||
- 四个导航标签：智能推荐、语音通知、智能清洁、智能控制
|
||||
- 主场景卡片："欢迎回家"场景展示
|
||||
- 设备项目展示：空气净化器、小爱音箱等
|
||||
- 推荐场景卡片：
|
||||
- 洗衣监测：洗衣机状态监控
|
||||
- 一键起灯：智能照明控制
|
||||
- 轻松家务：家务自动化
|
||||
- 护眼开灯：护眼模式照明
|
||||
- 产品网格展示和推荐
|
||||
- 响应式设计和动画效果
|
||||
|
||||
#### 3. 米家众测页面 (mijiazhongce.html)
|
||||
- 众测产品展示（6个产品卡片）
|
||||
- 产品信息：期数、状态、市场价格、名额
|
||||
- 申请者头像和申请人数显示
|
||||
- 产品状态标识：新品试用、已结束、0元抽奖
|
||||
- 特殊标记：我的众测、免费试用等
|
||||
- 卡片式布局和交互动画
|
||||
|
||||
#### 4. 个人资料页面 (user-profile.html)
|
||||
- 大头像展示和编辑功能
|
||||
- 基础资料管理：头像、账号、姓名
|
||||
- 账号绑定：微信账号绑定状态
|
||||
- 密保资料：手机号、账号安全
|
||||
- 注销登录功能
|
||||
- 开关按钮交互效果
|
||||
|
||||
#### 5. 个人中心 (profile.html)
|
||||
- 用户信息展示（可点击跳转到详细资料页面）
|
||||
- 功能快捷入口：智能场景、米家众测、产品百科、全屋智能
|
||||
- 小米室外摄像机4C众测推广
|
||||
- 设置菜单：共享、设备耗材、语音设置、我的有品、家庭网络、中枢与网关、设置
|
||||
|
||||
#### 6. 商城页面 (mall.html)
|
||||
- 直接嵌入小米官方商城页面
|
||||
- 完整的购物体验
|
||||
|
||||
#### 7. 通知中心页面 (notifications.html)
|
||||
- 家庭成员选择器和消息分类
|
||||
- 消息状态管理：未读消息计数、全部标记已读
|
||||
- 消息列表展示：场景、设备、安全、系统消息
|
||||
- 消息类型图标和时间显示
|
||||
- 空状态页面和动画效果
|
||||
- 橙色主题配色方案
|
||||
|
||||
#### 8. 环境设置页面 (environment-settings.html)
|
||||
- 家庭环境信息设置和管理
|
||||
- 分区域环境监测：客厅、卧室、厨房、空气质量、空调
|
||||
- 设备状态显示和控制
|
||||
- 温度、湿度、空气质量数据展示
|
||||
- 响应式布局和渐变背景设计
|
||||
|
||||
#### 9. 其他功能页面
|
||||
- **智能页面** (smart.html)：智能设备管理
|
||||
- **产品页面** (product.html)：产品展示和介绍
|
||||
- **设置页面** (settings.html)：应用设置和配置
|
||||
- **全部产品页面** (all-products.html)：完整产品目录
|
||||
- **日志页面** (log.html)：系统日志和历史记录
|
||||
|
||||
### 🛠 技术特点
|
||||
|
||||
#### 前端技术栈
|
||||
### 核心技术栈
|
||||
- **HTML5**: 语义化标签，良好的页面结构
|
||||
- **CSS3**:
|
||||
- Flexbox和Grid布局
|
||||
- CSS变量和渐变
|
||||
- 动画和过渡效果
|
||||
- 响应式设计
|
||||
- **JavaScript ES6+**:
|
||||
- 模块化代码组织
|
||||
- 事件驱动编程
|
||||
- DOM操作和状态管理
|
||||
- 定时器和异步处理
|
||||
- **CSS3**: Flexbox/Grid布局，CSS变量，动画过渡
|
||||
- **JavaScript ES6+**: 模块化代码，事件驱动，DOM操作
|
||||
|
||||
#### 设计模式
|
||||
- 组件化思维
|
||||
- 状态管理
|
||||
- 事件委托
|
||||
- 响应式设计原则
|
||||
### 📱 页面模块
|
||||
|
||||
#### 核心模块 (底部导航栏)
|
||||
- **index.html** - 米家首页：设备控制中心，房间切换，环境监测
|
||||
- **smart.html** - 智能页面：设备管理，日志查看
|
||||
- **product.html** - 产品页面：产品展示，分类浏览
|
||||
- **mall.html** - 商城页面：嵌入小米官方商城
|
||||
- **profile.html** - 个人中心：用户信息，功能入口
|
||||
|
||||
#### 功能子页面
|
||||
- **notifications.html** - 通知中心：消息管理，状态更新
|
||||
- **environment-settings.html** - 环境设置：分区域监测，数据展示
|
||||
- **profile/user-profile.html** - 个人资料：用户信息编辑
|
||||
- **log.html** - 设备日志：开关记录，历史数据
|
||||
- **profile/settings.html** - 设置页面：应用配置
|
||||
- **all-products.html** - 全部产品：产品目录
|
||||
- **profile/scene.html** - 智能场景：场景管理，自动化控制
|
||||
- **profile/mijiazhongce.html** - 米家众测：产品试用申请
|
||||
- **profile/product-encyclopedia.html** - 产品百科：产品知识
|
||||
- **profile/whole-house-smart.html** - 全屋智能：智能解决方案
|
||||
- **profile/voice-settings.html** - 语音设置：小爱设置，语音控制管理
|
||||
- **profile/my-youpin.html** - 我的有品：订单管理，购物功能
|
||||
- **profile/hub-gateway.html** - 中枢与网关：网关设备管理
|
||||
- **profile/device-consumables.html** - 设备耗材：耗材管理，购买提醒
|
||||
- **profile/share.html** - 分享页面：设备分享，权限管理
|
||||
- **profile/home-network.html** - 家庭网络：网络设置，连接管理
|
||||
|
||||
## 💻 核心代码解释
|
||||
|
||||
### JavaScript 主要功能 (scripts/main.js)
|
||||
|
||||
#### 1. 页面切换系统
|
||||
```javascript
|
||||
function showPage(pageId) {
|
||||
// 隐藏所有页面，显示目标页面
|
||||
const pages = document.querySelectorAll('.container');
|
||||
pages.forEach(page => page.classList.add('hidden'));
|
||||
document.getElementById(pageId)?.classList.remove('hidden');
|
||||
updateBottomNav(pageId);
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. 设备控制逻辑
|
||||
```javascript
|
||||
function toggleDevice(deviceElement) {
|
||||
deviceElement.classList.toggle('active');
|
||||
// 模拟设备状态切换，更新UI显示
|
||||
const statusElement = deviceElement.querySelector('.device-status');
|
||||
// 状态更新逻辑...
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 实时数据更新
|
||||
```javascript
|
||||
// 每30秒更新传感器数据
|
||||
setInterval(updateSensorData, 30000);
|
||||
function updateSensorData() {
|
||||
// 模拟温湿度数据变化
|
||||
const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1);
|
||||
}
|
||||
```
|
||||
|
||||
### CSS 样式架构 (styles/)
|
||||
|
||||
#### 1. 全局样式 (common.css)
|
||||
```css
|
||||
/* 移动端优先的响应式设计 */
|
||||
.container {
|
||||
max-width: 414px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. 组件化样式
|
||||
- **设备卡片**: 统一的卡片样式，支持状态切换
|
||||
- **底部导航**: 固定定位，支持页面切换
|
||||
- **渐变背景**: CSS变量实现主题色彩
|
||||
|
||||
### HTML 结构设计
|
||||
|
||||
#### 1. 语义化标签
|
||||
- 使用 `<main>`, `<section>`, `<article>` 等语义化标签
|
||||
- 良好的可访问性支持
|
||||
|
||||
#### 2. 模块化组件
|
||||
- 设备卡片组件复用
|
||||
- 导航组件统一管理
|
||||
- 页面容器标准化
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
project-fin-takeaway/
|
||||
├── index.html # 项目入口页面
|
||||
├── home.html # 米家首页 - 设备控制中心
|
||||
├── index.html # 米家首页 - 设备控制中心
|
||||
|
||||
├── smart.html # 智能页面
|
||||
├── product.html # 产品页面
|
||||
├── mall.html # 商城页面
|
||||
├── profile.html # 个人中心页面
|
||||
├── scene.html # 智能场景页面
|
||||
├── mijiazhongce.html # 米家众测页面
|
||||
├── user-profile.html # 个人资料详情页面
|
||||
|
||||
├── profile/
|
||||
│ ├── user-profile.html # 个人资料详情页面
|
||||
│ ├── settings.html # 设置页面
|
||||
│ ├── home-network.html # 家庭网络页面
|
||||
│ ├── voice-settings.html # 语音设置页面
|
||||
│ ├── my-youpin.html # 我的有品页面
|
||||
│ ├── hub-gateway.html # 中枢与网关页面
|
||||
│ ├── device-consumables.html # 设备耗材页面
|
||||
│ ├── scene.html # 智能场景页面
|
||||
│ ├── mijiazhongce.html # 米家众测页面
|
||||
│ ├── product-encyclopedia.html # 产品百科页面
|
||||
│ ├── whole-house-smart.html # 全屋智能页面
|
||||
│ └── share.html # 分享页面
|
||||
├── notifications.html # 通知中心页面
|
||||
├── environment-settings.html # 环境设置页面
|
||||
├── settings.html # 设置页面
|
||||
|
||||
├── all-products.html # 全部产品页面
|
||||
├── log.html # 日志页面
|
||||
├── log.html # 设备开关日志页面
|
||||
├── styles/ # 样式文件目录
|
||||
│ ├── common.css # 公共样式
|
||||
│ ├── main.css # 主样式文件
|
||||
@ -137,6 +146,8 @@ project-fin-takeaway/
|
||||
│ ├── environment-settings.css # 环境设置样式
|
||||
│ ├── settings.css # 设置页面样式
|
||||
│ ├── all-products.css # 全部产品样式
|
||||
│ ├── product-encyclopedia.css # 产品百科样式
|
||||
│ ├── whole-house-smart.css # 全屋智能样式
|
||||
│ └── log.css # 日志页面样式
|
||||
├── scripts/ # JavaScript文件目录
|
||||
│ └── main.js # 主JavaScript文件
|
||||
@ -148,147 +159,72 @@ project-fin-takeaway/
|
||||
└── README.md # 项目说明文档
|
||||
```
|
||||
|
||||
## 功能演示
|
||||
## 🚀 快速启动
|
||||
|
||||
### 设备控制
|
||||
- 点击设备卡片可以切换设备状态
|
||||
- 智能插座支持电源开关控制
|
||||
- 传感器数据每30秒自动更新
|
||||
- 设备离线状态显示
|
||||
- 房间切换和设备分类管理
|
||||
```bash
|
||||
# 使用Python启动本地服务器
|
||||
python3 -m http.server 8000
|
||||
|
||||
### 智能场景
|
||||
- 四个导航标签切换：智能推荐、语音通知、智能清洁、智能控制
|
||||
- 主场景卡片展示和设备项目管理
|
||||
- 推荐场景卡片交互和产品网格展示
|
||||
- 响应式布局和动画效果
|
||||
# 使用Node.js http-server
|
||||
npx http-server
|
||||
|
||||
### 米家众测
|
||||
- 众测产品卡片展示和状态标识
|
||||
- 申请者信息和申请人数显示
|
||||
- 产品详情查看和申请功能
|
||||
- 特殊标记和状态区分
|
||||
# 或直接在浏览器中打开 index.html
|
||||
```
|
||||
|
||||
### 个人资料管理
|
||||
- 用户头像点击跳转到详细资料页面
|
||||
- 大头像展示和编辑功能
|
||||
- 基础资料、账号绑定、密保资料管理
|
||||
- 开关按钮交互和注销登录
|
||||
## 🗺️ 页面关系图
|
||||
|
||||
### 页面导航
|
||||
- 底部导航栏支持页面切换
|
||||
- 平滑的页面过渡效果
|
||||
- 导航状态同步更新
|
||||
- 多级页面跳转和返回功能
|
||||
```
|
||||
智能家居项目
|
||||
├── 🏠 核心模块 (底部导航)
|
||||
│ ├── index.html ──── 米家首页
|
||||
│ │ ├── → notifications.html
|
||||
│ │ └── → environment-settings.html
|
||||
│ ├── smart.html ──── 智能页面
|
||||
│ │ └── → log.html
|
||||
│ ├── product.html ── 产品页面
|
||||
│ │ └── → all-products.html
|
||||
│ ├── mall.html ───── 商城页面
|
||||
│ └── profile.html ── 个人中心
|
||||
│ ├── → profile/user-profile.html
|
||||
├── → profile/scene.html
|
||||
├── → profile/mijiazhongce.html
|
||||
├── → profile/product-encyclopedia.html
|
||||
├── → profile/whole-house-smart.html
|
||||
├── → profile/voice-settings.html
|
||||
├── → profile/my-youpin.html
|
||||
├── → profile/hub-gateway.html
|
||||
├── → profile/device-consumables.html
|
||||
├── → profile/share.html
|
||||
├── → profile/settings.html
|
||||
└── → profile/home-network.html
|
||||
└── 📁 资源文件
|
||||
├── styles/ ──── CSS样式
|
||||
├── scripts/ ─── JavaScript
|
||||
└── images/ ──── 图片资源
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
### 导航逻辑
|
||||
- **底部导航**: 5个主模块间切换
|
||||
- **页面跳转**: 通过点击事件触发 `showPage()` 函数
|
||||
- **状态管理**: `updateBottomNav()` 同步导航状态
|
||||
|
||||
### 快速启动
|
||||
## 🎯 项目特点
|
||||
|
||||
1. **直接打开**: 在浏览器中打开 `index.html` 文件
|
||||
2. **本地服务器**: 使用任意HTTP服务器托管项目文件
|
||||
```bash
|
||||
# 使用Python启动本地服务器
|
||||
python3 -m http.server 8000
|
||||
|
||||
# 使用Node.js http-server
|
||||
npx http-server
|
||||
|
||||
# 使用Live Server (VS Code扩展)
|
||||
# 右键点击index.html -> Open with Live Server
|
||||
```
|
||||
- **高度还原**: 像素级仿制米家App界面
|
||||
- **响应式设计**: 移动端优先，适配多屏幕
|
||||
- **模块化架构**: 组件复用，易于维护
|
||||
- **实时交互**: 设备状态切换，数据动态更新
|
||||
- **触摸优化**: 移动端触摸反馈和动画效果
|
||||
|
||||
### 页面导航
|
||||
## 📝 开发说明
|
||||
|
||||
- **入口页面**: `index.html` - 项目主入口
|
||||
- **米家首页**: `home.html` - 设备控制中心
|
||||
- **智能场景**: `scene.html` - 智能场景管理
|
||||
- **米家众测**: `mijiazhongce.html` - 众测产品展示
|
||||
- **个人中心**: `profile.html` - 用户信息和设置
|
||||
- **个人资料**: `user-profile.html` - 详细个人资料管理
|
||||
- **通知中心**: `notifications.html` - 消息通知和管理
|
||||
- **环境设置**: `environment-settings.html` - 家庭环境信息设置
|
||||
- **商城页面**: `mall.html` - 购物和产品浏览
|
||||
|
||||
### 功能体验
|
||||
|
||||
1. **设备控制**: 在首页点击设备卡片体验开关控制
|
||||
2. **环境监测**: 点击首页空气质量模块跳转到环境设置页面
|
||||
3. **消息通知**: 点击首页右上角消息图标查看通知中心
|
||||
4. **场景管理**: 访问智能场景页面体验场景切换和推荐
|
||||
5. **众测参与**: 查看米家众测页面的产品信息和申请状态
|
||||
6. **个人资料**: 点击个人中心的头像或用户名进入详细资料页面
|
||||
7. **页面跳转**: 使用底部导航栏在不同功能模块间切换
|
||||
|
||||
### 浏览器兼容性
|
||||
|
||||
- Chrome 60+
|
||||
- Firefox 55+
|
||||
- Safari 12+
|
||||
- Edge 79+
|
||||
|
||||
### 移动端体验
|
||||
|
||||
项目采用响应式设计，建议在移动设备或浏览器开发者工具的移动设备模拟模式下体验，以获得最佳的米家App仿制效果。
|
||||
|
||||
## 项目亮点
|
||||
|
||||
### 1. 高度还原
|
||||
- 像素级还原米家app界面
|
||||
- 保持原有的交互逻辑
|
||||
- 符合用户使用习惯
|
||||
|
||||
### 2. 交互体验
|
||||
- 触摸反馈效果
|
||||
- 流畅的动画过渡
|
||||
- 实时状态更新
|
||||
- 友好的提示信息
|
||||
|
||||
### 3. 代码质量
|
||||
- 清晰的代码结构
|
||||
- 良好的注释说明
|
||||
- 模块化设计
|
||||
- 易于维护和扩展
|
||||
|
||||
### 4. 响应式设计
|
||||
- 适配不同屏幕尺寸
|
||||
- 移动端优先设计
|
||||
- 灵活的布局系统
|
||||
|
||||
### 5. 最新优化
|
||||
- 统一的橙色主题配色方案
|
||||
- 修复了设备卡片文字与按钮重叠问题
|
||||
- 优化了空气质量显示格式
|
||||
- 增强了页面间的导航体验
|
||||
- 完善了消息通知系统
|
||||
|
||||
## 扩展功能
|
||||
|
||||
项目预留了扩展接口，可以轻松添加以下功能：
|
||||
|
||||
- 🔐 用户登录和权限管理
|
||||
- 📊 设备数据统计和图表
|
||||
- 🔔 消息推送和通知
|
||||
- 🎵 语音控制集成
|
||||
- 🌐 云端数据同步
|
||||
- 📱 PWA支持
|
||||
|
||||
## 开发说明
|
||||
|
||||
这是一个纯前端项目，所有的数据都是模拟数据，主要用于展示界面效果和交互逻辑。在实际应用中，需要：
|
||||
|
||||
1. 集成真实的设备API
|
||||
2. 添加用户认证系统
|
||||
3. 实现数据持久化
|
||||
4. 添加错误处理机制
|
||||
5. 优化性能和安全性
|
||||
|
||||
## 致谢
|
||||
|
||||
感谢小米公司提供的优秀设计参考，本项目仅用于学习和课程设计目的。
|
||||
- 纯前端项目，使用模拟数据展示
|
||||
- 采用事件驱动的交互模式
|
||||
- 支持Chrome 60+, Firefox 55+, Safari 12+
|
||||
- 建议在移动设备模拟模式下体验
|
||||
|
||||
---
|
||||
|
||||
**注意**: 本项目仅供学习交流使用，不得用于商业用途。
|
||||
|
||||
**本项目仅为枣庄学院移动应用开发技术实训的课程设计作业**
|
||||
**枣庄学院移动应用开发技术实训 - 课程设计作业**
|
||||
170
home.html
170
home.html
@ -1,170 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>米家 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="styles/home.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>
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='home.html'">
|
||||
<div class="nav-item" onclick="location.href='index.html'">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
|
||||
32
profile.html
32
profile.html
@ -13,7 +13,7 @@
|
||||
<!-- 头部用户信息 -->
|
||||
<div class="profile-header">
|
||||
<div class="header-top">
|
||||
<div class="user-info" onclick="location.href='user-profile.html'" style="cursor: pointer;">
|
||||
<div class="user-info" onclick="location.href='profile/user-profile.html'" style="cursor: pointer;">
|
||||
<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>
|
||||
@ -31,25 +31,25 @@
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<div class="feature-cards">
|
||||
<div class="feature-card" onclick="location.href='scene.html'">
|
||||
<div class="feature-card" onclick="location.href='profile/scene.html'">
|
||||
<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" onclick="window.location.href='mijiazhongce.html'">
|
||||
<div class="feature-card" onclick="window.location.href='profile/mijiazhongce.html'">
|
||||
<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" onclick="location.href='product-encyclopedia.html'">
|
||||
<div class="feature-card" onclick="location.href='profile/product-encyclopedia.html'">
|
||||
<div class="feature-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
|
||||
<i class="fas fa-book"></i>
|
||||
</div>
|
||||
<span>产品百科</span>
|
||||
</div>
|
||||
<div class="feature-card" onclick="window.location.href='whole-house-smart.html'">
|
||||
<div class="feature-card" onclick="window.location.href='profile/whole-house-smart.html'">
|
||||
<div class="feature-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="menu-section">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="window.location.href='profile/share.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="window.location.href='profile/device-consumables.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
</div>
|
||||
@ -96,7 +96,7 @@
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="window.location.href='profile/voice-settings.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
|
||||
<i class="fas fa-microphone"></i>
|
||||
</div>
|
||||
@ -106,7 +106,7 @@
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="window.location.href='profile/my-youpin.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
|
||||
<i class="fas fa-shopping-bag"></i>
|
||||
</div>
|
||||
@ -116,18 +116,20 @@
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="location.href='profile/home-network.html'">
|
||||
<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 class="menu-right">
|
||||
<span class="menu-status">良好</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item" onclick="window.location.href='profile/hub-gateway.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
|
||||
<i class="fas fa-broadcast-tower"></i>
|
||||
</div>
|
||||
@ -137,7 +139,7 @@
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" onclick="location.href='settings.html'">
|
||||
<div class="menu-item" onclick="location.href='profile/settings.html'">
|
||||
<div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
@ -150,7 +152,7 @@
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='home.html'">
|
||||
<div class="nav-item" onclick="location.href='index.html'">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
|
||||
175
profile/device-consumables.html
Normal file
175
profile/device-consumables.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备耗材 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/device-consumables.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="device-consumables-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">设备耗材</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 家庭选择器 -->
|
||||
<div class="family-selector">
|
||||
<div class="family-dropdown">
|
||||
<span class="family-name">我的家庭</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 耗材未知部分 -->
|
||||
<div class="consumables-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">耗材未知 (1个)</span>
|
||||
</div>
|
||||
|
||||
<div class="device-item unknown">
|
||||
<div class="device-icon">
|
||||
<div class="temp-humidity-icon">
|
||||
<span class="temp-value">25.8</span>
|
||||
<span class="humidity-value">%RH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>温湿度计</h3>
|
||||
<p class="device-status">宿舍 | 未连接蓝牙网关</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item unknown">
|
||||
<div class="device-icon battery">
|
||||
<div class="battery-icon">
|
||||
<div class="battery-body">
|
||||
<div class="battery-level low"></div>
|
||||
</div>
|
||||
<div class="battery-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>电池</h3>
|
||||
<p class="device-status warning">状态未知</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 耗材充足部分 -->
|
||||
<div class="consumables-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">耗材充足 (3个)</span>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="air-purifier-icon">
|
||||
<div class="purifier-body">
|
||||
<div class="purifier-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>米家空气净化器 4 Lite</h3>
|
||||
<p class="device-status">出租屋</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="filter-icon">
|
||||
<div class="filter-progress">
|
||||
<svg class="progress-ring" width="40" height="40">
|
||||
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="10.053"/>
|
||||
</svg>
|
||||
<span class="progress-text">90%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>滤芯</h3>
|
||||
<p class="device-status"></p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<button class="buy-btn">购买</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="temp-humidity-icon bathroom">
|
||||
<span class="temp-value">26.5</span>
|
||||
<span class="humidity-value">%RH</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>目博士温湿度计-卫生间</h3>
|
||||
<p class="device-status">十五中 | 设备离线</p>
|
||||
<p class="device-update">更新于：2025/01/25 16:02</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item sufficient">
|
||||
<div class="device-icon">
|
||||
<div class="filter-icon">
|
||||
<div class="filter-progress">
|
||||
<svg class="progress-ring" width="40" height="40">
|
||||
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="7.037"/>
|
||||
</svg>
|
||||
<span class="progress-text">93%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3>纽扣电池</h3>
|
||||
<p class="device-status"></p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 设备耗材页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 家庭选择器点击事件
|
||||
const familySelector = document.querySelector('.family-dropdown');
|
||||
familySelector.addEventListener('click', function() {
|
||||
alert('家庭选择功能开发中...');
|
||||
});
|
||||
|
||||
// 购买按钮点击事件
|
||||
const buyBtns = document.querySelectorAll('.buy-btn');
|
||||
buyBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
alert('跳转到购买页面...');
|
||||
});
|
||||
});
|
||||
|
||||
// 设备项点击事件
|
||||
const deviceItems = document.querySelectorAll('.device-item');
|
||||
deviceItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const deviceName = this.querySelector('h3').textContent;
|
||||
console.log(`点击了设备: ${deviceName}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
profile/home-network.html
Normal file
114
profile/home-network.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>家庭网络 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/home-network.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-network-page">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<i class="fas fa-arrow-left" onclick="history.back()"></i>
|
||||
<h1>家庭网络</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网络状态卡片 -->
|
||||
<div class="network-status-card">
|
||||
<div class="status-header">
|
||||
<h2>我的家庭</h2>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
|
||||
<div class="network-quality">
|
||||
<div class="quality-indicator">
|
||||
<div class="quality-bars">
|
||||
<div class="bar active"></div>
|
||||
<div class="bar active"></div>
|
||||
<div class="bar active"></div>
|
||||
</div>
|
||||
<span class="quality-text">良好</span>
|
||||
</div>
|
||||
<div class="quality-status">
|
||||
<span class="status-label">一般</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wi-Fi 设备 -->
|
||||
<div class="device-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<i class="fas fa-wifi"></i>
|
||||
<span>Wi-Fi 设备</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="device-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">0</span>
|
||||
<span class="stat-label">信号弱</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">0</span>
|
||||
<span class="stat-label">近30天离线</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1</span>
|
||||
<span class="stat-label">长期离线</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝牙设备 -->
|
||||
<div class="device-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<i class="fab fa-bluetooth-b"></i>
|
||||
<span>蓝牙设备</span>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
|
||||
<div class="device-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">0</span>
|
||||
<span class="stat-label">信号弱</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">0</span>
|
||||
<span class="stat-label">近30天离线</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">3</span>
|
||||
<span class="stat-label">长期离线</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地控制 -->
|
||||
<div class="local-control-section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<span>本地控制</span>
|
||||
</div>
|
||||
<div class="control-status">
|
||||
<span class="status-text">未支持</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-description">
|
||||
<p>断网或网络异常时，仍然可以支持本地自动化，使用来家控制设备</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
115
profile/hub-gateway.html
Normal file
115
profile/hub-gateway.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>中枢与网关 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/hub-gateway.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="hub-gateway-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">中枢与网关</h1>
|
||||
<button class="info-btn">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 家庭选择器 -->
|
||||
<div class="family-selector">
|
||||
<div class="family-info">
|
||||
<span class="family-name">shenghuo2的家</span>
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 网关设备列表 -->
|
||||
<div class="gateway-section">
|
||||
<div class="section-title">网关</div>
|
||||
|
||||
<div class="gateway-list">
|
||||
<!-- 米家智能插座2 蓝牙网关版 -->
|
||||
<div class="gateway-item" onclick="navigateToDevice('smart-plug')">
|
||||
<div class="device-icon">
|
||||
<div class="icon-container plug-icon">
|
||||
<i class="fas fa-plug"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3 class="device-name">米家智能插座2 蓝牙网关版</h3>
|
||||
<p class="device-status">出租屋 | 0个设备</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Xiaomi 智能音箱 Pro -->
|
||||
<div class="gateway-item" onclick="navigateToDevice('smart-speaker')">
|
||||
<div class="device-icon">
|
||||
<div class="icon-container speaker-icon">
|
||||
<i class="fas fa-volume-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-info">
|
||||
<h3 class="device-name">Xiaomi 智能音箱 Pro</h3>
|
||||
<p class="device-status">出租屋 | 0个设备</p>
|
||||
</div>
|
||||
<div class="device-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 中枢与网关页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 设备导航函数
|
||||
window.navigateToDevice = function(deviceType) {
|
||||
switch(deviceType) {
|
||||
case 'smart-plug':
|
||||
alert('米家智能插座2 蓝牙网关版设备详情功能开发中...');
|
||||
break;
|
||||
case 'smart-speaker':
|
||||
alert('Xiaomi 智能音箱 Pro设备详情功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知设备类型:', deviceType);
|
||||
}
|
||||
};
|
||||
|
||||
// 家庭选择器点击事件
|
||||
const familySelector = document.querySelector('.family-selector');
|
||||
familySelector.addEventListener('click', function() {
|
||||
alert('家庭切换功能开发中...');
|
||||
});
|
||||
|
||||
// 信息按钮点击事件
|
||||
const infoBtn = document.querySelector('.info-btn');
|
||||
infoBtn.addEventListener('click', function() {
|
||||
alert('中枢与网关帮助信息功能开发中...');
|
||||
});
|
||||
|
||||
// 网关设备项点击事件
|
||||
const gatewayItems = document.querySelectorAll('.gateway-item');
|
||||
gatewayItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const deviceName = this.querySelector('.device-name').textContent;
|
||||
console.log(`点击了设备: ${deviceName}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>米家众测 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/mijiazhongce.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
@ -186,7 +186,7 @@
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='home.html'">
|
||||
<div class="nav-item" onclick="location.href='../index.html'">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
255
profile/my-youpin.html
Normal file
255
profile/my-youpin.html
Normal file
@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的有品 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/my-youpin.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="my-youpin-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">我的有品</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<div class="function-list">
|
||||
<!-- 我的订单 -->
|
||||
<div class="function-item" onclick="navigateToPage('orders')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-file-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">我的订单</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款/售后 -->
|
||||
<div class="function-item" onclick="navigateToPage('refund')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-undo-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">退款/售后</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购物车 -->
|
||||
<div class="function-item" onclick="navigateToPage('cart')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-shopping-cart" style="color: #4facfe;"></i>
|
||||
<span class="cart-badge">3</span>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">购物车</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的收藏 -->
|
||||
<div class="function-item" onclick="navigateToPage('favorites')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-star" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">我的收藏</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<div class="function-item" onclick="navigateToPage('address')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-map-marker-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">收货地址</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 更多功能 -->
|
||||
<div class="function-list">
|
||||
<!-- 优惠·购买码 -->
|
||||
<div class="function-item" onclick="navigateToPage('coupons')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-ticket-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">优惠·购买码</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 服务与帮助 -->
|
||||
<div class="function-list">
|
||||
<!-- 消息通知 -->
|
||||
<div class="function-item" onclick="navigateToPage('notifications')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-bell" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">消息通知</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 售后服务政策 -->
|
||||
<div class="function-item" onclick="navigateToPage('service-policy')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-headset" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">售后服务政策</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资质证照 -->
|
||||
<div class="function-item" onclick="navigateToPage('certificates')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-certificate" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">资质证照</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 协议规则 -->
|
||||
<div class="function-item" onclick="navigateToPage('agreements')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-file-contract" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">协议规则</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隐私设置 -->
|
||||
<div class="function-item" onclick="navigateToPage('privacy')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-shield-alt" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">隐私设置</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关于有品 -->
|
||||
<div class="function-item" onclick="navigateToPage('about')">
|
||||
<div class="function-icon">
|
||||
<i class="fas fa-info-circle" style="color: #4facfe;"></i>
|
||||
</div>
|
||||
<div class="function-content">
|
||||
<span class="function-title">关于有品</span>
|
||||
</div>
|
||||
<div class="function-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 我的有品页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 页面导航函数
|
||||
window.navigateToPage = function(pageType) {
|
||||
switch(pageType) {
|
||||
case 'orders':
|
||||
alert('我的订单功能开发中...');
|
||||
break;
|
||||
case 'refund':
|
||||
alert('退款/售后功能开发中...');
|
||||
break;
|
||||
case 'cart':
|
||||
alert('购物车功能开发中...');
|
||||
break;
|
||||
case 'favorites':
|
||||
alert('我的收藏功能开发中...');
|
||||
break;
|
||||
case 'address':
|
||||
alert('收货地址功能开发中...');
|
||||
break;
|
||||
case 'coupons':
|
||||
alert('优惠·购买码功能开发中...');
|
||||
break;
|
||||
case 'notifications':
|
||||
alert('消息通知功能开发中...');
|
||||
break;
|
||||
case 'service-policy':
|
||||
alert('售后服务政策功能开发中...');
|
||||
break;
|
||||
case 'certificates':
|
||||
alert('资质证照功能开发中...');
|
||||
break;
|
||||
case 'agreements':
|
||||
alert('协议规则功能开发中...');
|
||||
break;
|
||||
case 'privacy':
|
||||
alert('隐私设置功能开发中...');
|
||||
break;
|
||||
case 'about':
|
||||
alert('关于有品功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知页面类型:', pageType);
|
||||
}
|
||||
};
|
||||
|
||||
// 功能项点击事件
|
||||
const functionItems = document.querySelectorAll('.function-item');
|
||||
functionItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const title = this.querySelector('.function-title').textContent;
|
||||
console.log(`点击了功能项: ${title}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>产品百科 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/product-encyclopedia.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>智能场景 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/scene.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
@ -213,7 +213,7 @@
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='home.html'">
|
||||
<div class="nav-item" onclick="location.href='../index.html'">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设置 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/settings.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
155
profile/share.html
Normal file
155
profile/share.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>共享 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/share.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="share-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">共享</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 共享家庭卡片 -->
|
||||
<div class="share-section">
|
||||
<div class="share-card family-share">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>共享家庭</h3>
|
||||
<p>邀请家人一起管理智能设备</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 共享设备卡片 -->
|
||||
<div class="share-section">
|
||||
<div class="share-card device-share">
|
||||
<div class="card-icon">
|
||||
<i class="fas fa-tablet-alt"></i>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>共享设备</h3>
|
||||
<p>与他人分享特定设备的控制权</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前共享状态 -->
|
||||
<div class="current-shares">
|
||||
<h2 class="section-title">当前共享</h2>
|
||||
|
||||
<div class="share-item">
|
||||
<div class="share-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='%23FF6B6B'/%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="share-info">
|
||||
<h4>张三</h4>
|
||||
<p>家庭成员 • 可控制所有设备</p>
|
||||
</div>
|
||||
<div class="share-status">
|
||||
<span class="status-badge active">已连接</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="share-item">
|
||||
<div class="share-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='%234ECDC4'/%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="share-info">
|
||||
<h4>李四</h4>
|
||||
<p>访客 • 仅可查看状态</p>
|
||||
</div>
|
||||
<div class="share-status">
|
||||
<span class="status-badge pending">待接受</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邀请新成员 -->
|
||||
<div class="invite-section">
|
||||
<button class="invite-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>邀请新成员</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 共享设置 -->
|
||||
<div class="share-settings">
|
||||
<h2 class="section-title">共享设置</h2>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h4>允许访客控制设备</h4>
|
||||
<p>访客可以控制已共享的设备</p>
|
||||
</div>
|
||||
<div class="setting-toggle">
|
||||
<input type="checkbox" id="guest-control" checked>
|
||||
<label for="guest-control" class="toggle-switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h4>共享通知</h4>
|
||||
<p>当有人加入或离开时接收通知</p>
|
||||
</div>
|
||||
<div class="setting-toggle">
|
||||
<input type="checkbox" id="share-notifications" checked>
|
||||
<label for="share-notifications" class="toggle-switch"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 共享页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 邀请按钮点击事件
|
||||
const inviteBtn = document.querySelector('.invite-btn');
|
||||
inviteBtn.addEventListener('click', function() {
|
||||
// 这里可以添加邀请逻辑
|
||||
alert('邀请功能开发中...');
|
||||
});
|
||||
|
||||
// 共享卡片点击事件
|
||||
const shareCards = document.querySelectorAll('.share-card');
|
||||
shareCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
if (card.classList.contains('family-share')) {
|
||||
alert('家庭共享功能开发中...');
|
||||
} else if (card.classList.contains('device-share')) {
|
||||
alert('设备共享功能开发中...');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 切换开关事件
|
||||
const toggles = document.querySelectorAll('input[type="checkbox"]');
|
||||
toggles.forEach(toggle => {
|
||||
toggle.addEventListener('change', function() {
|
||||
console.log(`${this.id} 设置已${this.checked ? '开启' : '关闭'}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
413
profile/styles/device-consumables.css
Normal file
413
profile/styles/device-consumables.css
Normal file
@ -0,0 +1,413 @@
|
||||
/* 设备耗材页面样式 */
|
||||
|
||||
#device-consumables-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 家庭选择器 */
|
||||
.family-selector {
|
||||
padding: 15px 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.family-dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.family-dropdown i {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 耗材部分 */
|
||||
.consumables-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 20px 10px 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 设备项 */
|
||||
.device-item {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.device-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.device-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 温湿度计图标 */
|
||||
.temp-humidity-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.temp-humidity-icon.bathroom {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.humidity-value {
|
||||
font-size: 8px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 电池图标 */
|
||||
.battery-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.battery-body {
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.battery-level {
|
||||
height: 100%;
|
||||
background: #ffa500;
|
||||
border-radius: 1px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.battery-level.low {
|
||||
background: #ff6b6b;
|
||||
}
|
||||
|
||||
.battery-tip {
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #ddd;
|
||||
border-radius: 0 2px 2px 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
/* 空气净化器图标 */
|
||||
.air-purifier-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.purifier-body {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.purifier-grid {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #ddd 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ddd 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #ddd 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
|
||||
}
|
||||
|
||||
/* 滤芯图标 */
|
||||
.filter-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-progress {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #4ECDC4;
|
||||
}
|
||||
|
||||
/* 设备信息 */
|
||||
.device-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.device-status.warning {
|
||||
color: #ff9500;
|
||||
}
|
||||
|
||||
.device-update {
|
||||
margin: 2px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 设备操作 */
|
||||
.device-action {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background: #4ECDC4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.buy-btn:hover {
|
||||
background: #44a08d;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.buy-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 15px 10px 15px;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.temp-humidity-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.device-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.device-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.device-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.device-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.device-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
.device-item:nth-child(5) { animation-delay: 0.5s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#device-consumables-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.device-info h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.device-update {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.temp-humidity-icon {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.temp-value {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.purifier-body {
|
||||
background: #404040;
|
||||
}
|
||||
}
|
||||
210
profile/styles/home-network.css
Normal file
210
profile/styles/home-network.css
Normal file
@ -0,0 +1,210 @@
|
||||
/* 家庭网络页面样式 */
|
||||
#home-network-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 网络状态卡片 */
|
||||
.network-status-card {
|
||||
background: white;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-header i {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.network-quality {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quality-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quality-bars {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 4px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.bar:nth-child(1) {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.bar:nth-child(2) {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.bar:nth-child(3) {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.bar.active {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.quality-text {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quality-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 设备区块 */
|
||||
.device-section {
|
||||
background: white;
|
||||
margin: 0 16px 12px;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
font-size: 16px;
|
||||
color: #4A90E2;
|
||||
}
|
||||
|
||||
.section-title span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-header > i {
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 本地控制区块 */
|
||||
.local-control-section {
|
||||
background: white;
|
||||
margin: 0 16px;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.local-control-section .section-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: #ff9500;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.section-description p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 414px) {
|
||||
.network-status-card,
|
||||
.device-section,
|
||||
.local-control-section {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.quality-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
336
profile/styles/hub-gateway.css
Normal file
336
profile/styles/hub-gateway.css
Normal file
@ -0,0 +1,336 @@
|
||||
/* 中枢与网关页面样式 */
|
||||
|
||||
#hub-gateway-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 家庭选择器 */
|
||||
.family-selector {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.family-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.family-info i {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 网关部分 */
|
||||
.gateway-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin: 0 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 15px 20px 10px 20px;
|
||||
margin: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* 网关设备列表 */
|
||||
.gateway-list {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.gateway-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.gateway-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 设备图标 */
|
||||
.device-icon {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plug-icon {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.speaker-icon {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.speaker-icon i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 设备信息 */
|
||||
.device-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin: 0 0 5px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 设备操作 */
|
||||
.device-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.gateway-section {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.gateway-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.gateway-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#hub-gateway-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.family-selector {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.family-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gateway-section {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
background: #2d2d2d;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.gateway-list {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.gateway-item {
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.gateway-item:hover {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.device-action i {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.plug-icon {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.gateway-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.gateway-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
/* 家庭选择器点击效果 */
|
||||
.family-selector:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.family-selector:hover {
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮点击效果 */
|
||||
.back-btn:active,
|
||||
.info-btn:active {
|
||||
transform: scale(0.95);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
256
profile/styles/my-youpin.css
Normal file
256
profile/styles/my-youpin.css
Normal file
@ -0,0 +1,256 @@
|
||||
/* 我的有品页面样式 */
|
||||
|
||||
#my-youpin-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 功能列表 */
|
||||
.function-list {
|
||||
background: white;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.function-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 功能图标 */
|
||||
.function-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.function-icon i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 购物车徽章 */
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 功能内容 */
|
||||
.function-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 功能操作 */
|
||||
.function-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.function-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.section-divider {
|
||||
height: 10px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 第一个功能列表的顶部间距 */
|
||||
.function-list:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.function-icon i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.function-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.function-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.function-item:nth-child(2) { animation-delay: 0.15s; }
|
||||
.function-item:nth-child(3) { animation-delay: 0.2s; }
|
||||
.function-item:nth-child(4) { animation-delay: 0.25s; }
|
||||
.function-item:nth-child(5) { animation-delay: 0.3s; }
|
||||
.function-item:nth-child(6) { animation-delay: 0.35s; }
|
||||
.function-item:nth-child(7) { animation-delay: 0.4s; }
|
||||
.function-item:nth-child(8) { animation-delay: 0.45s; }
|
||||
.function-item:nth-child(9) { animation-delay: 0.5s; }
|
||||
.function-item:nth-child(10) { animation-delay: 0.55s; }
|
||||
.function-item:nth-child(11) { animation-delay: 0.6s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#my-youpin-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.function-list {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.function-item:hover {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.function-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.function-action i {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.function-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.function-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标颜色统一 */
|
||||
.function-icon i {
|
||||
color: #4facfe !important;
|
||||
}
|
||||
|
||||
/* 特殊处理购物车图标的徽章位置 */
|
||||
.function-icon:has(.cart-badge) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 确保徽章在深色模式下也可见 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.cart-badge {
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
309
profile/styles/product-encyclopedia.css
Normal file
309
profile/styles/product-encyclopedia.css
Normal file
@ -0,0 +1,309 @@
|
||||
/* 产品百科页面样式 */
|
||||
|
||||
#product-encyclopedia-page {
|
||||
background: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: white;
|
||||
padding: 12px 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
max-width: 414px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-section {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 分类导航 */
|
||||
.category-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 16px 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.category-item.active .category-icon {
|
||||
background: linear-gradient(135deg, #4ECDC4, #44A08D);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.category-icon i {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.category-item.active .category-icon i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-item.active span {
|
||||
color: #4ECDC4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 产品区域 */
|
||||
.section {
|
||||
background: white;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header i {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 产品列表 */
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-item:hover {
|
||||
background: #f0f0f0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-info h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin: 0 0 4px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-brand {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.category-nav {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.category-icon i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.product-item:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.product-item:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #4ECDC4;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
179
profile/styles/settings.css
Normal file
179
profile/styles/settings.css
Normal file
@ -0,0 +1,179 @@
|
||||
/* 设置页面专用样式 */
|
||||
|
||||
/* 设置页面样式 */
|
||||
.settings-header {
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 15px 20px 10px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.settings-item > i {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 设置项图标 */
|
||||
.settings-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ff6900;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 设置项值显示 */
|
||||
.settings-value {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 开关样式 */
|
||||
.settings-switch {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 分组标题 */
|
||||
.settings-group-title {
|
||||
background: #f8f8f8;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 危险操作样式 */
|
||||
.settings-item.danger .item-title {
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.settings-item.danger .settings-icon {
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
/* 设置项悬停效果 */
|
||||
.settings-item:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* 设置项禁用状态 */
|
||||
.settings-item.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.settings-item.disabled:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* 设置页面特殊布局 */
|
||||
.settings-container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-info {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 账户信息卡片 */
|
||||
.account-card {
|
||||
background: white;
|
||||
margin: 20px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.account-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.account-arrow {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
388
profile/styles/share.css
Normal file
388
profile/styles/share.css
Normal file
@ -0,0 +1,388 @@
|
||||
/* 共享页面样式 */
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 共享卡片 */
|
||||
.share-section {
|
||||
margin: 20px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.share-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.share-card.family-share {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.share-card.device-share {
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 当前共享状态 */
|
||||
.current-shares {
|
||||
margin: 30px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.share-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.share-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.share-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.share-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.share-info h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.share-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.share-status {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
background: #e8f5e8;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
/* 邀请按钮 */
|
||||
.invite-section {
|
||||
padding: 0 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.invite-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 共享设置 */
|
||||
.share-settings {
|
||||
margin: 30px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-info h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 切换开关样式 */
|
||||
.setting-toggle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
background-color: #ccc;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.toggle-switch::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .toggle-switch {
|
||||
background-color: #667eea;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .toggle-switch::before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.share-section,
|
||||
.current-shares,
|
||||
.invite-section,
|
||||
.share-settings {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.share-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.share-avatar {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.share-card,
|
||||
.share-item,
|
||||
.setting-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.share-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.share-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.share-item:nth-child(1) { animation-delay: 0.3s; }
|
||||
.share-item:nth-child(2) { animation-delay: 0.4s; }
|
||||
.setting-item:nth-child(1) { animation-delay: 0.5s; }
|
||||
.setting-item:nth-child(2) { animation-delay: 0.6s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.share-card:not(.family-share):not(.device-share) {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.share-item,
|
||||
.setting-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.share-info h4 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.share-info p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.setting-info h4 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
211
profile/styles/voice-settings.css
Normal file
211
profile/styles/voice-settings.css
Normal file
@ -0,0 +1,211 @@
|
||||
/* 语音设置页面样式 */
|
||||
|
||||
#voice-settings-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: #f6f6f6;
|
||||
color: rgb(43, 42, 42);
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 设置部分 */
|
||||
.settings-section {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 20px 10px 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 设置项 */
|
||||
.settings-item {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.settings-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.settings-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.item-action {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-action i {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 特殊样式调整 */
|
||||
.settings-section:first-of-type .section-header {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 15px 15px 10px 15px;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
padding: 18px 15px;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.settings-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.settings-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.settings-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.settings-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#voice-settings-page {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.item-content h3 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.item-action i {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 点击反馈效果 */
|
||||
.settings-item:active {
|
||||
background-color: #f0f0f0;
|
||||
transform: scale(0.98);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.settings-item:active {
|
||||
background-color: #404040;
|
||||
}
|
||||
}
|
||||
376
profile/styles/whole-house-smart.css
Normal file
376
profile/styles/whole-house-smart.css
Normal file
@ -0,0 +1,376 @@
|
||||
/* 全屋智能页面样式 */
|
||||
#whole-house-smart-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-btn, .info-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-btn:hover, .info-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 分类导航 */
|
||||
.category-section {
|
||||
background: white;
|
||||
margin: 20px;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 1V1定制服务 */
|
||||
.service-section {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.service-card h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.service-banner {
|
||||
background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-text h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.banner-text p {
|
||||
font-size: 14px;
|
||||
margin: 0 0 15px 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 自己动手搭建 */
|
||||
.diy-section {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.diy-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.diy-card h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.diy-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.diy-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.diy-image {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.diy-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.diy-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.diy-info p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.guide-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.guide-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 全屋智能入门套餐 */
|
||||
.package-section {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.package-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.package-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 5px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.package-header p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.package-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.package-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.category-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.category-item span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.service-banner {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.diy-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.diy-info {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.category-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.service-section,
|
||||
.diy-section,
|
||||
.package-section,
|
||||
.category-section {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.category-section,
|
||||
.service-section,
|
||||
.diy-section,
|
||||
.package-section {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.service-section {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.diy-section {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.package-section {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人资料 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/user-profile.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item" onclick="location.href='home.html'">
|
||||
<div class="nav-item" onclick="location.href='../index.html'">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>米家</span>
|
||||
</div>
|
||||
@ -123,6 +123,6 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="../scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
115
profile/voice-settings.html
Normal file
115
profile/voice-settings.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>语音设置 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/voice-settings.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="voice-settings-page">
|
||||
<!-- 头部导航 -->
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<h1 class="page-title">语音设置</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 小爱设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">小爱设置</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房间快捷指令设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('room-shortcuts')">
|
||||
<div class="item-content">
|
||||
<h3>房间快捷指令设置</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音别名设置 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('voice-alias')">
|
||||
<div class="item-content">
|
||||
<h3>语音别名设置</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 家庭传声 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('family-intercom')">
|
||||
<div class="item-content">
|
||||
<h3>家庭传声</h3>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音控制授权管理 -->
|
||||
<div class="settings-section">
|
||||
<div class="settings-item" onclick="navigateToPage('voice-authorization')">
|
||||
<div class="item-content">
|
||||
<h3>语音控制授权管理</h3>
|
||||
<p class="item-description">选择语音可控制的设备或区域</p>
|
||||
</div>
|
||||
<div class="item-action">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../scripts/main.js"></script>
|
||||
<script>
|
||||
// 语音设置页面特定的JavaScript逻辑
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 页面导航函数
|
||||
window.navigateToPage = function(pageType) {
|
||||
switch(pageType) {
|
||||
case 'room-shortcuts':
|
||||
alert('房间快捷指令设置功能开发中...');
|
||||
break;
|
||||
case 'voice-alias':
|
||||
alert('语音别名设置功能开发中...');
|
||||
break;
|
||||
case 'family-intercom':
|
||||
alert('家庭传声功能开发中...');
|
||||
break;
|
||||
case 'voice-authorization':
|
||||
alert('语音控制授权管理功能开发中...');
|
||||
break;
|
||||
default:
|
||||
console.log('未知页面类型:', pageType);
|
||||
}
|
||||
};
|
||||
|
||||
// 设置项点击事件
|
||||
const settingsItems = document.querySelectorAll('.settings-item');
|
||||
settingsItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const title = this.querySelector('h3').textContent;
|
||||
console.log(`点击了设置项: ${title}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>全屋智能 - 米家智能家居</title>
|
||||
<link rel="stylesheet" href="styles/common.css">
|
||||
<link rel="stylesheet" href="../styles/common.css">
|
||||
<link rel="stylesheet" href="styles/whole-house-smart.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
@ -315,6 +315,23 @@
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-right .menu-status {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.menu-right i {
|
||||
color: #ddd;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.menu-item i:first-child {
|
||||
font-size: 18px;
|
||||
color: #ff6900;
|
||||
|
||||
Reference in New Issue
Block a user