如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
<!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.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { background-color: #101820; color: #f4f4f4; font-size: 14px; min-height: 100vh; } .container { display: flex; flex-direction: column; padding: 40px; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .header h1 { font-size: 32px; font-weight: 600; color: #38a169; } .nav-menu { display: flex; gap: 20px; } .nav-item { padding: 8px 16px; border-radius: 12px; background-color: #2d3748; cursor: pointer; transition: background-color 0.3s; } .nav-item:hover { background-color: #38a169; } .device-categories { display: flex; gap: 30px; margin-bottom: 20px; overflow-x: scroll; } .category-card { background-color: #2d3748; border-radius: 16px; padding: 20px; width: 220px; text-align: center; transition: background-color 0.3s; cursor: pointer; } .category-card:hover { background-color: #38a169; } .category-icon { font-size: 40px; margin-bottom: 10px; } .category-name { font-weight: 500; } .device-list { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .device-card { background-color: #1f2937; border-radius: 16px; padding: 20px; width: calc(33.33% - 20px); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s; } .device-card:hover { transform: translateY(-8px); background-color: #38a169; } .device-name { font-size: 18px; margin-bottom: 12px; } .device-status { font-size: 14px; color: #a0aec0; margin-bottom: 12px; } .device-control-btn { padding: 8px 16px; background-color: #38a169; border-radius: 8px; color: white; cursor: pointer; transition: background-color 0.3s; } .device-control-btn:hover { background-color: #2f855a; } .footer { text-align: center; margin-top: 60px; color: #a0aec0; } </style> </head> <body> <div id="app" class="container"> <div class="header"> <h1>智能家居设备管理</h1> <div class="nav-menu"> <div class="nav-item">首页</div> <div class="nav-item">设备管理</div> <div class="nav-item">场景设置</div> <div class="nav-item">统计分析</div> </div> </div> <div class="device-categories"> <div class="category-card" v-for="category in categories" :key="category.id"> <div class="category-icon">{{category.icon}}</div> <div class="category-name">{{category.name}}</div> </div> </div> <div class="device-list"> <div class="device-card" v-for="device in devices" :key="device.id"> <div class="device-name">{{device.name}}</div> <div class="device-status">{{device.status}}</div> <button class="device-control-btn" @click="toggleDevice(device)"> {{ device.isOn ? '关闭' : '开启' }} </button> </div> </div> <div class="footer"> <p>© 2024 智能家居管理系统</p> </div> </div> <script> new Vue({ el: '#app', data: { categories: [ { id: 1, name: '照明设备', icon: '' }, { id: 2, name: '温控设备', icon: '️' }, { id: 3, name: '家电设备', icon: '️' }, { id: 4, name: '安防设备', icon: '' }, ], devices: [ { id: 1, name: '客厅灯光', status: '开启', isOn: true }, { id: 2, name: '卧室空调', status: '制冷模式 24°C', isOn: false }, { id: 3, name: '厨房冰箱', status: '正常运行', isOn: true }, { id: 4, name: '浴室加热器', status: '关闭', isOn: false }, { id: 5, name: '门锁', status: '已锁定', isOn: true }, { id: 6, name: '安防摄像头', status: '工作中', isOn: true } ] }, methods: { toggleDevice(device) { device.isOn = !device.isOn; device.status = device.isOn ? '开启' : '关闭'; } } }); </script> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
