update

components/common/layout/imgDes/imgCardLv2.vue

@@ -131,4 +131,13 @@ export default {
     }
   }
 }
+
+@media (max-width: 768px) {
+  .mta-card-content-h5 {
+    img {
+      width: 100%;
+    }
+  }
+
+}
 </style>

components/common/mtaTable.vue

@@ -1,9 +1,9 @@
 <template>
-  <table>
+  <table class="mta-table">
     <thead>
-    <tr>
-      <th v-for="item in config" :key="item.key">{{item.label}}</th>
-    </tr>
+      <tr>
+        <th v-for="item in config" :key="item.key">{{item.label}}</th>
+      </tr>
     </thead>
     <tbody>
     <tr v-for="(itemTd,index) in data" :key="index">
@@ -11,7 +11,7 @@
         <template v-if="item.key === 'name'">
           <span>
             {{itemTd[item.key]}}
-            <i  v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
+            <i class="table-shikan mta-hidden-xs" v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
           </span>
         </template>
         <template v-else>
@@ -44,8 +44,77 @@ export default {
 }
 </script>
 
-<style scoped>
-.shikan {
+<style lang="scss" scoped>
+.table-shikan {
   cursor: pointer;
+  color: #00b96b;
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 20px;
+}
+.mta-table {
+  width: 100%;
+  border: 1px solid #E8E8E8;
+  border-collapse: collapse;
+
+  td {
+    font-size: 14px;
+    font-weight: 500;
+    color: #565656;
+    line-height: 60px;
+    padding: 5px 20px;
+    border: 1px solid #E8E8E8;
+  }
+
+  th {
+    padding: 5px 20px;
+    color: #565656;
+    line-height: 60px;
+    font-size: 14px;
+    border: 1px solid #E8E8E8;
+  }
+}
+
+@media (max-width: 768px) {
+  .mta-table {
+    td {
+      line-height: 14px;
+      padding: 5px 5px ;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      span {
+        display: inline-block;
+        width: 100%;
+        text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;
+      }
+      &:first-child {
+        width: 60%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+      &:last-child {
+        width: 20%;
+      }
+    }
+    th {
+      line-height: 14px;
+      padding: 5px 5px;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      &:first-child {
+        width: 60%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+      &:last-child {
+        width: 20%;
+      }
+    }
+
+  }
 }
 </style>

defaultConfig.js

@@ -170,4 +170,6 @@ export {
   yansukaoshi,
   shengchancaigou,
   kechengdingzhi,
+  shichangyingxiao_xiaoshou,
+  shichangyingxiao_shichang
 }

pages/product/courseResource.vue

@@ -35,7 +35,7 @@
             <span>人力资源</span>
           </div>
         </li>
-        <li @click="goChildPage('shiCHangYingXiao')">
+        <li @click="goChildPage('shiChangYingXiao')">
           <div>
             <i :style="`background-image: url(${icon4})`"></i>
             <span>市场营销</span>

pages/product/lingDaoNengLi.vue

@@ -5,59 +5,31 @@
       <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>
-      <span>基层、中层、高层管理者</span>
     </div>
 
     <!--  学习受益  -->
-    <div class="client-xuexishouyi-box">
+    <div class="client-xuexishouyi-box client-container">
       <h4 class="client-title">学习收益</h4>
       <ul>
         <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <div class="products-services-content">
-                <h5>能力提升</h5>
-                <p><span>角色定位：</span><pingfen value="5"></pingfen></p>
-                <p><span>变革管理：</span><pingfen value="5"></pingfen></p>
-                <p><span>人际关系：</span><pingfen value="5"></pingfen></p>
-                <p><span>能力修炼：</span><pingfen value="5"></pingfen></p>
-                <p><span>部署培养：</span><pingfen value="5"></pingfen></p>
-                <p><span>识人用人：</span><pingfen value="5"></pingfen></p>
-                <p><span>战略执行：</span><pingfen value="5"></pingfen></p>
-              </div>
-              <img src="#" alt="能力提升">
-            </div>
+          <div class="products-services-box">
+            <img src="#" alt="能力提升">
+            <img src="#" alt="能力提升">
           </div>
         </li>
         <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-              <div class="products-services-content">
-                <h5>掌握知识</h5>
-                <p class="p-before-circle">明确企业管理者的角色定位及岗位使命</p>
-                <p class="p-before-circle">针对企业管理中的难点及关键点，掌握相应的处理策略解决问题</p>
-                <p class="p-before-circle">全面提升企业管理者的岗位必备能力</p>
-                <p class="p-before-circle">了解团队管理及引领团队变革的关键点</p>
-                <p class="p-before-circle">帮助管理者掌握部署培养的方法及战略执行</p>
-              </div>
-            </div>
-          </div>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn  myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
@@ -73,6 +45,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import pingfen from "~/components/common/pingfen";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 领导能力
@@ -91,7 +64,7 @@ export default {
   },
   components: {
     mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn, pingfen},
+    freeTrialBtn,onlineInformationBtn, pingfen, imgCardLv2},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -109,6 +82,37 @@ export default {
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '明确企业管理者的角色定位及岗位使命',
+            },
+            {
+              value: '针对企业管理中的难点及关键点，掌握相应的处理策略解决问题',
+            },
+            {
+              value: '全面提升企业管理者的岗位必备能力',
+            },
+            {
+              value: '了解团队管理及引领团队变革的关键点',
+            },
+            {
+              value: '帮助管理者掌握部署培养的方法及战略执行',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require('~/static/codeImage/code-jingli.png'),
+          order: 1,
+        },
+        mianfei: true,
+        zixun: true,
+        shenqing: false,
+        myType: 'kaoshi'
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -198,6 +202,80 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box {
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    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;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+  .products-services-box {
+    display: flex;
+  }
+}
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        width: 100%;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+}
+
 
 </style>

pages/product/renLiZiYuan.vue

@@ -5,59 +5,31 @@
       <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>
-      <span><i></i> 人力资源部 </span>
     </div>
 
     <!--  学习收益  -->
-    <div class="client-xuexishouyi-box">
+    <div class="client-xuexishouyi-box client-container">
       <h4 class="client-title">学习收益</h4>
       <ul>
         <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <div class="products-services-content">
-                <h5>能力提升</h5>
-                <p><span>角色定位：</span> <pingfen value="5"></pingfen></p>
-                <p><span>能力修炼：</span> <pingfen value="5"></pingfen></p>
-                <p><span>情商管理：</span> <pingfen value="5"></pingfen></p>
-                <p><span>识人用人：</span> <pingfen value="5"></pingfen></p>
-                <p><span>团队管理：</span> <pingfen value="5"></pingfen></p>
-                <p><span>招聘面试：</span> <pingfen value="5"></pingfen></p>
-                <p><span>人才管理：</span> <pingfen value="5"></pingfen></p>
-              </div>
-              <img src="#" alt="能力提升">
-            </div>
+          <div class="products-services-box">
+            <img src="#" alt="能力提升">
+            <img src="#" alt="能力提升">
           </div>
         </li>
         <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>掌握知识</h5>
-                <p class="p-before-circle">明确人力资源的角色定位及岗位使命</p>
-                <p class="p-before-circle">针对人力资源管理中的难点及关键点，掌握相应的处理策略解决问题</p>
-                <p class="p-before-circle">了解不同性格的团队成员的管理方式，提高员工管理能力</p>
-                <p class="p-before-circle">掌握人力资源规划、招聘面试、人才管理等日常业务工作的难点及关键点</p>
-                <p class="p-before-circle">帮助人力资源管理者部署培养的方法及战略执行</p>
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
-          </div>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn  myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn  />
       </div>
     </div>
 
@@ -72,6 +44,7 @@ import videoDialog from "~/components/common/videoDialog";
 import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 人力资源
@@ -90,7 +63,7 @@ export default {
   },
   components: {
     mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    freeTrialBtn,onlineInformationBtn, imgCardLv2},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -108,6 +81,33 @@ export default {
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '明确人力资源的角色定位及岗位使命',
+            },
+            {
+              value: '针对人力资源管理中的难点及关键点，掌握相应的处理策略解决问题',
+            },
+            {
+              value: '了解不同性格的团队成员的管理方式，提高员工管理能力',
+            },
+            {
+              value: '掌握人力资源规划、招聘面试、人才管理等日常业务工作的难点及关键点',
+            },
+            {
+              value: '帮助人力资源管理者部署培养的方法及战略执行',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require('~/static/codeImage/code-jingli.png'),
+          order: 1,
+        },
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -198,22 +198,80 @@ 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;
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
 }
