From 35145dbf76b22d24e29086d4f058c76a72dd0c36 Mon Sep 17 00:00:00 2001 From: shenghuo2 <1308357113@qq.com> Date: Sat, 21 Jun 2025 23:35:30 +0800 Subject: [PATCH] feat(profile): add new profile pages and styles --- .gitignore | 3 +- profile.html | 10 +- profile/device-consumables.html | 175 +++++++++++ profile/hub-gateway.html | 115 +++++++ profile/my-youpin.html | 255 ++++++++++++++++ profile/share.html | 155 ++++++++++ profile/styles/device-consumables.css | 413 ++++++++++++++++++++++++++ profile/styles/hub-gateway.css | 336 +++++++++++++++++++++ profile/styles/my-youpin.css | 256 ++++++++++++++++ profile/styles/share.css | 388 ++++++++++++++++++++++++ profile/styles/voice-settings.css | 211 +++++++++++++ profile/voice-settings.html | 115 +++++++ 12 files changed, 2426 insertions(+), 6 deletions(-) create mode 100644 profile/device-consumables.html create mode 100644 profile/hub-gateway.html create mode 100644 profile/my-youpin.html create mode 100644 profile/share.html create mode 100644 profile/styles/device-consumables.css create mode 100644 profile/styles/hub-gateway.css create mode 100644 profile/styles/my-youpin.css create mode 100644 profile/styles/share.css create mode 100644 profile/styles/voice-settings.css create mode 100644 profile/voice-settings.html diff --git a/.gitignore b/.gitignore index b3aeac9..bae4464 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -images/profile/* \ No newline at end of file +images/profile/* +.trae/rules/project_rules.md diff --git a/profile.html b/profile.html index 49098d1..1a8f1cd 100644 --- a/profile.html +++ b/profile.html @@ -76,7 +76,7 @@
-
+
@@ -86,7 +86,7 @@
-
+
@@ -96,7 +96,7 @@
-
+
@@ -106,7 +106,7 @@
-
+
@@ -129,7 +129,7 @@
-
+
diff --git a/profile/device-consumables.html b/profile/device-consumables.html new file mode 100644 index 0000000..0d7cecc --- /dev/null +++ b/profile/device-consumables.html @@ -0,0 +1,175 @@ + + + + + + 设备耗材 - 米家智能家居 + + + + + +
+ +
+
+ +

设备耗材

+
+
+ + +
+
+ 我的家庭 + +
+
+ + +
+
+ 耗材未知 (1个) +
+ +
+
+
+ 25.8 + %RH +
+
+
+

温湿度计

+

宿舍 | 未连接蓝牙网关

+
+
+ +
+
+
+
+
+
+
+
+
+
+

电池

+

状态未知

+
+
+ +
+
+
+ + +
+
+ 耗材充足 (3个) +
+ +
+
+
+
+
+
+
+
+
+

米家空气净化器 4 Lite

+

出租屋

+
+
+ +
+
+
+
+ + + + 90% +
+
+
+
+

滤芯

+

+
+
+ +
+
+ +
+
+
+ 26.5 + %RH +
+
+
+

目博士温湿度计-卫生间

+

十五中 | 设备离线

+

更新于：2025/01/25 16:02

+
+
+ +
+
+
+
+ + + + 93% +
+
+
+
+

纽扣电池

+

+
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/profile/hub-gateway.html b/profile/hub-gateway.html new file mode 100644 index 0000000..cd459d3 --- /dev/null +++ b/profile/hub-gateway.html @@ -0,0 +1,115 @@ + + + + + + 中枢与网关 - 米家智能家居 + + + + + +
+ +
+
+ +

中枢与网关

+ +
+
+ + +
+
+ shenghuo2的家 + +
+
+ + +
+
网关
+ +
+ +
+
+
+ +
+
+
+

米家智能插座2 蓝牙网关版

+

出租屋 | 0个设备

+
+
+ +
+
+ + +
+
+
+ +
+
+
+

Xiaomi 智能音箱 Pro

+

出租屋 | 0个设备

+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/profile/my-youpin.html b/profile/my-youpin.html new file mode 100644 index 0000000..1f0a894 --- /dev/null +++ b/profile/my-youpin.html @@ -0,0 +1,255 @@ + + + + + + 我的有品 - 米家智能家居 + + + + + +
+ +
+
+ +

我的有品

+
+
+ + +
+ +
+
+ +
+
+ 我的订单 +
+
+ +
+
+ + +
+
+ +
+
+ 退款/售后 +
+
+ +
+
+ + +
+
+ + 3 +
+
+ 购物车 +
+
+ +
+
+ + +
+
+ +
+
+ 我的收藏 +
+
+ +
+
+ + +
+
+ +
+
+ 收货地址 +
+
+ +
+
+
+ + +
+ + +
+ +
+
+ +
+
+ 优惠·购买码 +
+
+ +
+
+
+ + +
+ + +
+ +
+
+ +
+
+ 消息通知 +
+
+ +
+
+ + +
+
+ +
+
+ 售后服务政策 +
+
+ +
+
+ + +
+
+ +
+
+ 资质证照 +
+
+ +
+
+ + +
+
+ +
+
+ 协议规则 +
+
+ +
+
+ + +
+
+ +
+
+ 隐私设置 +
+
+ +
+
+ + +
+
+ +
+
+ 关于有品 +
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/profile/share.html b/profile/share.html new file mode 100644 index 0000000..5712dff --- /dev/null +++ b/profile/share.html @@ -0,0 +1,155 @@ + + + + + + 共享 - 米家智能家居 + + + + + +
+ +
+
+ +

共享

+
+
+ + + + + + + + +
+

当前共享

+ + + + +
+ + +
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/profile/styles/device-consumables.css b/profile/styles/device-consumables.css new file mode 100644 index 0000000..4e329c4 --- /dev/null +++ b/profile/styles/device-consumables.css @@ -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; + } +} \ No newline at end of file diff --git a/profile/styles/hub-gateway.css b/profile/styles/hub-gateway.css new file mode 100644 index 0000000..6dfacbc --- /dev/null +++ b/profile/styles/hub-gateway.css @@ -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; +} \ No newline at end of file diff --git a/profile/styles/my-youpin.css b/profile/styles/my-youpin.css new file mode 100644 index 0000000..62f404a --- /dev/null +++ b/profile/styles/my-youpin.css @@ -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; + } +} \ No newline at end of file diff --git a/profile/styles/share.css b/profile/styles/share.css new file mode 100644 index 0000000..3954ba5 --- /dev/null +++ b/profile/styles/share.css @@ -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; + } +} \ No newline at end of file diff --git a/profile/styles/voice-settings.css b/profile/styles/voice-settings.css new file mode 100644 index 0000000..f62a58b --- /dev/null +++ b/profile/styles/voice-settings.css @@ -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; + } +} \ No newline at end of file diff --git a/profile/voice-settings.html b/profile/voice-settings.html new file mode 100644 index 0000000..1b8d836 --- /dev/null +++ b/profile/voice-settings.html @@ -0,0 +1,115 @@ + + + + + + 语音设置 - 米家智能家居 + + + + + +
+ +
+
+ +

语音设置

+
+
+ + +
+
+ 小爱设置 +
+
+ + +
+
+
+

房间快捷指令设置

+
+
+ +
+
+
+ + +
+
+
+

语音别名设置

+
+
+ +
+
+
+ + +
+
+
+

家庭传声

+
+
+ +
+
+
+ + +
+
+
+

语音控制授权管理

+

选择语音可控制的设备或区域

+
+
+ +
+
+
+
+ + + + + \ No newline at end of file