From 51962faa870b9a6cc3b56b184e07c7d10e6099e8 Mon Sep 17 00:00:00 2001 From: shenghuo2 <1308357113@qq.com> Date: Fri, 20 Jun 2025 17:34:00 +0800 Subject: [PATCH] init: add initial project files for Mi Home smart home interface clone --- .idea/.gitignore | 8 + .idea/modules.xml | 8 + .idea/project-fin-takeaway.iml | 12 + .idea/vcs.xml | 6 + .wakatime-project | 1 + README.md | 162 ++++ home.html | 169 ++++ index.html | 178 ++++ mall.html | 222 +++++ product.html | 116 +++ profile.html | 177 ++++ scripts/main.js | 332 +++++++ settings.html | 192 ++++ smart.html | 296 ++++++ styles/main.css | 1623 ++++++++++++++++++++++++++++++++ styles/mall.css | 461 +++++++++ 16 files changed, 3963 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/project-fin-takeaway.iml create mode 100644 .idea/vcs.xml create mode 100644 .wakatime-project create mode 100644 README.md create mode 100644 home.html create mode 100644 index.html create mode 100644 mall.html create mode 100644 product.html create mode 100644 profile.html create mode 100644 scripts/main.js create mode 100644 settings.html create mode 100644 smart.html create mode 100644 styles/main.css create mode 100644 styles/mall.css diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..aaa3dbc --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/project-fin-takeaway.iml b/.idea/project-fin-takeaway.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/project-fin-takeaway.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.wakatime-project b/.wakatime-project new file mode 100644 index 0000000..50fa5d1 --- /dev/null +++ b/.wakatime-project @@ -0,0 +1 @@ +term-final-proj \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..a8a764b --- /dev/null +++ b/README.md @@ -0,0 +1,162 @@ +# 米家智能家居 - 课程设计项目 + +这是一个基于纯HTML、CSS和JavaScript开发的米家app界面仿制项目，用于课程设计展示。 + +## 项目特色 + +### 🎨 界面设计 +- 完全仿制米家app的UI设计风格 +- 响应式布局，适配移动端设备 +- 现代化的渐变色彩和圆角设计 +- 流畅的动画效果和交互反馈 + +### 📱 功能模块 + +#### 1. 首页 - 设备控制 +- 房间切换导航（全屋、出租屋、十五中、客厅、卧室） +- 空气质量显示 +- 智能设备网格展示 +- 设备状态控制（开关、离线状态） +- 温湿度传感器实时数据 +- 蓝牙连接状态指示 + +#### 2. 智能场景页面 +- 推荐场景和自定义场景切换 +- 预设智能场景： + - 离家：关灯、开安防、开始清扫 + - 回家：开灯、开空调、关闭窗帘 + - 晚安：关灯、关电器、安心入睡 + - 起床：开灯、开窗帘、活力唤醒 + - 夜间勿扰：降低媒体音、关闭声光提示 + - 运动：开空调除净、舒爽运动 + - 结束运动：关空调除净、省心省力 +- 一键执行场景功能 +- 自定义场景创建 + +#### 3. 商城页面 +- 直接嵌入小米官方商城页面 +- 完整的购物体验 + +#### 4. 个人中心 +- 用户信息展示 +- 功能快捷入口：智能场景、米家众测、产品百科、全屋智能 +- 小米室外摄像机4C众测推广 +- 设置菜单：共享、设备耗材、语音设置、我的有品、家庭网络、中枢与网关、设置 + +### 🛠 技术特点 + +#### 前端技术栈 +- **HTML5**: 语义化标签，良好的页面结构 +- **CSS3**: + - Flexbox和Grid布局 + - CSS变量和渐变 + - 动画和过渡效果 + - 响应式设计 +- **JavaScript ES6+**: + - 模块化代码组织 + - 事件驱动编程 + - DOM操作和状态管理 + - 定时器和异步处理 + +#### 设计模式 +- 组件化思维 +- 状态管理 +- 事件委托 +- 响应式设计原则 + +## 项目结构 + +``` +project-fin-takeaway/ +├── index.html # 主页面文件 +├── styles/ +│ └── main.css # 主样式文件 +├── scripts/ +│ └── main.js # 主JavaScript文件 +└── README.md # 项目说明文档 +``` + +## 功能演示 + +### 设备控制 +- 点击设备卡片可以切换设备状态 +- 智能插座支持电源开关控制 +- 传感器数据每30秒自动更新 +- 设备离线状态显示 + +### 场景执行 +- 点击场景执行按钮触发场景 +- 显示执行进度和完成提示 +- 支持自定义场景创建 + +### 页面导航 +- 底部导航栏支持页面切换 +- 平滑的页面过渡效果 +- 导航状态同步更新 + +## 使用方法 + +1. **直接打开**: 在浏览器中打开 `index.html` 文件 +2. **本地服务器**: 使用任意HTTP服务器托管项目文件 +3. **移动端体验**: 在移动设备浏览器中访问，获得最佳体验 + +## 浏览器兼容性 + +- ✅ Chrome 60+ +- ✅ Firefox 55+ +- ✅ Safari 12+ +- ✅ Edge 79+ +- ✅ 移动端浏览器 + +## 项目亮点 + +### 1. 高度还原 +- 像素级还原米家app界面 +- 保持原有的交互逻辑 +- 符合用户使用习惯 + +### 2. 交互体验 +- 触摸反馈效果 +- 流畅的动画过渡 +- 实时状态更新 +- 友好的提示信息 + +### 3. 代码质量 +- 清晰的代码结构 +- 良好的注释说明 +- 模块化设计 +- 易于维护和扩展 + +### 4. 响应式设计 +- 适配不同屏幕尺寸 +- 移动端优先设计 +- 灵活的布局系统 + +## 扩展功能 + +项目预留了扩展接口，可以轻松添加以下功能： + +- 🔐 用户登录和权限管理 +- 📊 设备数据统计和图表 +- 🔔 消息推送和通知 +- 🎵 语音控制集成 +- 🌐 云端数据同步 +- 📱 PWA支持 + +## 开发说明 + +这是一个纯前端项目，所有的数据都是模拟数据，主要用于展示界面效果和交互逻辑。在实际应用中，需要： + +1. 集成真实的设备API +2. 添加用户认证系统 +3. 实现数据持久化 +4. 添加错误处理机制 +5. 优化性能和安全性 + +## 致谢 + +感谢小米公司提供的优秀设计参考，本项目仅用于学习和课程设计目的。 + +--- + +**注意**: 本项目仅供学习交流使用，不得用于商业用途。 \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 0000000..fa73801 --- /dev/null +++ b/home.html @@ -0,0 +1,169 @@ + + + + + + 米家 - 米家智能家居 + + + + +
+ +
+
+ shenghuo2的家 + +
+
+ + +
+
+ + + + + +
+ 空气质量 4 + +
+ + +
+ +
+
+ +
+
手机红外遥控器
+
已连接
+
+ + +
+
+ +
+
小米智能插座
+
已关闭
+
+ + +
+
+ +
+
小米台灯
+
已开启
+
+ + +
+
+ +
+
空调
+
已关闭
+
+ + +
+
+ +
+
小爱音箱
+
播放中
+
+ + +
+
+ +
+
扫地机器人
+
待机中
+
+
+ + +
+
+
+ +
+
+ 23°C + 温度 +
+
+ +
+
+ +
+
+ 65% + 湿度 +
+
+ +
+
+ +
+
+ 良好 + 空气质量 +
+
+ +
+
+ +
+
+ 450 lux + 光照 +
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..d8102d7 --- /dev/null +++ b/index.html @@ -0,0 +1,178 @@ + + + + + + 米家智能家居 + + + + + +
+ +
+
+ shenghuo2的家 + +
+
+ + +
+
+ + + + + +
+ 空气质量 4 + +
+ + +
+ +
+
+ +
+
手机红外遥控器
+
手机 | 设备离线
+
+ + +
+
+ +
+
万能遥控器
+
设备离线 | 长期离线
+
+ + +
+
+
+
+
空调
+
卧室 | 设备离线
+
+ + +
+
+
+
+
客厅空调
+
客厅 | 设备离线
+
+ + +
+
+ +
+
盒子
+
客厅 | 设备离线
+
+ + +
+
+ +
+
投影仪
+
客厅 | 设备离线
+
+ + +
+
+
+
+
卧室空调
+
卧室 | 设备离线
+
+ + +
+
+ +
+
智能插座2 蓝牙网关版
+
出租屋
+
+ +
+
+
+ + +
+
+
+ 26° +
+
温湿度计
+
客厅
+
+ +
+
+ +
+
+ 26.5° + 60% +
+
日博士温湿度计-卫生间
+
十五中 | 16.8°C 39%
+
+ +
+
+
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/mall.html b/mall.html new file mode 100644 index 0000000..5634306 --- /dev/null +++ b/mall.html @@ -0,0 +1,222 @@ + + + + + + 商城 - 米家智能家居 + + + + + +
+ +
+
+ 秒杀低至 5折 +
+ +
+
+
3
+
+ + +
+
+ + +
+
+ + +
+ +
+
+

