2.车辆查询弹窗

text
2026年7月17日1 min read120 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 全局提示信息区 → 基础填报表单区 → 查询地区切换组 → 时间筛选表单区 → 车辆信息分组表格区 → 分页控件区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、页面底部信息区。
分组规则:业务模块垂直分隔,填报表单单行横向排布,车辆信息独立表格容器承载录入行。

二、分区域元素拆解

(一)弹窗顶部标题栏

  1. 静态标题文本:上级部门权限批量查询,附带问号说明图标
  2. 右上角图标按钮组
    • 全屏/还原图标按钮
    • 关闭弹窗图标按钮(×)

(二)弹窗顶部提示信息区

带标识圆点提示静态文本:当前部门机器人证书不在线,将调用上级机器人证书查询,提交后将发送至上级审核,审核通过后展示查询结果。

(三)基础填报表单区(带*必填标识,单行横向排布控件)

  1. 单行文本输入框:任务名称(占位:请输入查询的任务,例如:案件名称、事件名称等)
  2. 单选按钮组:研判类型(案件、事件,案件为当前选中)
  3. 单行文本输入框:案件编号(占位:请输入案件编号)
  4. 跨行列多行文本域:查询事由(占位:例:因xxx案件或xxx事件,需要对嫌疑人信息进行查询。)

(四)查询地区单选分组区(横向双单选按钮)

  1. 单选按钮:全国(当前选中)
  2. 单选按钮:按省份选择

(五)时间筛选表单区(带*必填标识)

  1. 日期选择输入框:开始时间(占位:选择开始日期)
  2. 快捷时间文字按钮:一月前、半年前
  3. 日期选择输入框:结束时间(占位:选择结束日期)

(六)车辆信息表格区

  1. 分组标题静态文本:车辆信息
  2. 表格右上角主功能按钮:导入车辆信息(批量文件上传触发按钮)
  3. 表头列:序号、车牌号(必填)、车辆颜色、操作
  4. 数据录入行(共2行)
    • 单行文本输入框:车牌号(占位:请输入)
    • 下拉选择控件:车辆颜色(占位:请选择)
    • 行内图标操作按钮:新增加号按钮、删除垃圾桶按钮

(七)分页控件(表格右下角)

  1. 数据总量文本:共2条
  2. 每页条数下拉选择框:10条/页
  3. 翻页控件:上一页箭头、页码数字按钮1、下一页箭头
  4. 页码跳转输入框、前往文字按钮

(八)弹窗底部操作按钮组(居中横向排布)

  1. 次按钮:取消
  2. 主按钮:确定

(九)无交互元素

页面半透明重复水印文本

三、元素类型分类汇总清单

1. 表单类输入控件

单行文本输入框

任务名称、案件编号、表格行车牌号录入框、分页页码跳转输入框

多行文本域

查询事由

日期选择控件

开始时间日期输入框、结束时间日期输入框

选择类控件

  1. 单选按钮组:研判类型(案件/事件)、查询地区(全国/按省份选择)
  2. 下拉选择控件:车辆颜色下拉、分页每页条数下拉

上传控件

导入车辆信息(批量文件上传触发按钮)

2. 按钮类元素

弹窗控制图标按钮

弹窗全屏按钮、弹窗关闭×按钮、标题问号说明图标

快捷时间按钮

一月前、半年前

批量导入功能按钮

导入车辆信息(主按钮)

表格行图标操作按钮

新增(加号图标)、删除(垃圾桶图标)

分页按钮

上一页、下一页、前往

弹窗底部业务按钮

取消(次按钮)、确定(主按钮)

3. 表格/列表类组件

车辆录入表格:表头3列、2条空白录入行;配套全套分页控件(总量统计、每页条数下拉、翻页箭头、页码跳转)

4. 静态文本展示元素

弹窗标题、顶部提示文案、输入框占位提示、必填标识*、表格分组标题、分页总量说明文字、水印背景文本

5. 缺失组件说明

无顶部全局导航、侧边树形菜单、页面标签、数据详情展示卡片、批量操作文字按钮、图片预览控件、独立附件上传区域、页面底部状态栏信息区、筛选条件表单