update

components/common/applyBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-bind="$attrs" @click="btnClick"> 申请方案 </span>
+  <span class="btn" v-bind="$attrs" @click="btnClick"> 申请方案 </span>
 </template>
 
 <script>
@@ -32,6 +32,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.btn {
+  width: 154px;
+  height: 47px;
+  background: #00b96b;
+  border-radius: 24px;
+  padding: 10px 30px;
+  color: #fff;
 
+}
 </style>

components/common/freeTrialBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-bind="$attrs" @click="btnClick"> 免费试用 </span>
+  <span class="btn" v-bind="$attrs" @click="btnClick"> 免费试用 </span>
 </template>
 
 <script>
@@ -52,6 +52,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.btn {
+  width: 154px;
+  height: 47px;
+  background: #00b96b;
+  border-radius: 24px;
+  padding: 10px 30px;
+  color: #fff;
 
+}
 </style>

components/common/layout/imgDes/imgCardLv1.vue

@@ -8,14 +8,15 @@
         <div class="mta-card-row" v-for="(rowList,index) in tagesPc" :key="`pc-${index}`">
           <template v-for="(des,ind) in rowList">
             <!--    站位div    -->
-            <span v-if="des.empty" :key="ind"></span>
+            <span class="mta-card-row-item" v-if="des.type == 'empty'" :key="ind"></span>
             <span v-else class="mta-card-row-item" :key="ind"><i></i><span>{{des.value}}</span></span>
           </template>
         </div>
-      </div>s
+        <slot></slot>
+      </div>
     </div>
     <div class="mta-card-content-h5 mta-hidden-sm">
-      <img :src="img">
+      <img :src="img.url">
       <div class="card-info">
         <h5>{{title}}</h5>
         <p>{{description}}</p>
@@ -26,6 +27,7 @@
             <span :key="ind"><i></i><span>{{des.value}}</span></span>
           </template>
         </div>
+        <slot></slot>
       </div>
     </div>
   </div>
