1.车牌号查询主页面
一、整体布局结构
页面采用三栏固定布局:顶部通栏全局导航、左侧固定竖栏树形侧边菜单、右侧剩余区域为主内容区;主内容垂直分层:页面标签栏 → 标题展示区 → 检索表单区 → 筛选多选+操作按钮组,无数据列表、底部信息区。
分组规则:按业务功能垂直分层,同层级组件水平并排。
二、分区域元素拆解
(一)顶部全局导航通栏
- 系统标识文本:九霄
- 横向导航文字按钮
- 辅侦工具箱
- 警务大模型
- 资金追踪
- 预警管控
- 国反新机制
- 右上角功能组件
- 图标下拉按钮:帮助中心
- 账号下拉组件:sd@123
(二)左侧侧边竖栏菜单栏
- 侧边栏顶部控件
- 单行搜索输入框:占位「搜索菜单」,前置搜索图标
- 侧边栏折叠图标按钮(输入框右侧)
- 一级树形菜单(带折叠下拉箭头)
- 万能查(展开状态)
- 二级子菜单:万能查检索(当前激活选中)、万能查询结果
- 国反
- 云搜(无折叠箭头)
- 部刑专
- 部视综
- 网黑
- 万能查(展开状态)
- 静态分组标签文本:互联网
- 后续一级树形菜单(均带折叠下拉箭头)
- YunJing
- YunMai
- ShenBu
- TianJi
(三)右侧主内容区 - 头部页面标签栏
- 页面标签:万能查检索(带关闭叉号,激活状态)
- 右上角图标文字按钮:万能查配置
(四)右侧主内容区 - 标题数据展示区
- 无交互装饰图标
- 主标题静态文本:万能查
- 副标题描述文本:汇聚多源数据,一键查询无忧
(五)右侧主内容区 - 检索表单区
- 单选标签切换组(横向单选)
- 身份证
- 手机号
- 车牌号(当前选中)
- 人像
- 银行卡
- 单行文本检索输入框
- 前置放大镜搜索图标
- 占位提示文字:输入您想搜索的内容
(六)右侧主内容区 - 筛选多选+操作按钮组(同一容器左右分区)
左侧筛选模块
- 说明文本:请选择查询结果 + 快捷文字按钮「全选」
- 复选框多选组(均未勾选)
- 轨迹信息
- 主体信息
右侧操作按钮(横向排布)
- 次按钮:批量导入
- 主查询按钮:搜索
(七)页面悬浮元素
右下角智能机器人图标悬浮按钮
(八)无交互元素
页面半透明重复水印文本
三、元素类型分类汇总清单
1. 表单类输入控件
单行文本输入框
侧边栏菜单搜索框、万能查主检索输入框
选择类控件
- 单选标签切换组:身份证/手机号/车牌号/人像/银行卡
- 复选框多选组:轨迹信息、主体信息
缺失表单元素
无日期选择、下拉选择器、多行文本域、文件上传控件、单选按钮组
2. 按钮类元素
顶部导航文字功能按钮
辅侦工具箱、警务大模型、资金追踪、预警管控、国反新机制
图标文字按钮
帮助中心、万能查配置
业务操作按钮
批量导入(次按钮)、搜索(主查询按钮)
图标功能按钮
侧边栏折叠按钮、右下角智能助手悬浮按钮
快捷文字操作按钮
全选
标签控制按钮
页面标签关闭叉号
3. 树形菜单组件
一级菜单:万能查、国反、云搜、部刑专、部视综、网黑、YunJing、YunMai、ShenBu、TianJi
二级子菜单(万能查下级):万能查检索、万能查询结果
菜单状态标识:折叠下拉箭头、激活选中高亮标识
4. 静态文本展示元素
系统名称「九霄」、页面主副标题、输入框占位文案、筛选说明文字、侧边分组标签「互联网」、账号文本sd@123、背景水印文本
5. 缺失组件说明
无数据表格/列表、分页控件、行内操作按钮、新增/编辑/删除按钮、底部信息状态栏、弹窗组件、文件上传区域