4.详情弹窗
一、整体布局结构
弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 顶部标签筛选栏 → 网格卡片式车辆抓拍数据展示区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、表单录入区、分页控件、筛选输入表单。
分组规则:顶部分类标签横向排布,下方采用3列网格排布抓拍结果卡片,底部居中放置确认按钮。
二、分区域元素拆解
(一)弹窗顶部标题栏
- 静态标题文本:详情
- 右上角图标按钮组:全屏/还原图标按钮、关闭弹窗×图标按钮
(二)顶部分类标签筛选栏(横向单选标签组)
- 标签项:全部(当前激活,附带统计数字41)
- 标签项:安徽(附带统计数字41)
(三)网格卡片数据展示区(3列多行卡片,可见6张结果卡片)
单张卡片统一结构:
- 车辆抓拍图片预览框,右上角图片放大图标按钮
- 静态文本字段:车牌号、采集区域、设备名称、抓拍时间
(四)弹窗底部操作按钮
页面居中主按钮:确认
(五)无交互元素
页面半透明重复水印文本、卡片底部小字水印文本
(六)辅助交互元素
区域右侧垂直滚动条
三、元素类型分类汇总清单
1. 表单类输入控件
无单行输入框、多行文本域、日期选择、上传控件、下拉选择、复选框、分页输入框
2. 按钮类元素
弹窗控制图标按钮
弹窗全屏按钮、弹窗关闭×按钮、卡片图片右上角放大图标按钮
筛选标签(单选切换)
全部、安徽
弹窗底部业务按钮
确认(主按钮)
3. 表格/列表类组件
无传统表头行式表格;采用网格卡片列表承载车辆抓拍轨迹数据,无分页控件,配垂直滚动条
4. 图片展示控件
每张卡片内车辆抓拍场景图片预览框
5. 静态文本展示元素
弹窗标题「详情」、分类标签附带数量数字、每张卡片车牌号、采集区域、设备名称、抓拍时间文本、水印背景文本
6. 缺失组件说明
无全局顶部导航、侧边树形菜单、页面标签、查询筛选表单、批量操作按钮、新增/删除/查询全局功能按钮、分页控件、附件上传区域、页面底部状态栏信息区、行操作按钮