@@ -101,6 +103,10 @@ export default {
 .mta-card-lv1 {
   .mta-card-content-pc {
     display: flex;
+    img {
+      width: 480px;
+      height: 370px;
+    }
   }
 
   .img-left {
@@ -130,6 +136,7 @@ export default {
       color: #333;
       font-weight: 500;
       text-align: left;
+      margin-bottom: 30px;
     }
   }
 
@@ -137,6 +144,8 @@ export default {
     font-size: 14px;
     font-weight: 500;
     color: #333;
+    width: 160px;
+    margin-bottom: 24px;
 
     i {
       display: inline-block;
@@ -146,5 +155,9 @@ export default {
       margin-right: 13px;
     }
   }
+
+  .mta-card-row {
+    display: flex;
+  }
 }
 </style>

components/common/onlineInformationBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span @click="btnClick"> 在线咨询 </span>
+  <span class="btn" @click="btnClick"> 在线咨询 </span>
 
 </template>
 
@@ -20,6 +20,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.btn {
+  width: 154px;
+  height: 47px;
+  color: #00b96b;
+  border-radius: 24px;
+  padding: 10px 30px;
+  background: #fff;
+  border: 1px solid #00b96b;
 
+}
 </style>

pages/index.vue

@@ -36,95 +36,18 @@
     </div>
 
     <!-- 产品和服务 -->
-    <div class="client-products-services">
-      <div class="client-container">
-        <h4 class="client-title">产品和服务</h4>
-        <div class="products-services-box">
-          <div class="products-services-content">
-            <h5>在线考试系统一建立无纸化考试通道</h5>
-            <p>深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发</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">360°防作弊监考</p>
-            <p class="p-before-circle">自动阅卷判卷</p>
-            <p class="p-before-circle">成绩统计查询</p>
-            <p class="p-before-circle">证书办法打印</p>
-            <div class="client-btn-box">
-              <div rel="nofollow" class="client-default-Btn">
-                <freeTrialBtn myType="kaoshi"/>
-              </div>
-              <span class="client-default-Btn">
-                 <onlineInformationBtn />
-              </span></div>
-          </div>
-          <img :src="productsImg1" alt="易用/稳定/高效的在线考试系统"/>
-        </div>
-        <div class="products-services-box products-contrary-box">
-          <div class="products-services-content">
-            <h5>在线培训系统 一 3步帮您搭建企业专属培训系统</h5>
-            <p>专注企业员工提升解决方案，不止是简单的培训系统开发，1V1部署资讯与百人课程开发团队，帮您解决后顾之忧。</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>
-            <div class="client-btn-box">
-              <div rel="nofollow" class="client-default-Btn">
-                <freeTrialBtn myType="peixun"/>
-              </div>
-              <span class="client-default-Btn">
-                <onlineInformationBtn />
-              </span></div>
-          </div>
-          <img :src="productsImg2" alt="高灵活/多种学习场景的在线培训学习系统"/>
-        </div>
-        <div class="products-services-box">
-          <img :src="productsImg3" alt="数字课程开发服务"/>
-          <div class="products-services-content">
-            <h5>课程定制开发一打造专业定制化服务</h5>
-            <p>百人制作团队，涉及900个行业，深入各大领域，专注课程开发9年，累积定制3万+小时课程</p>
-            <p class="p-before-circle">E-learning课程</p>
-            <p class="p-before-circle">微课程制作</p>
-            <p class="p-before-circle">宣传片制作</p>
-            <p class="p-before-circle">PPT定制</p>
-            <p class="p-before-circle">情景动画开发</p>
-            <p class="p-before-circle">H5平面设计</p>
-            <p class="p-before-circle">视频后期制作</p>
-            <div class="client-btn-box">
-              <div class="client-default-Btn">
-                <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5" />
-              </div>
-              <span class="client-default-Btn"><onlineInformationBtn /></span></div>
-          </div>
-        </div>
-        <div class="products-services-box">
-          <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>
-            <div class="client-btn-box">
-              <div class="client-default-Btn">
-                <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5" />
-              </div>
-              <span class="client-default-Btn"><onlineInformationBtn /></span>
-            </div>
-          </div>
-          <img :src="productsImg3" alt="数字课程开发服务"/>
+    <div class="client-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">
+
+        <div class="btn-groups">
+          <applyBtn class="apply-btn btn-item" v-if="item.shenqing" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+          <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>
-      </div>
+
+
+      </imgCardLv1>
     </div>
 
     <!-- 超过10万家客户的信任之选 -->
@@ -170,6 +93,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import applicationDialog from "~/components/common/applicationDialog";
 import newsComp from "~/components/common/newsComp";
+import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
 /**
@@ -206,6 +130,172 @@ export default {
   },
   data() {
     return {
+      productList: [
+        {
+          content: {
+            title: '在线考试系统一建立无纸化考试通道',
+            des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
+            list: [
+              {
+                value: '试题批量导入',
+              },
+              {
+                value: '多种题型支持',
+              },
+              {
+                value: '随机组卷抽题',
+              },
+              {
+                value: '考试时间设定',
+              },
+              {
+                value: '360°防作弊监考',
+              },
+              {
+                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: '在线培训系统 一 3步帮您搭建企业专属培训系统',
+            des: '专注企业员工提升解决方案，不止是简单的培训系统开发，1V1部署资讯与百人课程开发团队，帮您解决后顾之忧。',
+            list: [
+              {
+                value: '在线直播教学',
+              },
+              {
+                value: '课后直播回放',
+              },
+              {
+                value: '阶段测评考试',
+              },
+              {
+                value: '课堂互动交流',
+              },
+              {
+                value: '视频课程教学',
+              },
+              {
+                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: '课程定制开发一打造专业定制化服务',
+            des: '百人制作团队，涉及900个行业，深入各大领域，专注课程开发9年，累积定制3万+小时课程',
+            list: [
+              {
+                value: 'E-learning课程',
+              },
+              {
+                value: '微课程制作',
+              },
+              {
+                value: '宣传片制作',
+              },
+              {
+                value: 'PPT定制',
+              },
+              {
+                value: '情景动画开发',
+              },
+              {
+                value: 'H5平面设计',
+              },
+              {
+                value: '视频后期制作',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 1,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kecheng'
+        },
+        {
+          content: {
+            title: '通用课程资源一帮助企业构建自主课程体系',
+            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
+            list: [
+              {
+                value: '职业素养',
+              },
+              {
+                value: '领导能力',
+              },
+              {
+                value: '人力资源',
+              },
+              {
+                value: '市场营销',
+              },
+              {
+                value: '行政管理',
+              },
+              {
+                value: '财务管理',
+              },
+              {
+                value: '客服服务',
+              },
+              {
+                value: '产品运营',
+              },
+              {
+                value: '生产采购',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require('~/static/codeImage/code_jingli.png'),
+            order: 2,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kecheng'
+        }
+      ],
       SystemWidthFlag: false,// 判断是否是手机端，默认为false，默认为PC端
       topCarousels2: [],
       // 产品和服务
@@ -477,6 +567,7 @@ export default {
 
   },
   components: {
+    imgCardLv1,
     applyBtn,
     freeTrialBtn,
     onlineInformationBtn,
@@ -578,4 +669,32 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.client-index-page {
+
+  .apply-btn {
+    margin-right: 18px;
+    margin-top: 14px;
+  }
+
+  .free-train-btn {
+    margin-right: 18px;
+    margin-top: 14px;
+  }
+
+  .online-information-btn {
+    margin-top: 14px;
+  }
+
+  .img-card {
+    margin-bottom: 250px;
+
+    .btn-groups {
+      margin-top: 48px;
+    }
+  }
+
+}
+
+
+</style>