课程资源页面开发

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

@@ -1082,22 +1082,6 @@
 
   /********  describe: 课程资源  author: TX  date:2020-09-03  ********/
   .client-resources-page{
-    // 图标列表
-    .train-scheme-list{
-      margin: 54px -24px 0;
-      li{width: 25%;display: inline-block;text-align: center}
-      i{width: 100px;height: 100px;display: block;margin: 0 auto;}
-      span{@include setFontStyle(-4);color: #333;margin-top: 10px;display: block;}
-      div{box-shadow: 0 0 7px 2px #f5f2ff;margin: 24px;padding: 42px 0;}
-      li:nth-child(1) i{background-image: url("~static/images/client/resources/train-scheme-icon1.png")}
-      li:nth-child(2) i{background-image: url("~static/images/client/resources/train-scheme-icon2.png")}
-      li:nth-child(3) i{background-image: url("~static/images/client/resources/train-scheme-icon3.png")}
-      li:nth-child(4) i{background-image: url("~static/images/client/resources/train-scheme-icon4.png")}
-      li:nth-child(5) i{background-image: url("~static/images/client/resources/train-scheme-icon5.png")}
-      li:nth-child(6) i{background-image: url("~static/images/client/resources/train-scheme-icon6.png")}
-      li:nth-child(7) i{background-image: url("~static/images/client/resources/train-scheme-icon7.png")}
-      li:nth-child(8) i{background-image: url("~static/images/client/resources/train-scheme-icon8.png")}
-    }
     // 为企业培训打造学习矩阵
     .products-services-content p{line-height: 52px;}
     // 蓝色提醒文字
@@ -1107,7 +1091,6 @@
 
     // 课程内容形式多样
     .course-learn-box{
-        background: #f9faff;
       // video列表
       .learn-box-list{
         margin: 54px -16px 0;
@@ -1131,19 +1114,20 @@
     // 新闻资讯
     .platform-news-information{background: #fff;}
     // 按钮
-    .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;border: 1px solid #3e7ce7;background: #3e7ce7;margin-right: 24px;margin-bottom: 42px;}
-    .client-default-white-Btn{background: #fff;color:#3e7ce7;margin-right: 0 }
+    .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;border: 1px solid #00AEBA;background: #00AEBA;margin-right: 24px;margin-bottom: 0;}
+    .client-default-white-Btn{background: #fff;color:#00AEBA;margin-right: 0 }
 
-    @media (max-width: 768px){
-      // 图标列表
-      .train-scheme-list{
-        margin: 12px 16px 36px;
-        li{
-          width: 50%;
-          i{width: 70px;height: 70px;background-size: cover;}
-          div{margin: 6px;padding: 24px 0;}
-        }
+    // 为企业培训打造学习矩阵
+    .products-services-box{
+      margin-top: 24px;
+      img{width: 640px;}
+      .products-services-content{
+        width: 400px;
+        p{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);}
       }
+    }
+
+    @media (max-width: 768px){
       // 为企业培训打造学习矩阵
       .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;}
       // 蓝色提醒文字

pages/courseResource/index.vue

@@ -2,13 +2,8 @@
   <div class="client-course-page">
     <!-- 课程资源页 banner栏 -->
     <div v-if="bannerList.length>0" @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>
-    <p>课程资源</p>
-    <!-- 新闻资讯 -->
-    <ul class="platform-menu-ul">
-      <li @click="btnClick('kckf')" :class="{'active':divType==='kckf'}">课程开发</li><li @click="btnClick('kczy')" :class="{'active':divType==='kczy'}">课程资源</li>
-    </ul>
 
-    <div v-if="divType==='kczy'" class="client-resources-page">
+    <div 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>
@@ -16,32 +11,21 @@
       <!--  企业通用岗位培训方案 -->
       <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>
-
-        </ul>
+        <img :src="trainSchemeImg" alt="企业通用岗位培训方案" style="margin: 24px auto 52px;">
+        <div class="client-btn-box tc"><div rel="nofollow" class="client-default-Btn" @click="">免费试用</div><span  class="client-default-white-Btn" @click="">在线咨询</span></div>
       </div>
+
+      <!-- 为企业培训打造学习矩阵 -->
       <div class="platform-products-services">
-        <ul>
-          <li>
             <div class="client-container">
+              <h4 class="client-title">为企业培训打造学习矩阵</h4>
               <div class="products-services-box products-contrary-box">
-                <h4 class="client-title">为企业培训打造学习矩阵</h4>
-                <img :src="trainAdvantagesImg1" alt="完善的课程学习体系" />
+                <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>
+                  <p>课程总数近5000门</p>
+                  <p>涵盖2000个知识要点</p>
+                  <p>提供9大通用岗位培训方案</p>
+                  <p>课程资源每月持续更新</p>
                   <div class="default-Btn-box">
                     <a class="client-default-Btn" @click="applyFun" >申请方案</a>
                     <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
@@ -49,9 +33,6 @@
                 </div>
               </div>
             </div>
-          </li>
-        </ul>
-
       </div>
       <!--  情景动画 -->
       <div class="course-learn-box">
@@ -106,134 +87,6 @@
         </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>
-            <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i @click="playVideo(2)"></i></span><p>电子杂志类E-Learning课程</p></div></li>
-            <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i @click="playVideo(3)"></i></span><p>FLASH图文类E-Learning课程</p></div></li>
-            <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>
-        </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>
-      </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>
-      </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>
-        </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">
-          <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 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-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 class="platform-news-information mta-hidden-xs">
-        <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>
 
     <!--  视频播放弹窗 -->
     <el-dialog
@@ -280,11 +133,11 @@
 
 <script>
   export default {
-    name:       'courseware',
+    name:       'courseResource',
     layout:'templateB',
     async asyncData({ $axios, store }) {
       // 设置选中菜单
-      store.commit('setActiveNav', '/courseware');
+      store.commit('setActiveNav', '/courseResource');
 
       let [res1,res2] =  await Promise.all([
                                              await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
@@ -306,13 +159,12 @@
     },
     data() {
       return {
+        // 企业通用岗位培训方案
+        trainSchemeImg:  require(`~/static/images/client/resources/train-scheme-img.png`),
         //  describe: 课程开发相关 author: Wgy date:6/8/21
-        trainAdvantagesImg1:  require(`~/static/images/client/resources/train-scheme-img.png`),
+        trainAdvantagesImg1:  require(`~/static/images/client/resources/train-advantages-img.png`),
         courseVideoImg19:  require(`~/static/images/client/course/course-video-img19.png`),
 
-
-
-
         // 菜单栏上方
         courseNavImg:  require(`~/static/images/client/course/course-nav-img.png`),
         // 视频封面
@@ -506,28 +358,10 @@
     },
     computed:   {},
     methods:    {
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
-        }else{
-          this.SystemWidthFlag = false;
-        }
-
-      },
       goIntroductionPage(){
         this.$router.push({ name: 'introduction' });
       },
 
-      // tab点击
-      btnClick(data){
-        if(data==='kczy'){
-          this.divType = 'kczy'
-        }else{
-          this.divType = 'kckf'
-        }
-      },
       checkInfo(data) {
         const opt = {
           id: data.code,
@@ -541,13 +375,8 @@
 
       },
       applyFun() {
-        this.getSystemWidth();
-        if(this.SystemWidthFlag){
-          this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'course',} });
-        }else {
           this.telDl = true;
           this.sliderFun();
-        }
       },
 
       dialogSave(){
@@ -764,12 +593,6 @@
 
     },
     mounted() {
-      if(this.$route.query.tabFlag&&this.$route.query.tabFlag==1){
-        this.divType = 'kckf'
-      }else {
-        this.divType = 'kczy'
-      }
-      this.getSystemWidth();
     },
     beforeDestroy() {
     },