创意预览图

参考图片风格，生成服务进行中详情页移动端小程序UI设计。蓝色主色调，简洁政务风格，现代扁平化UI，白色背景。页面从上到下布局：1.顶部导航栏，左侧返回箭头，中间标题文字"服务详情"；2.状态卡片，浅蓝

用户头像

1q2c8q3vwt2...

2026.07.10
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q395sw5vd-HB1q395sw5vd-HB
1q395sw5vd-HB1q395sw5vd-HB
1q395sw5vd-HB1q395sw5vd-HB
1q395sw5vd-HB1q395sw5vd-HB
「图片1」### 顶部导航栏 - 左侧：返回箭头 `<` - 中间标题：**告警** - 右侧：更多菜单图标 `⋯` ### 2. 顶部 Tab 标签栏 当前页面处于告警管理相关模块，Tab 包括： - 控制 - 档案 - 动态 - 维保 - 巡检 - **告警**：当前高亮 - 生命周期 说明这是一个设备全生命周期管理系统，告警只是其中一个子模块。 --- ### 3. 告警概览区 位于页面顶部，用三个数字卡片展示告警统计： 表格 | 指标 | 数值 | 说明 | | --- | --- | --- | | 今日告警 | 2 | 当天产生的告警数量 | | 待确认 | 1 | 尚未处理确认的告警 | | 已恢复 | 1 | 已经恢复或关闭的告警 | 右上角有一个蓝色标签：**1 待确认**，提示当前有待处理告警。 --- ### 4. 告警明细区 这是页面核心内容，展示两条告警记录。 #### 第一条告警：画面遮挡告警 - 类型：**画面遮挡告警** - 时间：2026-06-09 10:23 - 状态：**待确认**，橙色 / 黄色标签 - 风险等级：**高** - 设备名称：暖通演示楼 / 2F / 二楼东侧 - 事件描述：AI 值守 核查遮挡摄像头角度 这条属于**视频 / 摄像头类智能告警**，系统识别到摄像头可能被遮挡，需要人工确认。 #### 第二条告警：心跳延迟告警 - 类型：**心跳延迟告警** - 时间：2026-06-08 18:30 - 状态：**已恢复**，绿色标签 - 风险等级：中 - 设备名称：设备名称 - 事件描述：设备心跳超时，离线后恢复 这条属于**设备联网状态告警**，说明设备曾经失联，后来重新上线。 --- ### 5. 处置记录区 - 标题：**处置记录** - 内容：已生成安全事件 - 状态：**待补充** 说明系统已经生成了事件记录，但处理备注或工单信息还没有完全填写。 --- ## 三、页面业务定位 这个页面主要用于**运维人员查看和处理设备告警**，核心作用是： 1. 快速了解今日告警数量 2. 判断哪些告警待处理 3. 查看告警类型、设备位置和风险等级 4. 确认摄像头遮挡、设备离线等异常事件 5. 记录后续处置结果 --- ## 四、页面信息结构总结 ``` 顶部导航：返回 / 告警标题 / 更多 ↓ Tab导航：控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期 ↓ 告警概览：今日告警 / 待确认 / 已恢复 ↓ 告警明细：画面遮挡告警 / 心跳延迟告警 ↓ 处置记录：已生成安全事件，待补充 帮我生成APP「图片1」### 顶部导航栏 - 左侧：返回箭头 `<` - 中间标题：**告警** - 右侧：更多菜单图标 `⋯` ### 2. 顶部 Tab 标签栏 当前页面处于告警管理相关模块，Tab 包括： - 控制 - 档案 - 动态 - 维保 - 巡检 - **告警**：当前高亮 - 生命周期 说明这是一个设备全生命周期管理系统，告警只是其中一个子模块。 --- ### 3. 告警概览区 位于页面顶部，用三个数字卡片展示告警统计： 表格 | 指标 | 数值 | 说明 | | --- | --- | --- | | 今日告警 | 2 | 当天产生的告警数量 | | 待确认 | 1 | 尚未处理确认的告警 | | 已恢复 | 1 | 已经恢复或关闭的告警 | 右上角有一个蓝色标签：**1 待确认**，提示当前有待处理告警。 --- ### 4. 告警明细区 这是页面核心内容，展示两条告警记录。 #### 第一条告警：画面遮挡告警 - 类型：**画面遮挡告警** - 时间：2026-06-09 10:23 - 状态：**待确认**，橙色 / 黄色标签 - 风险等级：**高** - 设备名称：暖通演示楼 / 2F / 二楼东侧 - 事件描述：AI 值守 核查遮挡摄像头角度 这条属于**视频 / 摄像头类智能告警**，系统识别到摄像头可能被遮挡，需要人工确认。 #### 第二条告警：心跳延迟告警 - 类型：**心跳延迟告警** - 时间：2026-06-08 18:30 - 状态：**已恢复**，绿色标签 - 风险等级：中 - 设备名称：设备名称 - 事件描述：设备心跳超时，离线后恢复 这条属于**设备联网状态告警**，说明设备曾经失联，后来重新上线。 --- ### 5. 处置记录区 - 标题：**处置记录** - 内容：已生成安全事件 - 状态：**待补充** 说明系统已经生成了事件记录，但处理备注或工单信息还没有完全填写。 --- ## 三、页面业务定位 这个页面主要用于**运维人员查看和处理设备告警**，核心作用是： 1. 快速了解今日告警数量 2. 判断哪些告警待处理 3. 查看告警类型、设备位置和风险等级 4. 确认摄像头遮挡、设备离线等异常事件 5. 记录后续处置结果 --- ## 四、页面信息结构总结 ``` 顶部导航：返回 / 告警标题 / 更多 ↓ Tab导航：控制 / 档案 / 动态 / 维保 / 巡检 / 告警 / 生命周期 ↓ 告警概览：今日告警 / 待确认 / 已恢复 ↓ 告警明细：画面遮挡告警 / 心跳延迟告警 ↓ 处置记录：已生成安全事件，待补充 帮我生成APP
spirittrapspirittrap
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，参考上传图片风格与智宅焕前序UI体系保持一致，为师傅点击进入工作台后的订单核心操作面板，内容较多可上下滚动。 从上到下布局： 1. 顶部导航：左上角“← 返回”，页面标题“订单工作台”，橙色标签“服务中”订单状态。 2. 区域一：项目信息区，区域标题“项目信息”，灰色底只读信息卡片：项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装，窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单：查看产品清单」。 3. 区域二：服务清单与佣金信息区，区域标题“服务与佣金”，服务明细卡片：服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」，下方绿色文字展示“含远程补贴：¥80”，底部大字橙色突出展示“本单总佣金：¥640”，小字标注“此为完成本单后可获得的全部佣金”，佣金信息醒目展示。 4. 区域三：资料互动区，区域标题“资料与沟通”，子Tab切换：客户资料 | 我的上传 | 沟通记录，当前展示客户资料：文件列表占位示意：📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png，每个文件右侧有“下载”按钮；虚线框示意切换至我的上传：“+ 上传文件”按钮，上传可选标签：户型图/现场照片/方案图纸/验收单/其他，占位已上传文件列表；虚线框示意切换至沟通记录：“+ 发起资料请求”，输入框+发送按钮，占位对话记录列表。 5. 区域四：关键操作区，区域标题“操作”，当前为安装调试师傅，全宽按钮依次展示：主色“预约客户”按钮，下方标注“已预约：2026-07-15 9:00”；主色“到达签到”按钮，下方标注“签到时间：9:03”；次要全宽按钮“签退及日志”，下方标注“填写今日工作概要（选填）”；高亮警示色全宽按钮“提交验收”，下方标注“上传完工照片或视频”；虚线框标注：“如角色为项目经理，额外展示 ↓”，额外展示按钮“项目经理审核”。 操作按钮清晰，状态明确，资料互动子Tab切换用虚线框示意即可，所有文字清晰可见，使用无衬线字体，整体风格与上传参考图及前序设计保持一致。生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，参考上传图片风格与智宅焕前序UI体系保持一致，为师傅点击进入工作台后的订单核心操作面板，内容较多可上下滚动。 从上到下布局： 1. 顶部导航：左上角“← 返回”，页面标题“订单工作台”，橙色标签“服务中”订单状态。 2. 区域一：项目信息区，区域标题“项目信息”，灰色底只读信息卡片：项目名称「张先生家智能改造」、项目地址「上海市闵行区XX路XX号」、项目概述「全屋智能开关安装，窗帘电机安装」、户型面积「120㎡」、项目类型「平层」、预期上门时间「2026-07-15」、标签「时间可协商」、可展开链接「关联产品订单：查看产品清单」。 3. 区域二：服务清单与佣金信息区，区域标题“服务与佣金”，服务明细卡片：服务名称「现场安装调试」、数量「1次」、佣金单价「¥560」、小计「¥560」，下方绿色文字展示“含远程补贴：¥80”，底部大字橙色突出展示“本单总佣金：¥640”，小字标注“此为完成本单后可获得的全部佣金”，佣金信息醒目展示。 4. 区域三：资料互动区，区域标题“资料与沟通”，子Tab切换：客户资料 | 我的上传 | 沟通记录，当前展示客户资料：文件列表占位示意：📄 户型图.pdf、🖼️ 客厅照片.jpg、🖼️ 开关位置图.png，每个文件右侧有“下载”按钮；虚线框示意切换至我的上传：“+ 上传文件”按钮，上传可选标签：户型图/现场照片/方案图纸/验收单/其他，占位已上传文件列表；虚线框示意切换至沟通记录：“+ 发起资料请求”，输入框+发送按钮，占位对话记录列表。 5. 区域四：关键操作区，区域标题“操作”，当前为安装调试师傅，全宽按钮依次展示：主色“预约客户”按钮，下方标注“已预约：2026-07-15 9:00”；主色“到达签到”按钮，下方标注“签到时间：9:03”；次要全宽按钮“签退及日志”，下方标注“填写今日工作概要（选填）”；高亮警示色全宽按钮“提交验收”，下方标注“上传完工照片或视频”；虚线框标注：“如角色为项目经理，额外展示 ↓”，额外展示按钮“项目经理审核”。 操作按钮清晰，状态明确，资料互动子Tab切换用虚线框示意即可，所有文字清晰可见，使用无衬线字体，整体风格与上传参考图及前序设计保持一致。
创意 × 4
678typ3ch-HB678typ3ch-HB
生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，与智宅焕前序UI风格保持一致，是下单流程核心页面，客户可在此选配服务、查看计价、填写项目信息，页面内容可滚动。 从上到下布局： 1. 顶部步骤指示器：步骤条为「①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价（当前高亮）→ ④确认支付（置灰）」。 2. 区域一：添加服务与计价，区域标题“选择服务”，全宽虚线边框“+ 添加服务”按钮，下方展示2个已添加服务卡片，核心信息清晰： 服务卡片1：名称“现场安装调试”，标签“按数量计价”，数量选择器[-] 1 [+]，单价¥800/次，小计¥800，右侧×删除按钮。 服务卡片2：名称“智能方案设计”，标签“按面积分档”，面积输入框“120 ㎡”，单价¥15/㎡，小计¥1,800，右侧×删除按钮。 卡片下方实时突出展示“服务总计：¥2,600”。 3. 区域二：填写项目信息，区域标题“项目信息”，依次排列表单占位字段： 项目名称输入框（占位“如：张先生家智能改造”），项目地址（已选城市 + 详细地址输入框，占位“请填写详细地址”），户型面积数字输入框（占位“㎡”），项目类型下拉选择（选项：平层/复式/别墅/工装/其他），需求描述多行文本输入框（占位“请描述您的项目需求...”，标注选填），关联已购产品订单下拉选择框（占位“选择历史订单”，标注选填）。 资料上传区：虚线框上传按钮，带“+ 上传文件”图标，提示文字“请上传户型图、清单、现场照片等资料，有助于我们更快审核您的订单”。 4. 底部固定悬浮操作区：左侧突出展示“订单总价：¥2,600”，右侧主色高亮按钮“提交订单并支付”。 已添加服务卡片为核心信息区，总价视觉突出，所有文字清晰可见，使用无衬线字体，整体风格与前序设计保持统一。生成一张微信小程序竖屏UI设计图，宽高比9:16，深色专业风，与智宅焕前序UI风格保持一致，是下单流程核心页面，客户可在此选配服务、查看计价、填写项目信息，页面内容可滚动。 从上到下布局： 1. 顶部步骤指示器：步骤条为「①服务模式 ✓ → ②城市选择 ✓ → ③服务与计价（当前高亮）→ ④确认支付（置灰）」。 2. 区域一：添加服务与计价，区域标题“选择服务”，全宽虚线边框“+ 添加服务”按钮，下方展示2个已添加服务卡片，核心信息清晰： 服务卡片1：名称“现场安装调试”，标签“按数量计价”，数量选择器[-] 1 [+]，单价¥800/次，小计¥800，右侧×删除按钮。 服务卡片2：名称“智能方案设计”，标签“按面积分档”，面积输入框“120 ㎡”，单价¥15/㎡，小计¥1,800，右侧×删除按钮。 卡片下方实时突出展示“服务总计：¥2,600”。 3. 区域二：填写项目信息，区域标题“项目信息”，依次排列表单占位字段： 项目名称输入框（占位“如：张先生家智能改造”），项目地址（已选城市 + 详细地址输入框，占位“请填写详细地址”），户型面积数字输入框（占位“㎡”），项目类型下拉选择（选项：平层/复式/别墅/工装/其他），需求描述多行文本输入框（占位“请描述您的项目需求...”，标注选填），关联已购产品订单下拉选择框（占位“选择历史订单”，标注选填）。 资料上传区：虚线框上传按钮，带“+ 上传文件”图标，提示文字“请上传户型图、清单、现场照片等资料，有助于我们更快审核您的订单”。 4. 底部固定悬浮操作区：左侧突出展示“订单总价：¥2,600”，右侧主色高亮按钮“提交订单并支付”。 已添加服务卡片为核心信息区，总价视觉突出，所有文字清晰可见，使用无衬线字体，整体风格与前序设计保持统一。
678typ3ch-HB678typ3ch-HB
「图片1」## 顶部全局导航栏（页面最顶端） 1. 左侧：返回箭头按钮，可退回上一级设备列表页 2. 中间横向三标签（页面一级路由） - 设备档案（当前所属大模块，蓝色下划线高亮） - 设备物联 - 数据统计 3. 右侧：刷新图标，一键刷新全页面设备实时数据 ## 二、顶部简易实时物联数据栏（导航下方） 折叠简化版数据卡片，双栏展示设备核心运行状态： - 左栏：在线状态 → 在线 - 右栏：运行模式 → 制冷 完整数据需在「设备物联」标签页查看详情。 ## 三、二级功能 Tab 标签栏（页面子路由切换） 横向 7 个分类标签，蓝色下划线代表当前激活页面「生命周期」，所有设备管理功能全部收拢在此： 1. 控制：设备远程操控（开关、温度、模式调节） 2. 概览：设备基础参数总览 3. 动态：设备实时运行消息推送 4. 维保：保养工单、维保计划 5. 巡检：定期巡检任务与记录 6. 告警：设备异常告警清单、处置记录 7. 生命周期（当前页）：设备全流程时间线档案 ## 四、核心区域：生命周期时间轴列表模块 ### 模块基础框架 左侧垂直**时间轴引导线** + 右侧独立事件卡片，每条事件左侧搭配对应功能图标区分业务类型，按时间由远到近从上至下排序。 ### 单条事件卡片统一字段模板 每条生命周期记录固定包含： 1. 事件标题（设备编号 + 业务类型：SB-CAMERA-0001 XXX） 2. 精确发生时间（年 - 月 - 日 时分秒） 3. 多组明细键值对（内容 / 位置 / 操作人员 / 投运状态等，随业务类型动态变化） ### 页面已展示 4 条生命周期节点（时间由早到晚） 1. **设备建档（2025-12-22）** 图标：档案文件；内容：录入设备基础参数，操作人：超级管理员 2. **设备投运（2026-01-21）** 图标：播放启动；完成联调正式上线，绑定安装位置暖通演示楼 2F 东侧 3. **巡检复核（2026-03-22）** 图标：勾选清单；季度巡检，核对设备运行参数 4. **维保记录（2026-04-11）** 图标：维修扳手；页面仅展示标题与时间，完整明细需下滑查看帮我设计APP「图片1」## 顶部全局导航栏（页面最顶端） 1. 左侧：返回箭头按钮，可退回上一级设备列表页 2. 中间横向三标签（页面一级路由） - 设备档案（当前所属大模块，蓝色下划线高亮） - 设备物联 - 数据统计 3. 右侧：刷新图标，一键刷新全页面设备实时数据 ## 二、顶部简易实时物联数据栏（导航下方） 折叠简化版数据卡片，双栏展示设备核心运行状态： - 左栏：在线状态 → 在线 - 右栏：运行模式 → 制冷 完整数据需在「设备物联」标签页查看详情。 ## 三、二级功能 Tab 标签栏（页面子路由切换） 横向 7 个分类标签，蓝色下划线代表当前激活页面「生命周期」，所有设备管理功能全部收拢在此： 1. 控制：设备远程操控（开关、温度、模式调节） 2. 概览：设备基础参数总览 3. 动态：设备实时运行消息推送 4. 维保：保养工单、维保计划 5. 巡检：定期巡检任务与记录 6. 告警：设备异常告警清单、处置记录 7. 生命周期（当前页）：设备全流程时间线档案 ## 四、核心区域：生命周期时间轴列表模块 ### 模块基础框架 左侧垂直**时间轴引导线** + 右侧独立事件卡片，每条事件左侧搭配对应功能图标区分业务类型，按时间由远到近从上至下排序。 ### 单条事件卡片统一字段模板 每条生命周期记录固定包含： 1. 事件标题（设备编号 + 业务类型：SB-CAMERA-0001 XXX） 2. 精确发生时间（年 - 月 - 日 时分秒） 3. 多组明细键值对（内容 / 位置 / 操作人员 / 投运状态等，随业务类型动态变化） ### 页面已展示 4 条生命周期节点（时间由早到晚） 1. **设备建档（2025-12-22）** 图标：档案文件；内容：录入设备基础参数，操作人：超级管理员 2. **设备投运（2026-01-21）** 图标：播放启动；完成联调正式上线，绑定安装位置暖通演示楼 2F 东侧 3. **巡检复核（2026-03-22）** 图标：勾选清单；季度巡检，核对设备运行参数 4. **维保记录（2026-04-11）** 图标：维修扳手；页面仅展示标题与时间，完整明细需下滑查看帮我设计APP
spirittrapspirittrap
「图片1」「图片1」一、顶部用户信息与操作栏 左侧展示账号身份：蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标：搜索、新增、设置，支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片，作为页面价值引导区： 主标题：设备业务应用，从工作台开始 补充说明：快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用：总览工作台核心业务范围，直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局，放置高频核心功能，支持自定义配置： 第一行：设备管理、空间态势、流程中心、AI 智能体 第二行：消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能，适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理，支持按业务维度切换筛选： 分类标签栏：包含「最近使用（当前选中）、设备业务、运营管理、流程协同」四类，附带更多分类按钮 当前「最近使用」分类下，展示 4 个近期高频使用的应用：设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航，共 5 个入口，当前高亮选中「工作台」页面，从左到右依次为：首页、设备、AI 智能体核心按钮（紫蓝渐变悬浮样式）、工作台、我的，支持快速切换核心业务板块。帮我生成APP「图片1」「图片1」一、顶部用户信息与操作栏 左侧展示账号身份：蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标：搜索、新增、设置，支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片，作为页面价值引导区： 主标题：设备业务应用，从工作台开始 补充说明：快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用：总览工作台核心业务范围，直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局，放置高频核心功能，支持自定义配置： 第一行：设备管理、空间态势、流程中心、AI 智能体 第二行：消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能，适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理，支持按业务维度切换筛选： 分类标签栏：包含「最近使用（当前选中）、设备业务、运营管理、流程协同」四类，附带更多分类按钮 当前「最近使用」分类下，展示 4 个近期高频使用的应用：设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航，共 5 个入口，当前高亮选中「工作台」页面，从左到右依次为：首页、设备、AI 智能体核心按钮（紫蓝渐变悬浮样式）、工作台、我的，支持快速切换核心业务板块。帮我生成APP
spirittrapspirittrap
高端教学高端教学
「图片1」参考图片风格，重新生成画面内容，顶部用户信息与操作栏 左侧展示账号身份：蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标：搜索、新增、设置，支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片，作为页面价值引导区： 主标题：设备业务应用，从工作台开始 补充说明：快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用：总览工作台核心业务范围，直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局，放置高频核心功能，支持自定义配置： 第一行：设备管理、空间态势、流程中心、AI 智能体 第二行：消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能，适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理，支持按业务维度切换筛选： 分类标签栏：包含「最近使用（当前选中）、设备业务、运营管理、流程协同」四类，附带更多分类按钮 当前「最近使用」分类下，展示 4 个近期高频使用的应用：设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航，共 5 个入口，当前高亮选中「工作台」页面，从左到右依次为：首页、设备、AI 智能体核心按钮（紫蓝渐变悬浮样式）、工作台、我的，支持快速切换核心业务板块。生成APP「图片1」参考图片风格，重新生成画面内容，顶部用户信息与操作栏 左侧展示账号身份：蓝紫渐变头像、用户名「超级管理员」、所属部门「技术部・设备运维组」 右侧排布三个全局操作图标：搜索、新增、设置，支持全局内容检索、快速新建事项、系统配置调整。 二、功能引导 Banner 青绿色渐变卡片，作为页面价值引导区： 主标题：设备业务应用，从工作台开始 补充说明：快速进入设备、空间态势、维保、巡检、能耗与流程中心 作用：总览工作台核心业务范围，直观传递页面定位。 三、常用功能快捷入口 采用 2 行 4 列的宫格布局，放置高频核心功能，支持自定义配置： 第一行：设备管理、空间态势、流程中心、AI 智能体 第二行：消息中心、设备维保、设备巡检、添加常用 「添加常用」入口支持用户按需自定义快捷功能，适配不同岗位的使用习惯。 四、全部应用模块 对全量业务应用做分类管理，支持按业务维度切换筛选： 分类标签栏：包含「最近使用（当前选中）、设备业务、运营管理、流程协同」四类，附带更多分类按钮 当前「最近使用」分类下，展示 4 个近期高频使用的应用：设备档案、空间视图、能耗管理、流程中心 五、底部全局导航栏 页面底部固定的主导航，共 5 个入口，当前高亮选中「工作台」页面，从左到右依次为：首页、设备、AI 智能体核心按钮（紫蓝渐变悬浮样式）、工作台、我的，支持快速切换核心业务板块。生成APP
spirittrapspirittrap
1q2c8q3vwt2k7u4q2-HB1q2c8q3vwt2k7u4q2-HB
生成一张微信小程序竖屏UI设计图，宽高比为9:16，深色专业风，与智宅焕后台管理端深蓝灰色调统一，是客户点击开始下单后进入的下单选择页面。 从上到下布局： 1. 顶部步骤指示器：显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」，当前①服务模式和②城市选择高亮，后续步骤置灰。 2. 区域一：选择服务模式，区域标题文字“选择服务模式”，两个大卡片上下排列，互斥选择，点击后切换选中状态： 卡片A（当前选中，带高亮边框）：标题“远程服务”，副标题“无需师傅上门”，描述“适用于方案设计、远程技术支持等”，图标用💻示意； 卡片B（未选中）：标题“现场服务”，副标题“需师傅上门”，描述“适用于需要师傅到现场的服务”，图标用🔧示意；两个决策卡片醒目，互斥关系清晰。 3. 区域二：选择服务城市，当前选中远程服务，因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”，示意条件触发状态切换；若选择现场服务，将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区：固定在底部，显示“下一步：选择服务”按钮，标注说明“当前选择为远程服务，城市选择步骤自动跳过，已完成当前步骤，按钮高亮可点击”。 整体风格清晰专业，所有文字清晰可见，使用无衬线字体，和已有智宅焕UI风格保持统一。生成一张微信小程序竖屏UI设计图，宽高比为9:16，深色专业风，与智宅焕后台管理端深蓝灰色调统一，是客户点击开始下单后进入的下单选择页面。 从上到下布局： 1. 顶部步骤指示器：显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」，当前①服务模式和②城市选择高亮，后续步骤置灰。 2. 区域一：选择服务模式，区域标题文字“选择服务模式”，两个大卡片上下排列，互斥选择，点击后切换选中状态： 卡片A（当前选中，带高亮边框）：标题“远程服务”，副标题“无需师傅上门”，描述“适用于方案设计、远程技术支持等”，图标用💻示意； 卡片B（未选中）：标题“现场服务”，副标题“需师傅上门”，描述“适用于需要师傅到现场的服务”，图标用🔧示意；两个决策卡片醒目，互斥关系清晰。 3. 区域二：选择服务城市，当前选中远程服务，因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”，示意条件触发状态切换；若选择现场服务，将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区：固定在底部，显示“下一步：选择服务”按钮，标注说明“当前选择为远程服务，城市选择步骤自动跳过，已完成当前步骤，按钮高亮可点击”。 整体风格清晰专业，所有文字清晰可见，使用无衬线字体，和已有智宅焕UI风格保持统一。
678typ3ch-HB678typ3ch-HB
生成一张微信小程序竖屏UI设计图，宽高比为9:16，深色专业风，与智宅焕后台管理端深蓝灰色调统一，是客户点击开始下单后进入的下单选择页面。 从上到下布局： 1. 顶部步骤指示器：显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」，当前①服务模式和②城市选择高亮，后续步骤置灰。 2. 区域一：选择服务模式，区域标题文字“选择服务模式”，两个大卡片上下排列，互斥选择，点击后切换选中状态： 卡片A（当前选中，带高亮边框）：标题“远程服务”，副标题“无需师傅上门”，描述“适用于方案设计、远程技术支持等”，图标用💻示意； 卡片B（未选中）：标题“现场服务”，副标题“需师傅上门”，描述“适用于需要师傅到现场的服务”，图标用🔧示意；两个决策卡片醒目，互斥关系清晰。 3. 区域二：选择服务城市，当前选中远程服务，因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”，示意条件触发状态切换；若选择现场服务，将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区：固定在底部，显示“下一步：选择服务”按钮，标注说明“当前选择为远程服务，城市选择步骤自动跳过，已完成当前步骤，按钮高亮可点击”。 整体风格清晰专业，所有文字清晰可见，使用无衬线字体，和已有智宅焕UI风格保持统一。生成一张微信小程序竖屏UI设计图，宽高比为9:16，深色专业风，与智宅焕后台管理端深蓝灰色调统一，是客户点击开始下单后进入的下单选择页面。 从上到下布局： 1. 顶部步骤指示器：显示下单流程步骤条「①服务模式 → ②城市选择 → ③服务与计价 → ④确认支付」，当前①服务模式和②城市选择高亮，后续步骤置灰。 2. 区域一：选择服务模式，区域标题文字“选择服务模式”，两个大卡片上下排列，互斥选择，点击后切换选中状态： 卡片A（当前选中，带高亮边框）：标题“远程服务”，副标题“无需师傅上门”，描述“适用于方案设计、远程技术支持等”，图标用💻示意； 卡片B（未选中）：标题“现场服务”，副标题“需师傅上门”，描述“适用于需要师傅到现场的服务”，图标用🔧示意；两个决策卡片醒目，互斥关系清晰。 3. 区域二：选择服务城市，当前选中远程服务，因此用虚线框+文字标注“选择‘现场服务’后将显示城市选择”，示意条件触发状态切换；若选择现场服务，将展示区域标题“选择服务城市”、占位选择框“请选择项目所在城市”和对应提示文字。 4. 底部操作区：固定在底部，显示“下一步：选择服务”按钮，标注说明“当前选择为远程服务，城市选择步骤自动跳过，已完成当前步骤，按钮高亮可点击”。 整体风格清晰专业，所有文字清晰可见，使用无衬线字体，和已有智宅焕UI风格保持统一。
678typ3ch-HB678typ3ch-HB
678typ3ch-HB678typ3ch-HB
乐清_乐清_
乐清_乐清_
乐清_乐清_