170 lines
6.0 KiB
HTML
170 lines
6.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/home.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-plug"></i>
|
|
</div>
|
|
<div class="device-name">小米智能插座</div>
|
|
<div class="device-status off">已关闭</div>
|
|
</div>
|
|
|
|
<!-- 小米台灯 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-lightbulb"></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-snowflake"></i>
|
|
</div>
|
|
<div class="device-name">空调</div>
|
|
<div class="device-status off">已关闭</div>
|
|
</div>
|
|
|
|
<!-- 小爱音箱 -->
|
|
<div class="device-card">
|
|
<div class="device-icon">
|
|
<i class="fas fa-volume-up"></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-robot"></i>
|
|
</div>
|
|
<div class="device-name">扫地机器人</div>
|
|
<div class="device-status off">待机中</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 传感器数据 -->
|
|
<div class="sensor-grid">
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<i class="fas fa-thermometer-half"></i>
|
|
</div>
|
|
<div class="sensor-data">
|
|
<span class="sensor-value" id="temperature">23°C</span>
|
|
<span class="sensor-label">温度</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<i class="fas fa-tint"></i>
|
|
</div>
|
|
<div class="sensor-data">
|
|
<span class="sensor-value" id="humidity">65%</span>
|
|
<span class="sensor-label">湿度</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<i class="fas fa-wind"></i>
|
|
</div>
|
|
<div class="sensor-data">
|
|
<span class="sensor-value" id="air-quality">良好</span>
|
|
<span class="sensor-label">空气质量</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sensor-card">
|
|
<div class="sensor-icon">
|
|
<i class="fas fa-sun"></i>
|
|
</div>
|
|
<div class="sensor-data">
|
|
<span class="sensor-value" id="light">450 lux</span>
|
|
<span class="sensor-label">光照</span>
|
|
</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> |