调整布局

components/common/layout/imgDes/imgCardLv1_index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mta-card-lv1" :class="classArr">
+    <div class="mta-card-lv1 client-container">
       <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}`">
@@ -100,9 +100,6 @@ export default {
       }
       return result;
     },
-    classArr() {
-      return this.isRow ? ['client-container'] : []
-    }
   }
 }
 </script>

components/common/layout/imgDes/imgCardLv3.vue

@@ -1,6 +1,5 @@
 <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}`">
@@ -9,8 +8,6 @@
         <slot></slot>
       </div>
     </div>
-
-
     <div class="mta-card-content-h5 mta-hidden-sm">
       <img :src="img.url">
       <div class="card-info">
@@ -20,7 +17,6 @@
         <slot></slot>
       </div>
     </div>
-
   </div>
 </template>
 

components/common/layout/imgDes/imgCardLv3_peixun.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="mta-card-lv3 client-container">
+      <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
+        <img :style="`order:${img.order}`" :src="img.url">
+        <div class="card-info" :style="`order: ${contentOrder}`">
+          <h5>{{ title }}</h5>
+          <p>{{des}}</p>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="mta-card-content-h5 mta-hidden-sm">
+        <img :src="img.url">
+        <div class="card-info">
+          <h5>{{ title }}</h5>
+          <em></em>
+          <p>{{des}}</p>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv3",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    des() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv3 {
+  padding: 60px 0 60px 0;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 480px;
+      height: 370px;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    width: 490px;
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin: 0 0 36px;
+    }
+
+    p {
+      font-size: 14px;
+      color: #333;
+      line-height: 24px;
+      text-align: justify;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 3%;
+    padding: 20px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+        h5 {font-size: 16px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+
+  }
+}
+</style>

pages/product/exam.vue

@@ -19,7 +19,7 @@
     <!--  产品优势  -->
     <div class="platform-products-services">
       <h4 class="client-title">产品优势</h4>
-      <imgCardLv2 class="my-card" :option="item" v-for="(item,index) in productList" :key="index">
+      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index">
         <div class="btn-groups">
           <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
           <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
@@ -446,10 +446,10 @@ export default {
 }
 
 .platform-products-services {
-  .my-card:nth-child(3) {
+  .img-card:nth-child(3) {
     background: #fafffc;
   }
-  .my-card:nth-child(5) {
+  .img-card:nth-child(5) {
     background: #fafffc;
   }
 }

pages/product/peixun.vue

@@ -24,9 +24,9 @@
 
 
     <!--  功能强大的培训系统  -->
-    <div class="platform-products-services client-container">
+    <div class="platform-products-services">
       <h4 class="client-title">功能强大的培训系统</h4>
-      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
+      <imgCardLv3 class="img-card" :option="item" v-for="(item,index) in productList" :key="index">
         <div class="btn-groups">
           <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
           <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
@@ -81,7 +81,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import chanPinTiYan from "~/components/common/chanPinTiYan";
-import imgCardLv3 from "@/components/common/layout/imgDes/imgCardLv3";
+import imgCardLv3 from "@/components/common/layout/imgDes/imgCardLv3_peixun";
 import {BannerImgs , classifys} from "~/defaultConfig";
 
 /**
@@ -207,7 +207,13 @@ export default {
 }
 
 .platform-products-services {
-
+  margin-top: 80px;
+  .img-card:nth-child(2) {
+    background: #fafffc;
+  }
+  .img-card:nth-child(4) {
+    background: #fafffc;
+  }
   .btn-groups {
     margin-top: 48px;
     .btn-item {
@@ -220,7 +226,8 @@ export default {
     font-weight: 800;
     font-size: 30px;
     color: #333;
-    margin-bottom: 100px;
+    padding-bottom: 100px;
+    background: #fafffc;
   }
 }