K80 至尊版

+

高端旗舰 豪华质感

+

还约换更多重的好礼

+ +
+
+
+
+
+
+ + +
+
+
+
+

K Pad

+

玩游戏很好礼

+
+
+
+
+
+

XIAOMI MIX Flip 2

+

预约最新旗舰手机

+
+
+
+
+
+

智能家电技术新

+

全屋智能新体验

+
+
+
+
+ + +
+
+
+ +
+ 小米手机 +
+
+
+ +
+ 小米家电 +
+
+
+ +
+ 分类 +
+
+
+ +
+ 小米众筹 +
+
+
+ +
+ 米家智能 +
+
+ +
+
+
+ +
+ 有品秒杀 +
+
+
+ +
+ 生活电器 +
+
+
+ +
+ 净水滤芯 +
+
+
+ MI +
+ 小米自营 +
+
+
+ +
+ 鞋服饰品 +
+
+ + +
+ +
+
+ 小米618 +
+

科技生态 一步到位

+

部分有礼200减30

+ +
+
+
+
+ + +
+
+
+

米家音箱专场

+

20点抢5折券

+
+
+
+

米家好卡

+

限时19元享优惠

+
+
+ + +
+
+
+
小家电盛典
+

全场立减500元

+
+
+
+
品质大家电
+

全场优惠400元

+
+
+
+
美食好物购
+

五折优惠1500元

+
+
+
+
智能生活好物
+

全场立减2000元

+
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/product.html b/product.html new file mode 100644 index 0000000..3843fde --- /dev/null +++ b/product.html @@ -0,0 +1,116 @@ + + + + + + 产品 - 米家智能家居 + + + + +
+
+
已接入米家
+
+ + +
+
+ + +
+
+ + +
+
+
+
米家众测
+
小米室外摄像机 4C
+
+ 免费抽 + 16台 +
+
+
+
+ +
+
+
+
+ + +
+
+

30天激活榜

+
+ +
+
+
1
+
+
+
+
+
小米空调巨省电 1.5匹 一级 适...
+
月激活量10万+
+
+
+ +
+
2
+
+
+
+
+
米家体脂秤 S400
+
月激活量10万+
+
+
+ +
+
3
+
+
+
+
+
小爱音箱Play
+
月激活量10万+
+
+
+
+ +
+ 查看全部榜单 +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..7f6e94e --- /dev/null +++ b/profile.html @@ -0,0 +1,177 @@ + + + + + + 我的 - 米家智能家居 + + + + +
+ +
+
+ +
+ + +
+
+
+ + +
+
+
+ +
+ 智能场景 +
+
+
+ +
+ 米家众测 +
+
+
+ +
+ 产品百科 +
+
+
+ +
+ 全屋智能 +
+
+ + +
+
+
+

米家众测

+

小米室外摄像机 4C

