nuxtProject/pages/courseware/index.vue

<template>
  <div class="client-course-page">
    <!-- 课程开发页 banner栏 -->
    <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/course/course-banner-background.png`)})`}" class="client-course-banner"></div>

    <!-- 新闻资讯 -->
    <ul class="platform-menu-ul">
      <li @click="btnClick('kckf')" :class="{'active':divType==='kckf'}">课程开发</li><li @click="btnClick('kczy')" :class="{'active':divType==='kczy'}">课程资源</li>
    </ul>

    <div v-if="divType==='kczy'" class="client-resources-page">
      <!-- 题库资源页 banner栏 -->
      <div class="client-platform-banner">
        <div  :style="{backgroundImage: `url(${require(`~/static/images/client/resources/resources-banner-background.jpg`)})`}" class="client-platform-banner"></div>
      </div>
      <!--  课程企业通用岗位培训方案 -->
      <div class="client-container">
        <h4 class="client-title">课程企业通用岗位培训方案</h4>
        <ul class="train-scheme-list">
          <li><div><i></i><span>职业素养</span></div></li>
          <li><div><i></i><span>领导能力</span></div></li>
          <li><div><i></i><span>人力资源</span></div></li>
          <li><div><i></i><span>市场营销</span></div></li>
          <li><div><i></i><span>行政管理</span></div></li>
          <li><div><i></i><span>财务管理</span></div></li>
          <li><div><i></i><span>客服服务</span></div></li>
          <li><div><i></i><span>产品运营</span></div></li>

        </ul>
      </div>
      <div class="platform-products-services">
        <ul>
          <li>
            <div class="client-container">
              <div class="products-services-box products-contrary-box">
                <h4 class="client-title">帮助企业培养关键人才和提升岗位技能</h4>
                <img :src="trainAdvantagesImg1" alt="帮助企业培养关键人才和提升岗位技能" />
                <div class="products-services-content">
                  <p>
                    课程总数近<span class="blue-big-size">5000门</span><br>
                    涵盖<span class="blue-big-size">2000多个</span>知识要点<br>
                    提供<span class="blue-big-size">8大通用岗位</span>培训方案<br>
                    课程资源<span class="blue-big-size">持续更新</span><br>
                  </p>
                  <div class="default-Btn-box">
                    <a class="client-default-Btn" @click="applyFun" >申请方案</a>
                    <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </div>
      <!--  情景动画 -->
      <div class="course-learn-box">
        <h4 class="client-title">基于业务场景的课程形式</h4>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li>
              <a href="https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4"></a>
              <div>
                <span><img :src="courseVideoImg19" alt="FLASH动画课程"><i @click="playVideo(18)"></i></span>
                <p>FLASH动画课程</p>
                <p class="course-explain-black">以图文动画展现教与学之间的关系，达到预期的教学效果，改变学习的本质，课程形式适合所有行业</p>
              </div>
            </li>
            <li>
              <a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a>
              <div>
                <span><img :src="courseVideoImg8" alt="视频课程"><i @click="playVideo(19)"></i></span>
                <p>视频课程</p>
                <p class="course-explain-black">把教师视频与PowerPoint课件一同摄制下来，融合生成在线实战视频课件，让学员更容易理解</p>
              </div>
            </li>
            <li>
              <a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a>
              <div><span><img :src="courseVideoImg6" alt="名师讲堂"><i @click="playVideo(20)"></i></span>
                <p>名师讲堂</p>
                <p class="course-explain-black">各领域优秀讲师汇聚一堂，打造明星级课堂，轻松将员工带成干将</p>
              </div>
            </li>
          </ul>
          <div class="platform-products-services">
            <a class="client-default-Btn" @click="applyFun" >申请方案</a>
            <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
          </div>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="platform-news-information mta-hidden-xs">
        <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>
    <div v-if="divType==='kckf'">
      <!--  E-learning课程 -->
      <div class="course-learn-box" id="learnBox">
        <h4 class="client-title">E-learning课程</h4>
        <h5 class="client-subtitle-title">E-learning课程类型主要有：flash动画形式；两分屏、三分屏流媒体；电子杂志；视频实拍等。我们能帮您快速开发E-learning课件，高效搞定线上系统化学习</h5>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i @click="playVideo(0)"></i></span><p>两分屏类E-Learning课程</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i @click="playVideo(1)"></i></span><p>三分屏类E-Learning课程</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i @click="playVideo(2)"></i></span><p>电子杂志类E-Learning课程</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i @click="playVideo(3)"></i></span><p>FLASH图文类E-Learning课程</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i @click="playVideo(4)"></i></span><p>FLASH交互类E-Learning课程</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i @click="playVideo(5)"></i></span><p>视频类E-Learning课程</p></div></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  微课程 -->
      <div class="course-learn-box" id="microBox">
        <h4 class="client-title">微课程</h4>
        <h5 class="client-subtitle-title">该类课程主要有：长图文微课、视频微课、H5交互微课等。由丰富的图形图像、多彩多姿的动画、音视频内容构成，短小精趣，在各类教育领域都有其发挥的空间，能实现现代人随时随地轻松学习的愿望</h5>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i @click="playVideo(6)"></i></span><p>长图文类微课</p></div></li>
            <li><a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i @click="playVideo(7)"></i></span><p>视频类微课</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i @click="playVideo(8)"></i></span><p>H5交互微课</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i @click="playVideo(9)"></i></span><p>情景动画类微课</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i @click="playVideo(10)"></i></span><p>图文类微课</p></div></li>
            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i @click="playVideo(11)"></i></span><p>PPT微课</p></div></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun">申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  宣传片 -->
      <div class="course-learn-box" id="propagateBox">
        <h4 class="client-title">宣传片</h4>
        <h5 class="client-subtitle-title">宣传片主要有：二维动画制作、MG动画制作、手绘动画、视频实拍等多种形式。用于企业形象宣传、广告推广等，能将企业营销带到大众中去，发挥最大限度的作用</h5>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i @click="playVideo(12)"></i></span><p>手绘动画类宣传片</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i @click="playVideo(13)"></i></span><p>MG动画类宣传片</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i @click="playVideo(14)"></i></span><p>视频类宣传片</p></div></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  情景动画 -->
      <div class="course-learn-box" id="animationBox">
        <h4 class="client-title">情景动画</h4>
        <h5 class="client-subtitle-title">情景动画画面精美，将教学动画游戏化，利用别出心裁的镜头特效，摆脱枯燥的学习体验，提升学习者的学习乐趣</h5>
        <div class="client-container tc">
          <ul class="learn-box-list">
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i @click="playVideo(15)"></i></span><p>儿歌动画</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i @click="playVideo(16)"></i></span><p>故事教学</p></div></li>
            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i @click="playVideo(17)"></i></span><p>过场动画</p></div></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  PPT定制及美化 -->
      <div class="course-ppt-box" id="pptBox">
        <h4 class="client-title">PPT定制及美化</h4>
        <h5 class="client-subtitle-title-big">专业平面设计师和美学动效师操刀设计、可视化处理以及动画制作，让PPT具有极强的美感和冲击力</h5>
        <div class="client-container tc">
          <ul>
            <li><img :src="coursePPtImg1" alt="扁平卡通类PPT"><p>扁平卡通类PPT</p></li>
            <li><img :src="coursePPtImg2" alt="图文类PPT"><p>图文类PPT</p></li>
            <li><img :src="coursePPtImg3" alt="扁平卡通类PPT"><p>扁平卡通类PPT</p></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  H5平面设计 -->
      <div class="course-H5-box" id="h5Box">
        <h4 class="client-title">H5平面设计</h4>
        <h5 class="client-subtitle-title-big">H5有着易传播、跨平台的特性，所以常常会作为现在社会化传播的首选方案。我们能够创作出服务于营销的设计和文案，打破一维思维状态，转向发散性思维，将视觉设计综合应用在营销企划、用户体验、特效制作、媒体投放等方方面面，将作品做扎实作品做饱满。</h5>
        <div class="client-container tc">
          <ul>
            <li><img :src="courseH5Img1" alt="H5平面设计" width="333" height="383"></li>
            <li><img :src="courseH5Img2" alt="H5平面设计" width="455" height="383"></li>
            <li><img :src="courseH5Img3" alt="H5平面设计" width="333" height="383"></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!--  视频后期处理 -->
      <div class="course-videoPos-box" id="videoPostBox">
        <h4 class="client-title">视频后期处理</h4>
        <h5 class="client-subtitle-title-big">除了基础的拍摄外，视频的设计风格也十分重要，视频的后期处理能够颠覆整体的设计效果，我们承接视频剪辑后期制作、影视剪辑后期特效制作、精剪年会视频特效、片头、婚礼、宣传片视频剪辑，十余年制作经验让画面生出生机，跃动起来，广告动画后期就选栋科</h5>
        <div class="client-container tc">
          <ul>
            <li><img :src="videoPosImg1" alt="视频后期处理" width="514" height="256" ><p>2D转3D电影</p></li>
            <li><img :src="videoPosImg2" alt="视频后期处理" width="514" height="256" ><p>宣传视频</p></li>
          </ul>
          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
          <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系我们</a>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="platform-news-information mta-hidden-xs">
        <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>

    <!--  视频播放弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="videoDialogFlag"
      @close="closeVideoDialog"
      class="course-video-dialog"
      center>
      <video controls :src="source" class="course-video-box"></video>
      <p>{{footerText}}</p>
    </el-dialog>

    <!--  申请方案弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="telDl"
      @close="delDlClose"
      class="application-scheme-dialog"
      center>
      <i></i>
      <p>免费获得课程开发解决方案</p>
      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
        <el-form-item  prop="tel">
          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
        </el-form-item>
      </el-form>
      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
      <span>免费热线：400-052-2130</span><a href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">在线客服</a>
    </el-dialog>



  </div>


