4.详情弹窗

text
2026年7月17日1 min read56 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 顶部标签筛选栏 → 网格卡片式车辆抓拍数据展示区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、表单录入区、分页控件、筛选输入表单。
分组规则:顶部分类标签横向排布,下方采用3列网格排布抓拍结果卡片,底部居中放置确认按钮。

二、分区域元素拆解

(一)弹窗顶部标题栏

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

(二)顶部分类标签筛选栏(横向单选标签组)

  1. 标签项:全部(当前激活,附带统计数字41)
  2. 标签项:安徽(附带统计数字41)

(三)网格卡片数据展示区(3列多行卡片,可见6张结果卡片)

单张卡片统一结构:

  1. 车辆抓拍图片预览框,右上角图片放大图标按钮
  2. 静态文本字段:车牌号、采集区域、设备名称、抓拍时间

(四)弹窗底部操作按钮

页面居中主按钮:确认

(五)无交互元素

页面半透明重复水印文本、卡片底部小字水印文本

(六)辅助交互元素

区域右侧垂直滚动条

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

1. 表单类输入控件

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

2. 按钮类元素

弹窗控制图标按钮

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

筛选标签(单选切换)

全部、安徽

弹窗底部业务按钮

确认(主按钮)

3. 表格/列表类组件

无传统表头行式表格;采用网格卡片列表承载车辆抓拍轨迹数据,无分页控件,配垂直滚动条

4. 图片展示控件

每张卡片内车辆抓拍场景图片预览框

5. 静态文本展示元素

弹窗标题「详情」、分类标签附带数量数字、每张卡片车牌号、采集区域、设备名称、抓拍时间文本、水印背景文本

6. 缺失组件说明

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