update

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

@@ -853,3 +853,32 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     -moz-user-focus: none;
     -moz-user-select: none;}
 }
+
+
+/*************************** banner img *******************************/
+// 首页
+client-banner-box.client-banner-index {
+  height: 810px;
+}
+// 其他
+.client-banner-box {
+  height: 730px;
+  width: 100%;
+
+  .client-container {
+    position: relative;
+  }
+
+  div.client-platform-banner {
+    height: 730px;
+
+    .banner-btn-groups {
+      position: absolute;
+      width: auto;
+      height: auto;
+      left: 50%;
+      top: 460px;
+      transform: translate(-50%);
+    }
+  }
+}

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

@@ -401,7 +401,7 @@
         height: 396px;
         background-color:#042D85;
         position: relative;
-        div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
+        //div{width:auto;height:auto;background-position-x: center;background-repeat: no-repeat;}
         .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
       }
 

components/common/freeTrialBtn.vue

@@ -44,10 +44,8 @@ export default {
         } else {
           window.open('https://cdnks.mtavip.com/a/register?flug=2')
         }
-
       }
     },
-
   }
 }
 </script>

pages/index.vue

@@ -10,7 +10,14 @@
       <el-carousel trigger="click">
         <el-carousel-item v-for="(item,index) in bannerList" :key="index">
           <div @click="clickBanner(item)" :style="{backgroundImage: 'url(' + item.pic + ')'}"
-               class="index-carousel-box"></div>
+               class="index-carousel-box">
+            <div class="client-container">
+              <div class="banner-btn-groups">
+                <freeTrialBtn class="free-train-btn btn-item" myType="kaoshi"/>
+                <onlineInformationBtn class="online-information-btn btn-item" />
+              </div>
+            </div>
+          </div>
         </el-carousel-item>
       </el-carousel>
     </div>
@@ -683,5 +690,13 @@ export default {
 
 }
 
+.client-container {
+  position: relative;
+}
+.banner-btn-groups {
+  position: absolute;
+  left: 0;
+  top: 250px;
+}
 
 </style>

pages/product/courseCustom.vue

@@ -5,8 +5,6 @@
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
         class="client-platform-banner"></div>
-      <h3>个性定制优质课程</h3>
-      <p>未用户打造专业优质的课程定制服务</p>
     </div>
 
     <!--  专业团队满足客户需求  -->
