| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>智能服务提醒 - H智慧生活平台</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
| |
| * { |
| font-family: 'Noto Sans SC', sans-serif; |
| } |
| |
| .service-card { |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
| border-left: 4px solid; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .badge-flash { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| 100% { opacity: 1; } |
| } |
| |
| .empty-section { |
| background-image: linear-gradient(135deg, #fdf7e4 0%, #fffdf0 100%); |
| border-radius: 16px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 overflow-hidden"> |
| |
| <header class="bg-gradient-to-r from-amber-700 to-yellow-600 text-white py-6 px-4 md:px-12 text-center"> |
| <h1 class="text-3xl font-bold">智慧家服务</h1> |
| </header> |
|
|
| |
| <nav class="bg-white py-4 px-4 md:px-12 shadow-sm"> |
| <div class="py-2"> |
| <div class="flex flex-wrap gap-x-8 gap-y-4"> |
| <button class="text-amber-700 font-medium border-b-2 border-amber-700 pb-2"> |
| <i class="fas fa-fan mr-2"></i>空调 |
| </button> |
| <button class="text-gray-600 hover:text-amber-700 pb-2"> |
| <i class="fas fa-tv mr-2"></i>电视 |
| </button> |
| <button class="text-gray-600 hover:text-amber-700 pb-2"> |
| <i class="fas fa-blender mr-2"></i>厨电 |
| </button> |
| <button class="text-gray-600 hover:text-amber-700 pb-2"> |
| <i class="fas fa-water mr-2"></i>卫浴 |
| </button> |
| <button class="text-gray-600 hover:text-amber-700 pb-2"> |
| <i class="fas fa-plug mr-2"></i>生活电器 |
| </button> |
| <button class="text-gray-600 hover:text-amber-700 pb-2"> |
| <i class="fas fa-laptop mr-2"></i>数码产品 |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="container mx-auto px-4 md:px-8 py-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800 flex items-center"> |
| <i class="fas fa-bell text-amber-600 mr-3"></i>智能服务提醒 |
| </h2> |
| </div> |
| <div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full flex items-center transition"> |
| <i class="fas fa-history mr-2"></i>查看历史提醒 |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8"> |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-amber-600"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-amber-50"> |
| <i class="fas fa-fan text-3xl text-amber-600"></i> |
| <span class="text-sm font-medium mt-2">空调</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">您的空调已连续使用280天</p> |
| <p class="text-gray-600 mt-1 text-sm">建议尽快进行清洗保养以保持最佳性能</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-amber-700">2023-07-15</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">空调深度清洗保养套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-amber-100 text-amber-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-cyan-500"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-cyan-50"> |
| <i class="fas fa-washing-machine text-3xl text-cyan-600"></i> |
| <span class="text-sm font-medium mt-2">洗衣机</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">洗衣机滚筒清洁提醒</p> |
| <p class="text-gray-600 mt-1 text-sm">检测到零件磨损，建议尽快安排维修服务</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-cyan-600">2023-04-03</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">洗衣机零件更换套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-cyan-100 text-cyan-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-cyan-600 hover:bg-cyan-700 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-red-400"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-red-50"> |
| <i class="fas fa-fire text-3xl text-red-500"></i> |
| <span class="text-sm font-medium mt-2">燃气灶</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">安全检测即将到期</p> |
| <p class="text-gray-600 mt-1 text-sm">燃气灶已使用15个月，建议进行安全检测</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-red-500">2023-01-20</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">燃气灶安全检测套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-red-100 text-red-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-green-500"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-green-50"> |
| <i class="fas fa-tv text-3xl text-green-600"></i> |
| <span class="text-sm font-medium mt-2">电视</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">系统升级维护提醒</p> |
| <p class="text-gray-600 mt-1 text-sm">电视系统已有新版本更新，建议进行升级维护</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-green-600">2023-04-22</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">智能电视系统维护套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-green-100 text-green-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-blue-500"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-blue-50"> |
| <i class="fas fa-water text-3xl text-blue-600"></i> |
| <span class="text-sm font-medium mt-2">热水器</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">热水器除垢提醒</p> |
| <p class="text-gray-600 mt-1 text-sm">预计使用已达220次，建议进行除垢处理</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-blue-600">2023-05-10</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">热水器除垢维护套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-white rounded-xl overflow-hidden flex border-l-purple-500"> |
| <div class="flex flex-col justify-center items-center py-4 px-6 bg-purple-50"> |
| <i class="fas fa-air-conditioner text-3xl text-purple-600"></i> |
| <span class="text-sm font-medium mt-2">中央空调</span> |
| </div> |
| |
| <div class="flex-1 py-4 px-4"> |
| |
| <div class="mb-4"> |
| <p class="text-gray-800 font-medium">年度维护保养到期提醒</p> |
| <p class="text-gray-600 mt-1 text-sm">您的中央空调已使用18个月，建议安排年度维护</p> |
| </div> |
| |
| <div class="flex items-center text-sm mb-2"> |
| <p class="text-gray-500 mr-2">最后服务:</p> |
| <span class="text-purple-600">2022-11-05</span> |
| </div> |
| |
| <div class="flex items-center text-sm"> |
| <p class="text-gray-500 mr-2">推荐套餐:</p> |
| <span class="font-medium">中央空调年度保养套餐</span> |
| </div> |
| |
| <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100"> |
| <span class="text-xs font-medium bg-purple-100 text-purple-800 px-2 py-1 rounded">新提醒</span> |
| <span class="text-xs text-gray-500">15分钟前</span> |
| <button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded">立即预约</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="hidden empty-section flex flex-col items-center justify-center py-12 px-4 rounded-xl mb-8"> |
| <div class="bg-amber-100 w-24 h-24 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-bell text-4xl text-amber-600"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">暂无新的服务提醒</h3> |
| <p class="text-gray-600 text-center max-w-md mb-6">您所有设备的服务状态正常，我们会持续监控并为您提供及时提醒。</p> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white py-2 px-6 rounded-full transition"> |
| 手动添加提醒 |
| </button> |
| </div> |
| </section> |
|
|
| |
| <script> |
| |
| setTimeout(() => { |
| document.querySelector('.empty-section').classList.remove('hidden'); |
| document.querySelector('.service-card:nth-child(4)').classList.add('opacity-60'); |
| document.querySelector('.service-card:nth-child(5)').classList.add('opacity-60'); |
| document.querySelector('.service-card:nth-child(6)').remove(); |
| |
| |
| const cards = document.querySelectorAll('.service-card'); |
| cards.forEach(card => { |
| card.classList.add('transition', 'duration-300'); |
| }); |
| }, 3000); |
| |
| </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/home5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
