nuxtProject/pages/courseware/synopsis.vue

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

      <!-- 核心业务 -->
      <div class="website-course-services">
        <h4 class="client-title">课程开发</h4>
        <ul>
          <li>
              <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><span  class="client-default-Btn" @click="goQuotation">立即申请制作</span></div>
                </div>
              </div>
          </li>
          <li class="synopsis-blue">
              <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="goGddh">了解更多</span></div>
                </div>
              </div>
          </li>
          <li>
              <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="goWkzz">了解更多</span></div>
                </div>
              </div>
          </li>
          <li class="synopsis-blue">
              <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="goPPt">了解更多</span></div>
                </div>
              </div>
          </li>
          <li>
              <div class="synopsis-services-box">
                <img :src="synopsisImg5" 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="goXxxt">了解更多</span></div>
                </div>
              </div>
          </li>
        </ul>

      </div>

      <!--  课程报价区域  -->
      <div class="client-course-quotation" ref="quotation">
        <div class="client-container quotation-wrap">
          <div class="left-text">
            <h3>课程定制在线报价</h3>
            <p>栋科客服人员会在30分钟内与你取得联系</p>
          </div>
          <courseBaojia class="baojia-form" tag="kckf" :user-list="userList" :sum="custom_sum"></courseBaojia>
        </div>
      </div>

    </div>
</template>

<script>
    import courseBaojia from "@/components/course/course-baojia";
    export default {
        name: 'synopsis',
        layout:'templateB',
      async asyncData({ $axios, store }) {
        // 设置选中菜单
        store.commit('setActiveNav', '/courseware');

        let [res2, res3] = await Promise.all([
                                               $axios.$post(`/develop/sum`, {}),
                                               $axios.$post(`/develop/userlist`, {}),
                                             ])
        return {
          custom_sum: res2.data || 0,
          userList: res3.data.data || []
        }
      },
        data() {
          return {
            // 发展现状img
            synopsisBannerImg: require(`~/static/images/client/course/course-synopsis-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`),
            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年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
            }
          ],
        }
      },
      components: {
        courseBaojia,
      },
      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')
        },
        goGddh(){
          this.$router.push({ path: '/courseware/animation' });
        },
        goWkzz(){
          this.$router.push({ path: '/courseware/custom' });
        },
        goPPt(){
          this.$router.push({ path: '/courseware/ppt' });
        },
        goXxxt(){
          window.open('https://cdnks.mtavip.com/a/register?flug=2')
        },
        goQuotation() {
          document.documentElement.scrollTop = this.$refs.quotation.offsetTop - 150;
          window.pageYOffset = this.$refs.quotation.offsetTop - 150;
          document.body.scrollTop = this.$refs.quotation.offsetTop - 150;
        }
      },
    };
</script>

<style scoped>

</style>