我来为您制作一个现代化的家电分类页面，包含完整的分类导航、产品展示和交互功能。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">家电分类 - 智慧生活</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.category-card {
transition: all 0.3s ease;
}
.category-card:hover {
transform: translateY(-5px);
}
.product-card {
transition: all 0.3s ease;
}
.product-card:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<i class="fas fa-home text-blue-600 text-2xl mr-3"></i>
<span class="text-xl font-bold text-gray-800">智慧家电</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-blue-600 transition">首页</a>
<a href="#" class="text-blue-600 font-semibold">家电分类</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition">品牌专区</a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition">优惠活动</a>
</div>
<div class="flex items-center space-x-4">
<i class="fas fa-search text-gray-600 cursor-pointer hover:text-blue-600"></i>
<i class="fas fa-shopping-cart text-gray-600 cursor-pointer hover:text-blue-600"></i>
<i class="fas fa-user text-gray-600 cursor-pointer hover:text-blue-600"></i>
</div>
</div>
</div>
</nav>
<!-- 主要内容 -->
<main class="container mx-auto px-4 py-8">
<!-- 页面标题 -->
<div class="text-center mb-10">
<h1 class="text-4xl font-bold text-gray-800 mb-4">家电分类</h1>
<p class="text-gray-600">探索各类智能家居产品，打造品质生活</p>
</div>
<!-- 分类导航 -->
<section class="mb-12">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('all')">
<i class="fas fa-th-large text-4xl text-blue-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">全部</h3>
</div>
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('kitchen')">
<i class="fas fa-blender text-4xl text-green-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">厨房电器</h3>
</div>
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('laundry')">
<i class="fas fa-tshirt text-4xl text-purple-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">洗衣机</h3>
</div>
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('air')">
<i class="fas fa-wind text-4xl text-cyan-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">空调</h3>
</div>
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('tv')">
<i class="fas fa-tv text-4xl text-red-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">电视</h3>
</div>
<div class="category-card bg-white rounded-lg p-6 text-center cursor-pointer hover:shadow-lg" onclick="filterProducts('small')">
<i class="fas fa-plug text-4xl text-orange-600 mb-3"></i>
<h3 class="font-semibold text-gray-800">小家电</h3>
</div>
</div>
</section>
<!-- 筛选和排序 -->
<section class="mb-6 flex flex-wrap justify-between items-center">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<span class="text-gray-600">排序方式：</span>
<select class="border rounded px-3 py-1 focus:outline-none focus:border-blue-500">
<option>默认排序</option>
<option>价格从低到高</option>
<option>价格从高到低</option>
<option>销量优先</option>
<option>最新上架</option>
</select>
</div>
<div class="flex items-center space-x-2">
<button class="p-2 border rounded hover:bg-gray-100">
<i class="fas fa-th-large"></i>
</button>
<button class="p-2 border rounded hover:bg-gray-100">
<i class="fas fa-list"></i>
</button>
</div>
</section>
<!-- 产品展示区 -->
<section id="products-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 产品卡片将通过JavaScript动态生成 -->
</section>
<!-- 加载更多按钮 -->
<div class="text-center mt-12">
<button onclick="loadMoreProducts()" class="bg-blue-600 text-white px-8 py-3 rounded-full hover:bg-blue-700 transition transform hover:scale-105">
加载更多产品
</button>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white mt-16 py-8">
<div class="container mx-auto px-4 text-center">
<p>© 2025 智慧家电. All rights reserved.</p>
</div>
</footer>
<script>
// 产品数据
const products = [
{ id: 1, name: "智能冰箱", category: "kitchen", price: 3999, image: "https://picsum.photos/seed/fridge1/300/300", brand: "海尔", rating: 4.5 },
{ id: 2, name: "微波炉", category: "kitchen", price: 599, image: "https://picsum.photos/seed/microwave1/300/300", brand: "美的", rating: 4.2 },
{ id: 3, name: "滚筒洗衣机", category: "laundry", price: 2499, image: "https://picsum.photos/seed/washer1/300/300", brand: "西门子", rating: 4.8 },
{ id: 4, name: "空调", category: "air", price: 3599, image: "https://picsum.photos/seed/ac1/300/300", brand: "格力", rating: 4.6 },
{ id: 5, name: "4K智能电视", category: "tv", price: 4999, image: "https://picsum.photos/seed/tv1/300/300", brand: "索尼", rating: 4.9 },
{ id: 6, name: "空气净化器", category: "small", price: 1299, image: "https://picsum.photos/seed/purifier1/300/300", brand: "小米", rating: 4.3 },
{ id: 7, name: "洗碗机", category: "kitchen", price: 2899, image: "https://picsum.photos/seed/dishwasher1/300/300", brand: "方太", rating: 4.7 },
{ id: 8, name: "干衣机", category: "laundry", price: 1999, image: "https://picsum.photos/seed/dryer1/300/300", brand: "松下", rating: 4.4 },
{ id: 9, name: "中央空调", category: "air", price: 8999, image: "https://picsum.photos/seed/ac2/300/300", brand: "大金", rating: 4.8 },
{ id: 10, name: "OLED电视", category: "tv", price: 8999, image: "https://picsum.photos/seed/tv2/300/300", brand: "LG", rating: 4.7 },
{ id: 11, name: "电饭煲", category: "small", price: 399, image: "https://picsum.photos/seed/cooker1/300/300", brand: "苏泊尔", rating: 4.5 },
{ id: 12, name: "榨汁机", category: "small", price: 299, image: "https://picsum.photos/seed/juicer1/300/300", brand: "九阳", rating: 4.1 }
];
let currentFilter = 'all';
let displayedProducts = 8;
// 生成星级评分HTML
function generateStars(rating) {
let stars = '';
for (let i = 1; i <= 5; i++) {
if (i <= rating) {
stars += '<i class="fas fa-star text-yellow-400"></i>';
} else if (i - 0.5 <= rating) {
stars += '<i class="fas fa-star-half-alt text-yellow-400"></i>';
} else {
stars += '<i class="far fa-star text-yellow-400"></i>';
}
}
return stars;
}
// 渲染产品
function renderProducts() {
const container = document.getElementById('products-container');
container.innerHTML = '';
const filteredProducts = currentFilter === 'all'
? products
: products.filter(p => p.category === currentFilter);
const productsToShow = filteredProducts.slice(0, displayedProducts);
productsToShow.forEach((product, index) => {
const productCard = document.createElement('div');
productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md cursor-pointer fade-in';
productCard.style.animationDelay = `${index * 0.1}s`;
productCard.innerHTML = `
<div class="relative">
<img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
<span class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded text-sm">热销</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-800 mb-2">${product.name}</h3>
<p class="text-sm text-gray-600 mb-2">${product.brand}</p>
<div class="flex items-center mb-2">
${generateStars(product.rating)}
<span class="text-sm text-gray-600 ml-2">(${product.rating})</span>
</div>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-600">¥${product.price}</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
加入购物车
</button>
</div>
</div>
`;
container.appendChild(productCard);
});
}
// 筛选产品
function filterProducts(category) {
currentFilter = category;
displayedProducts = 8;
renderProducts();
// 更新分类卡片的选中状态
document.querySelectorAll('.category-card').forEach(card => {
card.classList.remove('ring-2', 'ring-blue-600');
});
event.currentTarget.classList.add('ring-2', 'ring-blue-600');
}
// 加载更多产品
function loadMoreProducts() {
displayedProducts += 4;
renderProducts();
// 如果已经显示所有产品，隐藏按钮
const filteredProducts = currentFilter === 'all'
? products
: products.filter(p => p.category === currentFilter);
if (displayedProducts >= filteredProducts.length) {
event.target.style.display = 'none';
}
}
// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
renderProducts();
});
</script>
</body>
</html>
这个家电分类页面包含了以下功能特点：
- 响应式设计 - 适配各种屏幕尺寸
- 分类导航 - 点击不同分类可筛选对应产品
- 产品展示 - 网格布局展示产品卡片，包含图片、名称、品牌、评分和价格
- 交互效果 - 悬停动画、淡入效果、选中状态
- 筛选排序 - 提供排序方式和视图切换选项
- 加载更多 - 动态加载更多产品
- 现代化UI - 使用Tailwind CSS打造专业美观的界面
页面功能完整，可以直接使用，您可以根据实际需求调整产品数据、样式和功能。
（图片来源网络，侵删）