</template>

<script>
  export default {
    name:       'courseware',
    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
                                             }),
                                             await $axios.$post(`/home/banner/list`, { 'code': 4 }).then(res => {
                                               return res;
                                             }),
                                           ])
      return {
        topCarousels : res1.data.data ||[],
        bannerList: res2.data.data||[],

      }
    },
    components: {
    },
    props:      {
    },
    data() {
      return {
        //  describe: 课程开发相关 author: Wgy date:6/8/21
        trainAdvantagesImg1:  require(`~/static/images/client/resources/train-scheme-img.png`),
        courseVideoImg19:  require(`~/static/images/client/course/course-video-img19.png`),




        // 菜单栏上方
        courseNavImg:  require(`~/static/images/client/course/course-nav-img.png`),
        // 视频封面
        courseVideoImg1:  require(`~/static/images/client/course/course-video-img1.png`),
        courseVideoImg2:  require(`~/static/images/client/course/course-video-img2.png`),
        courseVideoImg3:  require(`~/static/images/client/course/course-video-img3.png`),
        courseVideoImg4:  require(`~/static/images/client/course/course-video-img4.png`),
        courseVideoImg5:  require(`~/static/images/client/course/course-video-img5.png`),
        courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
        courseVideoImg7:  require(`~/static/images/client/course/course-video-img7.png`),
        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
        courseVideoImg9:  require(`~/static/images/client/course/course-video-img9.png`),
        courseVideoImg10:  require(`~/static/images/client/course/course-video-img10.png`),
        courseVideoImg11:  require(`~/static/images/client/course/course-video-img11.png`),
        courseVideoImg12:  require(`~/static/images/client/course/course-video-img12.png`),
        courseVideoImg13:  require(`~/static/images/client/course/course-video-img13.png`),
        courseVideoImg14:  require(`~/static/images/client/course/course-video-img14.png`),
        courseVideoImg15:  require(`~/static/images/client/course/course-video-img15.png`),
        courseVideoImg16:  require(`~/static/images/client/course/course-video-img16.png`),
        courseVideoImg17:  require(`~/static/images/client/course/course-video-img17.png`),
        courseVideoImg18:  require(`~/static/images/client/course/course-video-img18.png`),
        // ppt图片
        coursePPtImg1:  require(`~/static/images/client/course/course-ppt-img1.png`),
        coursePPtImg2:  require(`~/static/images/client/course/course-ppt-img2.png`),
        coursePPtImg3:  require(`~/static/images/client/course/course-ppt-img3.png`),
        // H5图片
        courseH5Img1:  require(`~/static/images/client/course/course-h5-img1.png`),
        courseH5Img2:  require(`~/static/images/client/course/course-h5-img2.png`),
        courseH5Img3:  require(`~/static/images/client/course/course-h5-img3.png`),
        // 视频后期处理
        videoPosImg1:  require(`~/static/images/client/course/video-pos-img1.png`),
        videoPosImg2:  require(`~/static/images/client/course/video-pos-img2.png`),
        videoDialogFlag:false,
        source:'',
        footerText:'',
        title:'',
        videoArray:[
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
            fotterText:'教师视频与讲课PowerPoint课件一并摄制下来生成的课件，因此被称为‘二分屏’课件。',
            title:'两分屏类E-Learning课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
            fotterText:'是把教师视频与PowerPoint课件一并摄制下来，生成电脑格式的文件，通过Windows系统里的IE浏览器进行播放',
            title:'三分屏类E-Learning课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/35f356f6-17470879c83-0006-732a-c93-687b7.mp4',
            fotterText:'兼具了平面与互联网两者的特点，且融入了图像、文字、声音、视频、游戏等相互动态结合来呈现给读者',
            title:'电子杂志类E-Learning课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/42d3f2e8-17470860cff-0006-732a-c93-687b7.mp4',
            fotterText:'主要以图片的形式表现教学者的作用和教与学之间的关系，从而改变教育的本质',
            title:'FLASH图文类E-Learning课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/18d95d93-17470860cfb-0006-732a-c93-687b7.mp4',
            fotterText:'是可以操作互动的教学，简单的比较，交互式是游戏',
            title:'FLASH交互类E-Learning课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
            fotterText:'以视频的形式表现出要授予的课程内容',
            title:'视频类E-Learning课程',
          },
          //微课程
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/4f1c04ef-174708abedf-0006-732a-c93-687b7.mp4',
            fotterText:'是通过图片发布文字信息的一种形式',
            title:'长图文类微课',
          },
          {
            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
            title:'视频类微课',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13a4929d-17470860cf9-0006-732a-c93-687b7.mp4',
            fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
            title:'H5交互微课',
          },

          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1eb213bd-17470897778-0006-732a-c93-687b7.mp4',
            fotterText:'以故事情景引出产品内容的介绍',
            title:'情景动画类微课',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/a262a7b-174708aa838-0006-732a-c93-687b7.mp4',
            fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
            title:'图文类微课',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/ef9b83b-17470860d19-0006-732a-c93-687b7.mp4',
            fotterText:'主要是以教师根据教学内容PPT进行假想授课',
            title:'PPT微课',
          },



          //宣传片
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1c896f73-174708a6de4-0006-732a-c93-687b7.mp4',
            fotterText:'一张张手绘画出来制作合成动画形式',
            title:'手绘动画类宣传片',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/57b79278-17470860d16-0006-732a-c93-687b7.mp4',
            fotterText:'是平面设计与动画片之间的一种产物，MG的重点是非叙述性非具象化的视觉表现形式，节奏感更强，动画的流畅与每屏之前的衔接性更好',
            title:'MG动画类宣传片',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/39296d0d-174708a6aea-0006-732a-c93-687b7.mp4',
            fotterText:'以拍摄视频的形式呈现出企业的介绍和产品宣传',
            title:'视频类宣传片',
          },
          // 情景动画
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/159fac7b-17470879c88-0006-732a-c93-687b7.mp4',
            fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
            title:'儿歌动画',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13f16002-1747088d2a9-0006-732a-c93-687b7.mp4',
            fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
            title:'故事教学',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-0006-732a-c93-687b7.mp4',
            fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
            title:'过场动画',
          },

