<template>
<div id="bg">
    <div class="navi_biaoti">传智慧薪火 <i style="margin-right: 30px;"></i> 筑知识殿堂</div>
    <div id="navi">
        <img v-if="false" 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 === 'markPoint0'}" @click="scrollTo('markPoint0')" >精品课程</li>
            <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 v-if="false" style="margin-top:33px;cursor: pointer;"><img src="@/assets/images/contributor/sideNavi/navigation_bottom.png" @click="scrollTo('markPoint6')" alt=""></ul>
    </div>
    <div id="videoBox" v-if="false">
        <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="markPoint0"></span>
    <!-- <span @click="toMore('/contributor/encourage')" id="more0" class="more">查看更多&gt;&gt;</span> -->
    <div id="encourage">
        <div class="text_4">按姓氏首字母排序</div>
        <img src="../../assets/images/contributor/encourage.png" class="encourage_bt" alt="">
        <div class="item0" v-for="item in encouragePerson" :key="item.id" :style="{marginLeft:item.id %4==0?'160px':'0px',marginRight:item.id%5==0?'160px':'0px'}">
            <div class="cardTopPart">
                <img :src="require(`@/assets/images/contributor/encourage/${item.image}`)" class="encourage_img" alt="">
                <div class="namespace">
                    <div class="name">{{item.name}}</div>
                    <div class="depart">{{item.plan}}</div>
                </div>
            </div>
            <div class="encourage_text">{{ item.jinjv }}</div>
        </div>
    </div>
    <span id="markPoint1"></span>
    <span @click="toMore('/contributornew/project')" id="more1" class="more">查看更多>></span>
    <div id="project">
        <img src="../../assets/images/contributor/project.png" class="project_bt" alt="">
        <div class="item1" v-for="item in projectDetailValue" :style="{marginRight:item.cound %3==0?'0':'64px'}" :key="item.id" @click="toProjectDetail(item.id)">
            <div class="border1">
                <img class="img1"  :src="require(`@/assets/images/contributor/project/${item.image}`)" alt="">
                <i class="project_text" v-html="item.name"></i>
            </div>
            <div class="txt1" v-html="item.condition"></div>
        </div>

    </div>
    <span id="markPoint2"></span>
    <span @click="toMore('/contributornew/teacher')" id="more2" class="more">查看更多&gt;&gt;</span>
    <div id="teacher">
        <img src="../../assets/images/contributor/teacher.png" class="teacher_bt" alt="">
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/chenglu.jpg" alt="">
                <div class="namespace">
                    <div class="name">陈露</div>
                    <div class="depart">显示器件及物联网创新业务中台</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《项目管理系统介绍》<br/>《车载产品开发流程介绍》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/gaoliang.jpg" alt="">
                <div class="namespace">
                    <div class="name">高亮</div>
                    <div class="depart">MLED业务</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《MLED背光产品介绍》</div>
        </div>
        <div class="item2" style="margin-right:0">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/wangzijian.jpg" alt="">
                <div class="namespace">
                    <div class="name">王子健</div>
                    <div class="depart">传感器及解决方案业务</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《射频前端国内外行业格局及思考》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/dengdan.jpg" alt="">
                <div class="namespace">
                    <div class="name">邓旦</div>
                    <div class="depart">智慧医工业务</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《超声与临床》<br/>《介入超声在重症急性胰腺炎中的应用》</div>
        </div>
        <div class="item2">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/guxinfang.jpg" alt="">
                <div class="namespace">
                    <div class="name">顾新芳</div>
                    <div class="depart">'N'业务</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《企业行政成本控制实务》<br/>《工厂管理秩序营造与维护》<br/>《企业智慧行政管理与服务体系构建》</div>
        </div>
        <div class="item2" style="margin-right:0">
            <div class="cardTopPart">
                <img src="@/assets/images/contributor/teacher/chenxiaoqin.jpg" alt="">
                <div class="namespace">
                    <div class="name">陈晓琴</div>
                    <div class="depart">后台(业务支援体系)</div>
                </div>
            </div>
            <div class="txt2">代表课程<br/>《财务与经营》<br/>《企业经营法则》</div>
        </div>
    </div>
    <span id="markPoint3"></span>
    <span @click="toMore('/contributornew/course')" id="more3" class="more">查看更多>></span>
    <div id="course">
        <img src="../../assets/images/contributor/coursenew.png" class="course_bt" alt="">
        <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('https://u.boe.com/pc/course/studyindex?id=1164279136545169408')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">CSCO采购师-合同法基础知识</div>
                <div class="txt4">黄晨晨</div>
                <i class="course_text">CSCO采购师-合同法基础知识</i>
            </div>
            <div class="item3" @click="toLink('https://u.boe.com/pc/course/studyindex?id=1164382386430193664')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="@/assets/images/contributor/course/img-3.png" alt="">
                <i class="course_text">如何追讨逾期款</i>
                <div class="txt3">如何追讨逾期款</div>
                <div class="txt4">任涛</div>
            </div>
            <div class="item3" style="margin-right:0" @click="toLink('https://u.boe.com/pc/course/studyindex?id=1146899104587362304')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-6.png" alt="">
                <div class="txt3">USB眼图相关知识点</div>
                <div class="txt4">金威</div>
                <i class="course_text">USB眼图相关知识点</i>
            </div>
            <div class="item3" @click="toLink('https://u.boe.com/pc/course/studyindex?id=1156894637086052352')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">物流与贸易术语</div>
                <div class="txt4">乔倩</div>
                <i class="course_text">物流与贸易术语</i>
            </div>
            <div class="item3" @click="toLink('https://u.boe.com/pc/course/studyindex?id=1163540502701772800')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/img-7.png" alt="">
                <div class="txt3">影响力-2023公开课</div>
                <div class="txt4">王清</div>
                <i class="course_text">影响力-2023公开课</i>
            </div>
            <div class="item3" style="margin-right:0" @click="toLink('https://u.boe.com/pc/course/boeframe?id=F8ABA981-5954-D661-78CF-74D1EFD42408&type=20')">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="" >
                <img class="img2" src="../../assets/images/contributor/course/img-3.png" alt="">
                <div class="txt3">质量意识2023</div>
                <div class="txt4">徐雪婷</div>
                <i class="course_text">质量意识2023</i>
            </div>
        </div>
        <div v-show="!online">
            <div class="item3"  @click="toCourseDetail(19)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">京东方历史与文化</div>
                <div class="txt4">郭华平</div>
                <i class="course_text">京东方历史与文化</i>
            </div>
            <div class="item3" @click="toCourseDetail(16)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-3.png" alt="">
                <div class="txt3">国际商务礼仪</div>
                <div class="txt4">周玉琴</div>
                <i class="course_text">国际商务礼仪</i>
            </div>
            <div class="item3" style="margin-right:0"  @click="toCourseDetail(4)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">安全责任与管理</div>
                <div class="txt4">潘国伟</div>
                <i class="course_text">安全责任与管理</i>
            </div>
            <div class="item3"  @click="toCourseDetail(22)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-6.png" alt="">
                <div class="txt3">抗菌药物临床管理与实践</div>
                <div class="txt4">吴新安</div>
                <i class="course_text">抗菌药物临床管理与实践</i>
            </div>
            <div class="item3"  @click="toCourseDetail(36)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">投影显示及关键技术简介</div>
                <div class="txt4">冷长林</div>
                <i class="course_text">投影显示及关键技术简介</i>
            </div>
            <div class="item3" style="margin-right:0"  @click="toCourseDetail(54)">
                <img class="border2" src="../../assets/images/contributor/border1.png" alt="">
                <img class="img2" src="../../assets/images/contributor/course/img-1.png" alt="">
                <div class="txt3">走进财务报表</div>
                <div class="txt4">赵自谦</div>
                <i class="course_text">走进财务报表</i>
            </div>
        </div>
    </div>
    <span id="markPoint4"></span>
    <span  id="more4" @click="toMore('/contributornew/example')" class="more">查看更多>></span>
    <div id="example">
        <img src="../../assets/images/contributor/example.png" class="example_bt" alt="">
        <div class="item4" @click="toLink('https://u.boe.com/pc/case/detail?id=1156198558609702912')">
            <div class="txt5">变局中开新局——京东方“HERO”智能座舱解决方案应运而生</div>
            <div><span class="tag">#汽车</span><span class="tag">#智能座舱</span><span class="tag">#第三空间</span><span class="tag">#车载显示</span></div>
            <div class="txt6">摘要：随着汽车智能化的发展，汽车逐步从传统的交通工具演变为移动的第三空间，消费者对车内场景的需求更加多元化，京东方车载业务向外充分挖掘市场需求，向内拉通各业务资源，提出“HERO”智能座舱解决方案，联合上下游相关企业，共同打造座舱生态，赋能更多车企。</div>
            <div><span class="name">苏宁</span> <span class="org">“N”业务</span></div>
        </div>
        <div class="item4" @click="toLink('https://u.boe.com/pc/case/detail?id=1154945351489159168')">
            <div class="txt5">设计降本在产品盈利能力提升过程中的实战策略研究</div>
            <div><span class="tag">#设计降本</span><span class="tag">#DFX</span><span class="tag">#流程体系</span><span class="tag">#降本专家组</span></div>
            <div class="txt6">TFT-LCD市场在2023年面临着巨大挑战。根据最新的市场研究报告，全球TFT-LCD面板营收和出货量均有所下降。Digitimes Research报告显示，2022年全球TFT-LCD面板营收总计为737亿美元，同比下降17%。而根据IHS Markit的最新报告，2022年全球TFT-LCD面板出货量达到2.2亿片，同比下降1.5%。为了应对市场压力，B10通过设计降本、材料二元化、供应资源池拓展、效率提升等工作，推动标杆产品23年A类价格下降（23.8”下降15%、55”下降11%、86”下降28%），有效助力产品盈利能力提升。本文将以实战案例论述如何运用设计降本的方法来打造具有标杆地位的低成本产品，并在量产、新品开发、新技术探索等方面进行极致的成本优化，从而提高产品的盈利能力。</div>
            <div><span class="name">周贺</span> <span class="org">显示器件及物联网创新业务中台</span></div>
        </div>
        <div class="item4" @click="toLink('https://u.boe.com/pc/case/detail?id=1164730247195656192')">
            <div class="txt5">B4极致运营项目</div>
            <div><span class="tag">#Bx费用 </span><span class="tag">#人效 </span><span class="tag">#能耗 </span><span class="tag">#自主维修 </span><span class="tag">#产线运营效率 </span></div>
            <div class="txt6">本案例介绍B4工厂在市场下行，产能月度波动较大的形势下，项目团队通过建设“千人工厂”提升人效、建立“基于成本的B4极致化运营”模型降低能耗、提倡自主维修降低备品备件费用等关键举措，降低产线Bx费用，提升产线运营效率。</div>
            <div><span class="name">封宾</span> <span class="org">显示器件及物联网创新业务中台</span></div>
        </div>
        <div class="item4" @click="toLink('https://u.boe.com/pc/case/detail?id=1160547169569079296')">
            <div class="txt5">B11工厂运营能力提升</div>
            <div><span class="tag">#流程</span><span class="tag">#制度</span><span class="tag">#前置化</span><span class="tag">#横向组织</span></div>
            <div class="txt6">1. 2023年经济环境亟待复苏，消费品市场需求不足。终端客户对产品的性能要求飞速提升的同时，又对价格进行非常大的挤压。这表现在需要B11工厂既能做出符合客户要求的高技术指标的产品、还要能以更低的成本进行生产、并满足稳定的交付。2. 国内外客户对产品的需求差异逐步差异化，B11工厂既要满足国外头部客户单一产品大量稳定生产的需求，又要满足国内客户小批量、高新技术、特殊独供的生产需求。以上两个问题，需要我们更具备技术能力、高效运营、稳定且灵活的组织运行机制去适应时代和市场的新需求。因此在B11工厂突破原有的管理模式，直击管理问题痛点，针对问题提出新的管理理念和方法，使队伍专业化、灵活化，能够在做好基础工作的同时，快速处理各类突发事件、迎接好新挑战。</div>
            <div><span class="name">赵吾阳</span> <span class="org">显示器件及物联网创新业务中台</span></div>
        </div>
    </div>
    <span id="markPoint5"></span>
    <span @click="toMore('/contributornew/colleage')" id="more5" class="more">查看更多>></span>
    <div id="colleage">
        <img src="../../assets/images/contributor/colleage.png" class="colleage_bt" alt="">
        <div class="item2">
            <img src="@/assets/images/contributor/colleage/yinyongzhi.png" alt="">
            <div class="namespace">
                <div class="name">殷永志</div>
                <div class="depart">显示器件及物联网创新业务中台——整机制造中心</div>
            </div>
        </div>
        <div class="item2" >
            <img src="@/assets/images/contributor/colleage/zhenfangyuan.jpg" 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/colleage/chenglu.jpg" alt="">
            <div class="namespace">
                <div class="name">陈露</div>
                <div class="depart">后台(业务支援体系)——CHRO组织</div>
            </div>
        </div>
        <div class="item2">
            <img src="@/assets/images/contributor/colleage/wuhaobang.jpg" 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/colleage/langjiange.jpg" alt="">
            </div>
            <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/colleage/dongruohan.png" alt="">
            <div class="namespace">
                <div class="name">董若涵</div>
                <div class="depart">后台(业务支援体系)——CLO组织</div>
            </div>
        </div>
    </div>
    <span id="markPoint6"></span>
    <div id="project_" v-if="false">
        <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>2023年知识贡献者大会结出的累累硕果，来自于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',
            encouragePerson:[
                {id:'1',name:'蔡斯特',plan:'显示器件及物联网创新业务中台',image:'caisite.jpg',jinjv:"桃李不言，下自成蹊，人才的成长要有土壤，要压重担，要出成果，要有信心。所有研发人员要跨界，要丰富自己，扩展视野，成就更优秀的自己！"},
                {id:'2',name:'付华',plan:'后台(业务支援体系)',image:'fuhua.png',jinjv:"人才是推动企业前进的引擎，是组织发展的基石，人才队伍建设需要注重多元化和包容性，需要给予足够的信任和责任。"},
                {id:'3',name:'封宾',plan:'显示器件及物联网创新业务中台',image:'fengbin.png',jinjv:"“骏马能历险，力田不如牛。坚车能载重，渡河不如舟”。有效的人才培养是充分发掘人才长处，激活人才价值。"},
                {id:'4',name:'何绮月',plan:'智慧医工业务',image:'heqiyue.jpg',jinjv:"创新传承体系，培养后备人才，为临床一线输送中坚力量，为千万百姓健康保驾护航。"},
                {id:'5',name:'金志恒',plan:'显示器件及物联网创新业务前台',image:'jinzhiheng.jpg',jinjv:"智力资本足以挫其锐，解其纷，和其光，同其尘。学以致用，勇做智力资本的沉淀者和传播者。"},
                {id:'6',name:'刘晓东',plan:'后台(业务支援体系)',image:'liuxiaodong.jpg',jinjv:"搭一流的平台，育一流的人才，带一流的团队，出一流的成果。"},
                {id:'7',name:'李文波',plan:'后台(业务支援体系)',image:'liwenbo.png',jinjv:"人才是企业发展的核心资源，赋能平台建设是人才养成的成功要素，基于此，企业才能拥有长盛不衰的原动力。"},
                {id:'9',name:'时凌云',plan:'MLED业务',image:'shilingyun.jpg',jinjv:"博学之人不仅自带光芒，而且相互照耀。"},
                {id:'8',name:'吴新银',plan:'后台(业务支援体系)',image:'wuxinyin.jpg',jinjv:"发挥团队智慧，共享知识储备，打造战狼团队。"},
                {id:'10',name:'王修亮',plan:'传感器及解决方案业务',image:'wangxiuliang.jpg',jinjv:"人才是企业持续发展的宝贵财富，激活个人能力为组织能力，不断突破企业发展天花板。"},
            ],
            projectDetailValue:[
                {cound:1,id:'9',name:'人岗匹配知识地图及<br/>课程资源开发',image:'img-3.png',condition:'1、通过某高科技公司关于学习地图方法论的对标，回归基础，按照岗位职责→任职资格（能力）→所需知识技能的逻辑梳理LCD制造中心试点岗位知识地图<br/>2、层层筛选50+讲师，以本领域Top专家为评审团队，与HR协同完成大纲、一稿、二稿&试题&话术审议，确保课程质量'},
                {cound:2,id:'6',name:'23年B9设备人员<br/>能力提升平台项目',image:'img-6.png',condition:'项目框架：1. 平台运维体系搭建：完善实验室配置，建立参观走廊，优化考试机制<br/>2. 团队组建：组建专业维修团队/学员讲师团队，明确职责，支撑业<br/>3. 设备人员能力拔高：分阶梳理任职资格标准、学习地图，逐步提升设备能力实施进展：<br/>Q1：实验室优化、团队组建、任职资格体系搭建、学习地图输出、维修大赛预告<br/>Q2：讲师集训、方案汇报、维修大赛开展Q3：内训课程运营Q4：结业考试、项目总结与结营仪式'},
                {cound:3,id:'2',name:'华灿系列赋能项目',image:'img-3.png',condition:'通过BOE HC工作组培训、BSM战略研讨会HC总监班、HC销售赋能工作坊以及HC经理级远航计划等五个子项目初步建立对整合并购整体框架、步骤和关键挑战的认知；产出HC初步战略规划和愿景；提升了HC团队核心领导干部管理能力和战略经营意识和执行力、赋能HC前台干部及员工，加速学员对方法论的了解。'},
                {cound:4,id:'3',name:'全赛道赋能<br/>助力苏州传感转型<br/>系列培训项目',image:'img-1.png',condition:'此项目面对面访谈32位骨干和10位干部，调研发现公司在组织&人才管理、行业know how、团队活力上有待改善；通过一系列项目设计，旨在管理能力提升、专业能力提升、共享平台搭建等全方位赋能。'},
                {cound:5,id:'1',name:'成都医院新任部/科级管理者暨优秀青年骨干赋能项目',image:'img-3.png',condition:'项目围绕“领导力”及“高效运营管理”，通过线下授课、行动学习、专家辅导三位一体方式，设计开发包括领导力、科室运营、精益管理、医疗质量安全及三甲创建等几大类课程，以及以管理工具和运营难点为核心的学习工作坊，旨在加强新任干部掌握核心管理技能及医院战略背景下的管理角色定位。'},
                {cound:6,id:'15',name:'员工敬业度提升项目',image:'img-1.png',condition:'敬业度提升项目，通过成立项目组织架构，项目成员先接受集团赋能培训，项目领导“向上赋能”，获得高层领的认可和支持，项目PL“向下赋能”，对业务部门进行反培训：敬业度报告数据解读、焦点访谈、行动计划的制定及落地追踪，目的深挖业务痛点，帮助业务找到解决问题的方法，合力精耕、敬业改善。'},
                {cound:7,id:'16',name:'2023年能源科技<br/>“三线一体”<br/>经营管理训战班',image:'img-3.png',condition:'该项目分三个模块，模块一是“走出去”，通过2天时间进行《跨界企业参访交流》和《双碳及创新课题研讨会》，<br/>模块二是“请进来”，通过2天时间学习《业务规划及管理实务》、《高绩效文化打造华为最佳实践分享》、《施耐德电气业务销售模式分享》，<br/>模块三是“实战演练”，运用培训工具进行区域战略升级、组织建设，形成未来业务发展规划、配套组织及人员调整方向。'},
                {cound:8,id:'4',name:'京东方集团<br/>创立30周年<br/>企业文化宣讲培训',image:'img-1.png',condition:'项目框架：集团内部广泛识别人才→开展系统培训，赋能人才队伍→整合凝练文化成果，输出标准化可复制认证材料→人才专业认证（京东方大学堂讲师&30周年宣讲团）→深入一线，以点带面，实现文化全面触达项目进展：2022年10-11月，面向集团，招募文化讲师和宣讲员；2022年11月-2023年4月，打磨企业文化培训课件及文化案例宣讲稿；2022年12月，特邀集团内部优秀讲师代表开展TTT培训，助力完成文化讲师认证工作，组建讲师队伍；2022年12月-2023年1月，特邀集团内外部老师开展宣讲能力提升培训4场；2022年12月-2023年2月，联合总部HR和各单位HR开展企业文化讲师认证活动，完成讲师认证，录入BOEU系统；2023年5月-12月，项目组面向科部长级以上领导宣导30周年最新文化成果；各单位宣讲员面向一线员工开展文化宣讲活动；各单位讲师面向一线员工开展文化培训活动。'},
                {cound:9,id:'5',name:'CTIO组织高潜人才<br/>培养与发展项目',image:'img-7.png',condition:'以发现和培养支撑集团物联网转型的人才梯队为宗旨，以终为始，优中选优，根据CXO期望与实际行为表现的差距，通过混合式的的培养和发展计划，三线齐发促进行为转变，绩效精进1、 课程线对齐短板，急用先学，线上线下相结合，个性化定制开发2门面授课程，精选6门优质线上课程，人均28.4学时，学习形式丰富，案例教学、角色扮演、面授、研讨会，输出问题解决案例54份和团队行为准则（九要）；搭建平台，赋予资源：邀请显示器件、CLO组织、 CTIO组织、CHRO组织、BOEU嘉宾、外部讲师共17人次，赋能线下课程研讨和侃侃而谈，课堂虚心请教，课后反思精进，学习效果翻倍；关注成长，赋予能力：一对一辅导反馈贯穿始终，更加关注个体成长，包括中心长的入营谈话、BOEU和HRBP的阶段性辅导、项目/课程需求访谈等，累计辅导124人次，人均2.3H2、 任务线夯实内功，锻造品质：在6个月、52周内，坚定执行每周自律打卡和每月一本书活动，引导高潜人才培养良好的生活和工作习惯，极大的促进身心健康和拓宽认知视野，为解决实际工作的问题提供了更加全面综合的视角，展现了CTIO组织高潜人才积极向上的精神风貌3、 活动线搭建平台，突破自我：组织侃侃而谈6场，主题积极正向，形式丰富多彩，现场观众742人、线上点播次数超2043次。高潜学员协力共创，主题有热度，思想有深度，表达有温度，展现Z时代员工面对逆境、在大是大非面前的思考与行动。体现了当代年轻人在面对时事政治、人文时的担当和使命。极大创新了人才培养的模式，并在集团范围内得到广泛传播和借鉴。'},
            ]
        }
    },
    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:'courseDetailnew',
                params:{id:id}
            })
        },
        toProjectDetail(id){
            this.$router.push({
                name:'projectDetailnew',
                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-new-index-active');
  },
  beforeDestroy() {
    // 组件销毁时移除类名
    document.body.classList.remove('contributor-conference-new-index-active');
  }


}
</script>
<style lang='scss'>
@font-face {
    font-family: 'biaoti1';
    src: url('../../assets/fonts/auFMY3.ttf');
}
@font-face {
    font-family: 'jinjv1';
    src: url('../../assets/fonts/Aa.ttf');
}
@font-face {
    font-family: 'biaoti2';
    src: url('../../assets/fonts/KMQfP4.ttf');
}
// 使用 body.contributor-conference-new-index-active 类名限制样式只在该页面生效
@media screen and (min-width: 1440px) and (max-width: 1600px){
    body.contributor-conference-new-index-active{
        zoom: 79%;
    }
    body.contributor-conference-new-index-active #bg{
         width: 1900px !important;
    }
}
@media screen and (min-width: 1366px) and (max-width: 1440px){
    body.contributor-conference-new-index-active{
        zoom: 74%;
    }
    body.contributor-conference-new-index-active #bg{
        width: 1869px !important;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1366px){
    body.contributor-conference-new-index-active{
        zoom: 72%;
    }
    body.contributor-conference-new-index-active #bg{
        width: 1874px !important;
    }
}
@media screen and (max-width: 1280px){
    body.contributor-conference-new-index-active{
        zoom: 67%;
    }
    body.contributor-conference-new-index-active #bg{
        width: 1885px !important;
    }
}
</style>
<style scoped>
#bg{
    position: relative;
    width: 1903px;
    height: 10024px;
    background-image: url(../../assets/images/contributor/index_bg_5.jpg);
    background-repeat: no-repeat;
    background-color: #001227;
}
#navi{
    position: fixed;
    left: 25px;
    top: 250px;
}
.navi_biaoti{
    margin-bottom: 28px;
    width: 564px;
    text-align: center;
    border-bottom: 1px solid;
    padding: 8px;
    font-size: 47px;
    position: relative;
    top: 381px;
    left: 675px;
    color: #F1C588;
    font-family: 'biaoti2';
}
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;
}
#encourage{
    width: 1420px;
    position: relative;
    top: 5016px;
    left: 253px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text_4{
    position: absolute;
    color: #F1C588;
    top: -73px;
    left: 647px;
}
.encourage_bt{
    position: absolute;
    top: -183px;
    left: 358px;
}
.item0{
    background: url(../../assets/images/contributor/card_bg.png) ;
    /* background-size: 100%; */
    height: 339px;
    width: 428px;
    box-sizing: border-box;
    margin: 0 64px 70px 0;
    padding: 40px 34px 45px 47px;
    display: inline-block;
    vertical-align: middle;

}
.item0 .cardTopPart{
    height: 165px;
}
.item0 .cardTopPart .namespace{
    margin: -111px 0 60px 170px;
}
.item0 img{
    display: inline-block;
}
.encourage_text{
    color: #FFD89F;
    text-align: left;
    font-size: 19px;
    /* font-family: 'jinjv1'; */
    margin-top: 12px;
}

