户型图与筛选栏是房产租售页核心模块，需通过顶部固定筛选栏（含横向标签与纵向条件）、户型图与列表双向联动、移动端抽屉式筛选及滑动卡片流、以及数据/UI严格一致来提升找房效率。
户型图和筛选栏是房产租售页的核心交互模块，组织得当能显著提升用户找房效率。关键不是堆砌功能，而是让视觉动线自然引导用户先筛选、再看图、最后决策。
筛选栏放在顶部固定区域
用户进入页面第一眼需要快速缩小范围，筛选栏必须在首屏可见且不随滚动消失。建议采用“横向标签+纵向条件”的混合布局：
- 顶部用Tab式导航区分“出租”“出售”“整租”“合租”等业务类型，切换时URL和页面内容同步更新
- 下方固定高度的筛选区：左侧放基础条件（区域、价格、居室数），右侧放特色标签（地铁房、精装修、带阳台），支持多选且实时显示已选条件数量
- 所有筛选项默认收起高级选项（如朝向、楼层区间），点击“更多条件”才展开，避免首屏信息过载
户型图与列表并行呈现，支持双向联动
户型图不是装饰，而是房源的关键信息载体，需与列表数据强绑定：
- 列表每条房源右侧预留统一尺寸的缩略图容器，点击后弹出高清户型图+标注（如红色框标出主卧、绿色箭头指示采光方向）
- 筛选条件变更时，列表实时刷新，同时自动关闭已打开的户型图弹窗，防止信息错位
- 提供“查看全部户型图”入口，跳转至独立页面，按楼栋/单元/楼层分组展示，支持SVG矢量图缩放和房间面积点击查看
移动端适配以操作优先
手机端屏幕窄，不能简单把PC端布局压缩，要重构交互逻辑：
立即学习“前端免费学习笔记（深入）”；
- 筛选栏改为底部常驻抽屉式菜单，上滑展开，带“重置”和“确认”按钮，避免误触提交
- 户型图改用左右滑动卡片流，每张卡片包含户型名称、面积、简笔画结构+关键尺寸标注，点击进入详情页
- 列表项中户型图缩略图替换为“户型”文字标签，节省空间；用户点击标签才加载对应SVG图，减少首屏资源压力
数据与UI保持严格一致
户型图不是静态图片，它必须反映真实房源状态：
- 每个户型图旁显示“本户型在售/在租房源共X套”，点击直接跳转对应筛选结果
- 若某套房源改造过（如拆除隔墙），在户型图右上角加“改造版”角标，并链接到改造说明文档
- 后台管理系统中，户型图上传时必须关联字段：建筑面积、使用面积、墙体承重标识、窗户位置坐标——前端据此生成可交互热区
不复杂但容易忽略的是：筛选栏的“已选状态”必须可视化，户型图的“可点击性”必须有明确反馈，两者之间的数据通道必须零延迟。
