青春在线 - 历届建设团队展示页面改版

项目概述

这是山东理工大学青春在线网站的历届建设团队展示页面，用于展示从第一届至今的所有建设团队信息，包括指导老师、历届站长、各部门成员等详细资料。该项目采用纯前端实现，通过JavaScript动态加载JSON数据并渲染页面。

技术栈

• HTML5
• CSS3
• JavaScript (ES6+)
• Fetch API

项目结构

aboutUs/
├── aboutUs.html           # 主页面
├── css/
│   ├── common.css         # 公共样式
│   ├── footer.css         # 页脚样式
│   ├── jianshe.css        # 建设团队页面样式
│   └── modern.css         # 现代化UI样式
├── images/
│   ├── banner.jpg         # 页面横幅图片
│   └── logo.png           # 青春在线Logo
├── js/
│   ├── main.js            # 主要JavaScript脚本
│   └── team-data.json     # 团队数据JSON文件

数据结构

项目使用JSON格式存储数据，主要包含两大部分：

1. teacherData: 包含历任指导老师的信息

   • title: 标题
   • teachers: 老师列表，每位老师包含姓名、任期、职位和成就

2. teamsData: 包含历届建设团队的信息

   • id: 团队ID
   • title: 团队标题（如"第二十五届建设团队"）
   • leader: 站长信息
   • deputyLeaders: 副站长列表
   • departments: 部门列表，每个部门包含名称、主任和成员列表
   • teacher: 指导老师
   • techAdvisor: 技术顾问

实现细节

数据加载

• 使用Fetch API从team-data.json文件加载数据
• 实现加载状态显示和错误处理机制

动态渲染

• 左侧导航菜单根据团队数据动态生成
• 特殊处理第14-25届的技术部门，突出显示程序、闪客、美工等角色分工