.encourage_img{
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background-clip: border-box;
}
#project{
    width: 1420px;
    position: relative;
    top: 6070px;
    left: 253px;
}
.project_bt{
    position: absolute;
    top: -179px;
    left: 299px;
}
.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;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 7; /* 设置最大显示行数为7行 */
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}
.border1{
    background-image: url(../../assets/images/contributor/border1.png);
    background-position: -44px -31px;
    height: 237px;
    width: 379px;
    position: relative;
}
.border2{
    position: relative;
    top: -43px;
    left: -45px;
}
.img1{
    transform: translate(22px,26px);
    cursor: pointer;
    width: 328px;
    height: 186px;
}
.project_text{
    position: absolute;
    top: 62px;
    left: 53px;
    font-size: 27px;
    width: 272px;
    color: #ffffff;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3; /* 设置最大显示行数为7行 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.img2{
    position: relative;
    top: -289px;
    left: 20px;
    width: 328px;
    height: 186px;
}
.course_text{
    position: absolute;
    top: 64px;
    left: 70px;
    font-size: 27px;
    width: 267px;
    color: #ffffff;
    text-align: center;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3; /* 设置最大显示行数为7行 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#teacher{
    width: 1420px;
    position: relative;
    top: -1225px;
    left: 253px;

}
.teacher_bt{
    position: absolute;
    top: -189px;
    left: 329px;
}
.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;
    width: 142px;
    height: 142px;
    border-radius: 50%;
}
.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: -3445px;
    left: 253px;
}
.course_bt{
    position: absolute;
    top: -277px;
    left: 369px;
}
#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;
    position: relative;
}
.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: -2121px;
    left: 253px;
    width: 1420px;
}
.example_bt{
    position: absolute;
    top: -158px;
    left: 349px;
}
.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;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3; /* 设置最大显示行数为7行 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 111px;
}
#colleage{
    width: 1420px;
    position: relative;
    top: 3px;
    left: 253px;
}
.colleage_bt{
    position: absolute;
    top: -167px;
    left: 279px;
}
#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;
}
#more0{
    position: absolute;
    top: 1000px;
    left: 820px;
}
#more1{
    position: absolute;
    top: 7616px;
    left: 820px;
}
#more2{
    position: absolute;
    top: 2073px;
    left: 820px;
}
#more3{
    position: absolute;
    top: 582px;
    left: 820px;
}
#more4{
    position: absolute;
    top: 3164px;
    left: 820px;
}
#more5{
    position: absolute;
    top: 6784px;
    left: 820px;
}
#markPoint0{
    position: absolute;
    top: 570px;
    left: 820px;
}
#markPoint1{
    position: absolute;
    top: 2063px;
    left: 820px;
}
#markPoint2{
    position: absolute;
    top: 3154px;
    left: 820px;
}
#markPoint3{
    position: absolute;
    top: 4890px;
    left: 820px;
}
#markPoint4{
    position: absolute;
    top: 6766px;
    left: 820px;
}
#markPoint5{
    position: absolute;
    top: 7606px;
    left: 820px;
}
#markPoint6{
    position: absolute;
    top: 10200px;
    left: 820px;
}
.bottomTxt{
    width: 920px;
    background-color: #001227;
    text-align: left;
    position: absolute;
    color: #F4D2A0;
    font-size: 20px;
    line-height: 36px;
    top: 9714px;
    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: 160px;
  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{
    height: 520px;
    position: absolute;
    top: 14px;
    left: -24px;
    margin-right: 16px;
}
.stick2{
    height: 360px;
    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>
