update

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

@@ -871,6 +871,9 @@ client-banner-box.client-banner-index {
 
   div.client-platform-banner {
     height: 730px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
 
     .banner-btn-groups {
       position: absolute;
@@ -1143,3 +1146,21 @@ client-banner-box.client-banner-index {
   }
 
 }
+
+/**************************** 按钮组 申请方案+在线咨询、免费使用+在线咨询 **************************/
+.btn-groups.center {
+  margin-top: 60px;
+  text-align: center;
+  margin-bottom: 120px;
+
+  .btn-item {
+    margin-right: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .btn-groups.center {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+}
+

components/common/layout/desComp/gangweiList.vue

@@ -108,7 +108,7 @@ export default {
     // 图标列表
     .gangwei-icon-three,.gangwei-icon-four{
       text-align: center;
-      .gangwei-icon{margin-bottom: 116px}
+      .gangwei-icon{margin-bottom: 80px}
       .gangwei-icon-content{
         display: inline-block;margin: 0 auto;text-align: center;
         i{width:164px;height:164px;margin:0 auto 22px;display: block;

components/common/newsComp2.vue

@@ -145,4 +145,14 @@ export default {
   }
 }
 
+.client-newsInfo-phone {
+  margin-bottom: 5%;
+  h4.client-title-news {
+    font-size: 18px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 3%;
+  }
+}
 </style>

pages/product/caiWuGuanLi.vue

@@ -190,16 +190,6 @@ export default {
 
 }
 
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 
 @media (max-width: 768px) {
 
@@ -227,11 +217,6 @@ export default {
     }
   }
 
-
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
 }
 
 </style>

pages/product/chanPinYunYing.vue

@@ -170,23 +170,8 @@ export default {
     margin-bottom: 68px;
   }
 }
-
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
   .platform-course-list {
     h4 {
       font-size: 18px;

pages/product/courseCustom.vue

@@ -17,110 +17,99 @@
         <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
 
 
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn"/>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
     <!--  动画类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation-donghua client-container my-video-content">
       <h4> 动画类课程 </h4>
       <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。
         主要包含：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
         </li>
       </ul>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-
-        </a>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
         <onlineInformationBtn class="client-default-Btn"/>
       </div>
     </div>
 
     <!--  视频类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content">
       <h4> 视频类课程 </h4>
       <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
         动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
         </li>
       </ul>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-
-        </a>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item"  @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
         <onlineInformationBtn class="client-default-Btn"/>
       </div>
     </div>
 
     <!--  H5类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content">
       <h4> H5类课程 </h4>
       <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
         </li>
       </ul>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-
-        </a>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
         <onlineInformationBtn class="client-default-Btn"/>
       </div>
     </div>
 
     <!--  PPT定制及美化  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content">
       <h4> PPT定制及美化 </h4>
       <p>
         现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
@@ -128,20 +117,18 @@
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
         </li>
       </ul>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn"/>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
@@ -240,16 +227,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.btns-group {
-  display: flex;
-  text-align: center;
-
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
-  }
-}
-
 .platform-animation {
   ul {
     font-size: 16px;
@@ -310,4 +287,39 @@ export default {
     }
   }
 }
+
+.my-video-content {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    margin-bottom: 70px;
+    text-align: center;
+  }
+  >p {
+    text-align: center;
+    font-weight: 500;
+    color: #565656;
+    line-height: 24px;
+    font-size: 16px;
+  }
+  ul {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    li {
+      width: 33%;
+      height: 330px;
+
+      .my-video {
+        margin: 20px;
+      }
+    }
+  }
+}
+
+
+
+
 </style>

pages/product/exam.vue

@@ -33,23 +33,23 @@
     </div>
 
     <!--  更多辅助功能  -->
-    <div>
-      <h3>更多辅助功能</h3>
+    <div class="client-fuzhu-gongneng client-container">
+      <h4>更多辅助功能</h4>
       <ul>
         <li>
-          <img src="#">
+          <i></i>
           <span>报名审核</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>发布证书</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>数据统计</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>断电续考</span>
         </li>
       </ul>
@@ -292,24 +292,153 @@ export default {
 }
 </script>
 
-<style lang="scss">
-  .client-exam-page{
-    .client-banner-box {
-      height: 600px;
-      background: green;
+<style lang="scss" scoped>
+// 按钮
+.free-train-btn,.apply-btn{margin-right: 16px;}
+.btn-groups {
+  margin-top: 48px;
+}
+
+// 辅助功能
+.client-fuzhu-gongneng {
+    margin-top: 130px;
+    margin-bottom: 120px;
+
+    h4 {
+      font-size: 30px;
+      font-weight: 800;
+      color: #333;
       text-align: center;
-      color: #fff;
+      margin-bottom: 140px;
+    }
+
+    ul {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      i {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 123px;
+        height: 123px;
+        margin: 0 auto 20px;
+        text-align: center;
+      }
+      span {
+        color: #333;
+        font-size: 20px;
+        font-weight: 800;
+        text-align: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z108.png");
+        }
+
+      }
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z109.png");
+        }
+
+      }
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z110.png");
+        }
+
+      }
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z111.png");
+        }
+      }
+
     }
+  }
+}
+
+@media (max-width: 768px) {
+  .btn-groups {
+    display: flex;justify-content: center;margin-top: 30px;
+  }
+
+  .client-fuzhu-gongneng {
+    margin-top: 130px;
+    margin-bottom: 120px;
 
-    // 按钮
-    .free-train-btn,.apply-btn{margin-right: 16px;}
-    .btn-groups {
-      margin-top: 48px;
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 11%;
     }
-    @media (max-width: 768px) {
-      .btn-groups {
-        display: flex;justify-content: center;margin-top: 30px;
+
+    ul {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      li {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-bottom: 20px;
+
+        i {
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          display: inline-block;
+          width: 80px;
+          height: 80px;
+          margin: 0 auto 20px;
+          text-align: center;
+        }
+        span {
+          color: #333;
+          font-size: 14px;
+          font-weight: 800;
+          text-align: center;
+        }
+
+        &:nth-child(1) {
+          i {
+            background-image: url("~static/gangweiIcon/z108.png");
+          }
+
+        }
+        &:nth-child(2) {
+          i {
+            background-image: url("~static/gangweiIcon/z109.png");
+          }
+
+        }
+        &:nth-child(3) {
+          i {
+            background-image: url("~static/gangweiIcon/z110.png");
+          }
+
+        }
+        &:nth-child(4) {
+          i {
+            background-image: url("~static/gangweiIcon/z111.png");
+          }
+        }
+
       }
     }
   }
+}
+
+
 </style>

pages/product/keFuFuWu.vue

@@ -172,15 +172,6 @@ export default {
   }
 }
 
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
 
 .platform-course-list {
   h4 {
@@ -195,10 +186,6 @@ export default {
 
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
   .platform-course-list {
     h4 {
       font-size: 18px;

pages/product/lingDaoNengLi.vue

@@ -211,15 +211,7 @@ export default {
     width: 100%;
   }
 }
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
 
-  .btn-item {
-    margin-right: 20px;
-  }
-}
 .client-xuexishouyi-box {
   .client-title {
     font-size: 30px;
@@ -244,11 +236,6 @@ export default {
 
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
-
   .client-xuexishouyi-box {
     .client-title {
       font-size: 20px;

pages/product/peixun.vue

@@ -41,8 +41,8 @@
 
 
     <!--  青谷在线培训系统四大优势  -->
-    <div class="platform-products-services">
-      <h4 class="client-title">青谷在线培训系统四大优势</h4>
+    <div class="platform-four-youshi client-container">
+      <h4>青谷在线培训系统四大优势</h4>
       <ul>
         <li>
           <div class="card-container">
@@ -225,4 +225,130 @@ export default {
   }
 }
 
+.platform-four-youshi {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      width: 273px; height: 330px;
+      box-sizing: border-box;
+      .card-container {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 27px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+
+        h3 {
+          text-align: center;
+          font-size: 20px;
+          color: #fff;
+          font-weight: 800;
+          margin-bottom: 27px;
+        }
+
+        i {
+          width: 123px;
+          height: 123px;
+          display: inline-block;
+          margin: 0 auto;
+          text-align: center;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        p {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 24px;
+          text-align: center;
+          margin-top: 10px;
+        }
+      }
+      &:nth-child(1) {
+        >div {
+          background-image: url('~static/gangweiIcon/z91.png');
+          i {
+            background-image: url('~static/gangweiIcon/z112.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        >div {
+          background-image: url('~static/gangweiIcon/z91.png');
+          i {
+            background-image: url('~static/gangweiIcon/z113.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        >div {
+          background-image: url('~static/gangweiIcon/z91.png');
+          i {
+            background-image: url('~static/gangweiIcon/z114.png');
+          }
+        }
+
+      }
+      &:nth-child(4) {
+        >div {
+          background-image: url('~static/gangweiIcon/z91.png');
+          i {
+            background-image: url('~static/gangweiIcon/z115.png');
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@media (max-width: 768px) {
+
+  .platform-four-youshi {
+    margin-bottom: 10%;
+    h4 {
+      font-size: 18px;
+      margin-bottom: 10%;
+    }
+
+    ul {
+      flex-wrap: wrap;
+      li {
+        width: 50%;
+        padding: 10px;
+        .card-container {
+          h3 {
+            font-size: 14px;
+          }
+          i {
+            width: 60px;
+            height: 60px;
+          }
+
+          p {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/product/renLiZiYuan.vue

@@ -206,17 +206,6 @@ export default {
     width: 100%;
   }
 }
-
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 .client-xuexishouyi-box {
   .client-title {
     font-size: 30px;
@@ -242,11 +231,6 @@ export default {
 
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
-
   .client-xuexishouyi-box {
     .client-title {
       font-size: 20px;

pages/product/shengChanCaiGou.vue

@@ -159,17 +159,6 @@ export default {
     width: 100%;
   }
 }
-
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 .platform-course-list {
 
   h4 {
@@ -182,10 +171,6 @@ export default {
 }
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
   .platform-course-list {
     h4 {
       font-size: 18px;

pages/product/shiChangYingXiao.vue

@@ -274,17 +274,6 @@ export default {
   }
 }
 
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
-
 .client-shichang-xiaoshou {
   margin: 0 auto;
   text-align: center;
@@ -342,10 +331,6 @@ export default {
     }
   }
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
 
   .client-shichang-xiaoshou {
     margin: 0 auto;

pages/product/xingZhengGuanLi.vue

@@ -170,16 +170,6 @@ export default {
   }
 }
 
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 .platform-course-list {
   h4 {
     font-size: 30px;
@@ -205,11 +195,6 @@ export default {
 
 @media (max-width: 768px) {
 
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
-
   .client-xuexishouyi-box {
     .client-title {
       font-size: 20px;

pages/product/zhiYeSuYang.vue

@@ -201,16 +201,6 @@ export default {
   }
 }
 
-.btn-groups {
-  margin-top: 100px;
-  text-align: center;
-  margin-bottom: 210px;
-
-  .btn-item {
-    margin-right: 20px;
-  }
-}
-
 .client-xuexishouyi-box {
   .client-title {
     font-size: 30px;
@@ -235,12 +225,6 @@ export default {
 }
 
 @media (max-width: 768px) {
-
-  .btn-groups {
-    margin-top: 10%;
-    margin-bottom: 10%;
-  }
-
   .client-xuexishouyi-box {
     .client-title {
       font-size: 20px;

pages/solution/transportation.vue

@@ -305,9 +305,6 @@ export default {
     margin-top: 140px;
     margin-bottom: 120px;
   }
-  .btn-groups {
-    margin-top: 50px;
-  }
 }