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>5,000+</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>职位评价管理用数据量化+多维度测评，PC端与移动端无缝连接;支持安卓、lOS等操作系统;加速人才培养为公司提供随时随地的个性化的、开放式测评服务。</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>数据信息一目了然，支持自定义多维度分析，360项目全貌视图数据展示，方便企业快速决策。</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>