feat(products): add all-products page with styling and navigation

This commit is contained in:
shenghuo2
2025-06-21 09:36:08 +08:00
parent 83e566b183
commit 4af6aa7941
3 changed files with 558 additions and 1 deletions

212
all-products.html Normal file
View File

@ -0,0 +1,212 @@
<!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/all-products.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="all-products-page">
<header class="page-header">
<div class="header-left">
<i class="fas fa-arrow-left" onclick="history.back()"></i>
</div>
<div class="header-title">30天激活榜</div>
<div class="header-right">
<i class="fas fa-search"></i>
</div>
</header>
<!-- 产品列表 -->
<div class="products-content">
<div class="products-list">
<div class="product-item">
<div class="product-rank">1</div>
<div class="product-image">
<div class="ac-product-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米空调巨省电 1.5匹 一级 适用...</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">2</div>
<div class="product-image">
<div class="scale-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家体脂秤 S400</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">3</div>
<div class="product-image">
<div class="speaker-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小爱音箱Play</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">4</div>
<div class="product-image">
<div class="speaker-pro-icon"></div>
</div>
<div class="product-info">
<div class="product-name">Xiaomi 智能音箱 Pro</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">5</div>
<div class="product-image">
<div class="ac-product-icon"></div>
</div>
<div class="product-info">
<div class="product-name">空调 巨省电Pro 1.5匹 新一级能效</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">6</div>
<div class="product-image">
<div class="scale-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家智能体脂秤测量仪</div>
<div class="product-stats">月激活量10万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">7</div>
<div class="product-image">
<div class="lemesh-icon"></div>
</div>
<div class="product-info">
<div class="product-name">有品Lemesh色温灯Ultra</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">11</div>
<div class="product-image">
<div class="xiaomi-icon"></div>
</div>
<div class="product-info">
<div class="product-name">Xiaomi笔记本 小米Air</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">12</div>
<div class="product-image">
<div class="camera-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米智能摄像机C700</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">13</div>
<div class="product-image">
<div class="thermostat-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家空调伴侣2</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">14</div>
<div class="product-image">
<div class="thermostat-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家智能温控器3</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">15</div>
<div class="product-image">
<div class="speaker-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米小爱音箱Play 增强版</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">16</div>
<div class="product-image">
<div class="camera-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米智能摄像机 4</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">17</div>
<div class="product-image">
<div class="ac-product-icon"></div>
</div>
<div class="product-info">
<div class="product-name">小米空调2匹 1.5匹 新一级...</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">18</div>
<div class="product-image">
<div class="speaker-icon"></div>
</div>
<div class="product-info">
<div class="product-name">米家音箱</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
<div class="product-item">
<div class="product-rank">19</div>
<div class="product-image">
<div class="xiaomi-icon"></div>
</div>
<div class="product-info">
<div class="product-name">Xiaomi路由器AX3000T</div>
<div class="product-stats">月激活量5万+</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 返回按钮功能
function goBack() {
history.back();
}
</script>
</body>
</html>