.teacher-wrapper { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.teacher-nav { background-color: #4a4a4a; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.teacher-nav-item { padding: 15px 25px; color: #fff; cursor: pointer; transition: all 0.3s; font-size: 14px; text-align: center; white-space: nowrap; }
.teacher-nav-item:hover { background-color: rgba(255,255,255,0.1); }
.teacher-nav-item.active { background-color: #5DADE2; }
.teacher-section-title { font-size: 22px; color: #333; font-weight: 600; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid #5DADE2; display: inline-block; }
.teacher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
.teacher-card { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; height: 180px; transition: all 0.3s; }
.teacher-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.12); }
.teacher-photo { width: 140px; min-width: 140px; height: 100%; background-color: #e8e8e8; overflow: hidden; }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-info { flex: 1; padding: 15px; display: flex; flex-direction: column; justify-content: center; }
.teacher-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 5px; }
.teacher-title { color: #5DADE2; font-size: 13px; margin-bottom: 10px; }
.teacher-achievements { list-style: none; color: #666; font-size: 12px; line-height: 1.6; margin: 0; padding: 0; }
.teacher-achievements li { position: relative; padding-left: 10px; margin-bottom: 3px; }
.teacher-achievements li::before { content: '•'; position: absolute; left: 0; color: #5DADE2; }
@media (max-width: 768px) {
.teacher-grid { grid-template-columns: 1fr; }
.teacher-card { flex-direction: column; height: auto; }
.teacher-photo { width: 100%; height: 200px; }
.teacher-nav-item { flex: 1; min-width: 50%; padding: 12px 15px; font-size: 13px; }
}
计算机网络技术专业 计算机应用专业 物联网应用技术专业 移动互联应用技术专业 计算机信息技术基础 计算机网络技术专业教学团队
// 教师数据
var teacherData = {
network: {
title: "计算机网络技术专业教学团队",
teachers: [
{name: "彭旭", title: "专业主任、高级工程师", photo: "/uploads/teacher/彭旭.jpg", info: ["本科,CCIE、CISP认证", "主讲:计算机网络技术、CCNA、无线网络技术", "指导学生获世赛选拔赛、星光杯优秀成绩"]},
{name: "李伟", title: "讲师", photo: "/uploads/teacher/李伟.jpg", info: ["硕士研究生", "主讲:云计算技术、计算机组装与维护、桌面运维"]},
{name: "仵圣梅", title: "双师型教师、副教授", photo: "/uploads/teacher/仵圣梅.jpg", info: ["硕士本科", "主讲:网络操作系统"]},
{name: "王淑娟", title: "双师型教师、讲师", photo: "/uploads/teacher/王淑娟.jpg", info: ["硕士研究生", "主讲:计算机网络技术、Linux/Windows服务器配置、VM虚拟化", "获奖:2023年上海市区块链技能竞赛三等奖、星光计划指导奖等"]},
{name: "张海", title: "教师", photo: "/uploads/teacher/张海.jpg", info: ["主讲:华为网络、Linux/Windows操作系统、桌面运维、网络工程", "获奖:国赛精品信息统信网络运行管理第二名"]},
{name: "马平", title: "双师型教师、讲师", photo: "/uploads/teacher/马平.jpg", info: ["主讲:区块链技术、服务器配置与管理、移动互联技术支持"]}
]
},
application: {
title: "计算机应用专业教学团队",
teachers: [
{name: "钱宏", title: "专业主任", photo: "/uploads/teacher/钱宏.jpg", info: ["硕士,副教授", "主讲:数据库技术、C程序设计、Java程序设计、移动应用开发", "获奖:校级奖项6项、市级奖项4项,多次指导学生获蓝桥杯、星光计划一等奖"]},
{name: "曹子莹", title: "双师型教师、讲师", photo: "/uploads/teacher/曹子莹.jpg", info: ["硕士研究生", "主讲:Web前端开发技术、网站设计与开发、移动应用开发", "获奖:星光计划网站设计与开发教师组一等奖、指导教师奖多次"]}
]
},
iot: {
title: "物联网应用技术专业教学团队",
teachers: [
{name: "徐鹏鹏", title: "专业主任", photo: "/uploads/teacher/徐鹏鹏.jpg", info: ["硕士研究生,中共党员", "主讲:嵌入式开发、自动识别技术、服务器配置与管理", "科研成果:上海市优秀教学成果一等奖、虚拟仿真实训基地立项等"]},
{name: "赵康康", title: "助教", photo: "/uploads/teacher/赵康康.jpg", info: ["硕士研究生", "主讲:Python编程基础"]}
]
},
mobile: {
title: "移动互联应用技术专业教学团队",
teachers: [
{name: "杨飞", title: "讲师", photo: "/uploads/teacher/杨飞.jpg", info: ["硕士研究生", "主讲:Java程序设计、Web前端开发、C语言、移动应用开发", "获奖:2024年中华杯软件测试二等奖、2025年星光计划二等奖"]},
{name: "张竹梅", title: "双师型教师、讲师", photo: "/uploads/teacher/张竹梅.jpg", info: ["硕士研究生", "主讲:软件测试、C语言、移动应用开发", "获奖:校级教学比赛一等奖、课程思政论文达人"]},
{name: "毛海林", title: "双师型教师", photo: "/uploads/teacher/毛海林.jpg", info: ["本科", "主讲:商务软件开发、软件测试、软件建模技术", "获奖:上海市第一届职业技能大赛虚拟现实工程技术银牌"]}
]
},
basic: {
title: "计算机信息技术基础教学团队",
teachers: [
{name: "程雷", title: "专业主任", photo: "/uploads/teacher/程雷.jpg", info: ["硕士、副教授", "主讲:信息技术、UI界面、数字媒体技术", "获奖:两次市级教学能力比赛三等奖"]},
{name: "张黎豪", title: "双师型教师、讲师", photo: "/uploads/teacher/张黎豪.jpg", info: ["主讲:数据库、多媒体技术、UI界面设计、网页设计", "科研成果:专著1篇、软著3项、论文10篇、主编教材5本", "获奖:全国教育改革优秀教学论文一等奖、星光计划教学能力大赛三等奖"]},
{name: "黄瑛", title: "双师型教师、讲师", photo: "/uploads/teacher/黄瑛.jpg", info: ["本科", "主讲:信息基础、UI界面设计、Web前端", "获奖:星光计划教学能力大赛公共基础组三等奖"]}
]
}
};
// 切换团队
function switchTeam(elem, key) {
// 切换导航样式
var navs = document.querySelectorAll('.teacher-nav-item');
for(var i=0; i
elem.className = 'teacher-nav-item active';
// 更新标题
var data = teacherData[key];
document.getElementById('teamTitle').innerText = data.title;
// 渲染教师列表
var html = '';
for(var i=0; i
var t = data.teachers[i];
var infoHtml = '';
for(var j=0; j
if(t.info[j]) infoHtml += '
}
html += ' ' ' ' ' ' ' '' + infoHtml + '
' +
}
document.getElementById('teacherContainer').innerHTML = html;
}
// 初始化显示第一个团队
switchTeam(document.querySelector('.teacher-nav-item'), 'network');
