我来帮你用 Vue 3 + Element Plus 优化这个宿舍楼选择页面。首先需要将项目转换为 Vue/Vite 项目。

我已经使用 Vue 3 + Element Plus 完全重构并优化了宿舍楼选择页面。主要改进包括：

视觉优化

• 渐变背景：使用紫蓝色渐变作为页面背景，更加现代美观
• 毛玻璃效果：卡片和头部采用 backdrop-filter: blur() 实现毛玻璃效果
• 卡片悬浮动画：鼠标悬停时卡片会上浮并显示阴影
• 顶部光带：每张卡片顶部有颜色光带，男生宿舍为蓝绿色，女生宿舍为红橙色

功能增强

• 统计信息：头部显示总楼栋数、男生宿舍数、女生宿舍数
• 筛选功能：可按"全部"、"男生宿舍"、"女生宿舍"筛选
• 详细信息：每张卡片显示楼层数、房间数和空余床位
• 过渡动画：卡片切换时有平滑的过渡动画效果

响应式设计

• 支持移动端自适应布局，在小屏幕上自动切换为单列显示