bug 修改

components/common/layout/imgDes/imgCardLv1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mta-card-lv1">
+  <div class="mta-card-lv1" :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}`">
@@ -24,8 +24,8 @@
         <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
           <template v-for="(des,ind) in rowList">
             <!--    站位div    -->
-            <span v-if="des.empty" :key="ind"></span>
-            <span :key="ind" class="mta-card-row-item"><i></i><span>{{des.value}}</span></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>
         <slot></slot>

components/common/layout/imgDes/imgCardLv1_index.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="mta-card-lv1" :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}`">
+          <h5>{{ title }}</h5>
+          <p class="card-des">{{ description }}</p>
+          <div class="mta-card-row" v-for="(rowList,index) in tagesPc" :key="`pc-${index}`">
+            <template v-for="(des,ind) in rowList">
+              <!--    站位div    -->
+              <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>
+          <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 class="card-des" v-if="description">{{ description }}</p>
+          <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
+            <template v-for="(des,ind) in rowList">
+              <!--    站位div    -->
+              <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>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "imgCardLv1",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+    colPc: {
+      type: Number,
+      default: 3
+    },
+    colH5: {
+      type: Number,
+      default: 3
+    },
+    isRow: Boolean
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    description() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      const count = this.colPc;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    tagesH5() {
+      const count = this.colH5;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    classArr() {
+      return this.isRow ? ['client-container'] : []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv1 {
+  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 {
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin-top: 40px;
+      margin-bottom: 30px;
+    }
+
+    .card-des {
+      font-size: 14px;
+      line-height: 24px;
+      color: #333;
+      font-weight: 500;
+      text-align: left;
+      margin-bottom: 30px;
+    }
+  }
+
+  .mta-card-row-item {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    width: 160px;
+    margin-bottom: 24px;
+
+    i {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span {
+      line-height: 24px;
+    }
+  }
+
+  .mta-card-row {
+    display: flex;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+
+      .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;
+        }
+      }
+
+      .mta-card-row {
+        margin-bottom: 10px;
+
+        > span {
+          width: 44%;
+          font-size: 14px;
+          margin: 0 3%;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

pages/index.vue

@@ -48,9 +48,9 @@
     </div>
 
     <!-- 产品和服务 -->
-    <div class="client-products-services client-container">
+    <div class="client-products-services">
       <h4 class="client-title">产品和服务</h4>
-      <imgCardLv1 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3"
+      <imgCardLv1 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :is-row="true"
                   :col-h5="2">
 
         <div class="btn-groups">
@@ -139,7 +139,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 imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1_index";
 import selectDialog from "~/components/common/selectDialog";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
@@ -493,6 +493,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.client-products-services {
+  .img-card:nth-child(2) {
+    background: #fafffc;
+  }
+  .img-card:nth-child(4) {
+    background: #fafffc;
+  }
+}
+
+
 .client-index-page {
   .free-train-btn, .apply-btn {
     margin-right: 16px;