<template>
<div id="bg">
    <div id="navi">
        <img class="stick1" src="@/assets/images/contributor/sideNavi/stickLong.png" alt="">
        <img class="stick2" src="@/assets/images/contributor/sideNavi/stick.png" alt="">
        <ul><img id="top" src="@/assets/images/contributor/sideNavi/navigation_top.png" alt="">
            <li :class="{active: isActive === 'markPoint1'}" @click="scrollTo('markPoint1')" >最佳培训项目</li>
            <li :class="{active: isActive === 'markPoint2'}" @click="scrollTo('markPoint2')">最佳教师</li>
            <li :class="{active: isActive === 'markPoint3'}" @click="scrollTo('markPoint3')">最佳课程</li>
            <li :class="{active: isActive === 'markPoint4'}" @click="scrollTo('markPoint4')">最佳案例</li>
            <li :class="{active: isActive === 'markPoint5'}" @click="scrollTo('markPoint5')">最佳培训伙伴</li>
        </ul>
    <ul style="margin-top:33px;cursor: pointer;"><img src="@/assets/images/contributor/sideNavi/navigation_bottom.png" @click="scrollTo('markPoint6')" alt=""></ul>
    </div>
    <div id="videoBox">
        <img id="video_button" v-show="button" @click="play"  src="@/assets/images/contributor/video_button.png" alt="">
        <video ref="videoPlayer" id="video"  :controls="controls"  src="https://u.boe.com/upload/contributor/VIDEOV2.mp4" poster="../../assets/images/contributor/video_post_v3.png"></video>
    </div>
    <span id="markPoint1"></span>
    <span @click="toMore('/contributor/project')" id="more1" class="more">查看更多>></span>
    <div id="project">
        <div class="item1" @click="toProjectDetail(4)">
            <div class="border1">
                <img class="img1"  src="@/assets/images/contributor/project/img_9.png" alt="">
            </div>
            <div class="txt1">
                显示器件及物联网创新业务正处于战略级变革的关键阶段，要解决运营管理模式、组织、人才等一系列不适配的问题，需要一批在未来1-3年内能担当重任的新型复合型人才梯队。项目成果显著，培养出来的学员深受业务的好评与欢迎，一二期学员在各个新事业新业务及重要岗位上承担着重要的职责。
            </div>
        </div>
        <div class="item1"  @click="toProjectDetail(9)">
            <div class="border1">
                <img class="img1"  src="@/assets/images/contributor/project/img_14.png" alt="">
            </div>
            <div class="txt1">           
                我们开创性的采用了场景化的培训形式，还原日常真实管理场景，通过案例演练强化应用，为学员们提供有效可复制的管理方法。通过多角度的需求访谈，我们聚焦了5大典型管理场景，并选取了8个子场景作为本次培训重点解决问题；在整个项目过程中，完成了3场三天两夜的线下集训，现场通过场景演练...
            </div>
        </div>
        <div class="item1" @click="toProjectDetail(10)" style="margin-right: 0px;">
            <div class="border1">
                <img class="img1" src="@/assets/images/contributor/project/img_15.png" alt="">
            </div>
            <div class="txt1">           
               部级干部是承上启下的中坚力量，目前MLED中层管理者在创新业务抢占市场阶段缺乏速度、力度和高度，缺乏以客户为中心的导向精神，为强化MLED业务腰部力量，急需提高中层干部能力，敢于决策，独挡业务，抢占先机。
            </div>
        </div>
        <div class="item1" @click="toProjectDetail(8)">
            <div class="border1">
                <img class="img1"  src="@/assets/images/contributor/project/img_13.png" alt="">
            </div>
            <div class="txt1">           
                项目背景：1）经营层面：①整体持续亏损，经营压力大②各条产线的业务发展阶段不同，也遭遇着不同的难题③创新业务前期投入大，资金回收周期长。2）组织层面：①团队之间仍需提升协作，形成合力②整体团队士气需不断激活。3）人员层面：①对达成战略目标的信心不足②中基层管理干部对战略目标理解不深刻...
            </div>
        </div>
        <div class="item1" @click="toProjectDetail(1)">
            <div class="border1">
                <img class="img1" src="@/assets/images/contributor/project/img_6.png" alt="">
            </div>
            <div class="txt1">
                本项目旨在为集团各组织培养能够“想到、说到、写到、做到”的战略型人才，使学员在战略思维、商业逻辑、市场意识等层面重构认知体系。来自集团16个不同组织的37名学员从308名报名者中脱颖而出，90后占60%，构成多元化年轻骨干学员群体框架：• 能力：从素质、个人、战略专业、业务四维度定义目标人员...
            </div>
        </div>
        <div class="item1" @click="toProjectDetail(7)" style="margin-right:0">
            <div class="border1">
                <img class="img1"  src="@/assets/images/contributor/project/img_12.png" alt="">
            </div>
            <div class="txt1">
                为加快建设“一个、数字化、可视”的京东方，随着集团数字化变革的强力推进，CTIO组织需要培养一批在1-3年内能担当重任的新型复合型人才梯队，引领数字化变革；组织人才储备相对丰富，但尚未通过有效方式发掘高潜人才，支撑组织战略调整，同时现有人才使用和培养方式也无法自然生长...
            </div>
        </div>
    </div>
    <span id="markPoint2"></span>
    <span @click="toMore('/contributor/teacher')" id="more2" class="more">查看更多&gt;&gt;</span>
    <div id="teacher">
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/jinzhiheng.png" alt="">
                <div class="namespace">
                    <div class="name">金志恒</div>
                    <div class="depart">显示器件及物联网创新业务前台</div>
                </div>
            </div>
            <div class="txt2">代表课程：《整机全生命周期概论》《解决方案销售》《规划先行 战略致胜-如何制定战略》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/huangzhubing.png" alt="">
                <div class="namespace">
                    <div class="name">黄助兵</div>
                    <div class="depart">显示器件及物联网创新业务中台</div>
                </div>
            </div>
            <div class="txt2">代表课程：《创新挖潜 节能降耗 成本降低秘籍分享-B9 Bx成本降低工作与案例分享》《走进Cell/Cell工艺简介》</div>
        </div>
        <div class="item2" style="margin-right:0">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/wangxiuliang.png" alt="">
                <div class="namespace">
                    <div class="name">王修亮</div>
                    <div class="depart">传感器及解决方案业务</div>
                </div>
            </div>
            <div class="txt2">代表课程：《平台化与工厂管理》《数字化与工厂管理》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/MLED-sunlei.png" alt="">
                <div class="namespace">
                    <div class="name">孙雷</div>
                    <div class="depart">MLED业务</div>
                </div>
            </div>
            <div class="txt2">代表课程：《MLED直显工艺介绍》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/aizhihua.png" alt="">
                <div class="namespace">
                    <div class="name">艾智华</div>
                    <div class="depart">智慧医工业务</div>
                </div>
            </div>
            <div class="txt2">代表课程：《甲状腺结节》《高尿酸血症与痛风的规范化诊治》《医学科研素养》《我的成长：从学生到医生》</div>
        </div> 
        <div class="item2" style="margin-right:0">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/portrait/bestTeacher/caixiang.png" alt="">
                <div class="namespace">
                    <div class="name">蔡翔</div>
                    <div class="depart">后台(业务支援体系)</div>
                </div>
            </div>
            <div class="txt2">代表课程：《京东方的历史与文化》《职业发展规划与管理》《托业复习指南》《项目管理》</div>
        </div> 
    </div>
    <span id="markPoint3"></span>
    <span @click="toMore('/contributor/course')" id="more3" class="more">查看更多>></span>
    <div id="course">
        <div id="button"><button @click="showOnlineCourse" :class="{activeBtn: btnAct === 'on'}" class="normalBtn">在线课程</button><button @click="showOfflineCourse" :class="{activeBtn: btnAct === 'off'}" class="normalBtn">面授课程</button></div>
        <div v-show="online">
            <div class="item3" @click="toLink('http://u.boe.com/pc/course/boeframe?id=F41343DA-DF37-80F2-8EFF-EF18821BA275&type=20')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img5.png" alt="">
                <div class="txt3">T社对标学习分享</div>
                <div class="txt4">石悦/刘莎/葛兴/金晓妍/冯光宇/沈伟/李京鹏</div>
            </div>
            <div class="item3" @click="toLink('http://u.boe.com/pc/course/detail?id=1037024129070534656')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img4.png" alt="">
                <div class="txt3">平台化管理与工厂运营变革</div>
                <div class="txt4">王修亮</div>
            </div>
            <div class="item3" style="margin-right:0" @click="toLink('http://u.boe.com/pc/course/studyindex?id=989930841121492992')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/xinpianjichu.png" alt="">
                <div class="txt3">芯片基础</div>
                <div class="txt4">范利涛</div>
            </div>
            <div class="item3" @click="toLink('http://u.boe.com/pc/course/studyindex?id=1042015352001228800')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/shulijiankang.png" alt="">
                <div class="txt3">树立健康生活方式  科学看待胃、肠镜检查--消化内科</div>
                <div class="txt4" style="margin-top:-29px">姚永刚</div>
            </div>
            <div class="item3" @click="toLink('http://u.boe.com/pc/course/studyindex?id=989452448236048384')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/qiyejingying.png" alt="">
                <div class="txt3">企业经营法则</div>
                <div class="txt4">苏倩</div>
            </div>
            <div class="item3" style="margin-right:0"  @click="toLink('http://u.boe.com/pc/course/studyindex?id=1029319894711279616')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/img2.png" alt="">
                <div class="txt3">系统思维-用系统思维分析和解决问题</div>
                <div class="txt4">任广顺</div>
            </div>
        </div>
        <div v-show="!online">
            <div class="item3" @click="toCourseDetail(16)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/TPM.png" alt="">
                <div class="txt3">TPM自主保全</div>
                <div class="txt4">罗道源</div>
            </div>
            <div class="item3"  @click="toCourseDetail(1)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/warmanage.png" alt="">
                <div class="txt3">战略管理方法</div>
                <div class="txt4">刘毅</div>
            </div>
            <div class="item3" style="margin-right:0"  @click="toCourseDetail(9)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/jiazhitanpan.png" alt="">
                <div class="txt3">价值谈判技巧</div>
                <div class="txt4">张洪岐</div>
            </div>
            <div class="item3"  @click="toCourseDetail(13)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/jijiujishu.png" alt="">
                <div class="txt3">急救技术</div>
                <div class="txt4">张玉</div>
            </div>
            <div class="item3"  @click="toCourseDetail(2)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/smartService.png" alt="">
                <div class="txt3">智慧行政服务与管理体系构建</div>
                <div class="txt4">顾新芳</div>
            </div>

            <div class="item3" style="margin-right:0"  @click="toCourseDetail(8)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/from0to1.png" alt="">
                <div class="txt3">从“0”到“1”构建创业型研发团队</div>
                <div class="txt4">鄂丽娟</div>
            </div>
        </div>
    </div>
    <span id="markPoint4"></span>
    <span  id="more4" @click="toMore('/contributor/example')" class="more">查看更多>></span>
    <div id="example">
        <div class="item4" @click="toLink('http://u.boe.com/pc/case/detail?id=1047584195947266048')">
            <div class="txt5">战略目标“点线面”式多维度管理</div>
            <div><span class="tag">#管理</span><span class="tag">#战略预算</span><span class="tag">#综合管理</span><span class="tag">#战略目标管理</span><span class="tag">#项目管理平台</span><span class="tag">#KPI</span><span class="tag">#无极项目</span></div>
            <div class="txt6">战略目标管理与公司价值创造紧密关联，如何将分散在公司的各个内部资源拉通起来，整合统一的管理战略目标，是B4一直努力探索的方向。B4实行的“点线面”式多维度战略目标管理方法，是以项目管理平台作为战略分解的“管理面”，以各部门KPI将关键战略分解点相互串联形成“承接线”，以部门长主责、短期内解决经营痛难点的“无极项目”作为战略落地的“聚力点”。在实施过程中......</div>
            <div><span class="name">文斌</span> <span class="org">显示器件及物联网创新业务中台</span></div>
        </div>
        <div class="item4" @click="toLink('http://u.boe.com/pc/case/detail?id=1032775790846017536')">
            <div class="txt5">数字化背景下Panel核心材料运营思路</div>
            <div><span class="tag">#CTIO</span><span class="tag">#研发</span><span class="tag">#数字化变革</span><span class="tag">#Panel材料</span><span class="tag">#流程体系</span><span class="tag">#数字化</span></div>
            <div class="txt6">Panel作为TFT-LCD显示器件主要组成部件，其核心材料对于器件性能起到决定性的影响。在公司产线分散、产品多样化背景下，应用数字化工具，通过材料标准化流程和体系建设，强化材料平台化、挖潜材料能力、创新材料开发、布局材料资源，提升LCD产品竞争力。</div>
            <div><span class="name">占红明</span> <span class="org">显示器件及物联网创新业务中台</span></div>
        </div>
        <div class="item4" @click="toLink('')">
            <div class="txt5">应对组织剧烈异动</div>
            <div><span class="tag">#管理</span><span class="tag">#营销</span><span class="tag">#人员异动</span><span class="tag">#客户信任</span><span class="tag">#竞业</span></div>
            <div class="txt6">2022年年初，我们组织进行了调整，设立MNT终端产品线，在组织上也做出相应的调整。而主动的调整触发了一系列被动的调整，包括大面积、集中的人员流失；甚至暴露了一系列之前被隐藏的、被刻意而为的问题，例如公司商业信息被盗、合同遭篡改、客户关系被诽谤，等等。面对内外交困，我们冷静对待，积极应对，分清楚事情的紧急程度，寻找问题的关键点，一一化解，最终快速将......</div>
            <div><span class="name">武延兵</span> <span class="org">显示器件及物联网创新业务前台</span></div>
        </div>
        <div class="item4" @click="toLink('http://u.boe.com/pc/case/detail?id=1047584379620032512')">
            <div class="txt5">基于疫情封控、管控、封闭、闭环管理模式下的员工舆情管理及对策</div>
            <div><span class="tag">#管理</span><span class="tag">#人力资源</span><span class="tag">#综合管理</span><span class="tag">#首都疫情</span><span class="tag">#管控管理</span><span class="tag">#封闭管理</span><span class="tag">#员工舆情管理对策</span></div>
            <div class="txt6">自2022年4月下旬以来，首都疫情多点散发、此起彼伏，作为北京市国资委、经开区、北京电控重点企业，北京京东方显示技术有限公司先后于5月3日至9日管控运行，5月15日至6月2日、6月23日至7月1日封闭运行。其他时间要求员工做到“两点一线”、不聚集、不聚会。在管控、封闭管理的情境下，大量掺杂着情感化表达及员工情绪的舆情事件屡屡发生，本案例将结合该情境下发生......</div>
            <div><span class="name">贺道品</span> <span class="org">后台(业务支援体系)</span></div>
        </div>
    </div>
    <span id="markPoint5"></span>
    <span @click="toMore('/contributor/colleage')" id="more5" class="more">查看更多>></span>
    <div id="colleage">
        <div class="item2">
            <img src="@/assets/images/contributor/portrait/wangmengdi.png" alt="">
            <div class="namespace">
                <div class="name">王梦迪</div>
                <div class="depart">CHRO组织</div>
            </div>
        </div>
        <div class="item2" >
            <img src="@/assets/images/contributor/portrait/chenlu.png" alt="">
            <div class="namespace">
                <div class="name">陈露</div>
                <div class="depart">CHRO组织</div>
            </div>
        </div>
        <div class="item2" style="margin-right:0">
            <img src="@/assets/images/contributor/portrait/MLEDyangyuying.png" alt="">
            <div class="namespace">
                <div class="name">杨玉莹</div>
                <div class="depart">CHRO组织</div>
            </div>
        </div>
        <div class="item2">
            <img src="@/assets/images/contributor/portrait/liujinyu.png" alt="">
            <div class="namespace">
                <div class="name">刘锦钰</div>
                <div class="depart">CHRO组织</div>
            </div>
        </div>
        <div class="item2">
            <div class="thumbRing">
                <img src="@/assets/images/contributor/portrait/luojiangbo.png" alt="">
            </div>
            <div class="namespace">
                <div class="name">罗江波</div>
                <div class="depart">CTIO组织</div>
            </div>
        </div>
        <div class="item2" style="margin-right:0">
            <img src="@/assets/images/contributor/portrait/songyuhang.png" alt="">
            <div class="namespace">
                <div class="name">宋雨航</div>
                <div class="depart">CHRO组织</div>
            </div>
        </div>
    </div>
    <span id="markPoint6"></span>
    <div id="project_">
        <div class="item1" @click="toProjectDetail(11)">
            <div class="border1">
                <img class="img1" src="../../assets/images/contributor/project/img_16.png" alt="">
            </div>
            <div class="txt1">
                项目3月18日正式上线启动，3批上线，已覆盖2396名管理者。其中科级1079人；部级1021人；中心长级296人。根据各业务需求定制14条学习路径。2022年共开设3个面授班，覆盖105名管理者。
            </div>
        </div>
        <div class="item1" @click="toProjectDetail(12)">
            <div class="border1">
                <img class="img1" src="../../assets/images/contributor/project/img_17.png" alt="">
            </div>
            <div class="txt1">
                项目采用“选-育-用-长”的人才培养模式.首次采用业务部门推荐&学员自荐双渠道推荐模式，共推荐优秀候选人14000+，经过认知/性格/动机的多维测评与严格面试共有91人最终入选。预习阶段精选U选小课堂4大主题课程夯实基础知识，商业案例分析模拟商业市场模拟学员基础。直播阶段10位大咖倾情授课...
            </div>
        </div>
        <div class="item1" style="margin-right:0" @click="toProjectDetail(13)">
            <div class="border1">
                <img class="img1" src="../../assets/images/contributor/project/img_18.png" alt="">
            </div>
            <div class="txt1">
                面向全集团中心长及以上人群，参考一流商学院培养方案，汇集顶级高校师资，助力学员全面认知升级。框架：定制化的资源组合、线上+线下教学模式相融合、学习+研讨+交流并进。实施进展：有来自显示期间及物联网创新业务、传感业务、MLED业务的119名学员完成培养项目或正在培养中...
            </div>
        </div>
    </div>
    <div class="bottomTxt">
        <p>2022年知识贡献者大会结出的累累硕果，来自于BOE土壤中深厚底蕴的滋养，来自于各业务组织、各位教师和各位培训工作伙伴的悉心耕耘，更得益于各位专家评委专业、严谨的评审与指导。BOEU将继续发挥专业价值，激活智力资本，强化培训赋能，与全体BOE知识贡献者携手，为BOE人才队伍注入活力！</p>
    </div>
  </div>
