115 lines
4.6 KiB
HTML
115 lines
4.6 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/hub-gateway.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="hub-gateway-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>
|
|
<button class="info-btn">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 家庭选择器 -->
|
|
<div class="family-selector">
|
|
<div class="family-info">
|
|
<span class="family-name">shenghuo2的家</span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网关设备列表 -->
|
|
<div class="gateway-section">
|
|
<div class="section-title">网关</div>
|
|
|
|
<div class="gateway-list">
|
|
<!-- 米家智能插座2 蓝牙网关版 -->
|
|
<div class="gateway-item" onclick="navigateToDevice('smart-plug')">
|
|
<div class="device-icon">
|
|
<div class="icon-container plug-icon">
|
|
<i class="fas fa-plug"></i>
|
|
</div>
|
|
</div>
|
|
<div class="device-info">
|
|
<h3 class="device-name">米家智能插座2 蓝牙网关版</h3>
|
|
<p class="device-status">出租屋 | 0个设备</p>
|
|
</div>
|
|
<div class="device-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Xiaomi 智能音箱 Pro -->
|
|
<div class="gateway-item" onclick="navigateToDevice('smart-speaker')">
|
|
<div class="device-icon">
|
|
<div class="icon-container speaker-icon">
|
|
<i class="fas fa-volume-up"></i>
|
|
</div>
|
|
</div>
|
|
<div class="device-info">
|
|
<h3 class="device-name">Xiaomi 智能音箱 Pro</h3>
|
|
<p class="device-status">出租屋 | 0个设备</p>
|
|
</div>
|
|
<div class="device-action">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../scripts/main.js"></script>
|
|
<script>
|
|
// 中枢与网关页面特定的JavaScript逻辑
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 设备导航函数
|
|
window.navigateToDevice = function(deviceType) {
|
|
switch(deviceType) {
|
|
case 'smart-plug':
|
|
alert('米家智能插座2 蓝牙网关版设备详情功能开发中...');
|
|
break;
|
|
case 'smart-speaker':
|
|
alert('Xiaomi 智能音箱 Pro设备详情功能开发中...');
|
|
break;
|
|
default:
|
|
console.log('未知设备类型:', deviceType);
|
|
}
|
|
};
|
|
|
|
// 家庭选择器点击事件
|
|
const familySelector = document.querySelector('.family-selector');
|
|
familySelector.addEventListener('click', function() {
|
|
alert('家庭切换功能开发中...');
|
|
});
|
|
|
|
// 信息按钮点击事件
|
|
const infoBtn = document.querySelector('.info-btn');
|
|
infoBtn.addEventListener('click', function() {
|
|
alert('中枢与网关帮助信息功能开发中...');
|
|
});
|
|
|
|
// 网关设备项点击事件
|
|
const gatewayItems = document.querySelectorAll('.gateway-item');
|
|
gatewayItems.forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const deviceName = this.querySelector('.device-name').textContent;
|
|
console.log(`点击了设备: ${deviceName}`);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |