128 lines
5.7 KiB
HTML
128 lines
5.7 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-encyclopedia.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-encyclopedia-page">
|
|
<!-- 头部导航 -->
|
|
<header class="page-header">
|
|
<div class="header-content">
|
|
<button class="back-btn" onclick="history.back()">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
<h1 class="page-title">产品百科</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 搜索栏 -->
|
|
<div class="search-section">
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" placeholder="请输入产品名称" class="search-input">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分类导航 -->
|
|
<div class="category-nav">
|
|
<div class="category-item active">
|
|
<div class="category-icon">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<span>全屋智能</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon">
|
|
<i class="fas fa-desktop"></i>
|
|
</div>
|
|
<span>网关攻略</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon">
|
|
<i class="fas fa-server"></i>
|
|
</div>
|
|
<span>蓝牙连接</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon">
|
|
<i class="fas fa-th"></i>
|
|
</div>
|
|
<span>功能更新</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新上线产品 -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>新上线</h2>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<div class="product-list">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Crect width='80' height='120' fill='%23333' rx='8'/%3E%3Crect x='10' y='20' width='60' height='80' fill='%23555' rx='4'/%3E%3Ccircle cx='40' cy='110' r='3' fill='%23777'/%3E%3C/svg%3E" alt="米家冰箱">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>米家冰箱 对开门501L 墨羽岩</h3>
|
|
<p class="product-brand">小米出品</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Crect width='100' height='60' fill='%23f5f5f5' rx='8'/%3E%3Crect x='10' y='15' width='80' height='30' fill='%23ddd' rx='4'/%3E%3Ccircle cx='20' cy='30' r='5' fill='%23666'/%3E%3Ctext x='50' y='35' text-anchor='middle' font-size='8' fill='%23666'%3E画法几何%3C/text%3E%3C/svg%3E" alt="画法几何智能鱼缸">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>画法几何智能鱼缸 M1</h3>
|
|
<p class="product-brand">画法几何</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 清洁电器 -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>清洁电器</h2>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<div class="product-list">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23333'/%3E%3Ccircle cx='40' cy='40' r='25' fill='%23555'/%3E%3Ccircle cx='40' cy='40' r='15' fill='%23777'/%3E%3Ctext x='40' y='45' text-anchor='middle' font-size='8' fill='white'%3E云米%3C/text%3E%3C/svg%3E" alt="云米洗烘一体机">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>云米洗烘一体机 (10kg语音版)</h3>
|
|
<p class="product-brand">云米</p>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='35' fill='%23444'/%3E%3Ccircle cx='40' cy='40' r='25' fill='%23666'/%3E%3Ccircle cx='40' cy='40' r='15' fill='%23888'/%3E%3Ctext x='40' y='45' text-anchor='middle' font-size='8' fill='white'%3E云米%3C/text%3E%3C/svg%3E" alt="云米洗衣机">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>云米洗衣机 (9kg/10kg语音版)</h3>
|
|
<p class="product-brand">云米</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 安防 -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>安防</h2>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
</body>
|
|
</html> |