课程开发改版---许莹版

assets/scss/cus-client/cus-client-common.scss

@@ -219,7 +219,8 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 .client-title{ @include setFontStyle(10);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
 
 /* 网站副标题 */
-.client-subtitle-title{width: 636px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 22px;margin:0 auto;margin-top: 16px;text-align: center}
+.client-subtitle-title{width: 650px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 22px;margin:0 auto;margin-top: 16px;text-align: center}
+.client-subtitle-title-big{width: 1000px;padding:0 100px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 22px;margin:0 auto;margin-top: 48px;text-align: center}
 
 /* 网站通用按钮 */
 .client-default-Btn{display: block;@include setFontStyle(-4);background: #2B5CFD;color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
@@ -336,7 +337,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /* 网站通用轮播 */
-.client-industry-information{
+/*.client-industry-information{
   background-image: url("~static/images/client/index/index-industry-bg.png");
   background-position: center;
   padding-bottom: 80px;
@@ -374,10 +375,10 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
     }
   }
-  /*.el-carousel__item.is-active{
+  !*.el-carousel__item.is-active{
     .industry-img-box{width: 50%;}
     .industry-content-box{margin-left: 50%;}
-  }*/
+  }*!
 
   // 左右按钮
   .el-carousel__arrow{width: 50px;height: 50px;background-color: rgba(43, 92, 253, 0.22);@include setFontStyle(16);color: rgba(255,255,255,0.8);}
@@ -390,7 +391,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
   // 指示器
   .el-carousel__indicators{display: none}
-}
+}*/
 
 /* 网站通用弹窗-申请方案 */
 .application-scheme-dialog{

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

@@ -396,46 +396,38 @@
     /* 网站banner */
     .client-course-banner{
       width: 100%;
-      height: 400px;
-      background-image: url("~static/images/client/course/course-banner-background.png");
+      height: 395px;
+      background-color:#031073;
+      background-image: url("~static/images/client/index/index-banner-background.png");
       background-position-x: center;
-
-      /* banner文字区域 */
-      .course-course-container{
-        width:520px;
-        display: inline-block;
-        margin-left: 150px;
-        h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
-        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
-        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
-      }
+      background-repeat: no-repeat;
     }
 
-    /* 课程定制开发 */
-    .course-made-box{
-        padding-bottom: 80px;
-        .client-container{width: 880px;padding-top: 48px;}
-        .course-made-content{
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 56px;
-          p{width: 455px;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin-bottom: 40px;text-align: justify}
-          a{width: 132px;height: 32px;line-height: 32px;@include setFontStyle(-4);display:inline-block;text-align:center;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
-        }
-        img{width: 357px;height: 251px;display:inline-block;vertical-align: middle;}
+    /* 调转菜单栏 */
+    .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{
+      width: 100%;height: 83px;background: #161B38;opacity: 0.9;
+      a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
+      a:nth-child(1){background: #353c61;}
+      a:nth-child(2){background: #38406a;}
+      a:nth-child(3){background: #3c4775;}
+      a:nth-child(4){width:174px;background: #404b81;}
+      a:nth-child(5){background: #3c4775;}
+      a:nth-child(6){background: #38406a;}
+      a:nth-child(7){background: #353c61;}
     }
 
+    // 申请方案按钮
+    .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
+    // 联系我们按钮
+    .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}
+
     /* E-learning课程 */
     .course-learn-box{
-      background: #F9FAFF;
-      padding-bottom: 80px;
-
-      // 申请方案按钮
-      .course-apply-btn{width: 238px;height: 40px;line-height:40px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center;margin: 0 auto;}
 
       // video列表
       .learn-box-list{
-        margin: 54px -16px 24px;
+        margin: 54px -16px 0;
           li{
               width: 33.33%;display: inline-block;
               a{display: none;}
@@ -451,8 +443,17 @@
       }
     }
 
-    /* 微课程 */
-    .course-micro-box{background: #FFF;}
+    /* PPT定制及美化、H5平面设计、视频后期处理 */
+    .course-ppt-box,.course-H5-box,.course-videoPos-box{
+      ul{margin: 48px 0;}
+      li{display: inline-block;}
+      li:not(:last-child){margin-right: 30px;}
+    }
+    /* 视频后期处理 */
+    .course-videoPos-box{
+      padding-bottom: 80px;
+      li:not(:last-child){margin-right: 80px;}
+    }
   }
 
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/

pages/courseware/index.vue

@@ -1,31 +1,28 @@
 <template>
   <div class="client-course-page">
     <!-- 课程开发页 banner栏 -->
-    <div class="client-course-banner">
-      <div class="client-container">
-        <!--  banner文字区域 -->
-        <div class="course-course-container">
-          <h4>10年多媒体设计经验</h4>
-          <p>让创意与视觉效果完美结合</p>
-          <a @click="applyFun">申请方案</a>
-        </div>
-      </div>
+    <div class="client-course-banner"></div>
+
+    <!-- 菜单栏上方-->
+    <div class="course-service-nav">
+      <img :src="courseNavImg" alt="课程开发">
     </div>
 
-    <!--  课程定制开发 -->
-    <div class="course-made-box">
-      <h4 class="client-title">课程定制开发</h4>
-      <div class="client-container">
-          <div class="course-made-content">
-            <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。栋科创建12年，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
-            <a  @click="applyFun">申请方案</a>
-          </div>
-          <img :src="courseMadeImg" alt="课程定制开发">
-        </div>
+    <!-- 跳转菜单栏 -->
+    <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>
+      </div>
     </div>
 
     <!--  E-learning课程 -->
-    <div class="course-learn-box">
+    <div class="course-learn-box" id="learnBox">
       <h4 class="client-title">E-learning课程</h4>
       <h5 class="client-subtitle-title">公司于2007年成立，我们凭借创新的技术、高效的服务响应和强大的战略执行，为用户打造可靠、优质、安全易用的教育软件产品及优质专业的内容制作服务</h5>
       <div class="client-container tc">
@@ -37,12 +34,13 @@
             <li><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><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="course-apply-btn" @click="applyFun" >申请方案</a>
+          <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
+          <a 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 course-micro-box">
+    <div class="course-learn-box" id="microBox">
       <h4 class="client-title">微课程</h4>
       <h5 class="client-subtitle-title">该类课程主要有：长图文、视频、H5交互等多种形式。内容短小精悍，利用碎片化时间，随时随地轻松学习</h5>
       <div class="client-container tc">
@@ -54,12 +52,13 @@
           <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="course-apply-btn" @click="applyFun">申请方案</a>
+        <a class="free-trial-default-btn" @click="applyFun">申请方案</a>
+        <a 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">
+    <div class="course-learn-box" id="propagateBox">
       <h4 class="client-title">宣传片</h4>
       <h5 class="client-subtitle-title">宣传片主要有：手绘动画、MG动画、视频实拍等多种形式。用于企业形象宣传、广告推广等</h5>
       <div class="client-container tc">
@@ -68,12 +67,13 @@
           <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="course-apply-btn" @click="applyFun">申请方案</a>
+        <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
+        <a 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 course-micro-box">
+    <div class="course-learn-box" id="animationBox">
       <h4 class="client-title">情景动画</h4>
       <h5 class="client-subtitle-title">情景动画形式丰富多样，游戏化教学和精美动画相结合，激发学习者兴趣</h5>
       <div class="client-container tc">
@@ -82,27 +82,52 @@
           <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="course-apply-btn" @click="applyFun">申请方案</a>
+        <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
+        <a 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>
+
+    <!--  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 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="client-industry-information">
-      <h4 class="client-title">最新动态</h4>
-      <div class="information-carousel-box">
-        <el-carousel :interval="4000" arrow="always">
-          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
-            <div
-              class="industry-img-box"
-              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
-            ></div>
-            <div class="industry-content-box">
-              <h5>{{ item.title }}</h5>
-              <p>{{ item.intro }}</p>
-              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
+    <!--  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 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-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" ></li>
+          <li><img :src="videoPosImg2" alt="视频后期处理" width="514" height="256" ></li>
+        </ul>
+        <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
+        <a 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>
 
@@ -170,7 +195,9 @@
     },
     data() {
       return {
-        courseMadeImg:  require(`~/static/images/client/course/course-made-img.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`),
@@ -189,70 +216,81 @@
         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://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
             fotterText:'教师视频与讲课PowerPoint课件一并摄制下来生成的课件，因此被称为‘二分屏’课件。',
             title:'两分屏类E-Learning课程',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
             fotterText:'是把教师视频与PowerPoint课件一并摄制下来，生成电脑格式的文件，通过Windows系统里的IE浏览器进行播放',
             title:'三分屏类E-Learning课程',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/35f356f6-17470879c83-0006-732a-c93-687b7.mp4',
             fotterText:'兼具了平面与互联网两者的特点，且融入了图像、文字、声音、视频、游戏等相互动态结合来呈现给读者',
             title:'电子杂志类E-Learning课程',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/42d3f2e8-17470860cff-0006-732a-c93-687b7.mp4',
             fotterText:'主要以图片的形式表现教学者的作用和教与学之间的关系，从而改变教育的本质',
             title:'FLASH图文类E-Learning课程',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/18d95d93-17470860cfb-0006-732a-c93-687b7.mp4',
             fotterText:'是可以操作互动的教学，简单的比较，交互式是游戏',
             title:'FLASH交互类E-Learning课程',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
             fotterText:'以视频的形式表现出要授予的课程内容',
             title:'视频类E-Learning课程',
           },
           //微课程
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/4f1c04ef-174708abedf-0006-732a-c93-687b7.mp4',
             fotterText:'是通过图片发布文字信息的一种形式',
             title:'长图文类微课',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cf441145285890792886083160/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/22ed6558-1747089fb12-0006-732a-c93-687b7.mp4',
             fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
             title:'视频类微课',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13a4929d-17470860cf9-0006-732a-c93-687b7.mp4',
             fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
             title:'H5交互微课',
           },
 
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1eb213bd-17470897778-0006-732a-c93-687b7.mp4',
             fotterText:'以故事情景引出产品内容的介绍',
             title:'情景动画类微课',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/a262a7b-174708aa838-0006-732a-c93-687b7.mp4',
             fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
             title:'图文类微课',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/ef9b83b-17470860d19-0006-732a-c93-687b7.mp4',
             fotterText:'主要是以教师根据教学内容PPT进行假想授课',
             title:'PPT微课',
           },
@@ -261,33 +299,33 @@
 
           //宣传片
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1c896f73-174708a6de4-0006-732a-c93-687b7.mp4',
             fotterText:'一张张手绘画出来制作合成动画形式',
             title:'手绘动画类宣传片',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/57b79278-17470860d16-0006-732a-c93-687b7.mp4',
             fotterText:'是平面设计与动画片之间的一种产物，MG的重点是非叙述性非具象化的视觉表现形式，节奏感更强，动画的流畅与每屏之前的衔接性更好',
             title:'MG动画类宣传片',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/39296d0d-174708a6aea-0006-732a-c93-687b7.mp4',
             fotterText:'以拍摄视频的形式呈现出企业的介绍和产品宣传',
             title:'视频类宣传片',
           },
           // 情景动画
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/159fac7b-17470879c88-0006-732a-c93-687b7.mp4',
             fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
             title:'儿歌动画',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13f16002-1747088d2a9-0006-732a-c93-687b7.mp4',
             fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
             title:'故事教学',
           },
           {
-            url:'https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4',
+            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-0006-732a-c93-687b7.mp4',
             fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
             title:'过场动画',
           },