254 lines
11 KiB
HTML
254 lines
11 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/scene.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="scene-page">
|
|
<!-- 顶部导航 -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<i class="fas fa-arrow-left" onclick="history.back()"></i>
|
|
<span class="page-title">智能推荐</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<span class="tab-item active">智能推荐</span>
|
|
<span class="tab-item">语音通知</span>
|
|
<span class="tab-item">智能清洁</span>
|
|
<span class="tab-item">智能控制</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要场景卡片 -->
|
|
<div class="main-scene-card">
|
|
<div class="scene-background">
|
|
<div class="scene-content">
|
|
<div class="scene-devices">
|
|
<!-- 空气净化器 -->
|
|
<div class="device-item air-purifier">
|
|
<i class="fas fa-wind"></i>
|
|
<span class="device-label">空气净化器</span>
|
|
</div>
|
|
<!-- 音箱 -->
|
|
<div class="device-item speaker">
|
|
<i class="fas fa-volume-up"></i>
|
|
<span class="device-label">音箱</span>
|
|
</div>
|
|
</div>
|
|
<div class="scene-info">
|
|
<h2>欢迎回家</h2>
|
|
<p>有人为你的生活喝彩</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 产品推荐卡片 -->
|
|
<div class="recommendation-cards">
|
|
<!-- 洗衣监测 -->
|
|
<div class="recommendation-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-tshirt"></i>
|
|
</div>
|
|
<h3>洗衣监测</h3>
|
|
<p class="card-subtitle">洗涤脱水 全程可见</p>
|
|
</div>
|
|
<div class="product-grid">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米水浸卫士</span>
|
|
<span class="product-price">￥59起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">滚筒洗衣机</span>
|
|
<span class="product-price">￥1999起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">智能摄像机</span>
|
|
<span class="product-price">￥179起</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 一键起灯 -->
|
|
<div class="recommendation-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<h3>一键起灯</h3>
|
|
<p class="card-subtitle">开灯开窗 活力晨醒</p>
|
|
</div>
|
|
<div class="product-grid">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米台灯Pro</span>
|
|
<span class="product-price">￥199起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米智能灯泡</span>
|
|
<span class="product-price">￥19起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">米家吸顶灯</span>
|
|
<span class="product-price">￥349起</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轻松家务 -->
|
|
<div class="recommendation-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-broom"></i>
|
|
</div>
|
|
<h3>轻松家务</h3>
|
|
<p class="card-subtitle">智能清洁 省心省力</p>
|
|
</div>
|
|
<div class="product-grid">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">扫地机器人</span>
|
|
<span class="product-price">￥2999起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-wind"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米空气净化器</span>
|
|
<span class="product-price">￥799起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-tv"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米电视机</span>
|
|
<span class="product-price">￥1499起</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 护眼开灯 -->
|
|
<div class="recommendation-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-eye"></i>
|
|
</div>
|
|
<h3>护眼开灯</h3>
|
|
<p class="card-subtitle">智能护眼 舒适阅读</p>
|
|
</div>
|
|
<div class="product-grid">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-microphone"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小爱音箱Pro</span>
|
|
<span class="product-price">￥299起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">米家智能灯</span>
|
|
<span class="product-price">￥99起</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<i class="fas fa-tablet"></i>
|
|
</div>
|
|
<div class="product-info">
|
|
<span class="product-name">小米平板5</span>
|
|
<span class="product-price">￥1899起</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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" onclick="location.href='product.html'">
|
|
<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>
|
|
<script>
|
|
// 标签切换功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabItems = document.querySelectorAll('.tab-item');
|
|
|
|
tabItems.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
tabItems.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |