nuxtProject/pages/courseware/synopsis.vue

<!-- 课程开发梗概页面-->
<template>
    <div class="website-course-synopsis-page">
      <!-- 课程开发平台运营 banner栏 pc-->
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${synopsisBannerImg})`}" class="mta-hidden-xs website-course-banner"></div>
      <!-- 课程开发平台运营 banner栏 移动端-->
      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${synopsisBannerPhoneImg})`}" class="mta-hidden-sm website-course-banner"></div>
      <!-- 发展历程-移动端隐藏-->
      <div class="synopsis-company-history mta-hidden-xs">
        <div class="client-container">
          <ul>
            <li><div><p>2008年</p><h4>公司成立于</h4></div></li>
            <li><div><p>500+</p><h4>服务企业</h4></div></li>
            <li><div><p>50,000+</p><h4>累计开发课程小时数</h4></div></li>
            <li><div><p>30+</p><h4>制作开发团队</h4></div></li>
          </ul>
        </div>
      </div>
      <!-- 发展历程-pc端隐藏-->
      <div class="synopsis-company-history mta-hidden-sm">
        <div class="client-container">
          <ul>
            <li><div><p>2008年</p><h4>公司成立于</h4></div><div><p>50,000+</p><h4>累计开发课程小时数</h4></div></li>
            <i></i>
            <li><div><p>5,000+</p><h4>服务企业</h4></div><div><p>30+</p><h4>制作开发团队</h4></div></li>
          </ul>
        </div>
      </div>

      <!-- 核心业务 -->
      <div class="website-course-services">
        <h4 class="client-title">核心业务</h4>
        <ul>
          <li>
            <div class="client-container">
              <div class="course-services-box website-row-reverse">
                <img :src="synopsisImg1" alt="为企业、院校打造专业的课程定制化服务" />
                <div class="course-services-content">
                  <h5>为企业、院校打造专业的课程定制化服务</h5>
                  <p>栋科优秀的课程开发团队，向客户提供最具价值的课程定制化服务，通过“课程内容专家+课程教学设计师+课件动画设计师”的专业化定制化模式，针对目标对象的学习习惯和学习方式，定制课程核心内容，从用户的角度充分发挥数字化课程的优势。帮助客户解决新环境下学习者与培训管理者共同面临的挑战。</p>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="course-services-box">
                <img :src="synopsisImg2" alt="帮助企业快速构建自主课程体系" />
                <div class="course-services-content">
                  <h5>帮助企业快速构建自主课程体系</h5>
                  <p>栋科课程开发团队基于岗位胜任力模型，为企业搭建9大模块通用岗位培训方案。协助客户开展实施，千门企业精品通用视频课程，满足各个行业对培训课程资源的应用需求，让员工每天收获满满。</p>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="course-services-box website-row-reverse">
                <img :src="synopsisImg3" alt="学、测、考、练，打造企业一体化学习模式" />
                <div class="course-services-content">
                  <h5>学、测、考、练，打造企业一体化学习模式</h5>
                  <p>栋科的麦塔在线培训系统为企业提供“平台+内容+服务”一体化学习解决方案。 我们通过技术、内容与大数据结合，用科技驱动人才发展，助力企业成功。</p>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="course-services-box">
                <img :src="synopsisImg4" alt="微课大赛助力企业推动培训学习进程" />
                <div class="course-services-content">
                  <h5>微课大赛助力企业推动培训学习进程</h5>
                  <p>栋科企业微课大赛，是一场发动企业全员参与的学习资源建设活动。通过“以赛代训，以赛提质，以赛促优”的方式，集中产出学习资源，推动企业培训学习进程，助力企业高效快速的沉淀优质学习课程，极大降低企业培训成本。</p>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </div>

      <!-- 为什么选择我们 -->
      <div class="website-chose-box">
        <div class="client-container">
          <h4 class="client-title">为什么选择我们</h4>
          <ul class="chose-img-box">
            <li>
              <div>
                <span><img :src="choseImg1" alt="专业的顾问服务" /></span>
                <h5>专业的顾问服务</h5>
              </div>
            </li>
            <li>
              <div>
                <span><img :src="choseImg3" alt="完善的培训体系" /></span>
                <h5>完善的培训体系</h5>
              </div>
            </li>
            <li>
              <div>
                <span><img :src="choseImg2" alt="可靠的开发技术"/></span>
                <h5>可靠的开发技术</h5>
              </div>
            </li>
            <li>
              <div>
                <span><img :src="choseImg4" alt="成熟的运营能力" /></span>
                <h5>成熟的运营能力</h5>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="website-synopsis-news-box">
        <div class="client-container">
          <h4 class="client-title">新闻资讯</h4>
          <ul>
            <li style="font-size: 16px" v-for="(item, index) in topCarousels">
              <div>
                <img :src="item.pic" alt="新闻资讯" />
                <h4 @click="checkInfo(item)">{{ item.title }}</h4>
                <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
                <p>{{ item.intro }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'synopsis',
        layout:'templateB',
      async asyncData({ $axios, store }) {
        // 设置选中菜单
        store.commit('setActiveNav', '/courseware');

        let [res1,res2] =  await Promise.all([
                                               await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
                                                 return res
                                               }),
                                             ])
        return {
          topCarousels : res1.data.data ||[],
        }
      },
        data() {
          return {
            // 发展现状img
            synopsisBannerImg: require(`~/static/images/client/course/course-synopsis-banner.png`),
            synopsisBannerPhoneImg: require(`~/static/images/client/course/course-synopsis-sj-banner.jpg`),
            synopsisImg1:  require(`~/static/images/client/course/course-synopsis-img1.png`),
            synopsisImg2:  require(`~/static/images/client/course/course-synopsis-img2.png`),
            synopsisImg3:  require(`~/static/images/client/course/course-synopsis-img3.png`),
            synopsisImg4:  require(`~/static/images/client/course/course-synopsis-img4.png`),
            // 为什么选择我们
            choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
            choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),
            choseImg3:   require(`~/static/images/client/index/index-chose-tech-icon.png`),
            choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
          }
        },
      methods:{
        onlineConsult(){
          window.open('https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1')
        },
        goCustom(){
          this.$router.push({ name: 'custom' });
          this.$router.push({ path: '/courseware/custom' });
        },
      },
    };
</script>

<style scoped>

</style>