feat(products): add all-products page with styling and navigation
This commit is contained in:
shenghuo2
212
all-products.html
Normal file
212
all-products.html
Normal 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>
|
||||
Reference in New Issue
Block a user