创意预览图

B端企业级后台管理系统完整页面设计,储能电厂生产管理系统-定期工作配置详情页,PC端2K分辨率,Element UI风格,蓝色主色调#1677ff,白色背景,与参考图风格完全统一。 整体布局结构:

用户头像

GD908140592

2026.08.03
火电厂信息管理系统「定期工作配置-周期规则」标签页表单页面,UI设计,与参考图风格完全一致,深蓝左侧导航栏+白色主内容区,蓝白配色,企业级后台管理系统风格。左侧导航:生产管理系统logo,首页、两票管理、定期工作管理(展开,定期工作配置高亮选中)、基础数据管理、系统设置。顶部面包屑:首页 / 定期工作管理 / 定期工作配置 / 编辑配置,右上角通知铃铛、帮助、管理员头像。页面标题:新增定期工作配置,顶部标签页导航:基础信息(已完成)、周期规则(当前激活,蓝色下划线)、责任配置、合规配置。主内容区为表单布局,分左右两列。第一部分:周期类型【下拉单选,必填,红色星号】,下拉选项:每班/每日/每周/每月/指定日期,当前选中「每周」示例。第二部分:动态参数区域(当前展示每周类型参数),星期多选复选框组:周一、周二(选中高亮)、周三、周四、周五、周六、周日;目标执行班次【单选】:白班(选中)/中班/夜班。下方小字业务说明:系统根据周期规则算出计划执行日期+目标班次,自动匹配排班日历中对应值班班组推送任务。第三部分:全局通用配置项(所有周期统一展示),生效起始日期【必填,日期选择器】,失效截止日期【选填,日期选择器,为空永久生效】,临期提前提醒时长(h)【数字输入框,默认0,提示推荐重点工作24~72h】,允许执行宽限期(h)【必填,数字输入框,默认24h,提示宽限期结束不得跨至下一班次,超出自动截断】。底部右侧按钮组:上一步、保存草稿、预览周期、下一步(蓝色主按钮)。整体风格简洁专业,高保真UI,表单标签左对齐,输入框右对齐,信息层级清晰,与参考图视觉风格统一火电厂信息管理系统「定期工作配置-周期规则」标签页表单页面,UI设计,与参考图风格完全一致,深蓝左侧导航栏+白色主内容区,蓝白配色,企业级后台管理系统风格。左侧导航:生产管理系统logo,首页、两票管理、定期工作管理(展开,定期工作配置高亮选中)、基础数据管理、系统设置。顶部面包屑:首页 / 定期工作管理 / 定期工作配置 / 编辑配置,右上角通知铃铛、帮助、管理员头像。页面标题:新增定期工作配置,顶部标签页导航:基础信息(已完成)、周期规则(当前激活,蓝色下划线)、责任配置、合规配置。主内容区为表单布局,分左右两列。第一部分:周期类型【下拉单选,必填,红色星号】,下拉选项:每班/每日/每周/每月/指定日期,当前选中「每周」示例。第二部分:动态参数区域(当前展示每周类型参数),星期多选复选框组:周一、周二(选中高亮)、周三、周四、周五、周六、周日;目标执行班次【单选】:白班(选中)/中班/夜班。下方小字业务说明:系统根据周期规则算出计划执行日期+目标班次,自动匹配排班日历中对应值班班组推送任务。第三部分:全局通用配置项(所有周期统一展示),生效起始日期【必填,日期选择器】,失效截止日期【选填,日期选择器,为空永久生效】,临期提前提醒时长(h)【数字输入框,默认0,提示推荐重点工作24~72h】,允许执行宽限期(h)【必填,数字输入框,默认24h,提示宽限期结束不得跨至下一班次,超出自动截断】。底部右侧按钮组:上一步、保存草稿、预览周期、下一步(蓝色主按钮)。整体风格简洁专业,高保真UI,表单标签左对齐,输入框右对齐,信息层级清晰,与参考图视觉风格统一
生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,整体为AI写作工作台的设计体系,是偏数据管理和控制感的管理员后台页面。 页面布局: 1. 左侧宽度占15%,为侧边导航栏,顶部显示平台Logo和“智宅焕管理后台”文字,菜单项依次为:订单管理、服务产品配置(当前选中项,高亮显示)、师傅管理、提现审核、系统设置。 2. 右侧为内容区,分为上下两个区域: - 上半部分为服务列表:顶部标题文字“服务产品管理”,右侧有一个主色高亮的“+ 新增服务”按钮;下方是服务列表表格,列标题为:服务名称 | 服务模式 | 计价方式 | 单价 | 开放城市 | 状态 | 操作;表格内展示3-4条示例数据行,每行右侧有“编辑”和“停用/启用”按钮,服务模式列使用蓝色标签“远程服务”、橙色标签“现场服务”区分。 - 下半部分为编辑表单区,标题文字“新增/编辑服务产品”;表单字段从上到下依次为:服务名称输入框,服务模式下拉选择框(选项:远程服务、现场服务),远程费开关(标注仅选择“现场服务”时出现,含开关按钮和说明文字输入框),开放城市城市选择器(标注仅现场服务时必填,远程服务时自动隐藏),计价方式下拉选择框(选项:一口价/按面积分档/按城市分档/按城市+面积分档/按次/按周期/阶梯计价/按数量),单价数字输入框,计价单位输入框(占位示例:套/次/天),数量选择开关按钮,服务详情大高度富文本编辑区;表单底部有“保存”按钮和“取消”按钮。 通过标注文字示意表单区域的字段联动关系,整体要体现功能完整的配置后台,所有文字清晰可见,使用无衬线字体,UI风格专业整洁。生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,整体为AI写作工作台的设计体系,是偏数据管理和控制感的管理员后台页面。
页面布局:
1. 左侧宽度占15%,为侧边导航栏,顶部显示平台Logo和“智宅焕管理后台”文字,菜单项依次为:订单管理、服务产品配置(当前选中项,高亮显示)、师傅管理、提现审核、系统设置。
2. 右侧为内容区,分为上下两个区域:
- 上半部分为服务列表:顶部标题文字“服务产品管理”,右侧有一个主色高亮的“+ 新增服务”按钮;下方是服务列表表格,列标题为:服务名称 | 服务模式 | 计价方式 | 单价 | 开放城市 | 状态 | 操作;表格内展示3-4条示例数据行,每行右侧有“编辑”和“停用/启用”按钮,服务模式列使用蓝色标签“远程服务”、橙色标签“现场服务”区分。
- 下半部分为编辑表单区,标题文字“新增/编辑服务产品”;表单字段从上到下依次为:服务名称输入框,服务模式下拉选择框(选项:远程服务、现场服务),远程费开关(标注仅选择“现场服务”时出现,含开关按钮和说明文字输入框),开放城市城市选择器(标注仅现场服务时必填,远程服务时自动隐藏),计价方式下拉选择框(选项:一口价/按面积分档/按城市分档/按城市+面积分档/按次/按周期/阶梯计价/按数量),单价数字输入框,计价单位输入框(占位示例:套/次/天),数量选择开关按钮,服务详情大高度富文本编辑区;表单底部有“保存”按钮和“取消”按钮。
通过标注文字示意表单区域的字段联动关系,整体要体现功能完整的配置后台,所有文字清晰可见,使用无衬线字体,UI风格专业整洁。
生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。 页面布局: 1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。 2. 右侧为派单工作台内容区,分为三个区域: - 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。 - 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。 - 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。 所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。生成一张网页端后台管理UI设计图,宽高比16:9,深色专业风格,深蓝灰底色,与后台管理端风格统一。
页面布局:
1. 左侧侧边导航栏,布局内容与第一张后台页面保持一致:顶部平台Logo+“智宅焕管理后台”,菜单项:订单管理(当前选中项,高亮显示)、服务产品配置、师傅管理、提现审核、系统设置。
2. 右侧为派单工作台内容区,分为三个区域:
- 顶部订单概要区:标题文字“派单工作台”,下方以横向卡片形式展示只读订单概要信息:项目名称XXX,客户姓名/手机号,项目城市上海,项目地址上海市闵行区XX路XX号,预期上门时间2026-07-15,时间灵活性标签“时间可协商”,订单总服务数3项,订单总金额¥2,580;卡片右上角有一个低调样式“追加远程费”按钮。
- 中部任务拆分区:标题文字“任务拆分与指派”,下方纵向排列展示3个系统自动拆分的任务卡片,每个任务卡片:左侧信息区包含服务名称(如现场安装调试)、数量、服务城市、预期上门时间、时间灵活性标签、客户支付单价(灰色小字并标注“仅管理员可见”)、指派状态标签;右侧操作区包含“指派师傅”主色高亮按钮,“修改佣金”低调样式按钮,已指派时显示佣金金额。三个任务卡片分别是第一个“待指派”、第二个“已指派”、第三个“待指派”,状态区分清晰,任务拆分卡片为核心交互区需要突出展示。
- 底部操作区:固定悬浮在底部,包含“一键通知师傅”主色高亮按钮(提示所有任务已指派才可点击,否则置灰)和“返回订单列表”次要按钮,旁边附带提示文字“请先完成所有任务指派后,再通知师傅”,底部操作区始终可见。
所有文字清晰可见,使用无衬线字体,UI风格专业整洁,整体与上一张智宅焕管理后台设计风格保持统一。