-.btns-group {
-  display: flex;
+
+.btn-groups {
+  margin-top: 100px;
   text-align: center;
-  .client-default-Btn {
-    width: 120px;
+  margin-bottom: 210px;
+
+  .btn-item {
     margin-right: 20px;
   }
 }
+
+.client-xuexishouyi-box {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+  .products-services-box {
+    display: flex;
+  }
+}
+
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        width: 100%;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+}
 </style>

pages/product/shiChangYingXiao.vue

@@ -5,14 +5,11 @@
       <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>
-      <span>市场部、销售部</span>
     </div>
 
     <!--  市场部 销售部  -->
-    <div class="client-shichang-xiaoshou">
-      <div>
+    <div class="client-shichang-xiaoshou client-container">
+      <div class="nav-btns">
         <span @click="changeStatus('shichang')" :class="{active: curActive}">市场部</span>
         <span @click="changeStatus('xiaoshou')" :class="{active: !curActive}">销售部</span>
       </div>
@@ -30,75 +27,24 @@
 
     <!--  岗位职责  -->
     <div class="client-gangwei-box">
-      <h4>岗位职责</h4>
-
-      <ul v-if="curActive">
-        <li>
-          <i></i>
-          <span>策划市场推广方案</span>
-        </li>
-        <li>
-          <i></i>
-          <span>开展市场调研活动</span>
-        </li>
-        <li>
-          <i></i>
-          <span>品牌推广与运营</span>
-        </li>
-        <li>
-          <i></i>
-          <span>计划拓展市场预算</span>
-        </li>
-        <li>
-          <i></i>
-          <span>建立媒体运营矩阵</span>
-        </li>
-        <li>
-          <i></i>
-          <span>协助销售部门工作</span>
-        </li>
-      </ul>
-
-      <ul v-else>
-        <li>
-          <i></i>
-          <span>制定销售计划</span>
-        </li>
-        <li>
-          <i></i>
-          <span>销售信息收集</span>
-        </li>
-        <li>
-          <i></i>
-          <span>客户关系管理</span>
-        </li>
-        <li>
-          <i></i>
-          <span>严守职业道德</span>
-        </li>
-        <li>
-          <i></i>
-          <span>销售费用控制</span>
-        </li>
-        <li>
-          <i></i>
-          <span>协助市场开发</span>
-        </li>
-      </ul>
+
+      <gangwei-list  v-if="curActive" label="岗位职责" :list="shichang" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
+
+      <gangwei-list  v-else label="岗位职责" :list="xiaoshou" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
+
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
 
       <mtaTable v-if="curActive" :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
 
       <mtaTable v-else :data="tableData2" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn  myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
@@ -111,7 +57,10 @@ import mtaTable from "~/components/common/mtaTable";
 import videoDialog from "~/components/common/videoDialog";
 import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
-import {BannerImgs} from "~/defaultConfig";
+import {BannerImgs, shichangyingxiao_shichang, shichangyingxiao_xiaoshou} from "~/defaultConfig";
+import gangweiList from "~/components/common/layout/desComp/gangweiList";
+
+
 /**
  * @ 产品与服务 -> 课程资源 -> 市场营销
  */
@@ -130,7 +79,7 @@ export default {
   },
   components: {
     mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    freeTrialBtn,onlineInformationBtn, gangweiList},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -291,6 +240,14 @@ export default {
       curActive: true,
     }
   },
