调整布局

components/common/layout/imgDes/imgCardLv1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mta-card-lv1" :class="classArr">
+  <div class="mta-card-lv1">
     <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}`">

components/common/layout/imgDes/imgCardLv2_exam.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="mta-card-lv2 client-container" :class="classArr">
+      <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>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="mta-card-content-h5 mta-hidden-sm">
+        <img :src="img.url">
+        <div class="card-info">
+          <h5>{{ title }}</h5>
+          <em></em>
+          <div class="mta-card-row" v-for="(rowItem,index) in tagesH5" :key="`H5-${index}`">
+            <i></i><span>{{ rowItem.value }}</span>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "imgCardLv2",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    num() {
+      return this.option.content.num;
+    },
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    },
+    classArr() {
+      return this.isRow ? ['client-container'] : []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv2 {
+  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 23px;
+    }
+    .card-info-num {
+      font-size: 36px;
+      font-weight: 500;
+      color: #00B96B;
+      margin-bottom: 16px;
+      display: block;
+    }
+  }
+
+
+  .mta-card-row {
+    margin-bottom: 23px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    text-align: left;
+
+
+    &:last-child{
+      margin-bottom: 0px;
+    }
+    i {
+      display: inline-block;
+      width:8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
+    }
+  }
+
+  @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: 18px;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

@@ -17,9 +17,9 @@
     </div>
 
     <!--  产品优势  -->
-    <div class="platform-products-services client-container">
+    <div class="platform-products-services">
       <h4 class="client-title">产品优势</h4>
-      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+      <imgCardLv2 class="my-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"/>
@@ -62,7 +62,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import chanPinTiYan from "~/components/common/chanPinTiYan";
-import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2";
+import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2_exam";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
 /**
@@ -445,5 +445,14 @@ export default {
   }
 }
 
+.platform-products-services {
+  .my-card:nth-child(3) {
+    background: #fafffc;
+  }
+  .my-card:nth-child(5) {
+    background: #fafffc;
+  }
+}
+
 
 </style>