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>
|
||||
@ -82,8 +82,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-all">
|
||||
<div class="view-all" onclick="location.href='all-products.html'">
|
||||
<span>查看全部榜单</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
344
styles/all-products.css
Normal file
344
styles/all-products.css
Normal file
@ -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));
|
||||
}
|
||||
Reference in New Issue
Block a user