mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-20 08:16:44 +08:00
794 lines
32 KiB
Vue
794 lines
32 KiB
Vue
<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">查看更多>></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> |