+
+ 免费试 + 16台 +
+
+
+ 小米室外摄像机 +
+
+
+ + +
+
+
+ +
+
+ 共享 +
+ +
+ +
+
+ +
+
+ 设备耗材 +
+ +
+ +
+
+ +
+
+ 语音设置 +
+ +
+ +
+
+ +
+
+ 我的有品 +
+ +
+ +
+
+ +
+
+ 家庭网络 + 良好 +
+ +
+ +
+
+ +
+
+ 中枢与网关 +
+ +
+ +
+
+ +
+
+ 设置 +
+ +
+
+ + + +
+ + + + \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..1b2e405 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,332 @@ +// 页面切换功能 +function showPage(pageId) { + // 隐藏所有页面 + const pages = document.querySelectorAll('.container'); + pages.forEach(page => { + page.classList.add('hidden'); + }); + + // 显示目标页面 + const targetPage = document.getElementById(pageId); + if (targetPage) { + targetPage.classList.remove('hidden'); + } + + // 更新底部导航状态 + updateBottomNav(pageId); +} + +// 更新底部导航状态 +function updateBottomNav(activePageId) { + const navItems = document.querySelectorAll('.nav-item'); + navItems.forEach(item => { + item.classList.remove('active'); + }); + + // 根据页面ID设置对应的导航项为活跃状态 + const pageNavMap = { + 'home-page': 0, + 'smart-page': 1, + 'mall-page': 2, + 'profile-page': 4 + }; + + const activeIndex = pageNavMap[activePageId]; + if (activeIndex !== undefined) { + const currentPageNavItems = document.querySelectorAll(`#${activePageId} .nav-item`); + if (currentPageNavItems[activeIndex]) { + currentPageNavItems[activeIndex].classList.add('active'); + } + } +} + +// 设备控制功能 +function toggleDevice(deviceElement) { + deviceElement.classList.toggle('active'); + + // 模拟设备状态切换 + const statusElement = deviceElement.querySelector('.device-status'); + const deviceName = deviceElement.querySelector('.device-name').textContent; + + if (deviceElement.classList.contains('active')) { + // 保持原有状态信息，只更新开启状态 + const originalStatus = statusElement.textContent; + if (!originalStatus.includes('已开启')) { + statusElement.textContent = originalStatus.replace('设备离线', '已开启'); + } + showToast(`${deviceName} 已开启`); + } else { + // 恢复为离线状态 + const originalStatus = statusElement.textContent; + statusElement.textContent = originalStatus.replace('已开启', '设备离线'); + showToast(`${deviceName} 已关闭`); + } +} + +// 场景执行功能 +function executeScene(sceneName) { + // 显示执行提示 + showToast(`正在执行"${sceneName}"场景...`); + + // 模拟场景执行 + setTimeout(() => { + showToast(`"${sceneName}"场景执行完成`); + }, 2000); +} + +// 显示提示信息 +function showToast(message) { + // 创建提示元素 + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = message; + + // 添加样式 + toast.style.cssText = ` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 12px 20px; + border-radius: 8px; + font-size: 14px; + z-index: 9999; + animation: fadeInOut 3s ease-in-out; + `; + + // 添加动画样式 + if (!document.querySelector('#toast-styles')) { + const style = document.createElement('style'); + style.id = 'toast-styles'; + style.textContent = ` + @keyframes fadeInOut { + 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } + 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } + } + `; + document.head.appendChild(style); + } + + document.body.appendChild(toast); + + // 3秒后移除提示 + setTimeout(() => { + if (toast.parentNode) { + toast.parentNode.removeChild(toast); + } + }, 3000); +} + +// 房间切换功能 +function switchRoom(roomName) { + // 更新房间标签状态 + const roomTabs = document.querySelectorAll('.room-tab'); + roomTabs.forEach(tab => { + tab.classList.remove('active'); + if (tab.textContent === roomName) { + tab.classList.add('active'); + } + }); + + // 模拟房间设备过滤 - 显示/隐藏相关设备 + const deviceCards = document.querySelectorAll('.device-card'); + deviceCards.forEach(card => { + const deviceStatus = card.querySelector('.device-status').textContent; + + if (roomName === '全屋') { + // 显示所有设备 + card.style.display = 'flex'; + } else { + // 根据房间名称过滤设备 + if (deviceStatus.includes(roomName)) { + card.style.display = 'flex'; + } else { + card.style.display = 'none'; + } + } + }); + + showToast(`已切换到"${roomName}"`); +} + +// 智能场景标签切换 +function switchSmartTab(tabName) { + const tabs = document.querySelectorAll('.tab'); + tabs.forEach(tab => { + tab.classList.remove('active'); + if (tab.textContent === tabName) { + tab.classList.add('active'); + } + }); + + // 根据标签显示不同内容 + if (tabName === '自定义') { + showCustomScenes(); + } else { + showRecommendedScenes(); + } +} + +// 显示推荐场景 +function showRecommendedScenes() { + // 这里可以动态加载推荐场景 + console.log('显示推荐场景'); +} + +// 显示自定义场景 +function showCustomScenes() { + const sceneSection = document.querySelector('.scene-section'); + if (sceneSection) { + sceneSection.innerHTML = ` +
+
+ +
+
+
添加自定义场景
+
创建个性化的智能场景
+
+ +
+
+
+ +
+
+
批量控制
+
空调关空调
+
+ +
+
+
+ +
+
+
自动化
+
进入TP-LINK_9CC6-向手机发送通知
+
+ +
+ `; + } +} + +// 页面加载完成后的初始化 +document.addEventListener('DOMContentLoaded', function() { + // 绑定设备卡片点击事件 + const deviceCards = document.querySelectorAll('.device-card'); + deviceCards.forEach(card => { + card.addEventListener('click', function() { + toggleDevice(this); + }); + }); + + // 绑定场景按钮点击事件 + const sceneButtons = document.querySelectorAll('.scene-button'); + sceneButtons.forEach(button => { + button.addEventListener('click', function(e) { + e.stopPropagation(); + const sceneName = this.parentElement.querySelector('.scene-name').textContent; + executeScene(sceneName); + }); + }); + + // 绑定房间标签点击事件 + const roomTabs = document.querySelectorAll('.room-tab'); + roomTabs.forEach(tab => { + tab.addEventListener('click', function() { + switchRoom(this.textContent); + }); + }); + + // 绑定智能场景标签点击事件 + const smartTabs = document.querySelectorAll('.tab'); + smartTabs.forEach(tab => { + tab.addEventListener('click', function() { + switchSmartTab(this.textContent); + }); + }); + + // 底部导航切换 + const navItems = document.querySelectorAll('.nav-item'); + navItems.forEach(item => { + item.addEventListener('click', () => { + const targetPage = item.dataset.page; + + // 特殊处理商城页面，显示外部链接 + if (targetPage === 'mall') { + showPage('mall-page-external'); + } else { + showPage(targetPage); + } + + // 更新导航状态 + navItems.forEach(nav => nav.classList.remove('active')); + item.classList.add('active'); + }); + }); + + // 绑定菜单项点击事件 + const menuItems = document.querySelectorAll('.menu-item'); + menuItems.forEach(item => { + item.addEventListener('click', function() { + const menuName = this.querySelector('span').textContent; + showToast(`打开"${menuName}"功能`); + }); + }); + + // 模拟实时数据更新 + setInterval(updateSensorData, 30000); // 每30秒更新一次传感器数据 +}); + +// 更新传感器数据 +function updateSensorData() { + const tempDisplays = document.querySelectorAll('.temp-display'); + tempDisplays.forEach(display => { + const currentTemp = parseFloat(display.textContent); + const newTemp = (currentTemp + (Math.random() - 0.5) * 2).toFixed(1); + display.textContent = newTemp + '°'; + }); + + const humidityDisplays = document.querySelectorAll('.humidity-display'); + humidityDisplays.forEach(display => { + const currentHumidity = parseInt(display.textContent); + const newHumidity = Math.max(30, Math.min(70, currentHumidity + Math.floor((Math.random() - 0.5) * 10))); + display.textContent = newHumidity + '%'; + }); +} + +// 添加触摸反馈 +function addTouchFeedback() { + const interactiveElements = document.querySelectorAll('.device-card, .scene-item, .menu-item, .nav-item'); + + interactiveElements.forEach(element => { + element.addEventListener('touchstart', function() { + this.style.transform = 'scale(0.95)'; + this.style.transition = 'transform 0.1s'; + }); + + element.addEventListener('touchend', function() { + this.style.transform = 'scale(1)'; + }); + + element.addEventListener('touchcancel', function() { + this.style.transform = 'scale(1)'; + }); + }); +} + +// 在页面加载完成后添加触摸反馈 +document.addEventListener('DOMContentLoaded', addTouchFeedback); + +// 导出函数供HTML使用 +window.showPage = showPage; +window.executeScene = executeScene; +window.toggleDevice = toggleDevice; +window.switchRoom = switchRoom; +window.switchSmartTab = switchSmartTab; \ No newline at end of file diff --git a/settings.html b/settings.html new file mode 100644 index 0000000..3a86d8a --- /dev/null +++ b/settings.html @@ -0,0 +1,192 @@ + + + + + + 设置 - 米家智能家居 + + + + +
+ +
+
+ +

设置

+
+
+ + +
+ +
+
更新
+
+
+ 检查更新 +
+ +
+
+ + +
+
首页
+
+
+ 快捷开关音效 +
+
+
+
+
+
+
+ 快捷卡片 + 关 +
+ +
+
+
+ 家庭房间管理 +
+ +
+
+ + +
+
设备
+
+
+ 紧急事件电话通知 +
+ +
+
+
+ 自动发现设备 +
+ +
+
+
+ 人脸识别管理 +
+ +
+
+
+ 云存储管理 +
+ +
+
+ + +
+
安全设置
+
+
+ 消息设置 +
+ +
+
+
+ 单位设置 +
+ +
+
+
+ 人脸识别管理 +
+ +
+
+
+ 云存储管理 +
+ +
+
+
+ 安全设置 +
+ +
+
+
+ 消息设置 +
+ +
+
+
+ 单位设置 +
+ +
+
+ + +
+
商城页面
+
+
+ 商城页面 + 已开启 +
+ +
+
+ + +
+
隐私与安全
+
+
+ 地区 + 中国大陆 +
+ +
+
+
+ 语言 + 简体 +
+ +
+
+ + +
+
帮助
+
+
+ 系统权限管理 +
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/smart.html b/smart.html new file mode 100644 index 0000000..02e576d --- /dev/null +++ b/smart.html @@ -0,0 +1,296 @@ + + + + + + 智能 - 米家智能家居 + + + + +
+ +
+
+ shenghuo2的家 + +
+
+ + +
+
+ + +
+
推荐
+
自定义
+
+ + +
+ +
+ 未开启 +
+ + +
+ +
+
+ +
+
+
离家
+
关灯，开安防，开始清扫
+
+ +
+ + +
+
+ +
+
+
回家
+
开灯，开空调，关闭窗帘
+
+ +
+ + +
+
+ +
+
+
晚安
+
关灯，关电器，安心入睡
+
+ +
+ + +
+
+ +
+
+
起床
+
开灯，开窗帘，活力晨醒
+
+ +
+ + +
+
+ +
+
+
夜间勿扰
+
降低媒体音，关闭声光提醒
+
+ +
+ + +
+
+ +
+
+
运动
+
开空调空净，舒爽运动
+
+ +
+ + +
+
+ +
+
+
结束运动
+
关空调空净，省心省力
+
+ +
+
+
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..0a1da2b --- /dev/null +++ b/styles/main.css @@ -0,0 +1,1623 @@ +/* 全局样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background-color: #f5f5f5; + color: #333; + overflow-x: hidden; +} + +.container { + max-width: 414px; + margin: 0 auto; + background-color: #f5f5f5; + min-height: 100vh; + position: relative; + padding-bottom: 80px; +} + +.hidden { + display: none; +} + +/* 顶部导航 */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background-color: #fff; + border-bottom: 1px solid #eee; +} + +.header-left { + display: flex; + align-items: center; + gap: 8px; +} + +.home-name { + font-size: 18px; + font-weight: 600; + color: #333; +} + +.header-right { + display: flex; + gap: 20px; +} + +.header-right i { + font-size: 20px; + color: #666; + cursor: pointer; +} + +/* 房间导航 */ +.room-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background-color: #fff; + border-bottom: 1px solid #eee; +} + +.room-tabs { + display: flex; + gap: 25px; +} + +.room-tab { + font-size: 16px; + color: #666; + cursor: pointer; + padding: 5px 0; + position: relative; +} + +.room-tab.active { + color: #333; + font-weight: 600; +} + +.room-tab.active::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 3px; + background-color: #ff6900; + border-radius: 2px; +} + +/* 首页菜单图标 */ +.home-menu-icon { + font-size: 18px; + color: #666; + cursor: pointer; +} + +/* 空气质量 */ +.air-quality { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background-color: #fff; + margin-bottom: 15px; + font-size: 14px; + color: #666; +} + +/* 设备网格 */ +.device-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + padding: 0 20px; + margin-bottom: 20px; +} + +.device-card { + background-color: #fff; + border-radius: 12px; + padding: 20px; + position: relative; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + cursor: pointer; + transition: transform 0.2s; +} + +.device-card:hover { + transform: translateY(-2px); +} + +.device-card.active { + background-color: #fff5e6; + border: 1px solid #ff6900; +} + +.device-icon { + width: 40px; + height: 40px; + margin-bottom: 15px; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f8f8; + border-radius: 8px; +} + +.device-icon i { + font-size: 20px; + color: #666; +} + +.ac-icon { + width: 30px; + height: 20px; + background-color: #666; + border-radius: 4px; + position: relative; +} + +.ac-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 20px; + height: 2px; + background-color: #fff; +} + +.device-name { + font-size: 16px; + font-weight: 600; + color: #333; + margin-bottom: 5px; +} + +.device-status { + font-size: 12px; + color: #999; +} + +.power-button { + position: absolute; + top: 15px; + right: 15px; + width: 30px; + height: 30px; + background-color: #ff6900; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.power-button i { + color: #fff; + font-size: 14px; +} + +/* 传感器网格 */ +.sensor-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + padding: 0 20px; + margin-bottom: 20px; +} + +.sensor-card { + background-color: #fff; + border-radius: 12px; + padding: 20px; + position: relative; + box-shadow: 0 2px 8px rgba(0,0,0,0.05); + cursor: pointer; +} + +.sensor-icon { + margin-bottom: 15px; +} + +.temp-display { + font-size: 24px; + font-weight: 600; + color: #333; +} + +.humidity-display { + font-size: 14px; + color: #666; + margin-left: 5px; +} + +.sensor-name { + font-size: 14px; + font-weight: 600; + color: #333; + margin-bottom: 5px; +} + +.sensor-status { + font-size: 12px; + color: #999; +} + +.bluetooth-icon { + position: absolute; + top: 15px; + right: 15px; + color: #007AFF; + font-size: 16px; +} + +/* 智能场景页面样式 */ +.smart-tabs { + display: flex; + background: white; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; +} + +.smart-tab { + flex: 1; + text-align: center; + padding: 15px; + color: #666; + cursor: pointer; + border-bottom: 2px solid transparent; + transition: all 0.3s ease; + font-size: 16px; + font-weight: 500; +} + +.smart-tab.active { + color: #ff6900; + border-bottom-color: #ff6900; +} + +.smart-content { + padding: 0 20px; +} + +/* 空状态样式 */ +.empty-state { + text-align: center; + padding: 20px 0; + margin-bottom: 20px; +} + +.empty-text { + color: #999; + font-size: 14px; +} + +/* 场景列表样式 */ +.scene-list { + display: grid; + gap: 12px; +} + +.scene-item { + background: white; + border-radius: 12px; + padding: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + display: flex; + align-items: center; + gap: 12px; +} + +.scene-icon { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: white; + flex-shrink: 0; +} + +.scene-icon.blue { background: #4A90E2; } +.scene-icon.yellow { background: #F5A623; } +.scene-icon.purple { background: #7B68EE; } +.scene-icon.orange { background: #FF8C00; } +.scene-icon.dark-purple { background: #6A5ACD; } +.scene-icon.green { background: #50C878; } +.scene-icon.blue-light { background: #87CEEB; } + +.scene-info { + flex: 1; +} + +.scene-name { + font-size: 16px; + color: #333; + margin-bottom: 4px; + font-weight: 500; +} + +.scene-desc { + font-size: 13px; + color: #999; + line-height: 1.4; +} + +.scene-execute-btn { + background: transparent; + color: #ff6900; + border: 1px solid #ff6900; + padding: 6px 12px; + border-radius: 16px; + font-size: 13px; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.scene-execute-btn:hover { + background: #ff6900; + color: white; +} + +/* 过滤器样式 */ +.filter-section { + margin-bottom: 20px; +} + +.filter-dropdown { + display: flex; + align-items: center; + justify-content: space-between; + background: white; + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 12px 16px; + cursor: pointer; + font-size: 14px; + color: #333; +} + +.filter-dropdown i { + color: #999; + font-size: 12px; +} + +/* 批量控制样式 */ +.control-section { + margin-bottom: 30px; +} + +.section-title { + font-size: 16px; + color: #333; + margin-bottom: 12px; + font-weight: 500; +} + +.control-item { + background: white; + border-radius: 12px; + padding: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; +} + +.control-icon { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + color: white; + flex-shrink: 0; +} + +.control-icon.purple { background: #7B68EE; } + +.control-info { + flex: 1; +} + +.control-name { + font-size: 14px; + color: #333; + margin-bottom: 2px; +} + +.control-count { + font-size: 12px; + color: #999; +} + +.control-btn { + width: 32px; + height: 32px; + border-radius: 50%; + background: #4CAF50; + color: white; + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 12px; + transition: background 0.3s ease; +} + +.control-btn:hover { + background: #45a049; +} + +/* 自动化样式 */ +.automation-section { + margin-bottom: 20px; +} + +.automation-item { + background: white; + border-radius: 12px; + padding: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; + min-height: 56px; +} + +.automation-left { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.automation-icon { + width: 24px; + height: 24px; + border-radius: 50%; + background: #4CAF50; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: white; +} + +.automation-icon.gray { + background: #999; +} + +.automation-arrow { + font-size: 10px; + color: #999; +} + +.automation-notification { + width: 20px; + height: 20px; + border-radius: 50%; + background: #FF5722; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + color: white; +} + +.automation-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.automation-name { + font-size: 14px; + color: #333; + margin-bottom: 2px; + line-height: 1.3; +} + +.automation-count { + font-size: 12px; + color: #999; +} + +.automation-toggle { + flex-shrink: 0; + display: flex; + align-items: center; +} + +/* 自动化页面的切换开关样式 */ +.automation-toggle .toggle-switch { + width: 44px; + height: 24px; + appearance: none; + background: #ddd; + border-radius: 12px; + position: relative; + cursor: pointer; + transition: background 0.3s ease; + outline: none; +} + +.automation-toggle .toggle-switch:checked { + background: #4CAF50; +} + +.automation-toggle .toggle-switch:before { + content: ''; + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background: white; + top: 2px; + left: 2px; + transition: transform 0.3s ease; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); +} + +.automation-toggle .toggle-switch:checked:before { + transform: translateX(20px); +} + +/* 个人资料页面 */ +.profile-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + padding: 30px 20px; + color: #fff; +} + +.profile-info { + display: flex; + align-items: center; + gap: 15px; +} + +.avatar { + width: 60px; + height: 60px; + border-radius: 30px; + overflow: hidden; + background-color: rgba(255,255,255,0.2); +} + +.avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.username { + font-size: 20px; + font-weight: 600; + margin-bottom: 5px; +} + +.device-count { + font-size: 14px; + opacity: 0.8; +} + +.profile-content { + padding: 20px; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + background-color: #fff; + border-radius: 12px; + padding: 20px; + margin-bottom: 20px; +} + +.feature-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + cursor: pointer; +} + +.feature-item i { + font-size: 24px; + color: #ff6900; +} + +.feature-item span { + font-size: 12px; + color: #666; + text-align: center; +} + +.camera-promo { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 12px; + padding: 20px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; + color: #fff; +} + +.promo-badge { + background-color: rgba(255,255,255,0.2); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + margin-bottom: 8px; + display: inline-block; +} + +.promo-title { + font-size: 18px; + font-weight: 600; + margin-bottom: 5px; +} + +.promo-subtitle { + font-size: 14px; + opacity: 0.8; +} + +.promo-image { + font-size: 40px; + opacity: 0.8; +} + +.menu-list { + background-color: #fff; + border-radius: 12px; + overflow: hidden; +} + +.menu-item { + display: flex; + align-items: center; + padding: 20px; + border-bottom: 1px solid #f5f5f5; + cursor: pointer; + transition: background-color 0.2s; +} + +.menu-item:hover { + background-color: #f8f8f8; +} + +.menu-item:last-child { + border-bottom: none; +} + +.menu-item i:first-child { + font-size: 18px; + color: #ff6900; + margin-right: 15px; + width: 20px; +} + +.menu-item span { + flex: 1; + font-size: 16px; + color: #333; +} + +.menu-item .status { + font-size: 14px; + color: #666; + margin-right: 10px; +} + +.menu-item i:last-child { + font-size: 14px; + color: #ccc; +} + +/* 设置页面样式 */ +.settings-header { + background: white; + padding: 15px 20px; + border-bottom: 1px solid #f0f0f0; + position: sticky; + top: 0; + z-index: 100; +} + +.header-left { + display: flex; + align-items: center; + gap: 15px; +} + +.header-left i { + font-size: 18px; + color: #333; + cursor: pointer; +} + +.header-left h1 { + margin: 0; + font-size: 18px; + font-weight: 600; + color: #333; +} + +.settings-content { + padding-bottom: 20px; +} + +.settings-section { + margin-bottom: 20px; +} + +.section-title { + padding: 15px 20px 10px 20px; + font-size: 14px; + color: #666; + font-weight: 500; +} + +.settings-item { + background: white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; + border-bottom: 1px solid #f0f0f0; + cursor: pointer; +} + +.settings-item:last-child { + border-bottom: none; +} + +.item-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; +} + +.item-title { + font-size: 16px; + color: #333; + font-weight: 500; +} + +.item-subtitle { + font-size: 14px; + color: #666; +} + +.settings-item > i { + color: #ccc; + font-size: 14px; +} + +/* 切换开关样式 */ +.toggle-switch { + width: 50px; + height: 30px; + background: #e0e0e0; + border-radius: 15px; + position: relative; + cursor: pointer; + transition: background-color 0.3s; +} + +.toggle-switch.active { + background: #34C759; +} + +.toggle-slider { + width: 26px; + height: 26px; + background: white; + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + transition: transform 0.3s; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + +.toggle-switch.active .toggle-slider { + transform: translateX(20px); +} + +/* 底部导航 */ +.bottom-nav { + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 414px; + background-color: #fff; + border-top: 1px solid #eee; + display: flex; + justify-content: space-around; + padding: 10px 0; + z-index: 1000; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + cursor: pointer; + transition: color 0.2s; +} + +.nav-item i { + font-size: 20px; + color: #999; +} + +.nav-item span { + font-size: 12px; + color: #999; +} + +.nav-item.active i, +.nav-item.active span { + color: #ff6900; +} + +/* 产品页面 */ +.product-header { + background-color: #fff; + padding: 20px; + border-bottom: 1px solid #eee; +} + +.header-title { + font-size: 20px; + font-weight: 600; + color: #333; + text-align: left; +} + +/* 搜索框 */ +.search-section { + padding: 20px; + background-color: #f5f5f5; +} + +.search-box { + display: flex; + align-items: center; + background-color: #e8e8e8; + border-radius: 20px; + padding: 12px 16px; + gap: 10px; +} + +.search-box i { + color: #999; + font-size: 16px; +} + +.search-box input { + flex: 1; + border: none; + background: transparent; + outline: none; + font-size: 14px; + color: #333; +} + +.search-box input::placeholder { + color: #999; +} + +/* 推广卡片 */ +.promo-section { + padding: 0 20px 20px; + background-color: #f5f5f5; +} + +.promo-card { + background: linear-gradient(135deg, #a8d8ff 0%, #e6f3ff 100%); + border-radius: 12px; + padding: 20px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + overflow: hidden; +} + +.promo-content { + flex: 1; +} + +.promo-badge { + background-color: rgba(255,255,255,0.9); + color: #333; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; + display: inline-block; + margin-bottom: 8px; +} + +.promo-title { + font-size: 18px; + font-weight: 600; + color: #333; + margin-bottom: 8px; +} + +.promo-subtitle { + display: flex; + align-items: center; + gap: 8px; +} + +.promo-tag { + background-color: #333; + color: #fff; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; +} + +.promo-count { + font-size: 14px; + color: #333; + font-weight: 500; +} + +.promo-image { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; +} + +.camera-icon { + width: 60px; + height: 60px; + background-color: rgba(255,255,255,0.3); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #333; +} + +/* 排行榜 */ +.ranking-section { + background-color: #fff; + margin: 0 20px; + border-radius: 12px; + overflow: hidden; + margin-bottom: 20px; +} + +.ranking-header { + padding: 20px 20px 0; +} + +.ranking-header h3 { + font-size: 18px; + font-weight: 600; + color: #333; + margin: 0; +} + +.ranking-list { + padding: 20px; +} + +.ranking-item { + display: flex; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #f5f5f5; +} + +.ranking-item:last-child { + border-bottom: none; +} + +.ranking-number { + width: 30px; + height: 30px; + background-color: #f5f5f5; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; + color: #666; + margin-right: 15px; +} + +.ranking-item:first-child .ranking-number { + background-color: #ff6900; + color: #fff; +} + +.ranking-item:nth-child(2) .ranking-number { + background-color: #ffa500; + color: #fff; +} + +.ranking-item:nth-child(3) .ranking-number { + background-color: #ffb84d; + color: #fff; +} + +.product-image { + width: 50px; + height: 50px; + margin-right: 15px; + display: flex; + align-items: center; + justify-content: center; + background-color: #f8f8f8; + border-radius: 8px; +} + +.ac-product-icon { + width: 30px; + height: 20px; + background-color: #666; + border-radius: 4px; + position: relative; +} + +.ac-product-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 20px; + height: 2px; + background-color: #fff; +} + +.scale-icon { + width: 35px; + height: 25px; + background-color: #ddd; + border-radius: 6px; + position: relative; +} + +.scale-icon::after { + content: ''; + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 1px; + background-color: #999; +} + +.speaker-icon { + width: 30px; + height: 30px; + background-color: #333; + border-radius: 50%; + position: relative; +} + +.speaker-icon::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 15px; + height: 15px; + border: 2px solid #fff; + border-radius: 50%; +} + +.product-info { + flex: 1; +} + +.product-name { + font-size: 16px; + color: #333; + margin-bottom: 5px; + font-weight: 500; +} + +.product-stats { + font-size: 12px; + color: #999; +} + +.view-all { + text-align: center; + padding: 20px; + border-top: 1px solid #f5f5f5; + cursor: pointer; +} + +.view-all span { + color: #666; + font-size: 14px; +} + +/* 外部商城页面 */ +#mall-page-external { + padding-bottom: 0; +} + +#mall-page-external iframe { + height: calc(100vh - 80px); +} + +/* 个人中心页面样式 */ +.profile-header { + background: white; + padding: 20px; +} + +.header-top { + display: flex; + justify-content: space-between; + align-items: center; +} + +.user-info { + display: flex; + align-items: center; + gap: 15px; +} + +.user-avatar { + width: 60px; + height: 60px; + border-radius: 50%; + overflow: hidden; +} + +.user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.user-details h2 { + margin: 0 0 5px 0; + font-size: 20px; + font-weight: 600; + color: #333; +} + +.user-details p { + margin: 0; + font-size: 14px; + color: #666; +} + +.header-actions { + display: flex; + gap: 15px; +} + +.header-actions i { + font-size: 20px; + color: #666; + cursor: pointer; +} + +/* 功能卡片 */ +.feature-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + padding: 20px; + background: white; + margin-bottom: 10px; +} + +.feature-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + cursor: pointer; +} + +.feature-icon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 20px; +} + +.feature-card span { + font-size: 12px; + color: #666; + text-align: center; +} + +/* 推广横幅 */ +.promotion-banner { + background: linear-gradient(135deg, #e3f2fd, #bbdefb); + margin: 0 20px 20px 20px; + border-radius: 12px; + overflow: hidden; +} + +.promotion-content { + display: flex; + align-items: center; + padding: 20px; + gap: 20px; +} + +.promotion-text { + flex: 1; +} + +.promotion-text h3 { + margin: 0 0 5px 0; + font-size: 14px; + color: #1976d2; + font-weight: 500; +} + +.promotion-text h4 { + margin: 0 0 10px 0; + font-size: 18px; + color: #333; + font-weight: 600; +} + +.promotion-tag { + display: flex; + align-items: center; + gap: 5px; +} + +.promotion-tag span { + background: #ff5722; + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + font-weight: 500; +} + +.tag-number { + background: #333 !important; +} + +.promotion-image { + width: 80px; + height: 60px; +} + +.promotion-image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; +} + +/* 菜单项 */ +.menu-section { + background: white; + margin: 0 20px; + border-radius: 12px; + overflow: hidden; +} + +.menu-item { + display: flex; + align-items: center; + gap: 15px; + padding: 16px 20px; + border-bottom: 1px solid #f0f0f0; + cursor: pointer; + min-height: 64px; +} + +.menu-item:last-child { + border-bottom: none; +} + +.menu-icon { + width: 32px; + height: 32px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 14px; + flex-shrink: 0; + margin: 0; + position: relative; +} + +.menu-icon i { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + line-height: 1; +} + +.menu-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; +} + +.menu-title { + font-size: 15px; + color: #333; + font-weight: 500; +} + +.menu-status { + font-size: 12px; + color: #666; +} + +.menu-item > i { + color: #ccc; + font-size: 12px; + flex-shrink: 0; + align-self: center; +} + +.section { + margin: 20px; + background-color: #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + border-bottom: 1px solid #f5f5f5; +} + +.section-header h3 { + font-size: 16px; + font-weight: 600; + color: #333; + margin: 0; +} + +.view-all { + font-size: 14px; + color: #666; + cursor: pointer; +} + +.view-all i { + margin-left: 5px; + font-size: 12px; +} + +.order-actions { + display: flex; + justify-content: space-around; + padding: 20px 10px; +} + +.order-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + cursor: pointer; + transition: transform 0.2s; +} + +.order-item:hover { + transform: translateY(-2px); +} + +.order-icon { + width: 40px; + height: 40px; + background-color: #f8f8f8; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.order-icon i { + font-size: 18px; + color: #ff6900; +} + +.order-item span { + font-size: 12px; + color: #666; + text-align: center; +} + +.service-list, +.tool-list { + padding: 0; +} + +.service-item, +.tool-item, +.setting-item { + display: flex; + align-items: center; + padding: 20px; + border-bottom: 1px solid #f5f5f5; + cursor: pointer; + transition: background-color 0.2s; +} + +.service-item:hover, +.tool-item:hover, +.setting-item:hover { + background-color: #f8f8f8; +} + +.service-item:last-child, +.tool-item:last-child { + border-bottom: none; +} + +.service-icon, +.tool-icon, +.setting-icon { + width: 40px; + height: 40px; + background-color: #f8f8f8; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; +} + +.service-icon i, +.tool-icon i, +.setting-icon i { + font-size: 18px; + color: #ff6900; +} + +.service-info, +.tool-info, +.setting-info { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; +} + +.service-info span, +.tool-info span, +.setting-info span { + font-size: 16px; + color: #333; +} + +.service-info i, +.tool-info i, +.setting-info i { + font-size: 14px; + color: #ccc; +} + +/* 响应式设计 */ +@media (max-width: 414px) { + .container { + max-width: 100%; + } + + .device-grid, + .sensor-grid { + padding: 0 15px; + } + + .room-tabs { + gap: 15px; + } + + .room-tab { + font-size: 14px; + } + + .section { + margin: 15px; + } + + .quick-actions { + margin: 15px; + } +} + +/* 动画效果 */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.device-card, +.sensor-card, +.scene-item { + animation: fadeIn 0.3s ease-out; +} + +/* 自定义滚动条 */ +::-webkit-scrollbar { + width: 4px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 2px; +} + +::-webkit-scrollbar-thumb:hover { + background: #999; +} \ No newline at end of file diff --git a/styles/mall.css b/styles/mall.css new file mode 100644 index 0000000..fa0766f --- /dev/null +++ b/styles/mall.css @@ -0,0 +1,461 @@ +/* 商城页面专用样式 */ + +/* 顶部促销横幅 */ +.promo-banner { + background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); + padding: 12px 20px; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + border-radius: 0 0 20px 20px; + margin-bottom: 15px; +} + +.promo-content { + display: flex; + align-items: center; + gap: 10px; +} + +.promo-text { + color: white; + font-size: 16px; + font-weight: 600; +} + +.promo-icon { + background-color: rgba(255,255,255,0.2); + border-radius: 50%; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + color: white; +} + +.notification-badge { + background-color: #ff4444; + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: bold; +} + +/* 搜索框样式 */ +.search-section { + padding: 0 20px 20px; +} + +.search-box { + background-color: #f5f5f5; + border-radius: 25px; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 10px; +} + +.search-box i { + color: #999; + font-size: 16px; +} + +.search-box input { + flex: 1; + border: none; + background: transparent; + outline: none; + font-size: 14px; + color: #333; +} + +.search-box input::placeholder { + color: #999; +} + +/* 主要产品展示区域 */ +.main-product-section { + background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); + margin: 0 20px 20px; + border-radius: 16px; + padding: 25px; + color: white; + position: relative; + overflow: hidden; +} + +.featured-product { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.product-content { + flex: 1; +} + +.product-title { + font-size: 28px; + font-weight: 700; + margin: 0 0 8px 0; + color: white; +} + +.product-subtitle { + font-size: 14px; + color: #ccc; + margin: 0 0 8px 0; +} + +.product-description { + font-size: 14px; + color: #aaa; + margin: 0 0 20px 0; +} + +.cta-button { + background: linear-gradient(135deg, #ff1744 0%, #d50000 100%); + color: white; + border: none; + padding: 12px 20px; + border-radius: 25px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s; +} + +.cta-button:hover { + transform: translateY(-2px); +} + +.product-images { + display: flex; + gap: 15px; + align-items: center; +} + +.phone-mockup { + width: 60px; + height: 120px; + border-radius: 12px; + position: relative; +} + +.phone-1 { + background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%); + transform: rotate(-5deg); +} + +.phone-2 { + background: linear-gradient(135deg, #6a8a6a 0%, #4a6a4a 100%); + transform: rotate(5deg); +} + +/* 产品卡片组 */ +.product-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; +} + +.product-card { + background: rgba(255,255,255,0.1); + border-radius: 12px; + padding: 15px; + text-align: center; + backdrop-filter: blur(10px); +} + +.card-image { + width: 50px; + height: 50px; + margin: 0 auto 10px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.kpad-image { + background: linear-gradient(135deg, #a8d8ff 0%, #7bb3ff 100%); +} + +.mix-flip-image { + background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); +} + +.smart-device-image { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); +} + +.card-content h3 { + font-size: 12px; + font-weight: 600; + margin: 0 0 5px 0; + color: white; +} + +.card-content p { + font-size: 10px; + color: #ccc; + margin: 0; +} + +/* 分类导航网格 */ +.category-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 20px; + padding: 20px; + margin-bottom: 10px; +} + +.category-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + cursor: pointer; + transition: transform 0.2s; +} + +.category-item:hover { + transform: translateY(-2px); +} + +.category-icon { + width: 50px; + height: 50px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8px; + font-size: 20px; + color: white; +} + +.phone-icon { + background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%); +} + +.tv-icon { + background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%); +} + +.grid-icon { + background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); +} + +.percent-icon { + background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); +} + +.smart-icon { + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); +} + +.clock-icon { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); +} + +.home-icon { + background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%); +} + +.filter-icon { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} + +.xiaomi-icon { + background: linear-gradient(135deg, #ff6900 0%, #e55100 100%); + font-weight: bold; + font-size: 16px; +} + +.shirt-icon { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} + +.category-item span { + font-size: 12px; + color: #333; + font-weight: 500; +} + +/* 促销活动区域 */ +.promotion-section { + padding: 0 20px 20px; +} + +.promo-card.large { + background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); + border-radius: 16px; + padding: 25px; + margin-bottom: 15px; + color: white; + position: relative; + overflow: hidden; +} + +.promo-header { + margin-bottom: 15px; +} + +.promo-badge { + background-color: rgba(255,255,255,0.2); + padding: 6px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + display: inline-block; +} + +.promo-card h3 { + font-size: 20px; + font-weight: 700; + margin: 0 0 8px 0; +} + +.promo-card p { + font-size: 14px; + margin: 0 0 20px 0; + opacity: 0.9; +} + +.promo-btn { + background-color: rgba(0,0,0,0.2); + color: white; + border: none; + padding: 10px 20px; + border-radius: 20px; + font-size: 14px; + font-weight: 600; + cursor: pointer; +} + +.tech-icon { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + width: 60px; + height: 60px; + background: rgba(255,255,255,0.1); + border-radius: 50%; +} + +/* 促销卡片网格 */ +.promo-cards-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + margin-bottom: 20px; +} + +.promo-card.small { + background: white; + border-radius: 12px; + padding: 20px; + text-align: center; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.speaker-visual, +.card-visual { + width: 50px; + height: 50px; + margin: 0 auto 15px; + border-radius: 8px; + background: linear-gradient(135deg, #333 0%, #666 100%); +} + +.promo-card.small h4 { + font-size: 16px; + font-weight: 600; + margin: 0 0 8px 0; + color: #333; +} + +.promo-card.small p { + font-size: 12px; + color: #666; + margin: 0; +} + +/* 底部促销网格 */ +.bottom-promo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; +} + +.promo-item { + background: white; + border-radius: 12px; + padding: 20px; + text-align: center; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.item-visual { + width: 40px; + height: 40px; + margin: 0 auto 12px; + border-radius: 6px; +} + +.appliance-visual { + background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); +} + +.quality-visual { + background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); +} + +.shopping-visual { + background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); +} + +.lifestyle-visual { + background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); +} + +.promo-item h5 { + font-size: 14px; + font-weight: 600; + margin: 0 0 6px 0; + color: #333; +} + +.promo-item p { + font-size: 12px; + color: #666; + margin: 0; +} + +/* 响应式设计 */ +@media (max-width: 480px) { + .category-grid { + grid-template-columns: repeat(4, 1fr); + gap: 15px; + padding: 15px; + } + + .product-cards { + grid-template-columns: 1fr 1fr; + } + + .bottom-promo-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file