新增 class

components/common/applyBtn.vue

@@ -40,6 +40,6 @@ export default {
   border-radius: 24px;
   padding: 10px 30px;
   color: #fff;
-
+  cursor: pointer;
 }
 </style>

components/common/freeTrialBtn.vue

@@ -60,6 +60,6 @@ export default {
   border-radius: 24px;
   padding: 10px 30px;
   color: #fff;
-
+  cursor: pointer;
 }
 </style>

components/common/layout/imgDes/imgCardLv1.vue

@@ -19,8 +19,8 @@
       <img :src="img.url">
       <div class="card-info">
         <h5>{{title}}</h5>
-        <p>{{description}}</p>
-        <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`pc-${index}`">
+        <p v-if="description">{{description}}</p>
+        <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
           <template v-for="(des,ind) in rowList">
             <!--    站位div    -->
             <span v-if="des.empty" :key="ind"></span>
@@ -101,6 +101,8 @@ export default {
 
 <style lang="scss" scoped>
 .mta-card-lv1 {
+  margin: 0 auto;
+
   .mta-card-content-pc {
     display: flex;
     img {

components/common/layout/imgDes/imgCardLv2.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="mta-card-lv2">
+
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order> contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <h5>{{ title }}</h5>
+        <div class="mta-card-row" v-for="(rowItem,index) in tagesPc" :key="`pc-${index}`">
+          <i></i><span>{{ rowItem.value }}</span>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+
+
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <h5>{{ title }}</h5>
+        <div class="mta-card-row" v-for="(rowItem,index) in tagesH5" :key="`H5-${index}`">
+          <i></i><span>{{ rowItem.value }}</span>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv2",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv2 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    img {
+      width: 480px;
+      height: 370px;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin-top: 40px;
+      margin-bottom: 23px;
+    }
+  }
+
+
+  .mta-card-row {
+    margin-bottom: 23px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    text-align: left;
+
+
+    &:last-child{
+      margin-bottom: 0px;
+    }
+    i {
+      display: inline-block;
+      width:13px;
+      height: 13px;
+      background: #00b96b;
+      margin-right: 13px;
+    }
+  }
+}
+</style>

components/common/layout/imgDes/imgCardLv3.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="mta-card-lv3">
+
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <h5>{{ title }}</h5>
+        <p>{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+
+
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <h5>{{ title }}</h5>
+        <p>{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv3",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    des() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv3 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    img {
+      width: 480px;
+      height: 370px;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin-top: 40px;
+      margin-bottom: 23px;
+    }
+  }
+
+
+}
+</style>

components/common/onlineInformationBtn.vue

@@ -29,6 +29,6 @@ export default {
   padding: 10px 30px;
   background: #fff;
   border: 1px solid #00b96b;
-
+  cursor: pointer;
 }
 </style>

pages/index.vue

