296 lines
12 KiB
HTML
296 lines
12 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/main.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="smart-page">
|
|
<!-- 顶部导航 -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<span class="home-name">shenghuo2的家</span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
<div class="header-right">
|
|
<i class="fas fa-bars"></i>
|
|
<i class="fas fa-plus-circle"></i>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 智能场景标签页 -->
|
|
<div class="smart-tabs">
|
|
<div class="smart-tab active" data-tab="recommended">推荐</div>
|
|
<div class="smart-tab" data-tab="custom">自定义</div>
|
|
</div>
|
|
|
|
<!-- 推荐场景内容 -->
|
|
<div class="smart-content" id="recommended-content">
|
|
<!-- 未开启提示 -->
|
|
<div class="empty-state">
|
|
<span class="empty-text">未开启</span>
|
|
</div>
|
|
|
|
<!-- 场景列表 -->
|
|
<div class="scene-list">
|
|
<!-- 离家场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon blue">
|
|
<i class="fas fa-door-open"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">离家</div>
|
|
<div class="scene-desc">关灯，开安防，开始清扫</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('离家')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 回家场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon yellow">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">回家</div>
|
|
<div class="scene-desc">开灯，开空调，关闭窗帘</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('回家')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 晚安场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon purple">
|
|
<i class="fas fa-moon"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">晚安</div>
|
|
<div class="scene-desc">关灯，关电器，安心入睡</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('晚安')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 起床场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon orange">
|
|
<i class="fas fa-sun"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">起床</div>
|
|
<div class="scene-desc">开灯，开窗帘，活力晨醒</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('起床')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 夜间勿扰场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon dark-purple">
|
|
<i class="fas fa-volume-mute"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">夜间勿扰</div>
|
|
<div class="scene-desc">降低媒体音，关闭声光提醒</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('夜间勿扰')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 运动场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon green">
|
|
<i class="fas fa-running"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">运动</div>
|
|
<div class="scene-desc">开空调空净，舒爽运动</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('运动')">去开启</button>
|
|
</div>
|
|
|
|
<!-- 结束运动场景 -->
|
|
<div class="scene-item">
|
|
<div class="scene-icon blue-light">
|
|
<i class="fas fa-stop"></i>
|
|
</div>
|
|
<div class="scene-info">
|
|
<div class="scene-name">结束运动</div>
|
|
<div class="scene-desc">关空调空净，省心省力</div>
|
|
</div>
|
|
<button class="scene-execute-btn" onclick="executeScene('结束运动')">去开启</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自定义场景内容 -->
|
|
<div class="smart-content hidden" id="custom-content">
|
|
<!-- 全部下拉选择 -->
|
|
<div class="filter-section">
|
|
<div class="filter-dropdown">
|
|
<span>全部</span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 批量控制 -->
|
|
<div class="control-section">
|
|
<h3 class="section-title">批量控制</h3>
|
|
|
|
<div class="control-item">
|
|
<div class="control-icon purple">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
<div class="control-info">
|
|
<div class="control-name">空调关空调</div>
|
|
<div class="control-count">0</div>
|
|
</div>
|
|
<button class="control-btn" onclick="executeControl('空调关空调')">▶</button>
|
|
</div>
|
|
|
|
<div class="control-item">
|
|
<div class="control-icon purple">
|
|
<i class="fas fa-times"></i>
|
|
</div>
|
|
<div class="control-info">
|
|
<div class="control-name">空调开空调</div>
|
|
<div class="control-count">0</div>
|
|
</div>
|
|
<button class="control-btn" onclick="executeControl('空调开空调')">▶</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自动化 -->
|
|
<div class="automation-section">
|
|
<h3 class="section-title">自动化</h3>
|
|
|
|
<div class="automation-item">
|
|
<div class="automation-left">
|
|
<div class="automation-icon">
|
|
<i class="fas fa-wifi"></i>
|
|
</div>
|
|
<div class="automation-arrow">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</div>
|
|
<div class="automation-notification">
|
|
<i class="fas fa-bell"></i>
|
|
</div>
|
|
</div>
|
|
<div class="automation-info">
|
|
<div class="automation-name">进入TP-LINK_9CC6-向手机发送通知</div>
|
|
<div class="automation-count">0</div>
|
|
</div>
|
|
<div class="automation-toggle">
|
|
<input type="checkbox" class="toggle-switch" checked>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="automation-item">
|
|
<div class="automation-left">
|
|
<div class="automation-icon">
|
|
<i class="fas fa-thermometer-half"></i>
|
|
</div>
|
|
<div class="automation-arrow">
|
|
<i class="fas fa-minus"></i>
|
|
</div>
|
|
</div>
|
|
<div class="automation-info">
|
|
<div class="automation-name">兰川温度高于28°C-空调制冷/22°C...</div>
|
|
<div class="automation-count">0</div>
|
|
</div>
|
|
<div class="automation-toggle">
|
|
<input type="checkbox" class="toggle-switch" checked>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="automation-item">
|
|
<div class="automation-left">
|
|
<div class="automation-icon gray">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
</div>
|
|
<div class="automation-info">
|
|
<div class="automation-name">19:55-投影仪电源</div>
|
|
<div class="automation-count">0</div>
|
|
</div>
|
|
<div class="automation-toggle">
|
|
<input type="checkbox" class="toggle-switch">
|
|
</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 active">
|
|
<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 smartTabs = document.querySelectorAll('.smart-tab');
|
|
const smartContents = document.querySelectorAll('.smart-content');
|
|
|
|
smartTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const targetTab = this.dataset.tab;
|
|
|
|
// 更新标签状态
|
|
smartTabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
// 切换内容
|
|
smartContents.forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
const targetContent = document.getElementById(targetTab + '-content');
|
|
if (targetContent) {
|
|
targetContent.classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 自动化开关切换
|
|
const toggleSwitches = document.querySelectorAll('.toggle-switch');
|
|
toggleSwitches.forEach(toggle => {
|
|
toggle.addEventListener('change', function() {
|
|
const automationItem = this.closest('.automation-item');
|
|
const automationName = automationItem.querySelector('.automation-name').textContent;
|
|
|
|
if (this.checked) {
|
|
showToast(`${automationName} 已启用`);
|
|
} else {
|
|
showToast(`${automationName} 已禁用`);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 执行控制功能
|
|
function executeControl(controlName) {
|
|
showToast(`正在执行 ${controlName}...`);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |