Merge remote-tracking branch 'origin/大连青谷网站' into 大连青谷网站

components/common/layout/imgDes/imgCardLv1.vue

@@ -101,7 +101,7 @@ export default {
 
 <style lang="scss" scoped>
 .mta-card-lv1 {
-  margin: 0 auto;
+  margin: 0 auto 120px;
 
   .mta-card-content-pc {
     display: flex;
@@ -155,6 +155,11 @@ export default {
       height: 13px;
       background: #00b96b;
       margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
     }
   }
 

components/common/layout/imgDes/imgCardLv2.vue

@@ -4,6 +4,7 @@
     <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}`">
+        <span class="card-info-num" v-if="num">{{ num }}</span>
         <h5>{{ title }}</h5>
         <div class="mta-card-row" v-for="(rowItem,index) in tagesPc" :key="`pc-${index}`">
           <i></i><span>{{ rowItem.value }}</span>
@@ -40,6 +41,9 @@ export default {
     return {}
   },
   computed: {
+    num() {
+      return this.option.content.num;
+    },
     img() {
       return {url: this.option.img.url, order: this.option.img.order}
     },
@@ -93,6 +97,12 @@ export default {
       margin-top: 40px;
       margin-bottom: 23px;
     }
+    .card-info-num {
+      font-size: 37px;
+      font-weight: 500;
+      color: #00B96B;
+      margin-bottom: 17px;
+    }
   }
 
 
@@ -113,6 +123,11 @@ export default {
       height: 13px;
       background: #00b96b;
       margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
     }
   }
 }

components/common/layout/imgDes/imgCardLv3.vue

@@ -97,6 +97,7 @@ export default {
       font-size: 14px;
       font-weight: 800;
       color: #333;
+      line-height: 24px;
     }
   }
 

components/common/layout/imgDes/imgCardLv4.vue

@@ -0,0 +1,133 @@
+<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}`">
+        <p class="p-top">{{ des1 }}</p>
+        <h5>解决方案</h5>
+        <p class="p-bottom">{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+
+
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <p class="p-top">{{ des1 }}</p>
+        <h5>解决方案</h5>
+        <p class="p-bottom">{{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;
+    },
+    des1() {
+      return this.option.content.des1;
+    },
+    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;
+    }
+
+    .card-info {
+      h5 {
+        font-size: 24px;
+        font-weight: 800;
+        text-align: left;
+        color: #333;
+        margin-top: 40px;
+        margin-bottom: 23px;
+        position: relative;
+
+        &:before {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          width: 100px;
+          height: 3px;
+          background: #00b96b;
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+        line-height: 24px;
+      }
+
+      p.p-top {
+        margin-top: 30px;
+        margin-bottom: 30px;
+      }
+
+      p.p-bottom {
+        margin-top: 20px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+
+
+
+}
+</style>

components/common/onlineInformationBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="btn" @click="btnClick"> 在线咨询 </span>
+  <span class="btn" @click="btnClick" :class="topClass"> 在线咨询 </span>
 
 </template>
 
@@ -9,26 +9,50 @@ export default {
   props: {
     myType: {
       type: String,
-      default: 'kaoshi'
+      default: '1'
     }
   },
   methods: {
     btnClick() {
       this.$router.push({name: 'courseware'});
     }
+  },
+  computed: {
+    topClass() {
+      const obj = {
+        1: 'level_1',
+        2: 'level_2',
+        3: 'level_3',
+        4: 'level_4',
+      }
+      return [obj[this.myType]];
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .btn {
-  width: 154px;
-  height: 47px;
-  color: #00b96b;
-  border-radius: 24px;
-  padding: 10px 30px;
-  background: #fff;
-  border: 1px solid #00b96b;
-  cursor: pointer;
+  &.level_1 {
+    width: 154px;
+    height: 47px;
+    color: #00b96b;
+    border-radius: 24px;
+    padding: 10px 30px;
+    background: #fff;
+    border: 1px solid #00b96b;
+    cursor: pointer;
+  }
+  &.level_2 {
+    width: 154px;
+    height: 47px;
+    color: #fff;
+    border-radius: 24px;
+    padding: 10px 30px;
+    background: #00B96B;
+    border: 1px solid #00b96b;
+    cursor: pointer;
+  }
 }
+
 </style>

pages/index.vue

@@ -685,7 +685,6 @@ export default {
   }
 
   .img-card {
-    margin-bottom: 250px;
 
     .btn-groups {
       margin-top: 48px;

pages/product/courseResource.vue

@@ -4,49 +4,53 @@
     <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>
+        class="platform-banner-img">
+        <div class="client-container">
+
+          按钮------------
+        </div>
+      </div>
+
     </div>
 
     <!--  企业通用岗位培训方案  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container">
       <h4 class="client-title">企业通用岗位培训方案</h4>
       <ul>
         <li @click="goChildPage('zhiYeSuYang')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z60.png')`"></i>
           <span>职业素养</span>
         </li>
         <li @click="goChildPage('lingDaoNengLi')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z61.png')`"></i>
           <span>领导能力</span>
         </li>
         <li @click="goChildPage('renLiZiYuan')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z62.png')`"></i>
           <span>人力资源</span>
         </li>
         <li @click="goChildPage('shiCHangYingXiao')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z63.png')`"></i>
           <span>市场营销</span>
         </li>
         <li @click="goChildPage('xingZhengGuanLi')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z64.png')`"></i>
           <span>行政管理</span>
         </li>
         <li @click="goChildPage('caiWuGuanLi')">
-        <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z65.png')`"></i>
           <span>财务管理</span>
         </li>
         <li @click="goChildPage('keFuFuWu')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z66.png')`"></i>
           <span>客服服务</span>
         </li>
         <li @click="goChildPage('chanPinYunYing')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z67.png')`"></i>
           <span>产品运营</span>
         </li>
         <li @click="goChildPage('shengChanCaiGou')">
-          <i></i>
+          <i :style="`background: url('~/static/gangweiIcon/z68.png')`"></i>
           <span>生产采购</span>
         </li>
 
@@ -169,6 +173,7 @@ export default {
       curVideo: '',
       visible: false,
       telDl: false,
+      // icon1: require(''),
     }
   },
   methods: {
@@ -190,29 +195,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+.client-banner-box {
+  width: 100%;
+  height: 736px;
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+.platform-banner-img {
+  height: 736px;
 }
 
+.platform-animation {
+  margin-top: 60px;
+
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 100px;
+    padding-top: 0;
+  }
+}
+
+
+
+
 .btns-group {
   display: flex;
   text-align: center;
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
-  }
 }
 
 .platform-animation {
   ul {
     font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      width: 277px;
+      height: 112px;
+      display: inline-block;
+
+      i {
+        display: inline-block;
+        width: 64px;
+        height: 70px;
+      }
+    }
   }
 }
 </style>

pages/product/zhiYeSuYang.vue

@@ -19,7 +19,7 @@
             <div class="products-services-box products-contrary-box">
               <div class="products-services-content">
                 <h5>能力提升</h5>
-                <p><spam>职业意识：</spam> <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>

pages/solution/biteAndSup.vue

@@ -38,72 +38,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">
-                <span>01</span>
-                <h5>强大的人员管理和培训功能</h5>
-                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
-                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
-                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>02</span>
-                <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>
-                <onlineInformationBtn />
-              </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">
-                <span>03</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  金融保险类课程案例  -->
@@ -142,6 +83,7 @@ import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 食品餐饮
@@ -149,7 +91,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "biteAndSup",
   layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.shipincanyin}),
@@ -163,6 +105,115 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '良好的高并发性，系统稳定性高',
+            list: [
+              {
+                value: '采用的运行稳定、安全性很高的JAVA语言开发',
+              },
+              {
+                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
+              },
+              {
+                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+              },
+              {
+                value: '为企业快速、灵活构建大规模分布式服务应用提供基础',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          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,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -174,6 +225,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.platform-products-services {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+  }
+  .btn-groups {
+    margin-top: 50px;
+  }
+}
 </style>

pages/solution/education.vue

@@ -38,71 +38,16 @@
     </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">
-                <span>01</span>
-                <h5>强大的人员管理和培训功能</h5>
-                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
-                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
-                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>02</span>
-                <h5>强大的AI防作弊，保障考试公平公正</h5>
-                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
-                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
-                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
-                <onlineInformationBtn />
-              </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">
-                <span>03</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <h5>智能阅卷，多维度、可视化学情分析</h5>
-                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
-                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+        </div>
+      </imgCardLv2>
     </div>
 
+
     <!--  教育培训类型课程案例  -->
     <div class="client-anli-box">
       <h4>教育培训类课程案例</h4>
@@ -136,7 +81,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
-import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 教育机构
@@ -144,7 +90,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "education",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaoyujigou}),
@@ -158,6 +104,109 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -169,6 +218,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .platform-products-services {
+      h4 {
+        font-size: 30px;
+        font-weight: 800;
+        color: #333;
+        margin-top: 140px;
+        margin-bottom: 120px;
+      }
+    .btn-groups {
+      margin-top: 50px;
+    }
+  }
 </style>

pages/solution/energy.vue

@@ -37,69 +37,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">
-                <span>01</span>
-                <h5>强大的人员管理和培训功能</h5>
-                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
-                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
-                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>02</span>
-                <h5>强大的AI防作弊，保障考试公平公正</h5>
-                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
-                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
-                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
-                <onlineInformationBtn />
-              </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">
-                <span>03</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <h5>智能阅卷，多维度、可视化学情分析</h5>
-                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
-                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  能源化工类课程案例  -->
@@ -135,14 +79,16 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
-import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+
 /**
  * @ 解决方案 -> 能源化工
  */
 export default {
   name: "energy",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.nengyuanhuagong}),
@@ -156,6 +102,109 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -167,6 +216,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.platform-products-services {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+  }
+  .btn-groups {
+    margin-top: 50px;
+  }
+}
 </style>

pages/solution/erupt.vue

@@ -7,50 +7,33 @@
         class="client-platform-banner"></div>
       <h3>万人在线，超高并发</h3>
       <p>青谷为你提供大规模培训、考试优质解决方案</p>
-      <onlineInformationBtn />
+      <onlineInformationBtn myType="2" />
     </div>
 
+
     <!--  随机组卷算法  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>随机组卷算法</h4>
-      <div>
-        <div>
-          <p>随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。</p>
-          <h3>解决方案</h3>
-          <p>青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。</p>
-          <onlineInformationBtn />
-        </div>
-        <img src="#">
-      </div>
+
+      <imgCardLv4 :option="productList[0]">
+        <onlineInformationBtn myType="2" />
+      </imgCardLv4>
     </div>
 
     <!--  同时请求次数  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>同时请求次数</h4>
-      <div>
-        <img src="#">
-        <div>
-          <p>无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因</p>
-          <h3>解决方案</h3>
-          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
-          <onlineInformationBtn />
-        </div>
-      </div>
+      <imgCardLv4 :option="productList[1]">
+        <onlineInformationBtn  myType="2" />
+      </imgCardLv4>
     </div>
 
     <!--  读写数据量大  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>读写数据量大</h4>
-      <div>
-        <img src="#">
-        <div>
-          <p>读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取</p>
-          <h3>解决方案</h3>
-          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，
-            如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
-          <onlineInformationBtn />
-        </div>
-      </div>
+      <imgCardLv4 :option="productList[2]">
+        <onlineInformationBtn myType="2" />
+      </imgCardLv4>
     </div>
 
     <!--  描述区域  -->
@@ -105,7 +88,8 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 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 desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv4 from "~/components/common/layout/imgDes/imgCardLv4";
 
 /**
  * @ 解决方案 -> 万人高并发
@@ -113,7 +97,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "erupt",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv4},
   async asyncData({$axios, store}) {
     const opt = {
       page:           1,
@@ -148,6 +132,53 @@ export default {
   },
   data() {
     return {
+      productList: [
+        {
+          content: {
+            des1: '随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。',
+            des: '青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            des1: '无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因',
+            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            des1: '读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取',
+            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率,如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+      ],
       swiperOption: {
         pagination: {
           el: '.swiper-pagination',
@@ -169,6 +200,15 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.client-suijizujuan-box {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 130px;
+    margin-bottom: 100px;
+    text-align: center;
+  }
+}
 </style>

pages/solution/financial.vue

@@ -38,69 +38,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">
-                <span>01</span>
-                <h5>私有化专属服务器部署，数据加密更安全</h5>
-                <p class="p-before-circle">将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全</p>
-                <p class="p-before-circle">PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>02</span>
-                <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>
-                <onlineInformationBtn />
-              </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">
-                <span>03</span>
-                <h5>强大的AI防作弊，保障考试公平公正</h5>
-                <p class="p-before-circle">人脸识别、摄像头监控、有效防止替考代考，保障考试公平公正</p>
-                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
-                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <h5>智能阅卷，多维度、可视化学情分析</h5>
-                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
-                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  金融保险类课程案例  -->
@@ -138,7 +82,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
-import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 金融保险
@@ -146,7 +91,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "financial",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jinrongbaoxian}),
@@ -160,6 +105,109 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '私有化专属服务器部署，数据加密更安全',
+            list: [
+              {
+                value: '将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全',
+              },
+              {
+                value: 'PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '构建培训闭环，打通线上线下教学场景',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '在线课程支持反复学习，实现从“了解”到“理解”的飞跃',
+              },
+              {
+                value: '支持六大常用题型及批量导入题库',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监控、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -171,6 +219,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.platform-products-services {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+  }
+  .btn-groups {
+    margin-top: 50px;
+  }
+}
 </style>

pages/solution/government.vue

@@ -41,68 +41,16 @@
     </div>
 
     <!--  解决方案  -->
-    <div class="client-fangan-box">
+    <div class="client-fangan-box client-container">
       <h4>青谷解决方案</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">PC端与移动端无缝链接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务</p>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </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>
-                <onlineInformationBtn />
-              </div>
-            </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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <h5>智能阅卷，多维度、可视化学情分析</h5>
-                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
-                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :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>
+      </imgCardLv2>
     </div>
 
+
     <!--  党建类课程案例  -->
     <div class="client-anli-box">
       <h4>党建类课程案例</h4>
@@ -138,7 +86,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
-import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 政府机构
@@ -146,7 +95,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "government",
   layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhengfujigou}),
@@ -160,6 +109,105 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '私有化专属服务器部署，数据加密更安全',
+            list: [
+              {
+                value: '将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全',
+              },
+              {
+                value: 'PC端与移动端无缝链接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务',
+              },
+            ],
+            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: '在线课程支持反复学习，实现从“了解”到“理解”的飞跃',
+              },
+              {
+                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: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                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: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -171,6 +219,15 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.client-fangan-box {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+    text-align: center;
+  }
+}
 </style>

pages/solution/medical.vue

@@ -38,68 +38,15 @@
       </ul>
     </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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <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>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <h5>智能阅卷，多维度、可视化学情分析</h5>
-                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
-                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  医疗行业类课程案例  -->
@@ -136,6 +83,7 @@ import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 医疗行业
@@ -143,7 +91,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "medical",
   layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode},
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.yiliaohangye}),
@@ -157,6 +105,109 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
     }
   },
   methods: {
@@ -168,6 +219,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.platform-products-services {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+  }
+  .btn-groups {
+    margin-top: 50px;
+  }
+}
 </style>

pages/solution/transportation.vue

@@ -37,75 +37,22 @@
       </ul>
     </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>
-                <onlineInformationBtn />
-              </div>
-            </div>
+      <template v-for="(item,index) in productList">
+        <img-card-lv2 :option="item" v-if="item.lv == 2" :key="index">
+          <div class="btn-groups">
+            <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
           </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>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="多种终端支持，随时随地考试"/>
-            </div>
+        </img-card-lv2>
+        <img-card-lv1 :option="item" v-if="item.lv == 1" :key="index">
+          <div class="btn-groups">
+            <onlineInformationBtn my-type="2" class="online-information-btn btn-item" />
           </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>基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。</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>
-                <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>
-                <onlineInformationBtn />
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <div class="products-services-content">
-                <span>04</span>
-                <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>
-                <onlineInformationBtn />
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+        </img-card-lv1>
+      </template>
     </div>
 
     <!--  交通运输类课程案例  -->
@@ -141,7 +88,9 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
-import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";
 
 /**
  * @ 解决方案 -> 交通运输
@@ -149,7 +98,7 @@ import desWithCode from "@/components/common/layout/desComp/desWithCode";
 export default {
   name: "transportation",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard, desWithCode},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard, desWithCode, imgCardLv2, imgCardLv1},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaotongyunshu}),
@@ -163,6 +112,135 @@ export default {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '高效智能的在线培训系统',
+            list: [
+              {
+                value: '支持在线课程、学习地图、直播教学、培训计划等强大的企业培训系统功能',
+              },
+              {
+                value: '支持多类型课件，图文、文档、视频、音频及站外链接任意选择，在线学习形式更丰富',
+              },
+              {
+                value: '一键设置课程关联考试，实时记录学时进度，让学员学习状况一目了然',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        },
+        {
+          content: {
+            title: '简单易上手的在线考试系统',
+            list: [
+              {
+                value: '考试系统使用方便，操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
+              },
+              {
+                value: '支持万人同时在线，超高并发安全稳定运行',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        },
+        {
+          content: {
+            title: '帮助企业构建自主课程体系',
+            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
+            list: [
+              {
+                value: '职业素养',
+              },
+              {
+                value: '领导能力',
+              },
+              {
+                value: '人力资源',
+              },
+              {
+                value: '市场营销',
+              },
+              {
+                value: '行政管理',
+              },
+              {
+                value: '财务管理',
+              },
+              {
+                value: '客服服务',
+              },
+              {
+                value: '产品运营',
+              },
+              {
+                value: '生产采购',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 1,
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require('~/static/codeImage/code-jingli.png'),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        }
+      ],
     }
   },
   methods: {
@@ -174,6 +252,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.platform-products-services {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 140px;
+    margin-bottom: 120px;
+  }
+  .btn-groups {
+    margin-top: 50px;
+  }
+}
 </style>