update

components/common/layout/imgDes/imgCardLv3.vue

@@ -92,6 +92,12 @@ export default {
       margin-top: 40px;
       margin-bottom: 23px;
     }
+
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      color: #333;
+    }
   }
 
 

pages/solution/exam.vue

@@ -19,91 +19,13 @@
 
 
     <!--  严肃性考试解决方案  -->
-    <div class="platform-products-services">
+    <div class="platform-products-services client-container">
       <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">
-
+      <imgCardLv2 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>
-      <ul>
-        <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>
-                  <onlineInformationBtn class="client-default-Btn"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-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>
-                  <onlineInformationBtn class="client-default-Btn"/>
-                </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 class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</p>
-                <p class="p-before-circle">拥有强大的考试并发负载能力，支持万人以上考生同时在线考试</p>
-                <p class="p-before-circle">分布式微服务架构、开放、安全、高能、高可靠的服务调用</p>
-                <p class="p-before-circle">为企业快速，灵活构建大规模分布式服务应用提供基础</p>
-                <div>
-                  <onlineInformationBtn class="client-default-Btn"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <div class="products-services-content">
-                <h5>多维度统计分析，考试结果可视化</h5>
-                <p class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</p>
-                <p class="p-before-circle">拥有强大的考试并发负载能力，支持万人以上考生同时在线考试</p>
-                <p class="p-before-circle">分布式微服务架构、开放、安全、高能、高可靠的服务调用</p>
-                <p class="p-before-circle">为企业快速，灵活构建大规模分布式服务应用提供基础</p>
-                <div>
-                  <onlineInformationBtn class="client-default-Btn"/>
-                </div>
-              </div>
-              <img src="#" alt="强大的人员和试题管理"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      </imgCardLv2>
     </div>
 
     <!--  宣传图  -->
@@ -168,7 +90,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";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 严肃考试
@@ -177,7 +99,7 @@ export default {
   name: "exam.vue",
   layout: 'templateB',
   components: {
-    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList, imgCardLv1
+    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList, imgCardLv2
   },
   async asyncData({$axios, store}) {
     const arr = [
@@ -301,16 +223,10 @@ export default {
             des: '',
             list: [
               {
-                value: '采用的运行稳定、安全性很高的JAVA语言开发',
-              },
-              {
-                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
-              },
-              {
-                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+                value: '智能判分系统，减轻管理员工工作压力，考后直接出成绩及排行榜等信息',
               },
               {
-                value: '为企业快速，灵活构建大规模分布式服务应用提供基础',
+                value: '从用户、考试、成绩、试题、排名、机构等层面多维度分析考试结果，掌握考生考试情况',
               },
             ],
             order: 1,
@@ -331,8 +247,25 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .active {
   color: green;
 }
+.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/peixun.vue

@@ -53,86 +53,13 @@
     </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>支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限</p>
-                <div>
-                  <onlineInformationBtn />
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <h5>多种课程形式及直播开展培训</h5>
-                <p> PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习</p>
-                <div>
-                  <onlineInformationBtn />
-                </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>
-                  题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果
-                </p>
-                <div>
-                  <onlineInformationBtn />
-                </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>
-                  <onlineInformationBtn />
-                </div>
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <img src="#" alt="实用便捷的判卷功能"/>
-              <div class="products-services-content">
-                <h5>快速搭建企业知识共享资源库库</h5>
-                <p>
-                  帮助企业搭建知识资源库，完成企业员工的知识分享
-                </p>
-                <div>
-                  <onlineInformationBtn />
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+      </imgCardLv3>
     </div>
 
     <!--  如何快速学习平台  -->
@@ -209,6 +136,7 @@ import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv3 from "~/components/common/layout/imgDes/imgCardLv3";
 
 /**
  * @ 解决方案 -> 企业培训
@@ -216,7 +144,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "peixun",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv3},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.qiyepeixun}),
@@ -241,9 +169,96 @@ export default {
       ],
     }
   },
+  data() {
+    return {
+      productList: [
+        {
+          content: {
+            title: '一键导入组织成员名单',
+            des: '支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '多种课程形式及直播开展培训',
+            des: 'PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习',
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '考、练模块提升学员培训效果',
+            des: '题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '可视化的培训大数据展示',
+            des: '直观分析学员学习时长、课程数、考试分数等数据结果，快速掌握整体学习情况',
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '快速搭建企业知识共享资源库库',
+            des: '帮助企业搭建知识资源库，完成企业员工的知识分享',
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          zixun: true,
+          myType: 'peixun'
+        }
+      ],
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.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>