nuxtProject/pages/courseware/synopsis.vue

<!-- 课程开发梗概页面-->
<template>
    <div class="website-course-synopsis-page">
      <!-- 课程开发平台运营 banner栏-->
      <div :style="{backgroundImage: `url(${synopsisBannerImg})`}" class="website-synopsis-banner"></div>

      <!-- 核心业务 -->
      <div class="website-course-services">
        <h4 class="client-title">课程开发</h4>
        <ul>
          <li>
            <div class="client-container">
              <div class="synopsis-services-box">
                <img :src="synopsisImg1" alt="教学课程" />
                <div class="course-services-content">
                  <h6>教学课程</h6>
                  <p>用心做好课，口碑服务15载</p>
                  <ul class="synopsis-list-box">
                    <li v-for="item in synopsisArr1"><i></i><span>{{item}}</span></li>
                  </ul>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div></div>
                </div>
              </div>
            </div>
          </li>
          <li class="synopsis-blue">
            <div class="client-container">
              <div class="synopsis-services-box website-row-reverse">
                <img :src="synopsisImg2" alt="高端动画" />
                <div class="course-services-content">
                  <h6>高端动画</h6>
                  <p>只做有灵魂的动画，“帧”“秒”必争</p>
                  <ul class="synopsis-list-box">
                    <li v-for="item in synopsisArr2"><i></i><span>{{item}}</span></li>
                  </ul>
                  <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="synopsis-services-box">
                <img :src="synopsisImg3" alt="微课开发" />
                <div class="course-services-content">
                  <h6>微课开发</h6>
                  <p>微课制作参赛获奖，经验很重要！</p>
                  <ul class="synopsis-list-box">
                    <li v-for="item in synopsisArr3"><i></i><span>{{item}}</span></li>
                  </ul>
                  <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 class="synopsis-blue">
            <div class="client-container">
              <div class="synopsis-services-box website-row-reverse">
                <img :src="synopsisImg4" alt="课件PPT" />
                <div class="course-services-content">
                  <h6>课件PPT</h6>
                  <p>教学类课件PPT，轻松制作高效可靠</p>
                  <ul class="synopsis-list-box">
                    <li v-for="item in synopsisArr4"><i></i><span>{{item}}</span></li>
                  </ul>
                  <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="synopsis-services-box">
                <img :src="synopsisImg4" alt="学习系统" />
                <div class="course-services-content">
                  <h6>学习系统</h6>
                  <p>麦塔学习系统，一站式服务更方便！</p>
                  <ul class="synopsis-list-box">
                    <li v-for="item in synopsisArr5"><i></i><span>{{item}}</span></li>
                  </ul>
                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsultXx">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解更多</span></div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </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`),
            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`),
            synopsisImg5:  require(`~/static/images/client/course/course-synopsis-img5.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`),
            synopsisArr1:['高等院校','公司企业','培训机构','政府机构','媒体出版','事业单位'],
            synopsisArr2:['Mg动画','情景动画','Flash动画','片头动画','定格动画','动画短片','三维动画','宣传动画'],
            synopsisArr3:['动画微课','视频微课','文图微课','长图微课','PPT微课','H5微课 '],
            synopsisArr4:['优质公开课','教育精品课','培训网络课','教学PPT制作','医学PPT制作','PPT美化','PPT修改','PPT设计 '],
            synopsisArr5:['在线考试','在线培训','组卷抽题','线上直播','考试防作弊','视频课程','阅卷判卷','学习监控'],
          }
        },
      head(){
        return {
          SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
          title: '课程制作-课件制作-微课动画制作-教学课件制作价格 ',
          meta: [
            {
              name: 'keywords',
              content: '课件,微课,课程制作,课件制作,微课制作,教学课件,微课动画,微课课件,教学课件'
            },
            {
              name:'description',
              content:'麦塔拥有国内专业、成熟的课程制作团队，丰富的电子课程制作经验，业务方向包括教学\n' +
                        '设计体验、图文内容演示、教学课件、微课、情景动画等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
            }
          ],
        }
      },
      methods:{
        onlineConsult(){
          window.open('https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1')
        },
        onlineConsultXx(){
          window.open('https://affim.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd')
        },
        goCustom(){
          this.$router.push({ name: 'custom' });
          this.$router.push({ path: '/courseware/custom' });
        },
      },
    };
</script>

<style scoped>

</style>