175 lines
7.0 KiB
HTML
175 lines
7.0 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/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> |