</template>

<script>
// import HTTP from "@/api/http/index";
export default {
    data() {
        return {
            online:true,
            isActive:"",
            button:true,
            controls:false,
            autoplay:false,
            btnAct:'on'
        }
    },
    methods: {
        play(){
            this.button = false;
            this.controls = true;
            this.$refs.videoPlayer.paused === true ? this.$refs.videoPlayer.play():this.$refs.videoPlayer.paused();
        },
        toMore(route){
            this.$router.push(route);
        },
        toLink(link){
            if(link == ''){
                this.$message('该案例为保密案例，暂不允许观看')
            }else{
                window.location = link;
            }
        },
        showOnlineCourse(){
            this.btnAct = 'on';
            this.online = true;
        },
        showOfflineCourse(){
            this.btnAct = 'off';
            this.online = false
        },
        toCourseDetail(id){
            this.$router.push({
                name:'contributorCourseDetail',
                params:{id:id}
            })
        },
        toProjectDetail(id){
            this.$router.push({
                name:'projectDetail',
                params:{id:id}
            })
        },
        scrollTo(params){
            this.isActive = params;
            document.getElementById(params).scrollIntoView();
        }
    },
    async created() {
//     let res = await HTTP.getBaseInfo();
//       console.log("res===", res);
//       if (res && res.code == "0") {
//         console.log(res);
//   } 
    },
    mounted() {
      // 给 body 添加特定类名，用于限制样式作用域
      document.body.classList.add('contributor-conference-index-active');
    },
    beforeDestroy() {
      // 组件销毁时移除类名
      document.body.classList.remove('contributor-conference-index-active');
    }

}
</script>
<style lang='scss'>
// 使用 body.contributor-conference-index-active 类名限制样式只在该页面生效
@media screen and (min-width: 1440px) and (max-width: 1600px){
    body.contributor-conference-index-active{
        zoom: 79%;
    }
    body.contributor-conference-index-active #bg{
         width: 1900px !important;
    }
}
@media screen and (min-width: 1366px) and (max-width: 1440px){
    body.contributor-conference-index-active{
        zoom: 74%;
    }
    body.contributor-conference-index-active #bg{
        width: 1869px !important;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1366px){
    body.contributor-conference-index-active{
        zoom: 72%;
    }
    body.contributor-conference-index-active #bg{
        width: 1874px !important;
    }
}
@media screen and (max-width: 1280px){
    body.contributor-conference-index-active{
        zoom: 67%;
    }
    body.contributor-conference-index-active #bg{
        width: 1885px !important;
    }
}
</style>
<style scoped>
#bg{
    position: relative;
    width: 1903px;
    height: 9690px;
    background-image: url(../../assets/images/contributor/index_bg_v3.png);
    background-repeat: no-repeat;
    background-color: #001227;
}
#navi{
    position: fixed;
    left: 25px;
    top: 250px;
}
video{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
#videoBox{
    width: 1000px;
    height: 478px;
    position: relative;
    top: 661px;
    left: 461px;
}
#video_button{
    position: absolute;
    top: 194px;
    left: 441.5px;
    cursor: pointer;
    z-index: 1;
}
#project{
    width: 1420px;
    position: relative;
    top: 1052px;
    left: 253px;
}
.item1{
    padding: 30px;
    background-color: #010000;
    height: 503px;
    width: 429px;
    box-sizing: border-box;
    border: 1px solid #FEECBC;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 64px 84px 0px;
    cursor: pointer;
}
.txt1{
    width: 360px;
    height: 175px;
    box-sizing: border-box;
    font-family: "ArialMT", "Arial", sans-serif;
    color: #A49473;
    text-align: left;
    line-height: 25px;
    letter-spacing: 1px;
}
.border1{
    background-image: url(../../assets/images/contributor/border1.png);
    background-position: -44px -31px;
    height: 237px;
    width: 379px;
}
.border2{
    position: relative;
    top: -43px;
    left: -45px;
}
.img1{
    transform: translate(22px,26px);
    cursor: pointer;
}
.img2{
    position: relative;
    top: -289px;
    left: 20px;
    
}
#teacher{
    width: 1420px;
    position: relative;
    top: 1307px;
    left: 253px;
    
}
.item2{
    background-image: url(../../assets/images/contributor/card_bg.png);
    height: 339px;
    width: 428px;
    box-sizing: border-box;
    margin: 0 64px 70px 0;
    padding: 40px 34px 45px 47px;
    display: inline-block;
    vertical-align: middle;
}
.item2 .cardTopPart{
    height: 165px;
}
.item2 img{
    display: inline-block;
}
.name{
    text-align: center;
    color:#FFD89F;
    font-size: 24px;
    margin-bottom: 20px;
}
.depart{
    color: #FFD89F;
    text-align: center;
    font-size: 18px;
}
.txt2{
    color: #FFD89F;
    text-align: center;
    font-size: 18px;
}
.namespace{
    margin: -135px 0 60px 170px;
}
#course{
    width: 1420px;
    position: relative;
    top: 1646px;
    left: 253px;
}
#button{
    width: 1000px;
    position: relative;
    top: -145px;
    left: 349px;
}
.item3{
    padding: 24px;
    background-color: #010000;
    height: 456px;
    width: 429px;
    box-sizing: border-box;
    border: 1px solid #FEECBC;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 64px 84px 0px;
    cursor: pointer;
}
.txt3{
    margin-top: -218px;
    color: #FFD89F;
    font-size: 22px;
    margin-bottom: 38px;
}
.txt4{
    color: #FFD89F;
    font-size: 17px;
}
.activeBtn{
    background-color: #FFEBCF; 
    color: #4E4E4D;
}
button{
    border: #FEECBC solid 1px;
    margin: 0 276px 0 0;
    border-radius: 10px;    
    width: 220px;
    height: 56px;
    font-size: 28px;
    background-color: #7C7870;
    color: #F1C588;
    cursor: pointer;
}
#example{
    position: relative;
    top: 1920px;
    left: 253px;
    width: 1420px;
}
.item4{
    padding: 38px 116px 30px 125px;
    border: 1px solid #FEECBC;
    border-radius: 10px;
    box-sizing: border-box;
    width: 1420px;
    background-color: #081017;
    margin: 0 0 50px 0;
    cursor: pointer;
}
.tag{
    display: inline-block;
    height: 34px;
    padding: 0 15px 0 15px;
    border: #FEECBC solid 1px;
    border-radius: 10px;
    background-color: #FBD09F;
    line-height: 34px;
    font-size: 16px;
    text-align: center;
    color: #363636;
    margin:  0 26px 0 0;
}
.txt5{
    color: #FFD89F;
    font-size: 28px;
    margin-bottom: 20px;
}
.txt6{
    font-size: 20px;
    color:#81807B;
    margin: 11px 0 20px 0;
    line-height: 37px;
}
#colleage{
    width: 1420px;
    position: relative;
    top: 2354px;
    left: 253px;
}
#project_{
    width: 1420px;
    position: relative;
    top: 2791px;
    left: 253px;
}
.more{
    width: 120px;
    height: 24px;
    box-sizing: border-box;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    color: #FEECBC;
    text-align: right;
    line-height: normal;
    font-size: 21px;
    margin-left: 721px;
    margin-top: 10px;
    margin-bottom: 9px;
    cursor: pointer;
}
#more1{
    position: absolute;
    top: 1320px;
    left: 820px;
}
#more2{
    position: absolute;
    top: 2754px;
    left: 820px;
}
#more3{
    position: absolute;
    top: 3840px;
    left: 820px;
}
#more4{
    position: absolute;
    top: 5315px;
    left: 820px;
}
#more5{
    position: absolute;
    top: 7185px;
    left: 820px;
}
#markPoint1{
    position: absolute;
    top: 1310px;
    left: 820px;
}
#markPoint2{
    position: absolute;
    top: 2754px;
    left: 820px;
}
#markPoint3{
    position: absolute;
    top: 3840px;
    left: 820px;
}
#markPoint4{
    position: absolute;
    top: 5315px;
    left: 820px;
}
#markPoint5{
    position: absolute;
    top: 7185px;
    left: 820px;
}
#markPoint6{
    position: absolute;
    top: 8185px;
    left: 820px;
}
.bottomTxt{
    width: 920px;
    background-color: #001227;
    text-align: left;
    position: absolute;
    color: #F4D2A0;
    font-size: 20px;
    line-height: 36px;
    top: 9369px;
    left: 509px;
}
li{
  margin: 33px 0 0 16px;
  font-size: 16px;
  text-align: center;
  line-height: 39px;
  color: #8A8A8A;
  list-style: none;
  border: solid 1px #6D6D6D;
  border-radius: 5px;
  width: 134px;
  box-sizing: border-box;
  height: 39px;
  cursor: pointer;
}
li::before{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: -5px;
  background-color: #6D6D6D;
  display: inline-block;
  border-radius: 5px;
  transform: translateY(15px);
}
.active{
  border-color: #F0D9BC;
  color: #F4D3A2;
}
.stick1{
    position: absolute;
    top: 14px;
    left: -21px;
    margin-right: 16px;
}
.stick2{
    position: absolute;
    top: 98px;
    left: -0.5px;
}
#colleage .item2{
    background-image: url(../../assets/images/contributor/card-bg-small.png);
    height: 238px;
    width: 428px;
}
.item4 .name{
    font-size: 16px;
    font-weight: 600;
    color: #FFD89F;
}
.item4 .org{
    font-size: 16px;
    color: #FFD89F;
}
</style>