.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 += '' + t.info[j] + '';

        }

        html += '

' +

            '

' +

            '

' +

                '

' + t.name + '

' +

                '

' + t.title + '

' +

                '

• ' + infoHtml + '

' +

            '

' +

        '

    }

    document.getElementById('teacherContainer').innerHTML = html;

}

// 初始化显示第一个团队

switchTeam(document.querySelector('.teacher-nav-item'), 'network');