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

175
profile/device-consumables.html Normal file
View File

@ -0,0 +1,175 @@
<!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/device-consumables.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="device-consumables-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>
</div>
</header>
<!-- 家庭选择器 -->
<div class="family-selector">
<div class="family-dropdown">
<span class="family-name">我的家庭</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<!-- 耗材未知部分 -->
<div class="consumables-section">
<div class="section-header">
<span class="section-title">耗材未知 (1个)</span>
</div>
<div class="device-item unknown">
<div class="device-icon">
<div class="temp-humidity-icon">
<span class="temp-value">25.8</span>
<span class="humidity-value">%RH</span>
</div>
</div>
<div class="device-info">
<h3>温湿度计</h3>
<p class="device-status">宿舍 | 未连接蓝牙网关</p>
</div>
</div>
<div class="device-item unknown">
<div class="device-icon battery">
<div class="battery-icon">
<div class="battery-body">
<div class="battery-level low"></div>
</div>
<div class="battery-tip"></div>
</div>
</div>
<div class="device-info">
<h3>电池</h3>
<p class="device-status warning">状态未知</p>
</div>
<div class="device-action">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<!-- 耗材充足部分 -->
<div class="consumables-section">
<div class="section-header">
<span class="section-title">耗材充足 (3个)</span>
</div>
<div class="device-item sufficient">
<div class="device-icon">
<div class="air-purifier-icon">
<div class="purifier-body">
<div class="purifier-grid"></div>
</div>
</div>
</div>
<div class="device-info">
<h3>米家空气净化器 4 Lite</h3>
<p class="device-status">出租屋</p>
</div>
</div>
<div class="device-item sufficient">
<div class="device-icon">
<div class="filter-icon">
<div class="filter-progress">
<svg class="progress-ring" width="40" height="40">
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="10.053"/>
</svg>
<span class="progress-text">90%</span>
</div>
</div>
</div>
<div class="device-info">
<h3>滤芯</h3>
<p class="device-status"></p>
</div>
<div class="device-action">
<button class="buy-btn">购买</button>
</div>
</div>
<div class="device-item sufficient">
<div class="device-icon">
<div class="temp-humidity-icon bathroom">
<span class="temp-value">26.5</span>
<span class="humidity-value">%RH</span>
</div>
</div>
<div class="device-info">
<h3>目博士温湿度计-卫生间</h3>
<p class="device-status">十五中 | 设备离线</p>
<p class="device-update">更新于：2025/01/25 16:02</p>
</div>
</div>
<div class="device-item sufficient">
<div class="device-icon">
<div class="filter-icon">
<div class="filter-progress">
<svg class="progress-ring" width="40" height="40">
<circle class="progress-ring-circle" stroke="#4ECDC4" stroke-width="3" fill="transparent" r="16" cx="20" cy="20" stroke-dasharray="100.53" stroke-dashoffset="7.037"/>
</svg>
<span class="progress-text">93%</span>
</div>
</div>
</div>
<div class="device-info">
<h3>纽扣电池</h3>
<p class="device-status"></p>
</div>
<div class="device-action">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
</div>
<script src="../scripts/main.js"></script>
<script>
// 设备耗材页面特定的JavaScript逻辑
document.addEventListener('DOMContentLoaded', function() {
// 家庭选择器点击事件
const familySelector = document.querySelector('.family-dropdown');
familySelector.addEventListener('click', function() {
alert('家庭选择功能开发中...');
});
// 购买按钮点击事件
const buyBtns = document.querySelectorAll('.buy-btn');
buyBtns.forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
alert('跳转到购买页面...');
});
});
// 设备项点击事件
const deviceItems = document.querySelectorAll('.device-item');
deviceItems.forEach(item => {
item.addEventListener('click', function() {
const deviceName = this.querySelector('h3').textContent;
console.log(`点击了设备: ${deviceName}`);
});
});
});
</script>
</body>
</html>