| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>我的空调 - 智能家居系统</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#faf7f0', |
| 100: '#f5f0e1', |
| 200: '#e8dfca', |
| 300: '#d4c0a1', |
| 400: '#c0a17a', |
| 500: '#b08c5a', |
| 600: '#9c7a4c', |
| 700: '#806140', |
| 800: '#6a5136', |
| 900: '#58432e', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| -webkit-tap-highlight-color: transparent; |
| overflow: hidden; |
| scrollbar-width: none; |
| -ms-overflow-style: none; |
| } |
| body::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .ac-card { |
| transition: all 0.3s ease; |
| transform-origin: center; |
| } |
| |
| .ac-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .toggle-switch { |
| position: relative; |
| display: inline-block; |
| width: 60px; |
| height: 30px; |
| } |
| |
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .toggle-slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #ccc; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| |
| .toggle-slider:before { |
| position: absolute; |
| content: ""; |
| height: 22px; |
| width: 22px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| input:checked + .toggle-slider { |
| background-color: #b08c5a; |
| } |
| |
| input:checked + .toggle-slider:before { |
| transform: translateX(30px); |
| } |
| |
| .control-indicator { |
| position: relative; |
| padding-left: 24px; |
| } |
| |
| .control-indicator::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background-color: #e8dfca; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 10px; |
| font-weight: bold; |
| } |
| |
| .control-wall::before { |
| content: "墙"; |
| background-color: #d4c0a1; |
| } |
| |
| .control-remote::before { |
| content: "遥"; |
| background-color: #c0a17a; |
| } |
| |
| .control-app::before { |
| content: "A"; |
| background-color: #b08c5a; |
| color: white; |
| } |
| |
| .control-voice::before { |
| content: "语"; |
| background-color: #9c7a4c; |
| color: white; |
| } |
| |
| .status-indicator { |
| display: inline-block; |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| margin-right: 6px; |
| } |
| |
| .status-on { |
| background-color: #4ade80; |
| } |
| |
| .status-off { |
| background-color: #ef4444; |
| } |
| |
| .detail-btn { |
| transition: all 0.2s ease; |
| } |
| |
| .detail-btn:hover { |
| color: #9c7a4c; |
| } |
| |
| .brand-logo { |
| width: 36px; |
| height: 36px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 8px; |
| font-size: 18px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| |
| <header class="bg-white shadow-sm py-4 px-4 sticky top-0 z-10"> |
| <div class="max-w-2xl mx-auto flex items-center justify-between"> |
| <button class="text-gray-500"> |
| <i class="fas fa-arrow-left"></i> |
| </button> |
| <h1 class="text-xl font-bold text-gray-800">我的空调</h1> |
| <button class="text-gray-500"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-2xl mx-auto px-4 py-6"> |
| |
| <div class="bg-white rounded-xl shadow p-4 mb-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-gray-500 text-sm">已连接设备</p> |
| <p class="text-2xl font-bold">4 台</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-gray-500 text-sm">当前运行</p> |
| <p class="text-2xl font-bold">2 台</p> |
| </div> |
| <div class="bg-primary-100 p-3 rounded-lg"> |
| <i class="fas fa-snowflake text-primary-700 text-2xl"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-5"> |
| |
| <div class="ac-card bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-5"> |
| |
| <div class="flex justify-between items-start mb-4"> |
| <div class="brand-logo bg-primary-50 text-primary-700"> |
| <i class="fas fa-wind"></i> |
| </div> |
| <div> |
| <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">客厅</span> |
| <h2 class="text-lg font-bold text-gray-800 mt-1">Gree 格力</h2> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">型号</p> |
| <p class="font-medium">KFR-35GW</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">功率</p> |
| <p class="font-medium">1.5HP</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">变频</p> |
| <p class="font-medium">是</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">能效</p> |
| <p class="font-medium">一级</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">状态</p> |
| <p class="font-medium"><span class="status-indicator status-on"></span>运行中 · 26°C</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">控制方式</p> |
| <p class="control-indicator control-app font-medium">App</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
| <button class="detail-btn flex items-center text-primary-600 font-medium"> |
| 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </button> |
| <label class="toggle-switch"> |
| <input type="checkbox" checked> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="ac-card bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-5"> |
| |
| <div class="flex justify-between items-start mb-4"> |
| <div class="brand-logo bg-blue-50 text-blue-600"> |
| <i class="fas fa-snowflake"></i> |
| </div> |
| <div> |
| <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-0.5 rounded-full">主卧</span> |
| <h2 class="text-lg font-bold text-gray-800 mt-1">Haier 海尔</h2> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">型号</p> |
| <p class="font-medium">KFR-26GW</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">功率</p> |
| <p class="font-medium">1.0HP</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">变频</p> |
| <p class="font-medium">是</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">能效</p> |
| <p class="font-medium">一级</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">状态</p> |
| <p class="font-medium"><span class="status-indicator status-off"></span>已关闭</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">控制方式</p> |
| <p class="control-indicator control-remote font-medium">遥控器</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
| <button class="detail-btn flex items-center text-primary-600 font-medium"> |
| 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </button> |
| <label class="toggle-switch"> |
| <input type="checkbox"> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="ac-card bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-5"> |
| |
| <div class="flex justify-between items-start mb-4"> |
| <div class="brand-logo bg-green-50 text-green-600"> |
| <i class="fas fa-fan"></i> |
| </div> |
| <div> |
| <span class="bg-green-100 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded-full">书房</span> |
| <h2 class="text-lg font-bold text-gray-800 mt-1">Midea 美的</h2> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">型号</p> |
| <p class="font-medium">KFR-50LW</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">功率</p> |
| <p class="font-medium">2.0HP</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">变频</p> |
| <p class="font-medium">是</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">能效</p> |
| <p class="font-medium">二级</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">状态</p> |
| <p class="font-medium"><span class="status-indicator status-on"></span>运行中 · 24°C</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">控制方式</p> |
| <p class="control-indicator control-voice font-medium">语音助手</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
| <button class="detail-btn flex items-center text-primary-600 font-medium"> |
| 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </button> |
| <label class="toggle-switch"> |
| <input type="checkbox" checked> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="ac-card bg-white rounded-xl shadow overflow-hidden"> |
| <div class="p-5"> |
| |
| <div class="flex justify-between items-start mb-4"> |
| <div class="brand-logo bg-purple-50 text-purple-600"> |
| <i class="fas fa-cloud"></i> |
| </div> |
| <div> |
| <span class="bg-purple-100 text-purple-700 text-xs font-medium px-2.5 py-0.5 rounded-full">次卧</span> |
| <h2 class="text-lg font-bold text-gray-800 mt-1">Daikin 大金</h2> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3 mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">型号</p> |
| <p class="font-medium">FTXS35K</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">功率</p> |
| <p class="font-medium">1.5HP</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">变频</p> |
| <p class="font-medium">是</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">能效</p> |
| <p class="font-medium">一级</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <p class="text-gray-500 text-sm">状态</p> |
| <p class="font-medium"><span class="status-indicator status-off"></span>已关闭</p> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">控制方式</p> |
| <p class="control-indicator control-wall font-medium">墙上面板</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
| <button class="detail-btn flex items-center text-primary-600 font-medium"> |
| 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i> |
| </button> |
| <label class="toggle-switch"> |
| <input type="checkbox"> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full"> |
| <div class="max-w-2xl mx-auto px-4"> |
| <div class="flex justify-between"> |
| <a href="#" class="py-3 px-4 text-center text-primary-600"> |
| <i class="fas fa-home block mx-auto mb-1"></i> |
| <span class="text-xs">首页</span> |
| </a> |
| <a href="#" class="py-3 px-4 text-center"> |
| <i class="fas fa-th-large block mx-auto mb-1 text-gray-500"></i> |
| <span class="text-xs text-gray-500">设备</span> |
| </a> |
| <a href="#" class="py-3 px-4 text-center"> |
| <i class="fas fa-scene block mx-auto mb-1 text-gray-500"></i> |
| <span class="text-xs text-gray-500">场景</span> |
| </a> |
| <a href="#" class="py-3 px-4 text-center"> |
| <i class="fas fa-user block mx-auto mb-1 text-gray-500"></i> |
| <span class="text-xs text-gray-500">我的</span> |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| <script> |
| |
| document.querySelectorAll('.toggle-switch input').forEach(switchEl => { |
| switchEl.addEventListener('change', function() { |
| const statusIndicator = this.closest('.ac-card').querySelector('.status-indicator'); |
| const statusText = this.closest('.ac-card').querySelector('.font-medium'); |
| |
| if (this.checked) { |
| statusIndicator.classList.remove('status-off'); |
| statusIndicator.classList.add('status-on'); |
| statusText.innerHTML = '<span class="status-indicator status-on"></span>运行中 · 26°C'; |
| } else { |
| statusIndicator.classList.remove('status-on'); |
| statusIndicator.classList.add('status-off'); |
| statusText.innerHTML = '<span class="status-indicator status-off"></span>已关闭'; |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.detail-btn').forEach(button => { |
| button.addEventListener('click', function() { |
| const brandName = this.closest('.ac-card').querySelector('h2').textContent; |
| alert(`查看 ${brandName} 的详细信息`); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/home2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
