前端设计
布局模式
| 页面类型 | 布局 |
|---|---|
| 首页 / 活动列表 / 资源 / 关于 / 荣誉墙 | Header + Navbar + 主内容 + Footer |
| 活动详情 / 资源详情 / 部门页 | Navbar + 主内容 + Footer |
| 404 | Navbar + 缓冲页 + Footer |
响应式策略
- 以 Tailwind 响应式类为主：
md:、lg:等 - Navbar 提供移动端汉堡菜单，点击展开/收起
- 使用
useRef+useEffect实现点击页面外关闭菜单
动画与交互
| 实现方式 | 用途 |
|---|---|
| Intersection Observer | 滚动进入视口时触发动画（如 Home.js） |
| Framer Motion | 下拉菜单、列表过渡、AnimatePresence |
| 自定义 keyframes | fadeInUp、fadeInLeft、fadeIn、softPulse |
| ParallaxBackground | 视差滚动背景 |
| ImageGallery | 图片画廊展示 |
导航结构
- 活动：新春嘉年华、非诚勿扰、国庆晚会、毕业舞会、新生见面会、往期精彩
- 资源：加入我们（外链）、新生手册（外链）、职发百宝箱、关于网站
- 关于：技术部、主席团、文娱部、职发部、宣传部、影视部、市场部、事务部
- 荣誉墙：2023-2024、2024-2025 锚点