点击列表项,详情从右侧滑入面板(宽420px,可滚动)。标签采用「折叠 + 展开 + 搜索过滤」策略:默认显示前3个标签,点击展开全部并可关键字搜索。
方案分析
✦ 优势
✓ 面板可滚动,30+标签完美承载
✓ 支持关键字搜索快速定位标签
✓ 列表始终可见,切换工地流畅
✓ 信息层级清晰,阅读舒适
✦ 局限
✕ 需要较宽屏幕(>900px)
✕ 列表区域被压缩
标签溢出策略
1 默认折叠,仅显示前3个标签
2 点击「展开全部 N 项」查看所有
3 搜索框支持关键字过滤
4 面板整体可上下滚动
适用场景
最适合需要逐一审阅全部隐患类别的场景。面板空间充裕,分类信息一目了然,适合50-60岁领导审核工作使用。
点击列表项,浮动卡片出现在右侧,零布局干扰。卡片内标签区域固定高度可滚动,整张卡片最高520px,卡片整体可滚动。
方案分析
✦ 优势
✓ 列表布局完全不受影响
✓ 标签区域可独立滚动
✓ 卡片整体可滚动承载大量内容
✦ 局限
✕ 卡片可能遮挡相邻工地行
✕ 需要右侧有额外空间
标签溢出策略
1 标签区固定96px高度
2 超出部分上下滚动查看
3 卡片顶部显示标签总数
适用场景
快速浏览各工地关键数据。不需要深入审阅全部标签,只需快速了解关键指标和主要隐患类别。
两步渐进式:点击展开摘要行(含标签数量徽章),点击「详情」打开底部抽屉。抽屉内标签按类别分组 + 搜索过滤,最适合 30+ 标签场景。
方案分析
✦ 优势
✓ 抽屉空间最大,分类展示最清晰
✓ 支持搜索,30+标签快速定位
✓ 摘要行只显示计数,不占空间
✓ 最适合严肃审查工作场景
✦ 局限
✕ 看完整详情需两步操作
✕ 抽屉打开时遮挡列表
标签溢出策略
1 摘要行只显示「N类隐患」徽章
2 抽屉内按安全/管理/施工等分组
3 搜索框快速过滤关键字
4 抽屉整体可滚动
适用场景
最推荐用于标签数量多(30+)的审查场景。分组展示让几十个隐患类别一目了然,搜索功能节省领导查找时间。
列表项原地3D翻转,正面显示名称和状态,背面显示关键指标和标签数量。点击标签计数徽章弹出底部弹层查看全部标签。
方案分析
✦ 优势
✓ 背面简洁,不强塞大量标签
✓ 点击标签计数弹出完整列表
✓ 3D翻转动画视觉冲击力强
✦ 局限
✕ 操作逻辑需要学习成本
✕ 背面信息量有限
标签溢出策略
1 背面只显示「N类隐患」徽章
2 点击徽章弹出底部弹层
3 弹层内完整展示全部标签
适用场景
视觉创新性强,适合展示汇报场景。翻转带来即时反馈感,标签按需弹出,不干扰核心指标阅读。
列表项向下展开详情区域(可滚动),手风琴模式自动收起其他项。标签采用「折叠 + 展开 + 可滚动」策略,默认显示前4个,展开后区域可滚动。
方案分析
✦ 优势
✓ 单次点击即可展开全部信息
✓ 手风琴保持整体列表整洁
✓ 标签折叠+展开控制密度
✓ 适合各种屏幕尺寸
✦ 局限
✕ 展开后推移下方列表项
✕ 多项展开时页面较长
标签溢出策略
1 默认折叠显示前4个标签
2 点击「展开全部N项」查看所有
3 展开区域整体可上下滚动
适用场景
最通用的方案,无需学习成本。单次点击、逻辑直观,适合各种年龄层用户。当列表项目数量适中(<15个)时效果最佳。