E-learning课程

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

@@ -386,7 +386,7 @@
         h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
         p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
         i{width:1px;height:16px;display:inline-block;margin: 0 24px;background: #DFE6FE;vertical-align: middle;}
-        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
+        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
       }
     }
 
@@ -543,7 +543,7 @@
         margin-left: 150px;
         h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
         p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
-        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
+        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
       }
     }
 
@@ -683,6 +683,64 @@
     }
   }
 
+  /********  describe: 课程开发 author: TX  date:2020-08-24  ********/
+  .client-course-page{
+    /* 网站banner */
+    .client-course-banner{
+      width: 100%;
+      height: 400px;
+      background-image: url("~static/images/client/course/course-banner-background.png");
+      background-position-x: center;
+
+      /* banner文字区域 */
+      .course-course-container{
+        width:520px;
+        display: inline-block;
+        margin-left: 150px;
+        h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
+        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
+        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
+      }
+    }
+
+    /* 课程定制开发 */
+    .course-made-box{
+        padding-bottom: 80px;
+        .client-container{width: 880px;padding-top: 48px;}
+        .course-made-content{
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 56px;
+          p{width: 455px;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin-bottom: 40px;text-align: justify}
+          a{width: 132px;height: 32px;line-height: 32px;@include setFontStyle(-4);display:inline-block;text-align:center;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
+        }
+        img{width: 357px;height: 251px;display:inline-block;vertical-align: middle;}
+    }
+
+    /* E-learning课程 */
+    .course-learn-box{
+      background: #F9FAFF;
+      padding-bottom: 80px;
+
+      // 申请方案按钮
+      .course-apply-btn{width: 238px;height: 40px;line-height:40px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center;margin: 0 auto;}
+
+      // video列表
+      .learn-box-list{
+        margin: 54px -16px 24px;
+          li{
+              width: 33.33%;display: inline-block;
+              a{display: none;}
+              div{background: #fff;border-radius: 8px;margin: 0 16px 40px;}
+              span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden}
+              img{transition: all 0.5s;}
+              p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);padding: 24px 0 24px;}
+          }
+          li span:hover{img{transform: scale(1.14);}}
+      }
+    }
+  }
+
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/
   .client-aboutUs-page{
 

pages/courseware/index.vue

@@ -1,6 +1,45 @@
 <template>
-  <div>
-    课程开发
+  <div class="client-course-page">
+    <!-- 课程开发页 banner栏 -->
+    <div class="client-course-banner">
+      <div class="client-container">
+        <!--  banner文字区域 -->
+        <div class="course-course-container">
+          <h4>10年多媒体设计经验</h4>
+          <p>让创意与视觉效果完美结合</p>
+          <a>申请方案</a>
+        </div>
+      </div>
+    </div>
+
+    <!--  课程定制开发 -->
+    <div class="course-made-box">
+      <h4 class="client-title">课程定制开发</h4>
+      <div class="client-container">
+          <div class="course-made-content">
+            <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。栋科创建12年，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
+            <a>申请方案</a>
+          </div>
+          <img :src="courseMadeImg" alt="课程定制开发">
+        </div>
+    </div>
+
+    <!--  E-learning课程 -->
+    <div class="course-learn-box">
+      <h4 class="client-title">E-learning课程</h4>
+      <h5 class="client-subtitle-title">公司于2007年成立，我们凭借创新的技术、高效的服务响应和强大的战略执行，为用户打造可靠、优质、安全易用的教育软件产品及优质专业的内容制作服务</h5>
+      <div class="client-container tc">
+          <ul class="learn-box-list">
+            <li><a href="#"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i></i></span><p>两分屏类E-Learning课程</p></div></li>
+            <li><a href="#"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i></i></span><p>三分屏类E-Learning课程</p></div></li>
+            <li><a href="#"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i></i></span><p>电子杂志类E-Learning课程</p></div></li>
+            <li><a href="#"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i></i></span><p>FLASH图文类E-Learning课程</p></div></li>
+            <li><a href="#"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i></i></span><p>FLASH交互类E-Learning课程</p></div></li>
+            <li><a href="#"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i></i></span><p>视频类E-Learning课程</p></div></li>
+          </ul>
+          <a class="course-apply-btn">申请方案</a>
+      </div>
+    </div>
   </div>
 
 
@@ -9,14 +48,27 @@
 <script>
   export default {
     name:       'courseware',
-    layout:'templateB',
+    layout:'templateA',
+    async fetch({  $axios,store, params }) {
+      try {
+        store.commit('footerFlag',false)
+      } catch(e) {
+
+      }
+    },
     components: {
     },
     props:      {
     },
     data() {
       return {
-
+        courseMadeImg:  require(`~/static/images/client/course/course-made-img.png`),
+        courseVideoImg1:  require(`~/static/images/client/course/course-video-img1.png`),
+        courseVideoImg2:  require(`~/static/images/client/course/course-video-img2.png`),
+        courseVideoImg3:  require(`~/static/images/client/course/course-video-img3.png`),
+        courseVideoImg4:  require(`~/static/images/client/course/course-video-img4.png`),
+        courseVideoImg5:  require(`~/static/images/client/course/course-video-img5.png`),
+        courseVideoImg6:  require(`~/static/images/client/course/course-video-img6.png`),
       };
     },
     computed:   {},