课程开发梗概页面开发

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

@@ -202,27 +202,6 @@
       a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;background: #005491;border: 1px solid #fff;box-sizing: border-box;}
     }
 
-    /* 为什么选择我们  */
-    .client-chose-box{
-      padding-bottom: 80px;
-      .chose-img-box{
-        margin: 48px -14px 0;
-        li{
-          width: 25%;display: inline-block;vertical-align: top;
-          div{height: 260px;background: #f8f8f8;position:relative;text-align: center;margin: 0 14px;}
-          span{width: 100%;height: 200px;display: inline-block;}
-          img{margin: 50px auto 0;}
-          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
-        }
-      }
-      .client-default-Btn {
-        width: 238px;
-        height: 40px;
-        line-height: 40px;
-        margin: 40px auto 0;
-      }
-    }
-
     /* 新闻资讯 */
     .client-news-information {
       background: #f9faff;
@@ -321,26 +300,6 @@
         }
       }
 
-      /* 为什么选择我们  */
-      .client-chose-box{
-        padding: 0;
-        .chose-img-box{
-          margin: 20px 0 0;
-          li{
-            width: 50%;margin-bottom: 12px;
-            div{height: 125px;margin: 0 7px;}
-            span{height: 90px;}
-            img{width:60px;margin: 16px auto 0;}
-            h5{@include setFontStyle(-4);color: #101010;}
-          }
-        }
-        .client-default-Btn {
-          width: 238px;
-          height: 40px;
-          line-height: 40px;
-          margin: 40px auto 0;
-        }
-      }
 
       /* 新闻资讯 */
       .client-newsInfo-phone{
@@ -2222,5 +2181,50 @@
     }
     }
   }
+
+  /**************** describe:课程开发梗概  author: TX  date:2022-12-29 ****************/
+  .website-course-synopsis-page{
+    /*发展历程*/
+    .synopsis-company-history{
+      background:#f8f8f8;
+      li{
+        width: 25%;display: inline-block;text-align: center;
+        div{border-right:2px solid #dfdfdf;margin: 32px 0;}
+        p{@include setFontStyle(16);padding: 10px 0 16px;color: #0166CB;font-weight: 600;}
+        h4{@include setFontStyle(-4);color: #565656;padding-bottom: 10px}
+      }
+      li:last-child div{border-right: 0;}
+    }
+
+    /* 核心业务 */
+    .course-services-box{
+      .course-services-content p{width: 80%;}
+    }
+
+    @media (max-width: 768px){
+      /*发展历程*/
+      .synopsis-company-history {
+        ul{
+          display: flex;
+          justify-content: space-between;
+          align-content: center;
+          align-items: center;
+        }
+        li {
+          width: 49%;padding-bottom: 14px;
+          div{border: 0;padding: 24px 0 0;margin: 0;}
+          p{@include setFontStyle(5);padding: 10px 0;}
+          h4{@include setFontStyle(-8);}
+        }
+        i{width: 1px;height:160px;background-color: #dfdfdf;padding-bottom: 0;}
+      }
+
+      /* 核心业务 */
+      .course-services-box{
+        .course-services-content p{width: 100%;}
+        h5{width: 100%;text-align: center;color: #333;font-weight: 400;}
+      }
+    }
+  }
 }
 

pages/courseware/synopsis.vue

@@ -1,12 +1,182 @@
 <!-- 课程开发梗概页面-->
 <template>
-    <div>梗概</div>
+    <div class="website-course-synopsis-page">
+      <!-- 课程开发平台运营 banner栏 pc-->
+      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${synopsisBannerImg})`}" class="mta-hidden-xs website-course-banner"></div>
+      <!-- 课程开发平台运营 banner栏 移动端-->
+      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${synopsisBannerPhoneImg})`}" class="mta-hidden-sm website-course-banner"></div>
+      <!-- 发展历程-移动端隐藏-->
+      <div class="synopsis-company-history mta-hidden-xs">
+        <div class="client-container">
+          <ul>
+            <li><div><p>2008年</p><h4>公司成立于</h4></div></li>
+            <li><div><p>5,000+</p><h4>服务企业</h4></div></li>
+            <li><div><p>50,000+</p><h4>累计开发课程小时数</h4></div></li>
+            <li><div><p>30+</p><h4>制作开发团队</h4></div></li>
+          </ul>
+        </div>
+      </div>
+      <!-- 发展历程-pc端隐藏-->
+      <div class="synopsis-company-history mta-hidden-sm">
+        <div class="client-container">
+          <ul>
+            <li><div><p>2008年</p><h4>公司成立于</h4></div><div><p>50,000+</p><h4>累计开发课程小时数</h4></div></li>
+            <i></i>
+            <li><div><p>5,000+</p><h4>服务企业</h4></div><div><p>30+</p><h4>制作开发团队</h4></div></li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 核心业务 -->
+      <div class="website-course-services">
+        <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="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>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box">
+                <img :src="synopsisImg2" alt="帮助企业快速构建自主课程体系" />
+                <div class="course-services-content">
+                  <h5>帮助企业快速构建自主课程体系</h5>
+                  <p>职位评价管理用数据量化+多维度测评，PC端与移动端无缝连接;支持安卓、lOS等操作系统;加速人才培养为公司提供随时随地的个性化的、开放式测评服务。</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>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box website-row-reverse">
+                <img :src="synopsisImg3" 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>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="course-services-box">
+                <img :src="synopsisImg4" alt="微课大赛助力企业推动培训学习进程" />
+                <div class="course-services-content">
+                  <h5>微课大赛助力企业推动培训学习进程</h5>
+                  <p>数据信息一目了然，支持自定义多维度分析，360项目全貌视图数据展示，方便企业快速决策。</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>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+
+      </div>
+
+      <!-- 为什么选择我们 -->
+      <div class="website-chose-box">
+        <div class="client-container">
+          <h4 class="client-title">为什么选择我们</h4>
+          <ul class="chose-img-box">
+            <li>
+              <div>
+                <span><img :src="choseImg1" alt="专业的顾问服务" /></span>
+                <h5>专业的顾问服务</h5>
+              </div>
+            </li>
+            <li>
+              <div>
+                <span><img :src="choseImg3" alt="完善的培训体系" /></span>
+                <h5>完善的培训体系</h5>
+              </div>
+            </li>
+            <li>
+              <div>
+                <span><img :src="choseImg2" alt="可靠的开发技术"/></span>
+                <h5>可靠的开发技术</h5>
+              </div>
+            </li>
+            <li>
+              <div>
+                <span><img :src="choseImg4" alt="成熟的运营能力" /></span>
+                <h5>成熟的运营能力</h5>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 新闻资讯 -->
+      <div class="website-synopsis-news-box">
+        <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>
 </template>
 
 <script>
     export default {
         name: 'synopsis',
         layout:'templateB',
+      async asyncData({ $axios, store }) {
+        // 设置选中菜单
+        store.commit('setActiveNav', '/courseware');
+
+        let [res1,res2] =  await Promise.all([
+                                               await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
+                                                 return res
+                                               }),
+                                             ])
+        return {
+          topCarousels : res1.data.data ||[],
+        }
+      },
+        data() {
+          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`),
+            // 为什么选择我们
+            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`),
+          }
+        },
+      methods:{
+        onlineConsult(){
+          window.open('https://p.qiao.baidu.com/cps/chat?siteId=17930746&userId=40179606&siteToken=d9c57b2ea4cbedbb044677ef47a1e2d1')
+        },
+        goCustom(){
+          this.$router.push({ name: 'custom' });
+          this.$router.push({ path: '/courseware/custom' });
+        },
+      },
     };
 </script>