//  describe: 课程开发 author: Wgy date:6/8/21

          {
            url:'https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4',
            fotterText:'以图文动画展现教与学之间的关系，达到预期的教学效果，改变学习的本质，课程形式适合所有行业',
            title:'FLASH动画课程',
          },
          {
            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
            fotterText:'把教师视频与PowerPoint课件一同摄制下来，融合生成在线实战视频课件，让学员更容易理解',
            title:'视频课程',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
            fotterText:'各领域优秀讲师汇聚一堂，打造明星级课堂，轻松将员工带成干将',
            title:'名师讲堂',
          },



        ],
        btnTextDisabled: false,
        telDl: false,
        btnText:         '获取验证码',
        countdown:       60, // 60秒倒计时
        sliderData:      {},
        appKey:          'FFFF0N00000000007EC0',
        telChangeDate:   {},
        telRules:        {
          tel:          [
            { trigger: 'blur', required: true, message: '请输入手机号' },
          ],
        },
        divType:'kckf',

      };
    },
    head(){
      return {
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        title: '微课制作_课程开发_动画视频课件制作_微课制作公司',
        meta: [
          {
            name: 'keywords',
            content: '动画微课制作,课程制作公司'
          },
          {
            name:'description',
            content:'麦塔微课制作团队业务范围E-learning课程、微课程、宣传片、情景动画、PPT定制及美化、H5平面设计、视频后期处理等；海量精品课程专业定制，持续提升在线教学体验，赋能企业线上化进程。'
          }
        ],
      }
    },
    computed:   {},
    methods:    {
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }

      },
      goIntroductionPage(){
        this.$router.push({ name: 'introduction' });
      },

      // tab点击
      btnClick(data){
        if(data==='kczy'){
          this.divType = 'kczy'
        }else{
          this.divType = 'kckf'
        }
      },
      checkInfo(data) {
        const opt = {
          id: data.code,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
      clickBanner(data){
        if(data){
          window.open(data)
        }

      },
      applyFun() {
        this.getSystemWidth();
        if(this.SystemWidthFlag){
          this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'course',} });
        }else {
          this.telDl = true;
        }
      },

      dialogSave(){
        this.$refs.ruleTelForm.validate((valid) => {
          if (valid) {
            // 请求后台
            const options = {
              phone:  this.telChangeDate.tel,
            };
            if (!/^1[3-9]\d{9}$/.test(this.telChangeDate.tel)) {
              this.$message.error('手机号格式错误');
              return false;
            }
            this.$axios.$post('/develop/add',options).then(res=>{
              if (res.code === 0 && res.data) {
                this.telDl = false;
                this.$message.success('申请成功');
              } else {
                this.$message.error('申请失败');
              }
            });
          }
        });

      },


      delDlClose(){
        this.telDl  =false;
        this.countdown = -1;
        this.$refs.ruleTelForm.resetFields();


      },

      /**
       * 串联加载指定的脚本
       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
       * 全部加载完成后执行回调
       * @param array|string 指定的脚本们
       * @param function 成功后回调的函数
       * @return array 所有生成的脚本元素对象数组
       * 异步加载js后运行回调函数callback / scripts 为数组或字符串
       */
      seriesLoadScripts(scripts, callback) {
        if (typeof (scripts) != 'object') {
          var scripts = [scripts];
        }
        var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
        var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
          s[i] = document.createElement('script');
          s[i].setAttribute('type', 'text/javascript');
          s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
            if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
              this.onload = this.onreadystatechange = null;
              this.parentNode.removeChild(this);
              if (i != last) {
                recursiveLoad(i + 1);
              } else if (typeof (callback) == 'function') {
                callback();
              }
            }
          };
          s[i].setAttribute('src', scripts[i]);
          HEAD.appendChild(s[i]);
        };
        recursiveLoad(0);
      },

      // 倒计时60秒
      setTime() {
        if (this.countdown === 0) {
          this.btnTextDisabled = false;
          this.btnText = '获取验证码';
          this.countdown = 60;
        }else if(this.countdown === -1){
          this.btnTextDisabled = false;
          this.btnText = '获取验证码';
          this.countdown = 60;
        } else {
          this.btnTextDisabled = true;
          this.btnText = '重新发送(' + this.countdown + 's)';
          this.countdown--;
          setTimeout(() => {
            this.setTime();
          }, 1000);
        }
      },



      playVideo(index){
        this.videoDialogFlag = true
        this.source = this.videoArray[index].url
        this.footerText = this.videoArray[index].fotterText
        this.title = this.videoArray[index].title
      },

      closeVideoDialog(){

        this.videoDialogFlag = false;
        this.source = '';
        this.footerText = '';
        this.title = '';
      }
    },
    created() {

    },
    mounted() {
      this.getSystemWidth();
    },
    beforeDestroy() {
    },
  };
</script>
<style>

</style>