4.相似度查询弹窗

text
2026年7月17日1 min read60 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 目标人像预览区 → 多列卡片式数据展示区 → 底部分页控件;无页面全局顶部导航、侧边菜单栏、表单录入区、筛选表单、独立底部操作按钮区。
分组规则:顶部单张人像预览,下方采用5列网格排布相似结果卡片,分页控件置于卡片区底部。

二、分区域元素拆解

(一)弹窗顶部标题栏

  1. 静态标题文本:相似度详情
  2. 右上角图标按钮组:全屏/还原图标按钮、关闭弹窗×图标按钮

(二)顶部目标人像预览区

单张人像图片预览框(待比对基准人像)

(三)网格卡片数据展示区(5列多行卡片,每行10张结果卡片)

单张卡片统一结构:

  1. 抓拍场景图片预览框,右上角关闭小图标按钮
  2. 静态文本字段:相似度数值、抓拍区域、抓拍地点、抓拍时间
  3. 卡片底部操作按钮组:蓝色标记按钮、红色标记按钮、标记状态静态文本(已标记为红色/已标记为蓝色)
    可见卡片共10张,分两行排布

(四)底部分页控件

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

(五)无交互元素

页面半透明重复水印文本

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

1. 表单类输入控件

无单行输入框、多行文本域、单选、多选、日期选择、上传控件、下拉筛选输入框

2. 按钮类元素

弹窗控制图标按钮

弹窗全屏按钮、弹窗关闭×按钮、卡片图片右上角关闭图标按钮

卡片业务操作按钮

蓝色标记、红色标记(每张卡片底部文字按钮)

分页按钮

上一页、下一页、页码数字按钮

3. 表格/列表类组件

无传统表头行式表格;采用网格卡片列表承载相似轨迹数据,配套分页控件
分页全套组件:总量统计文本、每页条数下拉、翻页箭头、页码按钮

4. 图片展示控件

基准人像预览图、每张卡片内抓拍场景图片预览框

5. 静态文本展示元素

弹窗标题「相似度详情」、每张卡片相似度数值、抓拍区域、抓拍地点、抓拍时间、标记状态提示文本、分页总量说明文字、水印背景文本

6. 缺失组件说明

无全局顶部导航、侧边树形菜单、页面标签、查询筛选表单、批量操作按钮、新增/删除/查询全局功能按钮、弹窗底部确认/取消操作按钮、附件上传区域、页面底部状态栏信息区