+  computed: {
+    shichang() {
+      return shichangyingxiao_shichang
+    },
+    xiaoshou() {
+      return shichangyingxiao_xiaoshou
+    },
+  },
   methods: {
     shiKan({url}) {
       this.visible = true;
@@ -308,22 +265,114 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+.client-banner-box {
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
+.btn-groups {
+  margin-top: 100px;
   text-align: center;
-  color: #fff;
+  margin-bottom: 210px;
+
+  .btn-item {
+    margin-right: 20px;
+  }
 }
-.btns-group {
-  display: flex;
+
+
+.client-shichang-xiaoshou {
+  margin: 0 auto;
   text-align: center;
-.client-default-Btn {
-  width: 120px;
-  margin-right: 20px;
+  .nav-btns {
+    width: 460px;
+    height: 80px;
+    margin: 50px auto 70px;
+    border-radius: 80px;
+    border: 1px solid #00b96b;
+    display: flex;
+    align-items: center;
+
+    span  {
+      display: inline-block;
+      width: 50%;
+      height: 100%;
+      line-height: 80px;
+      text-align: center;
+      cursor: pointer;
+      transition: all .5s ease;
+
+      &.active {
+        border-radius: 80px;
+        background: #00b96b;
+        color: #fff;
+      }
+    }
+  }
 }
+
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .client-shichang-xiaoshou {
+    margin: 0 auto;
+    text-align: center;
+    .nav-btns {
+      width: 460px;
+      height: 80px;
+      margin: 50px auto 70px;
+      border-radius: 80px;
+      border: 1px solid #00b96b;
+      display: flex;
+      align-items: center;
+
+      span  {
+        display: inline-block;
+        width: 50%;
+        height: 100%;
+        line-height: 80px;
+        text-align: center;
+        cursor: pointer;
+        transition: all .5s ease;
+
+        &.active {
+          border-radius: 80px;
+          background: #00b96b;
+          color: #fff;
+        }
+      }
+    }
+  }
+
 }
 </style>

pages/product/zhiYeSuYang.vue

@@ -5,59 +5,31 @@
       <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>
-      <span><i></i> 入职1~2年的基层员工</span>
     </div>
 
     <!--  学习收益  -->
-    <div class="client-xuexishouyi-box">
+    <div class="client-xuexishouyi-box client-container">
       <h4 class="client-title">学习收益</h4>
       <ul>
         <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <div class="products-services-content">
-                <h5>能力提升</h5>
-                <p><span>职业意识：</span> <pingfen value="5"></pingfen></p>
-                <p><span>逻辑思维：</span> <pingfen value="5"></pingfen></p>
-                <p><span>情商管理：</span> <pingfen value="5"></pingfen></p>
-                <p><span>时间管理： </span><pingfen value="5"></pingfen></p>
-                <p><span>呈现能力：</span> <pingfen value="5"></pingfen></p>
-                <p><span>沟通能力：</span> <pingfen value="5"></pingfen></p>
-                <p><span>礼仪修养： </span><pingfen value="5"></pingfen></p>
-              </div>
-              <img src="#" alt="能力提升">
-            </div>
+          <div class="products-services-box">
+            <img src="#" alt="能力提升">
+            <img src="#" alt="能力提升">
           </div>
         </li>
         <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>掌握知识</h5>
-                <p class="p-before-circle">了解职业素养的相关内容，提高职业意识和职业化程度</p>
-                <p class="p-before-circle">掌握时间管理的方法和技巧，提高办公效率和精准度</p>
-                <p class="p-before-circle">通过学习快速了解压力的来源及情绪的调度，帮助处理好职场人际关系</p>
-                <p class="p-before-circle">熟练掌握沟通表达，商务呈现等必备职业技能</p>
-                <p class="p-before-circle">提升职业礼仪及修养，养成良好的职业习惯</p>
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
-          </div>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn  myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -72,6 +44,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import pingfen from "~/components/common/pingfen";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 职业素养
@@ -79,7 +52,7 @@ import {BannerImgs} from "~/defaultConfig";
 
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
+  layout: 'templateB',
   async asyncData({$axios}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhiyesuyang}),
@@ -91,8 +64,9 @@ export default {
   },
   components: {
     mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn, pingfen},
-  head(){
+    freeTrialBtn, onlineInformationBtn, pingfen, imgCardLv2
+  },
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -101,14 +75,45 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '了解职业素养的相关内容，提高职业意识和职业化程度',
+            },
+            {
+              value: '掌握时间管理的方法和技巧，提高办公效率和精确度',
+            },
+            {
+              value: '通过学习快速了解压力的来源及情绪的调整，帮助处理好职场人际关系',
+            },
+            {
+              value: '熟练掌握沟通表达，商务呈现等必备职业技能',
+            },
+            {
+              value: '提升职业礼仪及修养，养成良好的职业习惯',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require('~/static/codeImage/code-jingli.png'),
+          order: 1,
+        },
+        mianfei: true,
+        zixun: true,
+        shenqing: false,
+        myType: 'kaoshi'
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -187,23 +192,81 @@ 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;
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
 }
-.btns-group {
-  display: flex;
+
+.btn-groups {
+  margin-top: 100px;
   text-align: center;
-  .client-default-Btn {
-    width: 120px;
+  margin-bottom: 210px;
+
+  .btn-item {
     margin-right: 20px;
   }
 }
 
+.client-xuexishouyi-box {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+  .products-services-box {
+    display: flex;
+  }
+}
+
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        width: 100%;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+}
+
 </style>