From 0568cd5b551a6603a501366ab41d828638e0a6c1 Mon Sep 17 00:00:00 2001 From: shenghuo2 <1308357113@qq.com> Date: Sat, 21 Jun 2025 10:06:03 +0800 Subject: [PATCH] feat: add product encyclopedia and whole house smart pages --- product-encyclopedia.html | 128 +++++++++++ profile.html | 14 +- styles/product-encyclopedia.css | 309 ++++++++++++++++++++++++++ styles/whole-house-smart.css | 376 ++++++++++++++++++++++++++++++++ whole-house-smart.html | 124 +++++++++++ 5 files changed, 944 insertions(+), 7 deletions(-) create mode 100644 product-encyclopedia.html create mode 100644 styles/product-encyclopedia.css create mode 100644 styles/whole-house-smart.css create mode 100644 whole-house-smart.html diff --git a/product-encyclopedia.html b/product-encyclopedia.html new file mode 100644 index 0000000..a8b984d --- /dev/null +++ b/product-encyclopedia.html @@ -0,0 +1,128 @@ + + + + + + 产品百科 - 米家智能家居 + + + + + +
+ +
+
+ +

产品百科

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ 全屋智能 +
+
+
+ +
+ 网关攻略 +
+
+
+ +
+ 蓝牙连接 +
+
+
+ +
+ 功能更新 +
+
+ + +
+
+

新上线

+ +
+
+
+
+ 米家冰箱 +
+
+

米家冰箱 对开门501L 墨羽岩

+

小米出品

+
+
+
+
+ 画法几何智能鱼缸 +
+
+

画法几何智能鱼缸 M1

+

画法几何

+
+
+
+
+ + +
+
+

清洁电器

+ +
+
+
+
+ 云米洗烘一体机 +
+
+

云米洗烘一体机 (10kg语音版)

+

云米

+
+
+
+
+ 云米洗衣机 +
+
+

云米洗衣机 (9kg/10kg语音版)

+

云米

+
+
+
+
+ + +
+
+

安防

+ +
+
+ + +
+ + + + \ No newline at end of file diff --git a/profile.html b/profile.html index 1b2581f..56dbf13 100644 --- a/profile.html +++ b/profile.html @@ -43,18 +43,18 @@ 米家众测 -
+
产品百科
-
-
- -
- 全屋智能 -
+
+
+ +
+ 全屋智能 +
diff --git a/styles/product-encyclopedia.css b/styles/product-encyclopedia.css new file mode 100644 index 0000000..51ed520 --- /dev/null +++ b/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); } +} \ No newline at end of file diff --git a/styles/whole-house-smart.css b/styles/whole-house-smart.css new file mode 100644 index 0000000..3d37d86 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/whole-house-smart.html b/whole-house-smart.html new file mode 100644 index 0000000..4508f05 --- /dev/null +++ b/whole-house-smart.html @@ -0,0 +1,124 @@ + + + + + + 全屋智能 - 米家智能家居 + + + + + +
+ +
+
+ +

全屋智能

+ +
+
+ + +
+
+
+
+ +
+ 家居中枢 +
+
+
+ +
+ 智能照明 +
+
+
+ +
+ 智能安防 +
+
+
+ +
+ 智能温控 +
+
+
+ +
+ 智能窗帘 +
+
+
+ + +
+
+

1V1 定制服务

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

自己动手，搭建全屋智能

+
+
+
+ 智能开关 +
+
+

智能开关、智能灯如何选择？

+ +
+
+
+
+ 小米全屋智能指南 +
+
+

小米全屋智能指南

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

全屋智能入门套餐

+

必备6大单品

+
+
+ 全屋智能套餐 +
+
+
+
+ + + + \ No newline at end of file