From 4af6aa7941c30a03959d91325c68676567e1fbc5 Mon Sep 17 00:00:00 2001 From: shenghuo2 <1308357113@qq.com> Date: Sat, 21 Jun 2025 09:36:08 +0800 Subject: [PATCH] feat(products): add all-products page with styling and navigation --- all-products.html | 212 +++++++++++++++++++++++++ product.html | 3 +- styles/all-products.css | 344 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 558 insertions(+), 1 deletion(-) create mode 100644 all-products.html create mode 100644 styles/all-products.css diff --git a/all-products.html b/all-products.html new file mode 100644 index 0000000..6c61a3a --- /dev/null +++ b/all-products.html @@ -0,0 +1,212 @@ + + + + + + 全部产品 - 米家智能家居 + + + + + +
+
+
+ +
+
30天激活榜
+
+ +
+
+ + +
+
+
+
1
+
+
+
+
+
小米空调巨省电 1.5匹 一级 适用...
+
月激活量10万+
+
+
+ +
+
2
+
+
+
+
+
米家体脂秤 S400
+
月激活量10万+
+
+
+ +
+
3
+
+
+
+
+
小爱音箱Play
+
月激活量10万+
+
+
+ +
+
4
+
+
+
+
+
Xiaomi 智能音箱 Pro
+
月激活量10万+
+
+
+ +
+
5
+
+
+
+
+
空调 巨省电Pro 1.5匹 新一级能效
+
月激活量10万+
+
+
+ +
+
6
+
+
+
+
+
米家智能体脂秤测量仪
+
月激活量10万+
+
+
+ +
+
7
+
+
+
+
+
有品Lemesh色温灯Ultra
+
月激活量5万+
+
+
+ +
+
11
+
+
+
+
+
Xiaomi笔记本 小米Air
+
月激活量5万+
+
+
+ +
+
12
+
+
+
+
+
小米智能摄像机C700
+
月激活量5万+
+
+
+ +
+
13
+
+
+
+
+
米家空调伴侣2
+
月激活量5万+
+
+
+ +
+
14
+
+
+
+
+
米家智能温控器3
+
月激活量5万+
+
+
+ +
+
15
+
+
+
+
+
小米小爱音箱Play 增强版
+
月激活量5万+
+
+
+ +
+
16
+
+
+
+
+
小米智能摄像机 4
+
月激活量5万+
+
+
+ +
+
17
+
+
+
+
+
小米空调2匹 1.5匹 新一级...
+
月激活量5万+
+
+
+ +
+
18
+
+
+
+
+
米家音箱
+
月激活量5万+
+
+
+ +
+
19
+
+
+
+
+
Xiaomi路由器AX3000T
+
月激活量5万+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/product.html b/product.html index 14b7ec4..a57be43 100644 --- a/product.html +++ b/product.html @@ -82,8 +82,9 @@ -
+
查看全部榜单 +
diff --git a/styles/all-products.css b/styles/all-products.css new file mode 100644 index 0000000..00c3bcb --- /dev/null +++ b/styles/all-products.css @@ -0,0 +1,344 @@ +/* 全部产品页面样式 */ + +/* 页面头部 */ +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; + background-color: #fff; + border-bottom: 1px solid #eee; + position: sticky; + top: 0; + z-index: 100; +} + +.header-left, .header-right { + width: 40px; + display: flex; + justify-content: center; +} + +.header-left i, .header-right i { + font-size: 18px; + color: #333; + cursor: pointer; + padding: 8px; +} + +.header-title { + font-size: 18px; + font-weight: 600; + color: #333; + text-align: center; + flex: 1; +} + +/* 产品内容区域 */ +.products-content { + padding: 0 20px 30px; + background-color: #f5f5f5; + min-height: calc(100vh - 70px); +} + +.products-list { + background-color: #fff; + border-radius: 12px; + overflow: hidden; + margin-top: 20px; +} + +/* 产品项目 */ +.product-item { + display: flex; + align-items: center; + padding: 20px; + border-bottom: 1px solid #f5f5f5; + transition: background-color 0.2s; +} + +.product-item:last-child { + border-bottom: none; +} + +.product-item:hover { + background-color: #f8f8f8; +} + +/* 排名数字 */ +.product-rank { + width: 35px; + height: 35px; + background-color: #f5f5f5; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 600; + color: #666; + margin-right: 15px; + flex-shrink: 0; +} + +/* 前三名特殊颜色 */ +.product-item:nth-child(1) .product-rank { + background-color: #ff6900; + color: #fff; +} + +.product-item:nth-child(2) .product-rank { + background-color: #ffa500; + color: #fff; +} + +.product-item:nth-child(3) .product-rank { + background-color: #ffb84d; + color: #fff; +} + +/* 产品图片 */ +.product-image { + width: 55px; + height: 55px; + margin-right: 15px; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f8f8; + border-radius: 10px; + flex-shrink: 0; +} + +/* 产品图标样式 */ +.ac-product-icon { + width: 32px; + height: 22px; + background-color: #666; + border-radius: 4px; + position: relative; +} + +.ac-product-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 22px; + height: 2px; + background-color: #fff; +} + +.scale-icon { + width: 38px; + height: 28px; + background-color: #ddd; + border-radius: 6px; + position: relative; +} + +.scale-icon::after { + content: ''; + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 22px; + height: 1px; + background-color: #999; +} + +.speaker-icon { + width: 32px; + height: 32px; + background-color: #333; + border-radius: 50%; + position: relative; +} + +.speaker-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + border: 2px solid #fff; + border-radius: 50%; +} + +.speaker-pro-icon { + width: 35px; + height: 35px; + background-color: #444; + border-radius: 8px; + position: relative; +} + +.speaker-pro-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 18px; + height: 18px; + border: 2px solid #fff; + border-radius: 50%; +} + +.lemesh-icon { + width: 30px; + height: 30px; + background-color: #ffd700; + border-radius: 50%; + position: relative; +} + +.lemesh-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 15px; + height: 15px; + background-color: #fff; + border-radius: 50%; +} + +.xiaomi-icon { + width: 35px; + height: 25px; + background-color: #ff6900; + border-radius: 4px; + position: relative; +} + +.xiaomi-icon::after { + content: 'MI'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + font-size: 10px; + font-weight: bold; +} + +.camera-icon { + width: 32px; + height: 25px; + background-color: #555; + border-radius: 6px; + position: relative; +} + +.camera-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + border: 2px solid #fff; + border-radius: 50%; +} + +.thermostat-icon { + width: 30px; + height: 30px; + background-color: #4CAF50; + border-radius: 50%; + position: relative; +} + +.thermostat-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; + min-width: 0; +} + +.product-name { + font-size: 16px; + color: #333; + margin-bottom: 6px; + font-weight: 500; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.product-stats { + font-size: 13px; + color: #999; + font-weight: 400; +} + +/* 响应式设计 */ +@media (max-width: 480px) { + .products-content { + padding: 0 15px 30px; + } + + .product-item { + padding: 15px; + } + + .product-rank { + width: 30px; + height: 30px; + font-size: 14px; + margin-right: 12px; + } + + .product-image { + width: 50px; + height: 50px; + margin-right: 12px; + } + + .product-name { + font-size: 15px; + } + + .product-stats { + font-size: 12px; + } +} + +/* 加载动画 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.product-item { + animation: fadeIn 0.3s ease-out; +} + +.product-item:nth-child(n) { + animation-delay: calc(0.05s * var(--index, 0)); +} \ No newline at end of file