课程开发课程大赛页面开发

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

@@ -2316,7 +2316,19 @@
     // 知识萃取
     .compete-introduce-box{
       padding: 100px 0;
-      img{max-width: 100%;margin: 80px auto 90px;}
+      img{max-width: 100%;margin: 80px auto 90px;display: block;}
+    }
+
+    // 微课培训
+    .compete-introduce-list{
+        display: flex;justify-content: space-between;margin: 46px 0 80px;
+      li{width: 204px;height: 237px;background-repeat: no-repeat;background-size: cover;padding: 0 30px;box-sizing: border-box;}
+      p{font-size: 18px;text-align: center;color: #0066cc;margin-top: 122px}
+      li:nth-child(1) {background-image: url("~static/images/client/course/compete-wkpx-img1.png");}
+      li:nth-child(2) {background-image: url("~static/images/client/course/compete-wkpx-img2.png");}
+      li:nth-child(3) {background-image: url("~static/images/client/course/compete-wkpx-img3.png");}
+      li:nth-child(4) {background-image: url("~static/images/client/course/compete-wkpx-img4.png");}
+      li:nth-child(5) {background-image: url("~static/images/client/course/compete-wkpx-img5.png");}
     }
 
     @media (max-width: 768px){
@@ -2353,6 +2365,18 @@
         padding: 50px 0;
         img{margin: 42px auto;}
       }
+
+      // 微课培训
+      .compete-introduce-list{
+        margin: 46px 0 80px;flex-wrap: wrap;justify-content: center;margin: 16px -6px;
+        li{width: 106px;height: 120px;padding: 0 10px;margin:16px 6px;background-size: contain}
+        p{font-size: 11px;margin-top: 62px}
+        li:nth-child(1) {background-image: url("~static/images/client/course/compete-wkpx-img1.png");}
+        li:nth-child(2) {background-image: url("~static/images/client/course/compete-wkpx-img2.png");}
+        li:nth-child(3) {background-image: url("~static/images/client/course/compete-wkpx-img3.png");}
+        li:nth-child(4) {background-image: url("~static/images/client/course/compete-wkpx-img4.png");}
+        li:nth-child(5) {background-image: url("~static/images/client/course/compete-wkpx-img5.png");}
+      }
     }
   }
 }

pages/courseware/compete.vue

@@ -26,7 +26,7 @@
           <h4 class="course-compete-title"><em>01</em><span>知识萃取</span></h4>
           <h5 class="client-subtitle-title">帮助企业进行关键岗位知识与技能挖掘，形成具有易学习、易掌握、易应用的课程资源，并通过实际工作检验，不断修正，形成岗位专业技能课程体系，将隐性经验显性化，显性经验系统化。</h5>
           <img :src="competeZscqPcImg" class="mta-hidden-xs">
-          <img :src="competeZscqPcImg" class="mta-hidden-sm">
+          <img :src="competeZscqSjImg" class="mta-hidden-sm">
           <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
         </div>
       </div>
@@ -36,8 +36,13 @@
           <h4 class="course-compete-title"><em>02</em><span>微课培训</span></h4>
           <h5 class="client-subtitle-title">帮助组织快速掌握知识沉淀与知识萃取的方法，获得一批高质量学习资源，培养一批具备知识转化与应用能力的内部培训师。</h5>
           <p class="course-compete-subtitle-title"><i></i>栋科微课训练营<i></i></p>
-          <img :src="competeZscqPcImg" class="mta-hidden-xs">
-          <img :src="competeZscqPcImg" class="mta-hidden-sm">
+          <ul class="compete-introduce-list">
+            <li><p>理解企业微课设计与快速开发的价值</p></li>
+            <li><p>熟悉企业微课体系规划的基本策略与方法</p></li>
+            <li><p>掌握企业微课设计与快速开发的基本原则与步骤</p></li>
+            <li><p>灵活运用企业微课多种制作工具的实操技巧</p></li>
+            <li><p>能够基于企业的组织经验和实践制作企业微课</p></li>
+          </ul>
           <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
         </div>
       </div>
@@ -46,8 +51,8 @@
         <div class="client-container">
           <h4 class="course-compete-title"><em>03</em><span>微课大赛</span></h4>
           <h5 class="client-subtitle-title">栋科企业微课大赛，是一场发动企业全员参与的学习资源建设活动。通过“以赛代训”的方式，集中产出移动学习资源，推动企业移动学习的进程，助力企业高效沉淀一批优质的微课，极大减免企业培训成本！</h5>
-          <img :src="competeZscqPcImg" class="mta-hidden-xs">
-          <img :src="competeZscqPcImg" class="mta-hidden-sm">
+          <img :src="competeWkdsPcImg" class="mta-hidden-xs">
+          <img :src="competeWkdsSjImg" class="mta-hidden-sm">
           <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
         </div>
       </div>
@@ -56,8 +61,8 @@
         <div class="client-container">
           <h4 class="course-compete-title"><em>04</em><span>案例征集</span></h4>
           <p class="course-compete-subtitle-title"><i></i>栋科案例征集活动特点<i></i></p>
-          <img :src="competeZscqPcImg" class="mta-hidden-xs">
-          <img :src="competeZscqPcImg" class="mta-hidden-sm">
+          <img :src="competeAlzjPcImg" class="mta-hidden-xs">
+          <img :src="competeAlzjSjImg" class="mta-hidden-sm">
           <a class="course-compete-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1" target="_blank">在线咨询</a>
         </div>
       </div>
@@ -75,6 +80,11 @@
           competeBannerImg: require(`~/static/images/client/course/course-compete-banner.png`),
           competeBannerPhoneImg: require(`~/static/images/client/course/course-compete-sj-banner.jpg`),
           competeZscqPcImg: require(`~/static/images/client/course/compete-zscq-pc-img.png`),
+          competeZscqSjImg: require(`~/static/images/client/course/compete-zscq-sj-img.png`),
+          competeWkdsPcImg: require(`~/static/images/client/course/compete-wkds-pc-img.png`),
+          competeWkdsSjImg: require(`~/static/images/client/course/compete-wkds-sj-img.png`),
+          competeAlzjPcImg: require(`~/static/images/client/course/compete-alzj-pc-img.png`),
+          competeAlzjSjImg: require(`~/static/images/client/course/compete-alzj-sj-img.png`),
         }
       }
     };