@@ -673,12 +673,10 @@ export default {
 .client-index-page {
 
   .apply-btn {
-    margin-right: 18px;
     margin-top: 14px;
   }
 
   .free-train-btn {
-    margin-right: 18px;
     margin-top: 14px;
   }
 
@@ -691,9 +689,13 @@ export default {
 
     .btn-groups {
       margin-top: 48px;
+      .btn-item {
+        margin-right: 20px;
+      }
     }
   }
 
+
 }
 
 

pages/product/exam.vue

@@ -16,87 +16,17 @@
       <p>无序注册，即可免费体验青谷在线考试系统</p>
       <!--   多端体验   -->
       <chanPinTiYan></chanPinTiYan>
-
     </div>
 
     <!--  产品优势  -->
-    <div class="platform-products-services">
+    <div class="platform-products-services client-container">
       <h4 class="client-title">产品优势</h4>
-      <ul>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-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>
-                <div>
-                  <a class="client-default-Btn">
-                    <freeTrialBtn myType="kaoshi"/>
-                  </a>
-                  <onlineInformationBtn class="client-default-Btn" />
-                </div>
-              </div>
-            </div>
-          </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>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn myType="kaoshi"/>
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <img src="#" alt="严格的考试监控防作弊体系"/>
-              <div class="products-services-content">
-                <h5>全流程AI监考防作弊体系</h5>
-                <p class="p-before-circle">人脸识别身份核验成功方可考试，防替考作弊行为</p>
-                <p class="p-before-circle">多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现</p>
-                <p class="p-before-circle">随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制</p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn myType="kaoshi"/>
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>多端口个性化设置随心选择</h5>
-                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
-                <p class="p-before-circle">与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
-                <p class="p-before-circle">PC、APP、H5统一管理，数据互通，充分利用水平化时间，塑造学员高频率使用习惯</p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn myType="kaoshi"/>
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  更多辅助功能  -->
@@ -134,6 +64,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import chanPinTiYan from "~/components/common/chanPinTiYan";
+import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
 /**
@@ -142,7 +73,7 @@ import {BannerImgs, classifys} from "~/defaultConfig"
 export default {
   name: "exam",
   layout: 'templateB',
-  components: { freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan},
+  components: { freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kaoshixitong.classify, 'keyword': classifys.kaoshixitong.keyword}),
@@ -171,6 +102,110 @@ export default {
   },
   data() {
     return {
+
+      productList: [
+        {
+          content: {
+            title: '青谷云在线考试服务',
+            list: [
+              {
+                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
+              },
+              {
+                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的人员管理和考试功能',
+            list: [
+              {
+                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题',
+              },
+              {
+                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '全流程AI监考防作弊体系',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现',
+              },
+              {
+                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互通，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
       youkeFlag: false,// 控制游客系统是否维护中
       SystemWidthFlag: false,
       swiperOption: {
@@ -254,7 +289,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .client-exam-page {
   margin-top: 70px;
 }
@@ -265,4 +300,22 @@ export default {
   text-align: center;
   color: #fff;
 }
+
+.platform-products-services {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 70px;
+  }
+
+  .btn-groups {
+    margin-top: 48px;
+    .btn-item {
+      margin-right: 20px;
+    }
+  }
+}
 </style>

pages/product/peixun.vue

@@ -26,85 +26,19 @@
       <img src="#">
     </div>
 
+
     <!--  功能强大的培训系统  -->
-    <div class="platform-products-services">
+    <div class="platform-products-services client-container">
       <h4 class="client-title">功能强大的培训系统</h4>
-      <ul>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <img src="#" alt="强大的人员和试题管理"/>
-              <div class="products-services-content">
-                <h5>一键搭建移动端和PC端专属培训平台</h5>
-                <p>只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；
-                支持APP和微信H5学习模式；为学习者提供真正的随地的、个性化的、开放式的学习服务。</p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn />
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>丰富的文本/音频/视频课程内容上传服务</h5>
-                <p> 全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；
-                  同时还支持视频服务器链接、第三方链接的课程内容上传服务。 </p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn />
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <img src="#" alt="严格的考试监控防作弊体系"/>
-              <div class="products-services-content">
-                <h5>无延迟、高互动、全终端的线上直播学习</h5>
-                <p>
-                  线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求；
-                  播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。
-                </p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn />
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>互动助学工具提升学员活跃度</h5>
-                <p>
-                  自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；
-                  可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。
-                </p>
-                <div><a rel="nofollow" class="client-default-Btn">
-                  <freeTrialBtn />
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+      </imgCardLv3>
     </div>
 
+
     <!--  青谷在线培训系统四大优势  -->
     <div class="platform-products-services">
       <h4 class="client-title">青谷在线培训系统四大优势</h4>
@@ -151,14 +85,16 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import chanPinTiYan from "~/components/common/chanPinTiYan";
-import {BannerImgs , classifys} from "~/defaultConfig"
+import imgCardLv3 from "@/components/common/layout/imgDes/imgCardLv3";
+import {BannerImgs , classifys} from "~/defaultConfig";
+
 /**
  * @ 产品与服务 -> 培训系统
  */
 export default {
   name: "cultivate",
   layout: 'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, imgCardLv3},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.peixunxitong.classify,'keyword': classifys.peixunxitong.keyword}),
@@ -192,6 +128,72 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      productList: [
+        {
+          content: {
+            title: '一键搭建移动端和PC端专属培训平台',
+            des: '只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统,支持APP和微信H5学习模式；为学习者提供真正的随地的、个性化的、开放式的学习服务。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '丰富的文本/音频/视频课程内容上传服务',
+            des: '全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；同时还支持视频服务器链接、第三方链接的课程内容上传服务。',
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '无延迟、高互动、全终端的线上直播学习',
+            des: '线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求,播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '互动助学工具提升学员活跃度',
+            des: '自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。',
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        }
+      ],
+    }
+  },
 }
 </script>
 
