2.车牌号查询详情页面

text
2026年7月17日阅读约 1 分钟155 字

更新于 2026年7月17日

一、整体布局结构

页面垂直分层排布,自上而下按业务功能划分独立容器分组,无全局顶部导航、侧边菜单栏、页面底部信息区;分层顺序:标题展示区→检索切换&输入区→查询维度筛选+操作按钮组→查询基本信息表单分组→人员列表表格分组→底部提交操作按钮组。
分组规则:同业务模块收纳在独立容器框内,模块间垂直分隔。

二、分区域元素拆解

(一)标题数据展示区

  1. 无交互装饰图标
  2. 主标题静态文本:万能查

(二)检索切换&输入区

  1. 单选标签切换组(横向单选)
    • 身份证
    • 手机号
    • 车牌号(当前选中)
    • 人像
    • 银行卡
  2. 单行文本检索输入框
    • 前置放大镜搜索图标
    • 已填入内容:鲁AM337K

(三)查询维度筛选+操作按钮组(同一容器左右分区)

左侧筛选模块

  1. 说明文本:请选择查询结果 + 快捷文字按钮「全选」
  2. 复选框多选组(全部勾选)
    • 轨迹信息
    • 主体信息

右侧操作按钮(横向排布)

  1. 次按钮:批量导入
  2. 主查询按钮:搜索

(四)查询基本信息表单区(独立分组容器,分组标题:查询基本信息)

带*为必填标识,表单元素分多行列混合排布

  1. 单行文本输入框
    • 案件名称(占位:请输入任务名称)
    • 案件编号(占位:请输入)
    • 查询目的(占位:请输入)
  2. 单选按钮组(研判类型)
    • 单选选项:案件、事件(均未选中)
  3. 多行文本域
    • 简要案情(占位:请输入)
    • 查询对象和本查询的关联性(占位:请输入)
  4. 文件上传控件
    • 标签文本:附件
    • 触发按钮:点击上传

(五)人员列表表格区(独立分组容器,分组标题:人员列表)

  1. 表格顶部说明静态文本:部视综-车辆,慧眼识车
  2. 表格表头列:序号、车牌号、开始时间、结束时间、操作
  3. 表格数据行
    • 第1行(已填充数据)
      车牌号单行输入框:鲁AM337K
      开始时间日期选择控件:2026-05-01 00:00:00
      结束时间日期选择控件:2026-06-16 11:16:31
      行内文字操作按钮:添加、删除
    • 第2行(空白录入行)
      车牌号单行输入框:占位「请输入」
      开始时间日期选择控件:占位「请选择」
      结束时间日期选择控件:占位「请选择」
      行内文字操作按钮:添加、删除
  4. 分页控件(表格右下角)
    • 上一页、下一页箭头图标按钮
    • 当前页码数字框:1
    • 每页条数下拉选择框:10条/页

(六)页面底部操作按钮组(表格下方居中排布)

  1. 次按钮:关闭
  2. 主按钮:确认提交

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

1. 表单类输入控件

单行文本输入框

万能查检索主输入框、案件名称、案件编号、查询目的、表格行车牌号输入框

多行文本域

简要案情、查询对象和本查询的关联性

选择类控件

  1. 单选标签切换组:身份证/手机号/车牌号/人像/银行卡
  2. 单选按钮组:研判类型-案件、事件
  3. 复选框多选组:轨迹信息、主体信息
  4. 下拉选择控件:分页每页条数下拉
  5. 日期选择控件:表格行开始时间、表格行结束时间

文件上传控件

附件模块「点击上传」触发按钮

2. 按钮类元素

业务功能按钮

  • 查询类:搜索(主按钮)
  • 批量操作:批量导入(次按钮)
  • 提交类:确认提交(主按钮)
  • 页面控制:关闭(次按钮)
  • 上传触发:点击上传

表格行操作按钮

添加、删除(行内文字按钮)

快捷文字操作按钮

全选

分页图标按钮

上一页、下一页箭头按钮

输入框装饰图标

检索框前置放大镜图标

3. 表格/列表类组件

表头列:序号、车牌号、开始时间、结束时间、操作;2条数据录入行;分页控件(翻页箭头、页码、每页条数下拉)

4. 静态文本展示元素

页面主标题「万能查」、分组标题、表格顶部说明文案、输入框占位提示、必填标识*、水印背景文本、筛选说明文字

5. 缺失组件说明

无顶部全局导航、左侧树形侧边菜单、弹窗组件、详情列表、新增/编辑/删除全局按钮、图片预览、页面底部状态栏信息区、附属下拉选择框(无)