178 lines
6.3 KiB
HTML
178 lines
6.3 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="home-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-comment-dots"></i>
|
|
<i class="fas fa-plus-circle"></i>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 房间导航 -->
|
|
<nav class="room-nav">
|
|
<div class="room-tabs">
|
|
<span class="room-tab active">全屋</span>
|
|
<span class="room-tab">出租屋</span>
|
|
<span class="room-tab">十五中</span>
|
|
<span class="room-tab">客厅</span>
|
|
<span class="room-tab">卧室</span>
|
|
</div>
|
|
<i class="fas fa-bars home-menu-icon"></i>
|
|
</nav>
|
|
|
|
<!-- 空气质量 -->
|
|
<div class="air-quality">
|
|
<span>空气质量 4</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
|
|
<!-- 设备网格 -->
|
|
<div class="device-grid">
|
|
<!-- 手机红外遥控器 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
</div>
|
|
<div class="device-name">手机红外遥控器</div>
|
|
<div class="device-status">手机 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 万能遥控器 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-satellite-dish"></i>
|
|
</div>
|
|
<div class="device-name">万能遥控器</div>
|
|
<div class="device-status">设备离线 | 长期离线</div>
|
|
</div>
|
|
|
|
<!-- 空调 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<div class="ac-icon"></div>
|
|
</div>
|
|
<div class="device-name">空调</div>
|
|
<div class="device-status">卧室 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 客厅空调 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<div class="ac-icon"></div>
|
|
</div>
|
|
<div class="device-name">客厅空调</div>
|
|
<div class="device-status">客厅 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 盒子 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-tv"></i>
|
|
</div>
|
|
<div class="device-name">盒子</div>
|
|
<div class="device-status">客厅 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 投影仪 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-video"></i>
|
|
</div>
|
|
<div class="device-name">投影仪</div>
|
|
<div class="device-status">客厅 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 卧室空调 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<div class="ac-icon"></div>
|
|
</div>
|
|
<div class="device-name">卧室空调</div>
|
|
<div class="device-status">卧室 | 设备离线</div>
|
|
</div>
|
|
|
|
<!-- 智能插座2 蓝牙网关版 -->
|
|
<div class="device-card active">
|
|
<div class="device-icon">
|
|
<i class="fas fa-plug"></i>
|
|
</div>
|
|
<div class="device-name">智能插座2 蓝牙网关版</div>
|
|
<div class="device-status">出租屋</div>
|
|
<div class="power-button">
|
|
<i class="fas fa-power-off"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 温湿度计 -->
|
|
<div class="sensor-grid">
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<span class="temp-display">26°</span>
|
|
</div>
|
|
<div class="sensor-name">温湿度计</div>
|
|
<div class="sensor-status">客厅</div>
|
|
<div class="bluetooth-icon">
|
|
<i class="fab fa-bluetooth-b"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<span class="temp-display">26.5°</span>
|
|
<span class="humidity-display">60%</span>
|
|
</div>
|
|
<div class="sensor-name">日博士温湿度计-卫生间</div>
|
|
<div class="sensor-status">十五中 | 16.8°C 39%</div>
|
|
<div class="bluetooth-icon">
|
|
<i class="fab fa-bluetooth-b"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部导航 -->
|
|
<nav class="bottom-nav">
|
|
<div class="nav-item active">
|
|
<i class="fas fa-home"></i>
|
|
<span>米家</span>
|
|
</div>
|
|
<div class="nav-item" onclick="location.href='smart.html'">
|
|
<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>
|
|
</body>
|
|
</html> |