课程定制开发流程

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

@@ -398,19 +398,26 @@
     // 联系我们按钮
     .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}
 
-    /* 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;}
-      p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;}
-    }
-    /* 视频后期处理 */
-    .course-videoPos-box{
-      padding-bottom: 80px;
-      li:not(:last-child){margin-right: 80px;}
+    // 课程定制开发流程
+    .course-dzkf-box{
+      display: flex;justify-content: center;margin: 32px 0 72px;
+      div{width: 82px;display: inline-block;vertical-align: top;}
+      i{width: 80px;height: 80px;display: block;border: 2px solid rgb(0, 174, 186);border-radius: 50%;margin-bottom: 16px;}
+      i:before{content: '';width: 40px;height: 40px;display: block;background-size: cover;background-repeat: no-repeat;margin: 20px auto;}
+      span{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);margin-bottom: 16px;display: block;}
+      p{text-align: justify;font-weight: 400;font-size: 16px;color: #101010;}
+      em{content: '';width: 30px;height: 30px;background-image: url("~static/images/client/course/course-jt-icon.svg");display: inline-block;margin: 25px 20px 0;}
+      li:nth-child(1){i:before{background-image: url("~static/images/client/course/course-dzkf-icon1.png");}}
+      li:nth-child(2){i:before{background-image: url("~static/images/client/course/course-dzkf-icon2.png");}}
+      li:nth-child(3){i:before{background-image: url("~static/images/client/course/course-dzkf-icon3.png");}}
+      li:nth-child(4){i:before{background-image: url("~static/images/client/course/course-dzkf-icon4.png");}}
+      li:nth-child(5){i:before{background-image: url("~static/images/client/course/course-dzkf-icon5.png");}}
+      li:nth-child(6){i:before{background-image: url("~static/images/client/course/course-dzkf-icon6.png");}}
+      li:nth-child(7){i:before{background-image: url("~static/images/client/course/course-dzkf-icon7.png");}}
+
     }
 
+
     @media (max-width: 768px){
       /* 网站banner */
       .client-course-banner{height: 150px;background-size: cover;}
@@ -430,22 +437,6 @@
       .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;}
       // 联系我们按钮
       .course-apply-btn{margin-left: 16px;}
-
-      /* PPT定制及美化、H5平面设计、视频后期处理 */
-      .course-ppt-box,.course-H5-box,.course-videoPos-box{
-        margin: 0 6%;
-        ul{margin: 12px 0;}
-        li{box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;margin-bottom: 20px;}
-        li:not(:last-child){margin-right: 0;}
-        img{max-width: 100%;}
-        p{margin: 20px 0;}
-      }
-
-      /* 视频后期处理 */
-      .course-videoPos-box{
-        padding-bottom: 16px;
-        img{height: 180px;}
-      }
     }
 
   }

pages/courseware/index.vue

@@ -1,112 +1,7 @@
 <template>
   <div class="client-course-page">
-    <!-- 课程开发页 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>
-
-    <!-- 新闻资讯 -->
-    <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">
-      <!-- 题库资源页 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>
-
-        </ul>
-      </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 class="default-Btn-box">
-                    <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>
-
-      </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(18)"></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(19)"></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(20)"></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 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>
-    <div v-if="divType==='kckf'">
+      <!-- 课程开发页 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>
       <!--  E-learning课程 -->
       <div class="course-learn-box" id="learnBox">
         <h4 class="client-title">E-learning课程</h4>
@@ -173,52 +68,24 @@
         </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>
+        <h4 class="client-title">课程定制开发流程</h4>
         <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 class="course-dzkf-box">
+            <li><div><i></i><span>项目立项</span><p>召集相关人员组建项目开发小组，召开项目启动会议</p></div><em></em></li>
+            <li><div><i></i><span>需求分析</span><p>与需求方对接沟通，分析需求，确定课程的开发形式</p></div><em></em></li>
+            <li><div><i></i><span>教学设计</span><p>教学设计梳理内容，设计课程脚本</p></div><em></em></li>
+            <li><div><i></i><span>课程设计</span><p>动画课程设计师根据课程脚本内容进行呈现设计</p></div><em></em></li>
+            <li><div><i></i><span>课程打包</span><p>技术人员根据需求对课件进行打包整合</p></div><em></em></li>
+            <li><div><i></i><span>课程测试</span><p>项目经理测试课件，确保课件内容无误</p></div><em></em></li>
+            <li><div><i></i><span>交付上线</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>
 
-      <!--  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="platform-news-information mta-hidden-xs">
         <div class="client-container">
           <h4 class="client-title">新闻资讯</h4>
           <ul>
@@ -232,8 +99,7 @@
             </li>
           </ul>
         </div>
-      </div>
-    </div>
+      </div>-->
 
     <!--  视频播放弹窗 -->
     <el-dialog
@@ -306,13 +172,6 @@
     },
     data() {
       return {
-        //  describe: 课程开发相关 author: Wgy date:6/8/21
-        trainAdvantagesImg1:  require(`~/static/images/client/resources/train-scheme-img.png`),
-        courseVideoImg19:  require(`~/static/images/client/course/course-video-img19.png`),
-
-
-
-
         // 菜单栏上方
         courseNavImg:  require(`~/static/images/client/course/course-nav-img.png`),
         // 视频封面
@@ -506,28 +365,7 @@
     },
     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,7 +379,6 @@
 
       },
       applyFun() {
-        this.getSystemWidth();
         if(this.SystemWidthFlag){
           this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'course',} });
         }else {
@@ -764,12 +601,6 @@
 
     },
     mounted() {
-      if(this.$route.query.tabFlag&&this.$route.query.tabFlag==1){
-        this.divType = 'kckf'
-      }else {
-        this.divType = 'kczy'
-      }
-      this.getSystemWidth();
     },
     beforeDestroy() {
     },

static/images/client/course/course-jt-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 320 512" width="30" height="30">
+  <path fill="#00AEBA"
+    d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
+</svg>