Compare commits
4 Commits
f8452b319c
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 5b6ad327eb | |||
| efbb542d83 | |||
| 35145dbf76 | |||
| ef5eda8cf4 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
images/profile/*
|
||||
.trae/rules/project_rules.md
|
||||
|
||||
59
README.md
59
README.md
@ -23,14 +23,20 @@
|
||||
#### 功能子页面
|
||||
- **notifications.html** - 通知中心：消息管理，状态更新
|
||||
- **environment-settings.html** - 环境设置：分区域监测，数据展示
|
||||
- **scene.html** - 智能场景：场景管理，自动化控制
|
||||
- **user-profile.html** - 个人资料：用户信息编辑
|
||||
- **mijiazhongce.html** - 米家众测：产品试用申请
|
||||
- **profile/user-profile.html** - 个人资料：用户信息编辑
|
||||
- **log.html** - 设备日志：开关记录，历史数据
|
||||
- **settings.html** - 设置页面：应用配置
|
||||
- **profile/settings.html** - 设置页面：应用配置
|
||||
- **all-products.html** - 全部产品：产品目录
|
||||
- **product-encyclopedia.html** - 产品百科：产品知识
|
||||
- **whole-house-smart.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** - 家庭网络：网络设置，连接管理
|
||||
|
||||
## 💻 核心代码解释
|
||||
|
||||
@ -101,20 +107,29 @@ function updateSensorData() {
|
||||
```
|
||||
project-fin-takeaway/
|
||||
├── index.html # 米家首页 - 设备控制中心
|
||||
├── home.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 # 全部产品页面
|
||||
├── product-encyclopedia.html # 产品百科页面
|
||||
├── whole-house-smart.html # 全屋智能页面
|
||||
├── log.html # 设备开关日志页面
|
||||
├── styles/ # 样式文件目录
|
||||
│ ├── common.css # 公共样式
|
||||
@ -170,12 +185,18 @@ npx http-server
|
||||
│ │ └── → all-products.html
|
||||
│ ├── mall.html ───── 商城页面
|
||||
│ └── profile.html ── 个人中心
|
||||
│ ├── → user-profile.html
|
||||
│ ├── → scene.html
|
||||
│ ├── → mijiazhongce.html
|
||||
│ ├── → product-encyclopedia.html
|
||||
│ ├── → whole-house-smart.html
|
||||
│ └── → settings.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
|
||||
|
||||
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