refactor(profile): restructure profile pages and add new features

README.md

@@ -23,14 +23,14 @@
 #### 功能子页面
 - **notifications.html** - 通知中心：消息管理，状态更新
 - **environment-settings.html** - 环境设置：分区域监测，数据展示
-- **scene.html** - 智能场景：场景管理，自动化控制
+- **profile/user-profile.html** - 个人资料：用户信息编辑
-- **user-profile.html** - 个人资料：用户信息编辑
-- **mijiazhongce.html** - 米家众测：产品试用申请
 - **log.html** - 设备日志：开关记录，历史数据
-- **settings.html** - 设置页面：应用配置
+- **profile/settings.html** - 设置页面：应用配置
 - **all-products.html** - 全部产品：产品目录
-- **product-encyclopedia.html** - 产品百科：产品知识
+- **profile/scene.html** - 智能场景：场景管理，自动化控制
-- **whole-house-smart.html** - 全屋智能：智能解决方案
+- **profile/mijiazhongce.html** - 米家众测：产品试用申请
+- **profile/product-encyclopedia.html** - 产品百科：产品知识
+- **profile/whole-house-smart.html** - 全屋智能：智能解决方案
 
 ## 💻 核心代码解释
 
@@ -106,15 +106,15 @@ project-fin-takeaway/
 ├── product.html            # 产品页面
 ├── mall.html               # 商城页面
 ├── profile.html            # 个人中心页面
-├── scene.html              # 智能场景页面
+
-├── mijiazhongce.html       # 米家众测页面
+├── profile/
-├── user-profile.html       # 个人资料详情页面
+│   ├── user-profile.html   # 个人资料详情页面
+│   ├── settings.html       # 设置页面
+│   └── home-network.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 +170,13 @@ npx http-server
 │   │   └── → all-products.html
 │   ├── mall.html ───── 商城页面
 │   └── profile.html ── 个人中心
-│       ├── → user-profile.html
+│       ├── → profile/user-profile.html
-│       ├── → scene.html
+│       ├── → profile/scene.html
-│       ├── → mijiazhongce.html
+│       ├── → profile/mijiazhongce.html
-│       ├── → product-encyclopedia.html
+│       ├── → profile/product-encyclopedia.html
-│       ├── → whole-house-smart.html
+│       ├── → profile/whole-house-smart.html
-│       └── → settings.html
+│       ├── → profile/settings.html
+│       └── → profile/home-network.html
 └── 📁 资源文件
     ├── styles/ ──── CSS样式
     ├── scripts/ ─── JavaScript

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> 
@@ -116,15 +116,17 @@
                 <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">
@@ -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>

profile/home-network.html

@@ -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>

profile/mijiazhongce.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>

profile/product-encyclopedia.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>

profile/scene.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/scene.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>

profile/settings.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/settings.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>

profile/styles/home-network.css

@@ -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;
+    }
+}

profile/styles/product-encyclopedia.css

@@ -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); }
+}

profile/styles/settings.css

@@ -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;
+}

profile/styles/whole-house-smart.css

@@ -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;
+}

profile/user-profile.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/user-profile.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
@@ -123,6 +123,6 @@
         </nav>
     </div>
 
-    <script src="scripts/main.js"></script>
+    <script src="../scripts/main.js"></script>
 </body>
 </html>

profile/whole-house-smart.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>

styles/profile.css

@@ -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;