Files
mi-home-web/product.html

118 lines
4.4 KiB
HTML

<!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/product.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="product-page">
<header class="product-header">
<div class="header-title">已接入米家</div>
</header>
<!-- 搜索框 -->
<div class="search-section">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索更多智能产品">
</div>
</div>
<!-- 米家众测推广 -->
<div class="promo-section">
<div class="promo-card">
<div class="promo-content">
<div class="promo-badge">米家众测</div>
<div class="promo-title">小米室外摄像机 4C</div>
<div class="promo-subtitle">
<span class="promo-tag">免费抽</span>
<span class="promo-count">16台</span>
</div>
</div>
<div class="promo-image">
<div class="camera-icon">
<i class="fas fa-video"></i>
</div>
</div>
</div>
</div>
<!-- 30天激活榜 -->
<div class="ranking-section">
<div class="ranking-header">
<h3>30天激活榜</h3>
</div>
<div class="ranking-list">
<div class="ranking-item">
<div class="ranking-number">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="ranking-item">
<div class="ranking-number">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="ranking-item">
<div class="ranking-number">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>
<div class="view-all" onclick="location.href='all-products.html'">
<span>查看全部榜单</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-nav">
<div class="nav-item" onclick="location.href='index.html'">
<i class="fas fa-home"></i>
<span>米家</span>
</div>
<div class="nav-item" onclick="location.href='smart.html'">
<i class="fas fa-cube"></i>
<span>智能</span>
</div>
<div class="nav-item active">
<i class="fas fa-star"></i>
<span>产品</span>
</div>
<div class="nav-item" onclick="location.href='mall.html'">
<i class="fas fa-shopping-bag"></i>
<span>商城</span>
</div>
<div class="nav-item" onclick="location.href='profile.html'">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
</div>
<script src="scripts/main.js"></script>
</body>
</html>