diff --git a/home.html b/home.html
index fa73801..9f5a083 100644
--- a/home.html
+++ b/home.html
@@ -4,7 +4,8 @@
米家 - 米家智能家居
-
+
+
diff --git a/index.html b/index.html
index d8102d7..ed6169b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
米家智能家居
-
+
+
diff --git a/mall.html b/mall.html
index 5634306..ed30685 100644
--- a/mall.html
+++ b/mall.html
@@ -4,7 +4,7 @@
商城 - 米家智能家居
-
+
diff --git a/product.html b/product.html
index 3843fde..14b7ec4 100644
--- a/product.html
+++ b/product.html
@@ -4,7 +4,8 @@
产品 - 米家智能家居
-
+
+
diff --git a/profile.html b/profile.html
index 7f6e94e..170543a 100644
--- a/profile.html
+++ b/profile.html
@@ -4,7 +4,8 @@
我的 - 米家智能家居
-
+
+
diff --git a/settings.html b/settings.html
index 3a86d8a..7a811e0 100644
--- a/settings.html
+++ b/settings.html
@@ -4,7 +4,8 @@
设置 - 米家智能家居
-
+
+
diff --git a/smart.html b/smart.html
index 02e576d..eec0b30 100644
--- a/smart.html
+++ b/smart.html
@@ -4,7 +4,8 @@
智能 - 米家智能家居
-
+
+
diff --git a/styles/common.css b/styles/common.css
new file mode 100644
index 0000000..98dfe6c
--- /dev/null
+++ b/styles/common.css
@@ -0,0 +1,200 @@
+/* 通用样式 - 所有页面共享 */
+
+/* 全局样式 */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background-color: #f5f5f5;
+ color: #333;
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+.container {
+ max-width: 414px;
+ margin: 0 auto;
+ background-color: #f5f5f5;
+ min-height: 100vh;
+ position: relative;
+ padding-bottom: 80px;
+}
+
+/* 头部样式 */
+.header {
+ background-color: #fff;
+ padding: 15px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #eee;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.header-left i {
+ font-size: 18px;
+ color: #333;
+ cursor: pointer;
+}
+
+.header-left h1 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+.header-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: #333;
+ text-align: left;
+}
+
+/* 底部导航 */
+.bottom-nav {
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 414px;
+ background-color: #fff;
+ border-top: 1px solid #eee;
+ display: flex;
+ justify-content: space-around;
+ padding: 10px 0;
+ z-index: 1000;
+}
+
+.nav-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 5px;
+ cursor: pointer;
+ transition: color 0.2s;
+}
+
+.nav-item i {
+ font-size: 20px;
+ color: #999;
+}
+
+.nav-item span {
+ font-size: 12px;
+ color: #999;
+}
+
+.nav-item.active i,
+.nav-item.active span {
+ color: #ff6900;
+}
+
+/* 切换开关样式 */
+.toggle-switch {
+ width: 50px;
+ height: 30px;
+ background: #e0e0e0;
+ border-radius: 15px;
+ position: relative;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.toggle-switch.active {
+ background: #34C759;
+}
+
+.toggle-slider {
+ width: 26px;
+ height: 26px;
+ background: white;
+ border-radius: 50%;
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ transition: transform 0.3s;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.toggle-switch.active .toggle-slider {
+ transform: translateX(20px);
+}
+
+/* 响应式设计 */
+@media (max-width: 414px) {
+ .container {
+ max-width: 100%;
+ }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+ width: 4px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ccc;
+ border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #999;
+}
+
+/* 隐藏类 */
+.hidden {
+ display: none !important;
+}
+
+/* 空状态样式 */
+.empty-state {
+ text-align: center;
+ padding: 20px 0;
+}
+
+.empty-state i {
+ font-size: 48px;
+ color: #ddd;
+ margin-bottom: 15px;
+}
+
+.empty-state h3 {
+ font-size: 16px;
+ color: #666;
+ margin-bottom: 8px;
+}
+
+.empty-state p {
+ font-size: 14px;
+ color: #999;
+}
\ No newline at end of file
diff --git a/styles/home.css b/styles/home.css
new file mode 100644
index 0000000..af2177c
--- /dev/null
+++ b/styles/home.css
@@ -0,0 +1,229 @@
+/* 首页专用样式 */
+
+/* 房间导航 */
+.room-nav {
+ display: flex;
+ gap: 20px;
+ padding: 20px;
+ overflow-x: auto;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.room-nav::-webkit-scrollbar {
+ display: none;
+}
+
+.room-tabs {
+ display: flex;
+ gap: 20px;
+ min-width: max-content;
+}
+
+.room-tab {
+ padding: 8px 16px;
+ border-radius: 20px;
+ background-color: #fff;
+ color: #666;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ white-space: nowrap;
+ border: 1px solid transparent;
+}
+
+.room-tab.active {
+ background-color: #ff6900;
+ color: #fff;
+}
+
+.home-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+/* 首页菜单图标 */
+.home-menu-icon {
+ font-size: 18px;
+ color: #666;
+ cursor: pointer;
+}
+
+/* 空气质量 */
+.air-quality {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ background-color: #fff;
+ margin-bottom: 15px;
+ font-size: 14px;
+ color: #666;
+}
+
+/* 设备网格 */
+.device-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 15px;
+ padding: 0 20px;
+ margin-bottom: 20px;
+}
+
+.device-card {
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+ cursor: pointer;
+ transition: transform 0.2s;
+ animation: fadeIn 0.3s ease-out;
+}
+
+.device-card:hover {
+ transform: translateY(-2px);
+}
+
+.device-card.active {
+ background-color: #fff5e6;
+ border: 1px solid #ff6900;
+}
+
+.device-icon {
+ width: 40px;
+ height: 40px;
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #f8f8f8;
+ border-radius: 8px;
+}
+
+.device-icon i {
+ font-size: 20px;
+ color: #666;
+}
+
+.ac-icon {
+ width: 30px;
+ height: 20px;
+ background-color: #666;
+ border-radius: 4px;
+ position: relative;
+}
+
+.ac-icon::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 2px;
+ background-color: #fff;
+}
+
+.device-name {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+}
+
+.device-status {
+ font-size: 12px;
+ color: #999;
+}
+
+.power-button {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ width: 30px;
+ height: 30px;
+ background-color: #ff6900;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.power-button i {
+ color: #fff;
+ font-size: 14px;
+}
+
+/* 传感器网格 */
+.sensor-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 15px;
+ padding: 0 20px;
+ margin-bottom: 20px;
+}
+
+.sensor-card {
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+ cursor: pointer;
+ animation: fadeIn 0.3s ease-out;
+}
+
+.sensor-icon {
+ margin-bottom: 15px;
+}
+
+.temp-display {
+ font-size: 24px;
+ font-weight: 600;
+ color: #333;
+}
+
+.humidity-display {
+ font-size: 14px;
+ color: #666;
+ margin-left: 5px;
+}
+
+.sensor-name {
+ font-size: 14px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+}
+
+.sensor-status {
+ font-size: 12px;
+ color: #999;
+}
+
+.bluetooth-icon {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ color: #007AFF;
+ font-size: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 414px) {
+ .device-grid,
+ .sensor-grid {
+ padding: 0 15px;
+ }
+
+ .room-tabs {
+ gap: 15px;
+ }
+
+ .room-tab {
+ font-size: 14px;
+ }
+}
\ No newline at end of file
diff --git a/styles/product.css b/styles/product.css
new file mode 100644
index 0000000..0a13aa0
--- /dev/null
+++ b/styles/product.css
@@ -0,0 +1,287 @@
+/* 产品页面专用样式 */
+
+/* 产品页面 */
+.product-header {
+ background-color: #fff;
+ padding: 20px;
+ border-bottom: 1px solid #eee;
+}
+
+/* 搜索框 */
+.search-section {
+ padding: 20px;
+ background-color: #f5f5f5;
+}
+
+.search-box {
+ display: flex;
+ align-items: center;
+ background-color: #e8e8e8;
+ border-radius: 20px;
+ padding: 12px 16px;
+ gap: 10px;
+}
+
+.search-box i {
+ color: #999;
+ font-size: 16px;
+}
+
+.search-box input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ outline: none;
+ font-size: 14px;
+ color: #333;
+}
+
+.search-box input::placeholder {
+ color: #999;
+}
+
+/* 推广卡片 */
+.promo-section {
+ padding: 0 20px 20px;
+ background-color: #f5f5f5;
+}
+
+.promo-card {
+ background: linear-gradient(135deg, #a8d8ff 0%, #e6f3ff 100%);
+ border-radius: 12px;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ overflow: hidden;
+}
+
+.promo-content {
+ flex: 1;
+}
+
+.promo-badge {
+ background-color: rgba(255,255,255,0.9);
+ color: #333;
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+ display: inline-block;
+ margin-bottom: 8px;
+}
+
+.promo-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 8px;
+}
+
+.promo-subtitle {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.promo-tag {
+ background-color: #333;
+ color: #fff;
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.promo-count {
+ font-size: 14px;
+ color: #333;
+ font-weight: 500;
+}
+
+.promo-image {
+ width: 80px;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.camera-icon {
+ width: 60px;
+ height: 60px;
+ background-color: rgba(255,255,255,0.3);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: #333;
+}
+
+/* 排行榜 */
+.ranking-section {
+ background-color: #fff;
+ margin: 0 20px;
+ border-radius: 12px;
+ overflow: hidden;
+ margin-bottom: 20px;
+}
+
+.ranking-header {
+ padding: 20px 20px 0;
+}
+
+.ranking-header h3 {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ margin: 0;
+}
+
+.ranking-list {
+ padding: 20px;
+}
+
+.ranking-item {
+ display: flex;
+ align-items: center;
+ padding: 15px 0;
+ border-bottom: 1px solid #f5f5f5;
+}
+
+.ranking-item:last-child {
+ border-bottom: none;
+}
+
+.ranking-number {
+ width: 30px;
+ height: 30px;
+ background-color: #f5f5f5;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 600;
+ color: #666;
+ margin-right: 15px;
+}
+
+.ranking-item:first-child .ranking-number {
+ background-color: #ff6900;
+ color: #fff;
+}
+
+.ranking-item:nth-child(2) .ranking-number {
+ background-color: #ffa500;
+ color: #fff;
+}
+
+.ranking-item:nth-child(3) .ranking-number {
+ background-color: #ffb84d;
+ color: #fff;
+}
+
+.product-image {
+ width: 50px;
+ height: 50px;
+ margin-right: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #f8f8f8;
+ border-radius: 8px;
+}
+
+.ac-product-icon {
+ width: 30px;
+ height: 20px;
+ background-color: #666;
+ border-radius: 4px;
+ position: relative;
+}
+
+.ac-product-icon::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 20px;
+ height: 2px;
+ background-color: #fff;
+}
+
+.scale-icon {
+ width: 35px;
+ height: 25px;
+ background-color: #ddd;
+ border-radius: 6px;
+ position: relative;
+}
+
+.scale-icon::after {
+ content: '';
+ position: absolute;
+ top: 8px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 20px;
+ height: 1px;
+ background-color: #999;
+}
+
+.speaker-icon {
+ width: 30px;
+ height: 30px;
+ background-color: #333;
+ border-radius: 50%;
+ position: relative;
+}
+
+.speaker-icon::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 15px;
+ height: 15px;
+ border: 2px solid #fff;
+ border-radius: 50%;
+}
+
+.product-info {
+ flex: 1;
+}
+
+.product-name {
+ font-size: 16px;
+ color: #333;
+ margin-bottom: 5px;
+ font-weight: 500;
+}
+
+.product-stats {
+ font-size: 12px;
+ color: #999;
+}
+
+.view-all {
+ text-align: center;
+ padding: 20px;
+ border-top: 1px solid #f5f5f5;
+ cursor: pointer;
+}
+
+.view-all span {
+ color: #666;
+ font-size: 14px;
+}
+
+.view-all i {
+ margin-left: 5px;
+ font-size: 12px;
+}
\ No newline at end of file
diff --git a/styles/profile.css b/styles/profile.css
new file mode 100644
index 0000000..64a8fb9
--- /dev/null
+++ b/styles/profile.css
@@ -0,0 +1,508 @@
+/* 个人资料页面专用样式 */
+
+/* 个人资料页面 */
+.profile-header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ padding: 30px 20px;
+ color: #fff;
+}
+
+.profile-info {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.avatar {
+ width: 60px;
+ height: 60px;
+ border-radius: 30px;
+ overflow: hidden;
+ background-color: rgba(255,255,255,0.2);
+}
+
+.avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.username {
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 5px;
+}
+
+.device-count {
+ font-size: 14px;
+ opacity: 0.8;
+}
+
+.profile-content {
+ padding: 20px;
+}
+
+/* 功能网格 */
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+.feature-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+}
+
+.feature-item i {
+ font-size: 24px;
+ color: #ff6900;
+}
+
+.feature-item span {
+ font-size: 12px;
+ color: #666;
+ text-align: center;
+}
+
+/* 功能卡片 */
+.feature-cards {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ padding: 20px;
+ background: white;
+ margin-bottom: 10px;
+}
+
+.feature-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+}
+
+.feature-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 20px;
+}
+
+.feature-card span {
+ font-size: 12px;
+ color: #666;
+ text-align: center;
+}
+
+/* 摄像头推广 */
+.camera-promo {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ color: #fff;
+}
+
+.promo-badge {
+ background-color: rgba(255,255,255,0.2);
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+ margin-bottom: 8px;
+ display: inline-block;
+}
+
+.promo-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 5px;
+}
+
+.promo-subtitle {
+ font-size: 14px;
+ opacity: 0.8;
+}
+
+.promo-image {
+ font-size: 40px;
+ opacity: 0.8;
+}
+
+/* 推广横幅 */
+.promotion-banner {
+ background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+ margin: 0 20px 20px 20px;
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.promotion-content {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ gap: 20px;
+}
+
+.promotion-text {
+ flex: 1;
+}
+
+.promotion-text h3 {
+ margin: 0 0 5px 0;
+ font-size: 14px;
+ color: #1976d2;
+ font-weight: 500;
+}
+
+.promotion-text h4 {
+ margin: 0 0 10px 0;
+ font-size: 18px;
+ color: #333;
+ font-weight: 600;
+}
+
+.promotion-tag {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.promotion-tag span {
+ background: #ff5722;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.tag-number {
+ background: #333 !important;
+}
+
+.promotion-image {
+ width: 80px;
+ height: 60px;
+}
+
+.promotion-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+}
+
+/* 菜单列表 */
+.menu-list {
+ background-color: #fff;
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.menu-section {
+ background: white;
+ margin: 0 20px;
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding: 16px 20px;
+ border-bottom: 1px solid #f0f0f0;
+ cursor: pointer;
+ min-height: 64px;
+ transition: background-color 0.2s;
+}
+
+.menu-item:hover {
+ background-color: #f8f8f8;
+}
+
+.menu-item:last-child {
+ border-bottom: none;
+}
+
+.menu-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 14px;
+ flex-shrink: 0;
+ margin: 0;
+ position: relative;
+}
+
+.menu-icon i {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ line-height: 1;
+}
+
+.menu-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 2px;
+}
+
+.menu-title {
+ font-size: 15px;
+ color: #333;
+ font-weight: 500;
+}
+
+.menu-status {
+ font-size: 12px;
+ color: #666;
+}
+
+.menu-item > i {
+ color: #ccc;
+ font-size: 12px;
+ flex-shrink: 0;
+ align-self: center;
+}
+
+.menu-item i:first-child {
+ font-size: 18px;
+ color: #ff6900;
+ margin-right: 15px;
+ width: 20px;
+}
+
+.menu-item span {
+ flex: 1;
+ font-size: 16px;
+ color: #333;
+}
+
+.menu-item .status {
+ font-size: 14px;
+ color: #666;
+ margin-right: 10px;
+}
+
+.menu-item i:last-child {
+ font-size: 14px;
+ color: #ccc;
+}
+
+/* 头部信息 */
+.header-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.user-avatar {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.user-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.user-details h2 {
+ margin: 0 0 5px 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: #333;
+}
+
+.user-details p {
+ margin: 0;
+ font-size: 14px;
+ color: #666;
+}
+
+.header-actions {
+ display: flex;
+ gap: 15px;
+}
+
+.header-actions i {
+ font-size: 20px;
+ color: #666;
+ cursor: pointer;
+}
+
+/* 订单操作 */
+.order-actions {
+ display: flex;
+ justify-content: space-around;
+ padding: 20px 10px;
+}
+
+.order-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.order-item:hover {
+ transform: translateY(-2px);
+}
+
+.order-icon {
+ width: 40px;
+ height: 40px;
+ background-color: #f8f8f8;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.order-icon i {
+ font-size: 18px;
+ color: #ff6900;
+}
+
+.order-item span {
+ font-size: 12px;
+ color: #666;
+ text-align: center;
+}
+
+/* 服务列表 */
+.service-list,
+.tool-list {
+ padding: 0;
+}
+
+.service-item,
+.tool-item,
+.setting-item {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ border-bottom: 1px solid #f5f5f5;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.service-item:hover,
+.tool-item:hover,
+.setting-item:hover {
+ background-color: #f8f8f8;
+}
+
+.service-item:last-child,
+.tool-item:last-child {
+ border-bottom: none;
+}
+
+.service-icon,
+.tool-icon,
+.setting-icon {
+ width: 40px;
+ height: 40px;
+ background-color: #f8f8f8;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 15px;
+}
+
+.service-icon i,
+.tool-icon i,
+.setting-icon i {
+ font-size: 18px;
+ color: #ff6900;
+}
+
+.service-info,
+.tool-info,
+.setting-info {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.service-info span,
+.tool-info span,
+.setting-info span {
+ font-size: 16px;
+ color: #333;
+}
+
+.service-info i,
+.tool-info i,
+.setting-info i {
+ font-size: 14px;
+ color: #ccc;
+}
+
+/* 通用区块样式 */
+.section {
+ margin: 20px;
+ background-color: #fff;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px;
+ border-bottom: 1px solid #f5f5f5;
+}
+
+.section-header h3 {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin: 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 414px) {
+ .section {
+ margin: 15px;
+ }
+}
\ No newline at end of file
diff --git a/styles/settings.css b/styles/settings.css
new file mode 100644
index 0000000..31deebb
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/smart.css b/styles/smart.css
new file mode 100644
index 0000000..c96a159
--- /dev/null
+++ b/styles/smart.css
@@ -0,0 +1,416 @@
+/* 智能场景页面专用样式 */
+
+/* 智能场景页面样式 */
+.smart-tabs {
+ display: flex;
+ background: white;
+ border-bottom: 1px solid #f0f0f0;
+ margin-bottom: 20px;
+}
+
+.smart-tab {
+ flex: 1;
+ text-align: center;
+ padding: 15px;
+ color: #666;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: all 0.3s ease;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.smart-tab.active {
+ color: #ff6900;
+ border-bottom-color: #ff6900;
+}
+
+.smart-content {
+ padding: 0 20px;
+}
+
+/* 场景列表 */
+.scene-list {
+ padding: 0;
+}
+
+/* 场景项目 */
+.scene-item {
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 15px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+ cursor: pointer;
+ transition: transform 0.2s;
+ animation: fadeIn 0.3s ease-out;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.scene-item:hover {
+ transform: translateY(-2px);
+}
+
+.scene-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 16px;
+}
+
+.scene-icon.blue {
+ background: #007AFF;
+}
+
+.scene-icon.green {
+ background: #34C759;
+}
+
+.scene-icon.purple {
+ background: #AF52DE;
+}
+
+.scene-icon.orange {
+ background: #FF9500;
+}
+
+.scene-icon.yellow {
+ background: #FFCC02;
+}
+
+.scene-icon.dark-purple {
+ background: #5856D6;
+}
+
+.scene-icon.blue-light {
+ background: #32D74B;
+}
+
+.scene-info {
+ flex: 1;
+}
+
+.scene-name {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+}
+
+.scene-desc {
+ font-size: 14px;
+ color: #666;
+}
+
+.scene-execute-btn {
+ background: #f8f8f8;
+ border: none;
+ border-radius: 16px;
+ padding: 8px 16px;
+ font-size: 14px;
+ color: #666;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.scene-execute-btn:hover {
+ background: #e8e8e8;
+}
+
+.scene-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.scene-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.scene-status {
+ font-size: 12px;
+ color: #999;
+}
+
+.scene-description {
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 15px;
+ line-height: 1.5;
+}
+
+.scene-devices {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.device-tag {
+ background-color: #f8f8f8;
+ color: #666;
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+}
+
+/* 自动化相关样式 */
+.automation-list {
+ padding: 0 20px;
+}
+
+.automation-item {
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.automation-item:hover {
+ transform: translateY(-2px);
+}
+
+.automation-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: #4CAF50;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ color: white;
+}
+
+.automation-icon.gray {
+ background: #999;
+}
+
+.automation-arrow {
+ font-size: 10px;
+ color: #999;
+}
+
+.automation-notification {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #FF5722;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ color: white;
+}
+
+.automation-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.automation-name {
+ font-size: 14px;
+ color: #333;
+ margin-bottom: 2px;
+ line-height: 1.3;
+}
+
+.automation-count {
+ font-size: 12px;
+ color: #999;
+}
+
+.automation-toggle {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+}
+
+/* 自动化页面的切换开关样式 */
+.automation-toggle .toggle-switch {
+ width: 44px;
+ height: 24px;
+ appearance: none;
+ background: #ddd;
+ border-radius: 12px;
+ position: relative;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ outline: none;
+}
+
+.automation-toggle .toggle-switch:checked {
+ background: #4CAF50;
+}
+
+.automation-toggle .toggle-switch:before {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: white;
+ top: 2px;
+ left: 2px;
+ transition: transform 0.3s ease;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.automation-toggle .toggle-switch:checked:before {
+ transform: translateX(20px);
+}
+
+/* 添加按钮 */
+.add-scene-btn {
+ background-color: #ff6900;
+ color: white;
+ border: none;
+ border-radius: 12px;
+ padding: 15px;
+ width: 100%;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ margin-top: 20px;
+}
+
+.add-scene-btn:hover {
+ background-color: #e55a00;
+}
+
+.add-scene-btn i {
+ margin-right: 8px;
+}
+
+/* 过滤器部分 */
+.filter-section {
+ padding: 20px 0;
+}
+
+.filter-dropdown {
+ background: white;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ padding: 12px 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ font-size: 16px;
+ color: #333;
+}
+
+.filter-dropdown i {
+ color: #999;
+ font-size: 14px;
+}
+
+/* 控制部分 */
+.control-section {
+ margin-bottom: 30px;
+}
+
+.section-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 15px;
+ padding: 0 20px;
+}
+
+.control-item {
+ background: white;
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 15px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.control-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 16px;
+}
+
+.control-icon.purple {
+ background: #AF52DE;
+}
+
+.control-info {
+ flex: 1;
+}
+
+.control-name {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+}
+
+.control-count {
+ font-size: 14px;
+ color: #666;
+}
+
+.control-btn {
+ background: #f8f8f8;
+ border: none;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 14px;
+ color: #666;
+ transition: background-color 0.2s;
+}
+
+.control-btn:hover {
+ background: #e8e8e8;
+}
+
+/* 自动化部分 */
+.automation-section {
+ margin-bottom: 30px;
+}
+
+.automation-left {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+/* 空状态文本 */
+.empty-text {
+ font-size: 16px;
+ color: #999;
+ text-align: center;
+ padding: 40px 0;
+}
\ No newline at end of file