课程资源页和课程开发页面合并

assets/scss/cus-client/cus-client-page.scss

@@ -397,6 +397,18 @@
       background-repeat: no-repeat;
     }
 
+    // 菜单 ul
+    .course-menu-ul{
+      display: block;
+      margin: 0 auto;
+      text-align: center;
+      background: #F7F9FB;
+      li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
+      li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
+      li:hover{
+        transform: scale(1.1);
+      }
+    }
     /* 调转菜单栏 */
     .course-service-nav{width: 100%;height: 72px;background: url("~static/images/client/course/course--nav-bg.png") repeat-x;padding-top: 15px;text-align: center;}
     .course-link-nav{

pages/courseware/index.vue

@@ -3,29 +3,116 @@
     <!-- 课程开发页 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>
 
-    <!-- 菜单栏上方-->
-    <div class="course-service-nav">
-      <img :src="courseNavImg" alt="课程开发">
-    </div>
+    <!-- 新闻资讯 -->
+    <ul class="course-menu-ul">
+      <li @click="btnClick('kczy')">课程资源</li><li @click="btnClick('kckf')">课程开发</li>
+    </ul>
+
+    </div>-->
+    <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>
 
-    <!-- 跳转菜单栏 -->
-    <div class="course-link-nav">
-      <div class="client-container fn-clear-gap">
-        <a href="#learnBox">E-learning课程</a>
-        <a href="#microBox">微课程</a>
-        <a href="#propagateBox">宣传片</a>
-        <a href="#animationBox">情景动画</a>
-        <a href="#pptBox">PPT定制</a>
-        <a href="#h5Box">H5平面设计</a>
-        <a href="#videoPostBox">视频后期处理</a>
+        </ul>
       </div>
-    </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>
+                    <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>
 
-    <!--  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>
-      <div class="client-container tc">
+      </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(0)"></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(1)"></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(2)"></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">
+        <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 动画、视频实拍等多种形式。满足学员电脑端系统化学习</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>
@@ -36,77 +123,77 @@
           </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>
 
-    <!--  微课程 -->
-    <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><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><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><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>
+      <!--  微课程 -->
+      <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><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><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><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>
+        </div>
       </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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+      <!--  宣传片 -->
+      <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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+        </div>
       </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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+      <!--  情景动画 -->
+      <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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+        </div>
       </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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+      <!--  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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+        </div>
       </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">
+      <!--  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>
@@ -114,37 +201,38 @@
           </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>
 
-    <!--  视频后期处理 -->
-    <div class="course-videoPos-box" id="videoPostBox">
-      <h4 class="client-title">视频后期处理</h4>
-      <h5 class="client-subtitle-title-big">视频剪辑后期制作、影视剪辑后期特效制作、精剪年会视频特效、片头、婚礼、宣传视频剪辑。当今3d出屏技术已经应用到了众多手机、显示器和游戏中，在没有足够多的3d电影片源的情况下，那么我们把手头上的2d电影转换成3d电影。</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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+      <!--  视频后期处理 -->
+      <div class="course-videoPos-box" id="videoPostBox">
+        <h4 class="client-title">视频后期处理</h4>
+        <h5 class="client-subtitle-title-big">视频剪辑后期制作、影视剪辑后期特效制作、精剪年会视频特效、片头、婚礼、宣传视频剪辑。当今3d出屏技术已经应用到了众多手机、显示器和游戏中，在没有足够多的3d电影片源的情况下，那么我们把手头上的2d电影转换成3d电影。</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="http://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011" target="_blank">联系我们</a>
+        </div>
       </div>
-    </div>
 
-    <!-- 新闻资讯 -->
-    <div class="platform-news-information">
-      <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 class="platform-news-information">
+        <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>
 
@@ -369,6 +457,7 @@
             { trigger: 'blur', required: true, message: '请输入验证码' },
           ],
         },
+        divType:'kczy',
 
       };
     },
@@ -389,6 +478,14 @@
     },
     computed:   {},
     methods:    {
+      // tab点击
+      btnClick(data){
+        if(data==='kczy'){
+          this.divType = 'kczy'
+        }else{
+          this.divType = 'kckf'
+        }
+      },
       checkInfo(data) {
         const opt = {
           id: data.code,