124 lines
6.8 KiB
HTML
124 lines
6.8 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/whole-house-smart.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="whole-house-smart-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="category-section">
|
|
<div class="category-grid">
|
|
<div class="category-item">
|
|
<div class="category-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A08D);">
|
|
<i class="fas fa-wifi"></i>
|
|
</div>
|
|
<span>家居中枢</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon" style="background: linear-gradient(135deg, #FFD93D, #FF6B6B);">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
<span>智能照明</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<span>智能安防</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
|
|
<i class="fas fa-thermometer-half"></i>
|
|
</div>
|
|
<span>智能温控</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
|
|
<i class="fas fa-window-maximize"></i>
|
|
</div>
|
|
<span>智能窗帘</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1V1定制服务 -->
|
|
<div class="service-section">
|
|
<div class="service-card">
|
|
<h2>1V1 定制服务</h2>
|
|
<div class="service-content">
|
|
<div class="service-banner">
|
|
<div class="banner-text">
|
|
<h3>小米全屋智能定制</h3>
|
|
<p>设计·安装·调试，一站式服务</p>
|
|
<button class="detail-btn">了解详情</button>
|
|
</div>
|
|
<div class="banner-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23FFD93D' rx='8'/%3E%3Crect x='20' y='20' width='80' height='40' fill='%23FFA500' rx='4'/%3E%3Ccircle cx='100' cy='20' r='8' fill='%23FF6B6B'/%3E%3Ctext x='60' y='45' text-anchor='middle' font-size='10' fill='white'%3E智能家居%3C/text%3E%3C/svg%3E" alt="智能家居定制">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自己动手搭建 -->
|
|
<div class="diy-section">
|
|
<div class="diy-card">
|
|
<h2>自己动手，搭建全屋智能</h2>
|
|
<div class="diy-content">
|
|
<div class="diy-item">
|
|
<div class="diy-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23f5f5f5' rx='8'/%3E%3Crect x='20' y='20' width='80' height='40' fill='%23ddd' rx='4'/%3E%3Ccircle cx='30' cy='30' r='5' fill='%23666'/%3E%3Ccircle cx='90' cy='30' r='5' fill='%23666'/%3E%3Ctext x='60' y='45' text-anchor='middle' font-size='8' fill='%23666'%3E智能开关%3C/text%3E%3C/svg%3E" alt="智能开关">
|
|
</div>
|
|
<div class="diy-info">
|
|
<p>智能开关、智能灯如何选择？</p>
|
|
<button class="guide-btn">立即查看</button>
|
|
</div>
|
|
</div>
|
|
<div class="diy-item">
|
|
<div class="diy-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23e8f5e8' rx='8'/%3E%3Crect x='30' y='25' width='60' height='30' fill='%23a8d8a8' rx='4'/%3E%3Ccircle cx='45' cy='40' r='3' fill='%234a7c59'/%3E%3Ccircle cx='75' cy='40' r='3' fill='%234a7c59'/%3E%3Ctext x='60' y='70' text-anchor='middle' font-size='8' fill='%23666'%3E智能指南%3C/text%3E%3C/svg%3E" alt="小米全屋智能指南">
|
|
</div>
|
|
<div class="diy-info">
|
|
<p>小米全屋智能指南</p>
|
|
<button class="guide-btn">立即查看</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 全屋智能入门套餐 -->
|
|
<div class="package-section">
|
|
<div class="package-card">
|
|
<div class="package-header">
|
|
<h2>全屋智能入门套餐</h2>
|
|
<p>必备6大单品</p>
|
|
</div>
|
|
<div class="package-image">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100'%3E%3Crect width='150' height='100' fill='%23f8f9fa' rx='8'/%3E%3Crect x='20' y='20' width='25' height='15' fill='%23333' rx='2'/%3E%3Crect x='55' y='20' width='25' height='15' fill='%23666' rx='2'/%3E%3Crect x='90' y='20' width='25' height='15' fill='%23999' rx='2'/%3E%3Crect x='20' y='45' width='25' height='15' fill='%23333' rx='2'/%3E%3Crect x='55' y='45' width='25' height='15' fill='%23666' rx='2'/%3E%3Crect x='90' y='45' width='25' height='15' fill='%23999' rx='2'/%3E%3Ctext x='75' y='85' text-anchor='middle' font-size='10' fill='%23666'%3E智能套餐%3C/text%3E%3C/svg%3E" alt="全屋智能套餐">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
</body>
|
|
</html> |