|
|
@@ -0,0 +1,320 @@
|
|
|
+<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 mta-hidden-xs"><img :src="makeCourseImg" alt="快速掌握知识萃取的方法，形成有价值、易懂易学的高质量学习资源"></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&userId=10530011&siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="mta-hidden-xs">
|
|
|
+ <img :src="btnImg" alt="在线咨询"></a>
|
|
|
+ <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011&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&userId=10530011&siteToken=a3e003e938e3a18608b460fc992182b8" target="_blank" class="mta-hidden-xs">
|
|
|
+ <img :src="btnImg" alt="在线咨询"></a>
|
|
|
+ <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011&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&userId=10530011&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&userId=10530011&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&userId=10530011&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&userId=10530011&siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 课程体系 -->
|
|
|
+ <div class="course-system-box mta-hidden-xs">
|
|
|
+ <div class="client-container">
|
|
|
+ <h3 class="make-course-title course-blue-title">课程体系</h3>
|
|
|
+ <img :src="courseSystemImg1" alt="" class="course-system-img">
|
|
|
+ <img :src="courseSystemImg2" alt="">
|
|
|
+ <a href="https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011&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&userId=10530011&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&userId=10530011&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&userId=10530011&siteToken=a3e003e938e3a18608b460fc992182b8" class="client-default-Btn mta-hidden-sm">在线咨询</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 报名学习 -->
|
|
|
+ <div class="sign-study-box mta-hidden-xs">
|
|
|
+ <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`),
|
|
|
+ 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`),
|
|
|
+ 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>
|
tanxue
