nuxtProject/pages/makeCourse.vue

<template>
  <!-- 7天教你打造企业微课制作 -->
  <div class="client-platform-page client-makeCourse-page">
    <!--  banner栏 -->
    <div class="client-platform-banner">
      <div :style="{backgroundImage: `url(${require(`~/static/images/client/indexEducation/index-education-banner.jpg`)})`}" class="client-platform-banner"></div>
    </div>

    <!-- 图片标题-->
    <h2 class="make-course-h2">
      <img :src="makeCourseImg" alt="快速掌握知识萃取的方法，形成有价值、易懂易学的高质量学习资源" class="mta-hidden-xs">
      <img :src="makeCourseSjImg" alt="快速掌握知识萃取的方法，形成有价值、易懂易学的高质量学习资源" class="mta-hidden-sm">
    </h2>

    <!-- 介绍 -->
        <div class="client-container fn-clear">
          <div class="makeCourse-introduce-box">
            <img :src="introduceImg1" alt="课程内容通俗易懂，零基础也能学" />
            <dl>
              <h3 class="make-course-title course-blue-title">课程内容通俗易懂，零基础也能学</h3>
              <dt>商业讲师、企业内训师、课程开发人员、基层管理者、岗位精英</dt>
              <dd>
                <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="mta-hidden-xs">
                <img :src="btnImg" alt="在线咨询"></a>
                <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
              </dd>
            </dl>
          </div>
        </div>
        <div class="client-container fn-clear">
          <div class="makeCourse-introduce-box contrary-introduce-box">
            <img :src="introduceImg2" alt="为你定制高效学习方案" />
            <dl>
              <h3 class="make-course-title course-blue-title">为你定制高效学习方案</h3>
              <dt>课程不限次回看：不用担心没有时间学习</dt>
              <dt>实用性强：理论讲解+实操演示</dt>
              <dt>课后一对一答疑：免去你对学不会的瞎操心</dt>
              <dt>一课一练：课上学、课后练，老师在线点评作品</dt>
              <dd>
                <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="mta-hidden-xs">
                  <img :src="btnImg" alt="在线咨询"></a>
                <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
              </dd>
            </dl>
          </div>
        </div>

    <!-- 课程目标 -->
    <div class="course-target-box">
      <div class="client-container">
        <h3 class="make-course-title">课程目标</h3>
        <ul class="target_icon">
          <li>
            <div>
              <img :src="courseTargetImg1" alt="微课思维">
              <span>微课思维</span>
            </div>
          </li>
          <li>
            <div>
              <img :src="courseTargetImg2" alt="微课设计">
              <span>微课设计</span>
            </div>
          </li>
          <li>
            <div>
              <img :src="courseTargetImg3" alt="微课开发">
              <span>微课开发</span>
            </div>
          </li>
          <li>
            <div>
              <img :src="courseTargetImg4" alt="软件使用">
              <span>软件使用</span>
            </div>
          </li>
          <li>
            <div>
              <img :src="courseTargetImg5" alt="授课技巧">
              <span>授课技巧</span>
            </div>
          </li>
        </ul>
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="btn-big-box mta-hidden-xs">
          <img :src="btnBigImg" alt="">
        </a>
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
      </div>

    </div>

    <!-- 培训讲师介绍 -->
    <div class="px-teacher-box">
        <div class="client-container">
          <h3 class="make-course-title course-blue-title">培训讲师介绍</h3>
          <div class="teacher-content-box">
            <div class="teacher-img-box"><img :src="pxTeacherImg"><span>诺雪</span></div>
            <p>栋科软件数字内容事业部部长，艺术设计专业，企业微课高级导师。13年企业在线课程及微课制作经验；先后为数十家国内大型企业担任课程规划 咨询顾问。长期从事在线课程研发及企业人才培养工作，具备完善的在线课程制作培训管理理论体系和培训实战管理经验。</p>
          </div>
          <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="btn-big-box mta-hidden-xs">
            <img :src="btnBigImg" alt="">
          </a>
          <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
        </div>
     </div>

    <!-- 课程体系 -->
    <div class="course-system-box">
      <div class="client-container">
        <h3 class="make-course-title course-blue-title">课程体系</h3>
        <img :src="courseSystemImg1" alt="" class="course-system-img mta-hidden-xs">
        <img :src="courseSystemImg2" alt="" class="mta-hidden-xs">
        <img :src="courseSystemImg3" alt="" class="mta-hidden-sm">
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="btn-big-box mta-hidden-xs">
          <img :src="btnBigImg" alt="">
        </a>
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
      </div>
    </div>

    <!-- 微课设计 -->
    <div class="course-learn-box">
      <div class="client-container">
        <h3 class="make-course-title course-blue-title">13载企业级微课设计，用专业和实力说话</h3>
        <ul class="learn-box-list">
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="微课动画"><i @click="playVideo(0)"></i></span><p>微课动画</p></div></li>
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="故事情节"><i @click="playVideo(1)"></i></span><p>故事情节</p></div></li>
          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="儿歌动画"><i @click="playVideo(2)"></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="courseVideoImg4" alt="PPT微课"><i @click="playVideo(3)"></i></span><p>PPT微课</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="courseVideoImg5" alt="图文类微课"><i @click="playVideo(4)"></i></span><p>图文类微课</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="courseVideoImg6" alt="情景类微课"><i @click="playVideo(5)"></i></span><p>情景类微课</p></div></li>
          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="H5微课"><i @click="playVideo(6)"></i></span><p>H5微课</p></div></li>
          <li class="mta-hidden-xs"><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 class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5长图类"><i @click="playVideo(8)"></i></span><p>H5长图类</p></div></li>
        </ul>
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="btn-big-box mta-hidden-xs">
          <img :src="btnBigImg" alt="">
        </a>
        <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011&amp;siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
      </div>
    </div>

    <!-- 报名学习 -->
    <div class="sign-study-box">
      <div class="client-container">
        <div class="study-gj-box">
          <div class="sign-study-content">
            <el-input v-model="phoneNumber" placeholder="请输入手机号"></el-input>
            <el-button type="danger" @click="toSignbtn" :disabled="!exportDataStatus">立即报名</el-button>
          </div>
        </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>
  </div>
