nuxtProject/pages/courseware/compete.vue

<!-- 课程开发课程大赛页面-->
<template>
    <div class="website-course-compete-page">
      <!-- 课程开发课程大赛 banner栏 pc-->
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${competeBannerImg})`}" class="website-course-banner mta-hidden-xs"></div>
      <!-- 课程开发课程大赛 banner栏 移动端-->
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${competeBannerPhoneImg})`}" class="website-course-banner mta-hidden-sm"></div>

      <!--  栋科提供的服务 -->
      <div class="dk-service-box">
        <h4 class="client-title">栋科提供的服务</h4>
        <h5 class="client-subtitle-title">当学员对平台学习有了一定参与度，学习运营的重心将转移到挖掘优秀员工经验，对知识进行沉淀。可以采用众包众筹的方式，通过案例征集、微课开发等一系列活动，促进学员进行知识分享和输出。</h5>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li><p>知识萃取</p></li>
            <li><p>微课培训</p></li>
            <li><p>微课大赛</p></li>
            <li><p>案例征集</p></li>
          </ul>
          <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
        </div>
      </div>
      <!--知识萃取-->
      <div class="compete-introduce-box compete-blue-bj">
        <div class="client-container">
          <h4 class="course-compete-title"><em>01</em><span>知识萃取</span></h4>
          <h5 class="client-subtitle-title">帮助企业进行关键岗位知识与技能挖掘，形成具有易学习、易掌握、易应用的课程资源，并通过实际工作检验，不断修正，形成岗位专业技能课程体系，将隐性经验显性化，显性经验系统化。</h5>
          <img :src="competeZscqPcImg" class="mta-hidden-xs">
          <img :src="competeZscqSjImg" class="mta-hidden-sm">
          <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
        </div>
      </div>
      <!--微课培训-->
      <div class="compete-introduce-box">
        <div class="client-container">
          <h4 class="course-compete-title"><em>02</em><span>微课培训</span></h4>
          <h5 class="client-subtitle-title">帮助组织快速掌握知识沉淀与知识萃取的方法，获得一批高质量学习资源，培养一批具备知识转化与应用能力的内部培训师。</h5>
          <p class="course-compete-subtitle-title"><i></i>栋科微课训练营<i></i></p>
          <ul class="compete-introduce-list">
            <li><p>理解企业微课设计与快速开发的价值</p></li>
            <li><p>熟悉企业微课体系规划的基本策略与方法</p></li>
            <li><p>掌握企业微课设计与快速开发的基本原则与步骤</p></li>
            <li><p>灵活运用企业微课多种制作工具的实操技巧</p></li>
            <li><p>能够基于企业的组织经验和实践制作企业微课</p></li>
          </ul>
          <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
        </div>
      </div>
      <!--微课大赛-->
      <div class="compete-introduce-box compete-blue-bj">
        <div class="client-container">
          <h4 class="course-compete-title"><em>03</em><span>微课大赛</span></h4>
          <h5 class="client-subtitle-title">栋科企业微课大赛，是一场发动企业全员参与的学习资源建设活动。通过“以赛代训”的方式，集中产出移动学习资源，推动企业移动学习的进程，助力企业高效沉淀一批优质的微课，极大减免企业培训成本！</h5>
          <img :src="competeWkdsPcImg" class="mta-hidden-xs">
          <img :src="competeWkdsSjImg" class="mta-hidden-sm">
          <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
        </div>
      </div>
      <!--案例征集-->
      <div class="compete-introduce-box">
        <div class="client-container">
          <h4 class="course-compete-title"><em>04</em><span>案例征集</span></h4>
          <p class="course-compete-subtitle-title"><i></i>栋科案例征集活动特点<i></i></p>
          <img :src="competeAlzjPcImg" class="mta-hidden-xs">
          <img :src="competeAlzjSjImg" class="mta-hidden-sm">
          <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: 'compete',
        layout:'templateB',
      data() {
        return {
          // 发展现状img
          competeBannerImg: require(`~/static/images/client/course/course-compete-banner.png`),
          competeBannerPhoneImg: require(`~/static/images/client/course/course-compete-sj-banner.jpg`),
          competeZscqPcImg: require(`~/static/images/client/course/compete-zscq-pc-img.png`),
          competeZscqSjImg: require(`~/static/images/client/course/compete-zscq-sj-img.png`),
          competeWkdsPcImg: require(`~/static/images/client/course/compete-wkds-pc-img.png`),
          competeWkdsSjImg: require(`~/static/images/client/course/compete-wkds-sj-img.png`),
          competeAlzjPcImg: require(`~/static/images/client/course/compete-alzj-pc-img.png`),
          competeAlzjSjImg: require(`~/static/images/client/course/compete-alzj-sj-img.png`),
        }
      }
    };
</script>

<style scoped>

</style>