校园信息
校园黄页——学校各部门联系方式、校车时刻、常用电话,一页汇总,随用随查。
功能说明
校园信息页面采用左侧分类导航 + 右侧内容卡片的布局,信息按类别分组展示:
| 分类 | 包含内容 |
|---|---|
| 🚌 校车 | 校车时刻表、发车时间、路线说明 |
| 📞 联系 | 各部门、学院、服务中心联系电话 |
| 🏫 服务 | 校医院、打印店、快递点、校园卡中心等服务信息 |
| 📋 其他 | 常用链接、办事流程、校园公告等 |
使用方式
- 进入「校园信息」页面
- 左侧点击想要查看的分类
- 右侧展示该分类下的所有信息条目
- 点击条目可拨打电话或查看详情
校车时刻
选择「校车」分类后,页面顶部会显示下一班校车的倒计时信息,包括发车时间和路线,方便你判断来不来得及赶车。
数据来源
校园信息数据由管理员维护,确保信息准确。如有信息变更或遗漏,欢迎在「意见反馈」中告知。
后端实现
校园信息为静态数据,后端提供 API 返回预置的结构化数据。数据存储在数据库中,管理员可通过管理后台更新。
前端实现
前端页面核心组件:
| 组件 | 职责 |
|---|---|
CampusInfoSideNav | 左侧分类导航,高亮当前选中分类 |
CampusInfoBlock | 右侧内容卡片,按分组渲染信息条目 |
CampusInfoNextBus | 校车倒计时组件,实时计算距下一班的时间 |
布局使用 Flex 横向排列,左侧导航固定宽度不滚动,右侧内容区支持纵向滚动。
