chenxing/mi-home-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat(profile): add new profile pages and styles

Browse Source
This commit is contained in:
shenghuo2
2025-06-21 23:35:30 +08:00
parent ef5eda8cf4
commit 35145dbf76
12 changed files with 2426 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
profile/hub-gateway.html Normal file
View File

@ -0,0 +1,115 @@
<!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>