update

components/common/layout/desComp/gangweiList.vue

@@ -7,7 +7,7 @@
       <template v-for="(des,ind) in rowList">
         <!--    站位div    -->
         <div v-if="des.type === 'empty'"></div>
-        <iconGangwei class="my-icon"  :key="ind" :des="des" :style="iconStylePc"></iconGangwei>
+        <iconGangwei v-else class="my-icon"  :key="ind" :des="des" :style="iconStylePc"></iconGangwei>
       </template>
     </div>
     <div class="gangwei-row mta-hidden-sm cur-h5" v-for="(rowList,index) in myListH5" :key="`h5${index}`">

components/common/layout/imgDes/imgCardLv1.vue

@@ -1,11 +1,25 @@
 <template>
   <div class="mta-card-lv1">
-    <div class="mta-card-content-pc mta-hidden-xs">
+    <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 v-if="des.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
+    </div>
+    <div class="mta-card-content-h5 mta-hidden-sm">
       <img :src="img">
       <div class="card-info">
         <h5>{{title}}</h5>
         <p>{{description}}</p>
-        <div class="mta-card-row" v-for="(rowList,index) in tages" :key="`pc-${index}`">
+        <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`pc-${index}`">
           <template v-for="(des,ind) in rowList">
             <!--    站位div    -->
             <span v-if="des.empty" :key="ind"></span>
@@ -14,10 +28,6 @@
         </div>
       </div>
     </div>
-    <div class="mta-card-content-h5 mta-hidden-sm">
-      <img src="#">
-      <div class="card-info"></div>
-    </div>
   </div>
 </template>
 
@@ -25,29 +35,35 @@
 export default {
   name: "imgCardLv1",
   props: {
-    img: {
-      type: String,
-      required: true,
-    },
     option: {
       type: Object,
       required: true,
     },
-    col: {
+    colPc: {
+      type: Number,
+      default: 3
+    },
+    colH5: {
       type: Number,
       default: 3
     }
   },
   computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
     title() {
-      return this.option.title;
+      return this.option.content.title;
     },
     description() {
-      return this.option.des;
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
     },
-    tages() {
-      const count = this.col;
-      const list = this.option.list;
+    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++) {
@@ -59,11 +75,76 @@ export default {
         }
         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;
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.mta-card-lv1 {
+  .mta-card-content-pc {
+    display: flex;
+  }
+
+  .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;
+      color: #333;
+      font-weight: 500;
+      text-align: left;
+    }
+  }
+
+  .mta-card-row-item {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+
+    i {
+      display: inline-block;
+      width:13px;
+      height: 13px;
+      background: #00b96b;
+      margin-right: 13px;
+    }
+  }
+}
 </style>

pages/testPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <imgCardLv1 :img="img" :option="option"></imgCardLv1>
+  <imgCardLv1 :option="option"></imgCardLv1>
 </template>
 
 <script>
@@ -12,36 +12,42 @@ export default {
   },
   data() {
     return {
-      img: require('~/static/codeImage/code_jingli.png'),
       option: {
-        title: '在线考试系统一建立无纸化考试通道',
-        des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
-        list: [
-          {
-            value: '试题批量导入',
-          },
-          {
-            value: '多种题型支持',
-          },
-          {
-            value: '随机组卷抽题',
-          },
-          {
-            value: '考试时间设定',
-          },
-          {
-            value: '360°防作弊监考',
-          },
-          {
-            value: '自动阅卷判卷',
-          },
-          {
-            value: '成绩统计查询',
-          },
-          {
-            value: '证书颁发打印',
-          },
-        ]
+        content: {
+          title: '在线考试系统一建立无纸化考试通道',
+          des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
+          list: [
+            {
+              value: '试题批量导入',
+            },
+            {
+              value: '多种题型支持',
+            },
+            {
+              value: '随机组卷抽题',
+            },
+            {
+              value: '考试时间设定',
+            },
+            {
+              value: '360°防作弊监考',
+            },
+            {
+              value: '自动阅卷判卷',
+            },
+            {
+              value: '成绩统计查询',
+            },
+            {
+              value: '证书颁发打印',
+            },
+          ],
+          order: 1,
+        },
+        img: {
+          url: require('~/static/codeImage/code_jingli.png'),
+          order: 2,
+        }
       }
     }
   }