@@ -242,18 +240,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
-}
-
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
-  overflow: hidden;
-}
-
 .btns-group {
   display: flex;
   text-align: center;

pages/product/courseResource.vue

@@ -4,13 +4,8 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${ bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="platform-banner-img">
-        <div class="client-container">
-
-          按钮------------
-        </div>
+        class="client-platform-banner">
       </div>
-
     </div>
 
     <!--  企业通用岗位培训方案  -->
@@ -235,15 +230,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-banner-box {
-  width: 100%;
-  height: 736px;
-}
-
-.platform-banner-img {
-  height: 736px;
-}
-
 .btns-group {
   margin: 40px auto 120px;
   text-align: center;

pages/product/exam.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>在线考试就用青谷</h3>
-      <p>一款简单好用的考试系统</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  产品体验  -->

pages/product/peixun.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="client-platform-page client-train-page">
     <!--  培训平台页 banner栏  -->
-    <div class="client-platform-banner">
+    <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <span class="client-platform-content">
-         <h3>在线考试就用青谷</h3>
-         <p>一款简单好用的考试系统</p>
-         <onlineInformationBtn />
-      </span>
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  产品体验  -->
@@ -198,12 +199,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-platform-page {
-  margin-top: 80px;
-}
-.client-platform-banner {
-  position: relative;
+.banner-btn-groups {
+  position: absolute;
+
 }
+
 .client-platform-content {
   color: #fff;
   position: absolute;
@@ -214,6 +214,7 @@ export default {
   width: auto;
   height: auto;
 }
+
 .platform-products-services {
 
   .btn-groups {
@@ -223,4 +224,5 @@ export default {
     }
   }
 }
+
 </style>

pages/solution/exam.vue

@@ -5,10 +5,13 @@
 
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>全流程AI监考防作弊体系</h3>
-      <p>青谷为您打造专业的严肃性在线考试解决方案</p>
-      <onlineInformationBtn/>
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups left">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
       <!--  常见严肃性考试场景  -->
@@ -265,4 +268,12 @@ export default {
     }
   }
 }
+
+.client-banner-box {
+  .banner-btn-groups.left {
+    left:300px;
+    top: 500px;
+  }
+}
+
 </style>

pages/solution/peixun.vue

@@ -4,21 +4,24 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>企业培训</h3>
-      <p>青谷帮您解决企业内外培训管理难题</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups left">
+            <onlineInformationBtn class="online-information-btn btn-item"/>
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  企业培训现状  -->
-    <div>
-      <h3>企业培训现状</h3>
+    <div class="client-xianzhuang-box client-container">
+      <h4>企业培训现状</h4>
       <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼</p>
       <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效</p>
     </div>
 
     <!--  企业培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>企业培训痛点</h4>
       <ul>
         <li>
@@ -63,63 +66,71 @@
     </div>
 
     <!--  如何快速学习平台  -->
-    <div class="client-study-box">
+    <div class="client-study-box client-container">
       <h4>如何搭建学习平台</h4>
 
-      <ul>
+      <ul class="top-list">
         <li>
-          <span>提升培训速度</span>
-          <span>↑ 95%</span>
+          <div>
+            <p>提升培训速度</p>
+            <p>↑ 95%</p>
+          </div>
         </li>
         <li>
-          <span>提升培训速度</span>
-          <span>↓ 90%</span>
+          <div>
+            <p>提升培训速度</p>
+            <p>↓ 90%</p>
+          </div>
         </li>
         <li>
-          <span>降低费用成本</span>
-          <span>↓ 75%</span>
+          <div>
+            <p>降低费用成本</p>
+            <p>↓ 75%</p>
+          </div>
         </li>
         <li>
-          <span>降低时间成本</span>
-          <span>↓ 80%</span>
+          <div>
+            <p>降低时间成本</p>
+            <p>↓ 80%</p>
+          </div>
         </li>
       </ul>
 
-      <ul>
+      <ul class="bottom-list">
         <li>
           <i></i>
-          <p>云端部署</p>
-          <span>云端部署，按需配置</span>
-          <span>免硬件与IT运维投入</span>
-          <span>PC、H5、APP多端兼容</span>
+          <h4>云端部署</h4>
+          <p>云端部署，按需配置</p>
+          <p>免硬件与IT运维投入</p>
+          <p>PC、H5、APP多端兼容</p>
         </li>
         <li>
           <i></i>
-          <p>AI智能学习</p>
-          <span>内容智能推荐系统</span>
-          <span>大数据与学习行为分析</span>
-          <span>提供个性化培训</span>
+          <h4>AI智能学习</h4>
+          <p>内容智能推荐系统</p>
+          <p>大数据与学习行为分析</p>
+          <p>提供个性化培训</p>
         </li>
         <li>
           <i></i>
-          <p>人才发展体系</p>
-          <span>支持复杂岗位设置</span>
-          <span>职业发展与胜任力体系</span>
-          <span>只能体系</span>
+          <h4>人才发展体系</h4>
+          <p>支持复杂岗位设置</p>
+          <p>职业发展与胜任力体系</p>
+          <p>只能体系</p>
         </li>
         <li>
           <i></i>
-          <p>混合式培训管理</p>
-          <span>线上线下混合式培训</span>
-          <span>社交学习与分享</span>
-          <span>多维度洞察培训效果</span>
+          <h4>混合式培训管理</h4>
+          <p>线上线下混合式培训</p>
+          <p>社交学习与分享</p>
+          <p>多维度洞察培训效果</p>
         </li>
         <li>
           <i></i>
-          <p>海量优质课程资源</p>
-          <span>各领域行业专家</span>
-          <span>免硬件与IT运维投入</span>
-          <span>全方位覆盖企业培训体系</span>
+          <h4>海量优质课程资源</h4>
+          <p>各领域行业专家</p>
+          <p>免硬件与IT运维投入</p>
+          <p>全方位覆盖企业培训体系</p>
         </li>
       </ul>
     </div>
@@ -143,8 +154,8 @@ import imgCardLv3 from "~/components/common/layout/imgDes/imgCardLv3";
  */
 export default {
   name: "peixun",
-  layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv3},
+  layout: 'templateB',
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv3},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.qiyepeixun}),
@@ -154,7 +165,7 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
-  head(){
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -163,8 +174,8 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -244,6 +255,116 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+// banner 图
+.client-banner-box {
+  .banner-btn-groups.left {
+    left: 300px;
+    top: 460px;
+  }
+}
+
+// 企业现状
+.client-xianzhuang-box {
+  margin-top: 120px;
+
+  h4 {
+    text-align: center;
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-bottom: 42px;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 800;
+    color: #565656;
+    text-align: center;
+    line-height: 30px;
+  }
+}
+
+// 企业痛点
+.client-tongdian-box {
+  margin-top: 190px;
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-bottom: 90px;
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    li {
+      text-align: center;
+      width: 33%;
+      margin-bottom: 20px;
+
+      i {
+        width: 99px;
+        height: 99px;
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z73.png");
+        }
+      }
+
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z74.png");
+        }
+      }
+
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z75.png");
+        }
+      }
+
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z76.png");
+        }
+      }
+
+      &:nth-child(5) {
+        i {
+          background-image: url("~static/gangweiIcon/z77.png");
+        }
+      }
+
+      &:nth-child(6) {
+        i {
+          background-image: url("~static/gangweiIcon/z78.png");
+        }
+      }
+
+      span {
+        font-size: 20px;
+        color: #565656;
+        font-weight: 800;
+        line-height: 30px;
+        display: block;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// 解决方案
 .platform-products-services {
   .client-title {
     font-size: 30px;
@@ -256,9 +377,229 @@ export default {
 
   .btn-groups {
     margin-top: 48px;
+
     .btn-item {
       margin-right: 20px;
     }
   }
 }
+
+// 学习平台
+.client-study-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 116px;
+  }
+
+  ul.top-list {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      width: 25%;
+
+      div {
+        border: 1px dashed #00b96b;
+        box-sizing: border-box;
+        margin: 20px;
+
+        p {
+          text-align: center;
+        }
+
+        & > p:nth-child(1) {
+          color: #00b96b;
+          font-size: 24px;
+          margin: 28px auto 28px;
+        }
+
+        & > p:nth-child(2) {
+          color: #00b96b;
+          font-size: 60px;
+          margin: 0 auto 25px;
+        }
+      }
+    }
+  }
+
+  ul.bottom-list {
+    margin-top: 70px;
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      margin: 0 auto 120px;
+      text-align: center;
+
+      i {
+        width: 110px;
+        height: 110px;
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z79.png");
+        }
+      }
+
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z80.png");
+        }
+      }
+
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z81.png");
+        }
+      }
+
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z82.png");
+        }
+      }
+
+      &:nth-child(5) {
+        i {
+          background-image: url("~static/gangweiIcon/z83.png");
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        color: #565656;
+        width: 148px;
+        line-height: 24px;
+      }
+
+      h4 {
+        font-size: 24px;
+        font-weight: 700;
+        color: #565656;
+        margin-top: 38px;
+        margin-bottom: 28px;
+      }
+
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  // 企业现状
+  .client-xianzhuang-box {
+    margin-top: 10%;
+
+    h4 {
+      text-align: center;
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      margin-bottom: 5%;
+    }
+
+    p {
+      font-size: 12px;
+      font-weight: 800;
+      color: #565656;
+      text-align: center;
+      line-height: 30px;
+    }
+  }
+
+  // 企业痛点
+  .client-tongdian-box {
+    margin-top: 10%;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      margin-bottom: 6%;
+      text-align: center;
+    }
+
+    ul {
+      li {
+        width: 50%;
+
+        i {
+          width: 60px;
+          height: 60px;
+        }
+
+        span {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  // 解决方案
+  .platform-products-services {
+    .client-title {
+      font-size: 18px;
+      font-weight: 800;
+      text-align: center;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 10%;
+    }
+
+    .btn-groups {
+      margin-top: 5%;
+
+      .btn-item {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .client-study-box {
+    h4 {
+      font-size: 18px;
+      margin-bottom: 10%;
+    }
+
+    ul.top-list {
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      li {
+        width: 50%;
+
+        div {
+          margin: 2%;
+
+          p:nth-child(1) {
+            font-size: 14px;
+          }
+
+          p:nth-child(2) {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    ul.bottom-list {
+      margin-top: 10%;
+      flex-direction: column;
+
+      li {
+        margin-bottom: 10%;
+      }
+    }
+  }
+}
+
 </style>