新版课程开发页面开发

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

@@ -874,18 +874,6 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
 }
 
-// 课程开发banner图
-.website-course-banner{
-  width: 100%;
-  height: 520px;
-  background-color:#fff;
-  background-position-x: center;
-  background-repeat: no-repeat;
-  @media (max-width: 768px){
-    height: 260px;background-size: cover;
-  }
-}
-
 /* 为什么选择我们模块  */
 .website-chose-box{
   padding-bottom: 80px;

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

@@ -2171,19 +2171,70 @@
 
   /**************** describe:课程开发梗概  author: TX  date:2022-12-29 ****************/
   .website-course-synopsis-page{
-
-    /* 核心业务 */
-    .course-services-box{
-      .course-services-content p{width: 80%;}
+    padding-bottom: 72px;
+    .website-synopsis-banner{
+      width: 100%;
+      height: 560px;
+      background-color:#fff;
+      background-position: center;
+      background-repeat: no-repeat;
     }
+    .synopsis-services-box{
+      width: 100%;display: flex;align-items: center;
+      // 头部图片
+      img{ width: 680px;height: 478px;float: right;margin: 0 60px 0 0;}
+
+      // 内容区域
+      .course-services-content{
+        width: 460px;
+        float: right;
+        box-sizing: border-box;
+        display: block;
+        h6{@include setFontStyle(10);color: #0065cd;margin-bottom: 28px;}
+        p{@include setFontStyle(4);color: #333;margin-bottom: 30px;text-align: justify;}
+        .synopsis-list-box{
+          display: flex;align-items: center;flex-wrap: wrap;
+          li{width: 33.33%;margin-bottom: 24px;display: flex;align-items: center}
+          span{@include setFontStyle(-6);color: #333;}
+          i{width: 7px;height: 7px;background: #0066cc;display: block;border-radius: 50%;margin-right: 12px;}
+        }
 
+        .client-btn-box{margin: 48px 0 0;}
+        .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
+        .client-default-white-Btn{background: #fff;color: #3e7ce7;}
+        a,div.client-default-Btn{margin-right: 24px}
+        span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
+      }
+    }
+    .synopsis-blue{background: #f5f9ff;}
+    .website-row-reverse img{margin: 0 0 0 60px;}
     @media (max-width: 768px){
+      padding-bottom: 52px;
+      // banner
+      .website-synopsis-banner{height: 150px;background-size: cover;}
+      // row
+      .synopsis-services-box{
+        flex-direction: column;
+        // 头部图片
+        img{max-width: 100%;height: auto;float: none;margin: 0 auto;}
 
-      /* 核心业务 */
-      .course-services-box{
-        .course-services-content p{width: 100%;}
-        h5{width: 100%;text-align: center;color: #333;font-weight: 400;}
+        // 内容区域
+        .course-services-content{
+          width: 100%;float: none;padding: 0 10px;margin: 0;
+          h6{@include setFontStyle(-6);margin: 24px 0 16px;font-weight: bold;}
+          p{margin-bottom: 0;color: rgba(85, 85, 85, 1);font-size: 14px;}
+          .synopsis-list-box{
+            margin-top: 24px;
+            li{width: 33.33%;margin-bottom: 10px;}
+            span{@include setFontStyle(-7);color: #333;}
+            i{width: 6px;height: 6px;margin-right: 8px;}
+          }
+          .client-btn-box{text-align: center;margin:40px 0;}
+          .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}
+          a,div.client-default-Btn{margin-right: 16px}
+        }
       }
+      .website-row-reverse img{margin: 0 auto;}
     }
   }
 

pages/courseware/synopsis.vue

@@ -1,59 +1,84 @@
 <!-- 课程开发梗概页面-->
 <template>
     <div class="website-course-synopsis-page">
-      <!-- 课程开发平台运营 banner栏 pc-->
-      <div :style="{backgroundImage: `url(${synopsisBannerImg})`}" class="mta-hidden-xs website-course-banner"></div>
-      <!-- 课程开发平台运营 banner栏 移动端-->
-      <div :style="{backgroundImage: `url(${synopsisBannerPhoneImg})`}" class="mta-hidden-sm website-course-banner"></div>
+      <!-- 课程开发平台运营 banner栏-->
+      <div :style="{backgroundImage: `url(${synopsisBannerImg})`}" class="website-synopsis-banner"></div>
 
       <!-- 核心业务 -->
       <div class="website-course-services">
-        <h4 class="client-title">核心业务</h4>
+        <h4 class="client-title">课程开发</h4>
         <ul>
           <li>
             <div class="client-container">
-              <div class="course-services-box website-row-reverse">
-                <img :src="synopsisImg1" alt="为企业、院校打造专业的课程定制化服务" />
+              <div class="synopsis-services-box">
+                <img :src="synopsisImg1" alt="教学课程" />
                 <div class="course-services-content">
-                  <h5>为企业、院校打造专业的课程定制化服务</h5>
-                  <p>栋科优秀的课程开发团队，向客户提供最具价值的课程定制化服务，通过“课程内容专家+课程教学设计师+课件动画设计师”的专业化定制化模式，针对目标对象的学习习惯和学习方式，定制课程核心内容，从用户的角度充分发挥数字化课程的优势。帮助客户解决新环境下学习者与培训管理者共同面临的挑战。</p>
-                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
+                  <h6>教学课程</h6>
+                  <p>用心做好课，口碑服务15载</p>
+                  <ul class="synopsis-list-box">
+                    <li v-for="item in synopsisArr1"><i></i><span>{{item}}</span></li>
+                  </ul>
+                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div></div>
                 </div>
               </div>
             </div>
           </li>
-          <li>
+          <li class="synopsis-blue">
             <div class="client-container">
-              <div class="course-services-box">
-                <img :src="synopsisImg2" alt="帮助企业快速构建自主课程体系" />
+              <div class="synopsis-services-box website-row-reverse">
+                <img :src="synopsisImg2" alt="高端动画" />
                 <div class="course-services-content">
-                  <h5>帮助企业快速构建自主课程体系</h5>
-                  <p>栋科课程开发团队基于岗位胜任力模型，为企业搭建9大模块通用岗位培训方案。协助客户开展实施，千门企业精品通用视频课程，满足各个行业对培训课程资源的应用需求，让员工每天收获满满。</p>
-                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
+                  <h6>高端动画</h6>
+                  <p>只做有灵魂的动画，“帧”“秒”必争</p>
+                  <ul class="synopsis-list-box">
+                    <li v-for="item in synopsisArr2"><i></i><span>{{item}}</span></li>
+                  </ul>
+                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解更多</span></div>
                 </div>
               </div>
             </div>
           </li>
           <li>
             <div class="client-container">
-              <div class="course-services-box website-row-reverse">
-                <img :src="synopsisImg3" alt="学、测、考、练，打造企业一体化学习模式" />
+              <div class="synopsis-services-box">
+                <img :src="synopsisImg3" alt="微课开发" />
+                <div class="course-services-content">
+                  <h6>微课开发</h6>
+                  <p>微课制作参赛获奖，经验很重要！</p>
+                  <ul class="synopsis-list-box">
+                    <li v-for="item in synopsisArr3"><i></i><span>{{item}}</span></li>
+                  </ul>
+                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解更多</span></div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="synopsis-blue">
+            <div class="client-container">
+              <div class="synopsis-services-box website-row-reverse">
+                <img :src="synopsisImg4" alt="课件PPT" />
                 <div class="course-services-content">
-                  <h5>学、测、考、练，打造企业一体化学习模式</h5>
-                  <p>栋科的麦塔在线培训系统为企业提供“平台+内容+服务”一体化学习解决方案。 我们通过技术、内容与大数据结合，用科技驱动人才发展，助力企业成功。</p>
-                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
+                  <h6>课件PPT</h6>
+                  <p>教学类课件PPT，轻松制作高效可靠</p>
+                  <ul class="synopsis-list-box">
+                    <li v-for="item in synopsisArr4"><i></i><span>{{item}}</span></li>
+                  </ul>
+                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解更多</span></div>
                 </div>
               </div>
             </div>
           </li>
           <li>
             <div class="client-container">
-              <div class="course-services-box">
-                <img :src="synopsisImg4" alt="微课大赛助力企业推动培训学习进程" />
+              <div class="synopsis-services-box">
+                <img :src="synopsisImg4" alt="学习系统" />
                 <div class="course-services-content">
-                  <h5>微课大赛助力企业推动培训学习进程</h5>
-                  <p>栋科企业微课大赛，是一场发动企业全员参与的学习资源建设活动。通过“以赛代训，以赛提质，以赛促优”的方式，集中产出学习资源，推动企业培训学习进程，助力企业高效快速的沉淀优质学习课程，极大降低企业培训成本。</p>
-                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsult">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解详情</span></div>
+                  <h6>学习系统</h6>
+                  <p>麦塔学习系统，一站式服务更方便！</p>
+                  <ul class="synopsis-list-box">
+                    <li v-for="item in synopsisArr5"><i></i><span>{{item}}</span></li>
+                  </ul>
+                  <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="onlineConsultXx">在线咨询</div><span  class="client-default-Btn" @click="goCustom">了解更多</span></div>
                 </div>
               </div>
             </div>
@@ -86,37 +111,46 @@
           return {
             // 发展现状img
             synopsisBannerImg: require(`~/static/images/client/course/course-synopsis-banner.png`),
-            synopsisBannerPhoneImg: require(`~/static/images/client/course/course-synopsis-sj-banner.jpg`),
             synopsisImg1:  require(`~/static/images/client/course/course-synopsis-img1.png`),
             synopsisImg2:  require(`~/static/images/client/course/course-synopsis-img2.png`),
             synopsisImg3:  require(`~/static/images/client/course/course-synopsis-img3.png`),
             synopsisImg4:  require(`~/static/images/client/course/course-synopsis-img4.png`),
+            synopsisImg5:  require(`~/static/images/client/course/course-synopsis-img5.png`),
             // 为什么选择我们
             choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
             choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),
             choseImg3:   require(`~/static/images/client/index/index-chose-tech-icon.png`),
             choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
+            synopsisArr1:['高等院校','公司企业','培训机构','政府机构','媒体出版','事业单位'],
+            synopsisArr2:['Mg动画','情景动画','Flash动画','片头动画','定格动画','动画短片','三维动画','宣传动画'],
+            synopsisArr3:['动画微课','视频微课','文图微课','长图微课','PPT微课','H5微课 '],
+            synopsisArr4:['优质公开课','教育精品课','培训网络课','教学PPT制作','医学PPT制作','PPT美化','PPT修改','PPT设计 '],
+            synopsisArr5:['在线考试','在线培训','组卷抽题','线上直播','考试防作弊','视频课程','阅卷判卷','学习监控'],
           }
         },
       head(){
         return {
           SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
-          title: '多媒体课件制作_视频课件制作_flash课件制作_【栋科课程开发团队】',
+          title: '课程制作-课件制作-微课动画制作-教学课件制作价格 ',
           meta: [
             {
               name: 'keywords',
-              content: '课件制作,课件制作公司,课件设计,ppt课件制作'
+              content: '课件,微课,课程制作,课件制作,微课制作,教学课件,微课动画,微课课件,教学课件'
             },
             {
               name:'description',
-              content:'栋科软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、情景动漫、AR/VR演示等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过10年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
+              content:'麦塔拥有国内专业、成熟的课程制作团队，丰富的电子课程制作经验，业务方向包括教学\n' +
+                        '设计体验、图文内容演示、教学课件、微课、情景动画等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过15年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
             }
           ],
         }
       },
       methods:{
         onlineConsult(){
-          window.open('https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1')
+          window.open('https://affim.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1')
+        },
+        onlineConsultXx(){
+          window.open('https://affim.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd')
         },
         goCustom(){
           this.$router.push({ name: 'custom' });