| <!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: { |
| 'elegant-tan': '#d2b48c', |
| 'soft-tan': '#e6d5b8', |
| 'light-gray': '#f5f5f5' |
| } |
| } |
| } |
| } |
| </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; |
| background-color: #f9f9f9; |
| -webkit-tap-highlight-color: transparent; |
| overflow-y: hidden; |
| } |
| |
| .device-card { |
| transition: all 0.3s ease; |
| transform: translateY(0); |
| } |
| |
| .device-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| |
| .message-item { |
| animation: fadeIn 0.5s ease forwards; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .nav-item.active { |
| position: relative; |
| } |
| |
| .nav-item.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 6px; |
| height: 6px; |
| background-color: #a52a2a; |
| border-radius: 50%; |
| } |
| |
| .status-indicator { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 5px; |
| } |
| |
| .status-online { |
| background-color: #4CAF50; |
| } |
| |
| .status-offline { |
| background-color: #9E9E9E; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 pb-20"> |
| |
| <div class="bg-gradient-to-r from-soft-tan to-elegant-tan px-6 pt-6 pb-6 rounded-b-2xl shadow-sm text-white"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h1 class="text-2xl font-bold">HI, 智能管家用户</h1> |
| <p class="text-white text-opacity-80 mt-1">133****8888</p> |
| </div> |
| </div> |
| |
| <div class="mt-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-white text-opacity-90">今日室内环境</p> |
| <p class="text-xl font-bold mt-1">舒适</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm text-white text-opacity-90">温度: 24°C</p> |
| <p class="text-sm text-white text-opacity-90">湿度: 45%</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-6 mt-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">我的家</h2> |
| <span class="text-elegant-tan text-sm">更多</span> |
| </div> |
| |
| |
| <div class="grid grid-cols-3 gap-4"> |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-wind text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">空调</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-temperature-low text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">冰箱</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-soap text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">洗碗机</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-tint text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">烘干机</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-lock text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">智能门锁</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-fire text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">热水器</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-fan text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">阳光房</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-tshirt text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">洗衣机</p> |
| </div> |
| |
| |
| <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center"> |
| <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto"> |
| <i class="fas fa-robot text-elegant-red text-xl"></i> |
| </div> |
| <p class="mt-2 text-gray-700 font-medium">扫地机器人</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-6 mt-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">爱家消息</h2> |
| <span class="text-elegant-tan text-sm">更多</span> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
| |
| <div class="message-item border-b border-gray-100 p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3"> |
| <i class="fas fa-exclamation-circle text-elegant-red"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800">滤芯更换提醒</p> |
| <p class="text-gray-500 text-sm mt-1">滤芯剩余寿命7天，请及时更换</p> |
| <p class="text-gray-400 text-xs mt-2">今天 09:30</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="message-item border-b border-gray-100 p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800">清洁完成</p> |
| <p class="text-gray-500 text-sm mt-1">扫地机器人已完成全屋清洁</p> |
| <p class="text-gray-400 text-xs mt-2">昨天 18:45</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="message-item p-4"> |
| <div class="flex items-start"> |
| <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3"> |
| <i class="fas fa-bolt text-yellow-500"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-800">节能模式</p> |
| <p class="text-gray-500 text-sm mt-1">空调已自动切换至节能模式</p> |
| <p class="text-gray-400 text-xs mt-2">昨天 14:20</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3"> |
| <div class="nav-item active flex flex-col items-center text-elegant-tan"> |
| <i class="fas fa-home text-lg"></i> |
| <span class="text-xs mt-1">首页</span> |
| </div> |
| <div class="nav-item flex flex-col items-center text-gray-500"> |
| <i class="fas fa-user text-lg"></i> |
| <span class="text-xs mt-1">问管家</span> |
| </div> |
| <div class="nav-item flex flex-col items-center text-gray-500"> |
| <i class="fas fa-concierge-bell text-lg"></i> |
| <span class="text-xs mt-1">服务</span> |
| </div> |
| <div class="nav-item flex flex-col items-center text-gray-500"> |
| <i class="fas fa-clipboard-list text-lg"></i> |
| <span class="text-xs mt-1">我的</span> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.querySelectorAll('.nav-item').forEach(item => { |
| item.addEventListener('click', function() { |
| document.querySelectorAll('.nav-item').forEach(el => { |
| el.classList.remove('active'); |
| el.classList.add('text-gray-500'); |
| el.classList.remove('text-elegant-tan'); |
| }); |
| this.classList.add('active'); |
| this.classList.remove('text-gray-500'); |
| this.classList.add('text-elegant-tan'); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.device-card').forEach(card => { |
| card.addEventListener('mouseenter', function() { |
| this.classList.add('shadow-md'); |
| }); |
| |
| card.addEventListener('mouseleave', function() { |
| this.classList.remove('shadow-md'); |
| }); |
| |
| card.addEventListener('click', function() { |
| alert('设备详情页面即将打开'); |
| }); |
| }); |
| </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/home1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
