课程开发免费注册开发

pages/courseware/index.vue

@@ -3,13 +3,30 @@
       <!-- 课程开发页 banner栏 -->
       <div v-if="bannerList.length>0" class="client-course-banner">
         <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/course/course-banner-background.png`)})`}" ></div>
-        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
+        <a rel="nofollow" class="free-trial-default-btn" @click="onlineFun">在线咨询</a>
+      </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="onlineFun">在线咨询</a>
+        </div>
       </div>
 
       <!--  E-learning课程 -->
       <div class="course-learn-box" id="learnBox">
         <h4 class="client-title">E-learning课程</h4>
-        <h5 class="client-subtitle-title">E-learning 课程类型主要有：两分屏、三分屏、电子杂志、FLASH 动画、视频实拍等多种形式。满足学员电脑端系统化学习</h5>
+        <h5 class="client-subtitle-title">E-learning课程，顾名思义就是应用于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>
@@ -19,56 +36,35 @@
             <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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" 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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+          <a class="free-trial-default-btn" @click="onlineFun">在线咨询</a>
         </div>
       </div>
 
       <!--  宣传片 -->
       <div class="course-learn-box" id="propagateBox">
-        <h4 class="client-title">宣传片</h4>
-        <h5 class="client-subtitle-title">宣传片主要有：手绘动画、MG动画、视频实拍等多种形式。用于企业形象宣传、广告推广等</h5>
+        <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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+          <a class="free-trial-default-btn" @click="onlineFun">在线咨询</a>
         </div>
       </div>
 
       <!--  情景动画 -->
       <div class="course-learn-box" id="animationBox">
-        <h4 class="client-title">情景动画</h4>
-        <h5 class="client-subtitle-title">情景动画形式丰富多样，游戏化教学和精美动画相结合，激发学习者兴趣</h5>
+        <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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+          <a class="free-trial-default-btn" @click="onlineFun">在线咨询</a>
         </div>
       </div>
 
@@ -369,6 +365,10 @@
     },
     computed:   {},
     methods:    {
+      // 在线咨询
+      onlineFun(){
+        window.open('https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011')
+      },
       // tab点击
       checkInfo(data) {
         const opt = {