</template>

<script>
  export default {
    name:     'makeCourse',
    layout:   'templateB',
    head(){
      return {
        title: '7天教你打造企业微课制作',
      }
    },
    data() {
      return {
        makeCourseImg:  require(`~/static/images/client/makeCourse/makeCourse-h2-text.png`),
        makeCourseSjImg:  require(`~/static/images/client/makeCourse/makeCourse-h2-sjText.png`),
        introduceImg1:  require(`~/static/images/client/makeCourse/introduce-img1.png`),
        introduceImg2:  require(`~/static/images/client/makeCourse/introduce-img2.png`),
        btnImg:  require(`~/static/images/client/makeCourse/content_button.png`),
        btnBigImg:  require(`~/static/images/client/makeCourse/course-button-img.png`),
        courseTargetImg1:  require(`~/static/images/client/makeCourse/course-target-img1.png`),
        courseTargetImg2:  require(`~/static/images/client/makeCourse/course-target-img2.png`),
        courseTargetImg3:  require(`~/static/images/client/makeCourse/course-target-img3.png`),
        courseTargetImg4:  require(`~/static/images/client/makeCourse/course-target-img4.png`),
        courseTargetImg5:  require(`~/static/images/client/makeCourse/course-target-img5.png`),
        pxTeacherImg:  require(`~/static/images/client/makeCourse/px-teacher-img.png`),
        courseSystemImg1:  require(`~/static/images/client/makeCourse/course-system-img1.png`),
        courseSystemImg2:  require(`~/static/images/client/makeCourse/course-system-img2.png`),
        courseSystemImg3:  require(`~/static/images/client/makeCourse/course-system-img3.png`),
        phoneNumber:'',// 手机号
        exportDataStatus:   true,// 按钮禁用
        countdown:          10,// 十秒倒计时
        // 13载企业级微课设计，用专业和实力说话
        videoDialogFlag:false,
        title:'',
        source:'',
        footerText:'',
        videoArray:[
          // 1-3
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-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/159fac7b-17470879c88-0006-732a-c93-687b7.mp4',
            fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
            title:'儿歌动画',
          },
          // 4-6
          {
            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/a262a7b-174708aa838-0006-732a-c93-687b7.mp4',
            fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
            title:'图文类微课',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1eb213bd-17470897778-0006-732a-c93-687b7.mp4',
            fotterText:'以故事情景引出产品内容的介绍',
            title:'情景类微课',
          },
          // 7-9
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13a4929d-17470860cf9-0006-732a-c93-687b7.mp4',
            fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
            title:'H5微课',
          },
          {
            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
            title:'视频类微课',
          },
          {
            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/4f1c04ef-174708abedf-0006-732a-c93-687b7.mp4',
            fotterText:'是通过图片发布文字信息的一种形式',
            title:'H5长图类',
          },
          ],
        // 视频列表图片
        courseVideoImg1:  require(`~/static/images/client/course/course-video-img18.png`),
        courseVideoImg2:  require(`~/static/images/client/course/course-video-img17.png`),
        courseVideoImg3:  require(`~/static/images/client/course/course-video-img16.png`),
        courseVideoImg4:  require(`~/static/images/client/course/course-video-img12.png`),
        courseVideoImg5:  require(`~/static/images/client/course/course-video-img11.png`),
        courseVideoImg6:  require(`~/static/images/client/course/course-video-img10.png`),
        courseVideoImg7:  require(`~/static/images/client/course/course-video-img9.png`),
        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
        courseVideoImg9:  require(`~/static/images/client/course/course-video-img9.png`),

      };
    },
    computed: {},
    methods:  {
      // 播放视频
      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 = '';
      },

      // 报名
      toSignbtn(){
        let reg = /^1[0-9]{10}$/
        if (this.phoneNumber == '' || this.phoneNumber.length <= 10 || !reg.test(this.phoneNumber)) {
          this.$message.error('请输入正确的手机号');
        }else{
          this.$axios.$post('/weike/add',{phone:this.phoneNumber }).then(res=>{
            if (res.code === 0 && res.data) {
              this.$message.success('报名成功');
              this.setTime();
            } else {
              this.$message.error('报名失败');
            }
          });
        }
      },
      // 10秒计时器 author: Wxy date: 2019/11/27
      setTime() {
        if (this.countdown === 0) {
          this.countdown = 10;
          this.exportDataStatus = true;
        } else {
          this.countdown--;
          this.exportDataStatus = false;

          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(() => {
            this.setTime();
          }, 1000);
        }
      },
    },
    created() {

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

</style>