@@ -212,4 +214,21 @@ export default {
   width: auto;
   height: auto;
 }
+.platform-products-services {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 70px;
+  }
+
+  .btn-groups {
+    margin-top: 48px;
+    .btn-item {
+      margin-right: 20px;
+    }
+  }
+}
 </style>

pages/solution/exam.vue

@@ -17,6 +17,22 @@
                    :h5-margin="0"></gangweiList>
     </div>
 
+
+    <!--  严肃性考试解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">严肃性考试解决方案</h4>
+
+      <imgCardLv1 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :col-h5="2">
+
+        <div class="btn-groups">
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+
+      </imgCardLv1>
+
+    </div>
+
+
     <!--  严肃性考试解决方案  -->
     <div class="platform-products-services">
       <h4 class="client-title">严肃性考试解决方案</h4>
@@ -152,6 +168,7 @@ import chanPinTiYan from "~/components/common/chanPinTiYan";
 import {BannerImgs, yansukaoshi} from "~/defaultConfig";
 import desWithCode from "@/components/common/layout/desComp/desWithCode";
 import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";
 
 /**
  * @ 解决方案 -> 严肃考试
@@ -160,7 +177,7 @@ export default {
   name: "exam.vue",
   layout: 'templateB',
   components: {
-    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList
+    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList, imgCardLv1
   },
   async asyncData({$axios, store}) {
     const arr = [
@@ -195,6 +212,119 @@ export default {
   },
   data() {
     return {
+      productList: [
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            des: '',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '数据加密保护，保障考试信息安全',
+            des: '',
+            list: [
+              {
+                value: '考生答卷时禁止复制、粘贴考题，防止试题和答案泄露',
+              },
+              {
+                value: '企业级技术框架；数据存储备份机制；算法、秘钥双重保险，数据安全可靠',
+              },
+              {
+                value: '支持私有服务器部署内网考试，让考试数据更安全',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '良好的高并发性，系统稳定性高',
+            des: '',
+            list: [
+              {
+                value: '采用的运行稳定、安全性很高的JAVA语言开发',
+              },
+              {
+                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
+              },
+              {
+                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+              },
+              {
+                value: '为企业快速，灵活构建大规模分布式服务应用提供基础',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多维度统计分析，考试结果可视化',
+            des: '',
+            list: [
+              {
+                value: '采用的运行稳定、安全性很高的JAVA语言开发',
+              },
+              {
+                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
+              },
+              {
+                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+              },
+              {
+                value: '为企业快速，灵活构建大规模分布式服务应用提供基础',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kaoshi'
+        }
+      ],
       curActive: 1,
     }
   },

pages/testPage.vue

@@ -1,9 +1,11 @@
 <template>
-  <imgCardLv1 :option="option"></imgCardLv1>
+  <div>
+    <imgCardLv1 :option="item" v-for="(item,index) in list" :key="index"></imgCardLv1>
+  </div>
 </template>
 
 <script>
-import imgCardLv1 from "@/components/common/layout/imgDes/imgCardLv1";
+import imgCardLv1 from "@/components/common/layout/imgDes/imgCardLv2";
 
 export default {
   name: "testPage",
@@ -12,43 +14,108 @@ export default {
   },
   data() {
     return {
-      option: {
-        content: {
-          title: '在线考试系统一建立无纸化考试通道',
-          des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
-          list: [
-            {
-              value: '试题批量导入',
-            },
-            {
-              value: '多种题型支持',
-            },
-            {
-              value: '随机组卷抽题',
-            },
-            {
-              value: '考试时间设定',
-            },
-            {
-              value: '360°防作弊监考',
-            },
-            {
-              value: '自动阅卷判卷',
-            },
-            {
-              value: '成绩统计查询',
-            },
-            {
-              value: '证书颁发打印',
-            },
-          ],
-          order: 1,
+      list: [
+        {
+          content: {
+            title: '青谷云在线考试服务',
+            list: [
+              {
+                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
+              },
+              {
+                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
         },
-        img: {
-          url: require('~/static/codeImage/code_jingli.png'),
-          order: 2,
+        {
+          content: {
+            title: '强大的人员管理和考试功能',
+            list: [
+              {
+                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题',
+              },
+              {
+                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '全流程AI监考防作弊体系',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现',
+              },
+              {
+                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kecheng'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互通，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kecheng'
         }
-      }
+      ],
     }
   }
 }