修改增加新的分组控件

src/components/canvasShow/basics/productGroupList.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="productGroup-list warp" :class="'terminal' + terminal">
+    <h2 class="hom-title" :style="{textAlign:componentContent.textAlign}" v-if="componentContent.title">{{componentContent.title}}</h2>
+    <div class="content-warp" v-if="componentContent.showType == 1">
+      <div class="item" @click="jumpProductGroup(item)" v-for="(item) of componentContent.productGroupData" :key="item.id">
+        <div class="imgBox">
+            <img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.data.groupName">
+        </div>
+      </div>
+    </div>
+    <div class="content-parent-warp" v-if="componentContent.showType == 2">
+      <div class="content-list-warp">
+        <div class="item" @click="jumpProductGroup(item)" v-for="(item) of componentContent.productGroupData" :key="item.id">
+          <div class="imgBox">
+              <img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.data.groupName">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {funMixin} from '../config/mixin'
+  export default {
+    name: 'productGroupList',
+    mixins: [funMixin],
+    props: {
+      terminal: {
+        type: Number,
+        default: 4
+      },
+      componentContent: {
+        type: Object
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .productGroup-list{
+    padding: 20px 0;
+    .hom-title{
+      font-size: 22px;
+      color: #333;
+      line-height: 1em;
+      margin-bottom: 23px;
+      font-weight: bold;
+      text-align: center;
+    }
+    .content-warp{
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0px 40px 0px 30px;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      -ms-flex-line-pack: center;
+      align-content: center;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+
+      .item{
+        width: 25%;
+        height: auto;
+        padding-left: 10px;
+            
+        .imgBox {
+          position: relative;
+        }
+        img {
+          width: 100%;
+        }
+      }
+    }
+    .content-parent-warp{
+
+      display: -webkit-box;
+      margin: 0px 40px 0px 30px;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+      -webkit-box-pack: center;
+      -webkit-box-align: center;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      overflow-x: auto;
+      .content-list-warp{
+        width: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+
+        .item{
+          width: 230px;
+          height: auto;
+          padding-left: 10px;
+          
+          .imgBox {
+            position: relative;
+          }
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/canvasShow/componentMap.js

@@ -7,6 +7,7 @@ export const componentMap = [
     ['imageText', () => import('./basics/imageText')], // 图文
     ['brandList', () => import('./basics/brandList')], // 品牌列表
     ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['productGroupList', () => import('./basics/productGroupList')], // 分组列表
     ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
     ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
     ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
@@ -32,6 +33,7 @@ export const componentMap = [
     ['imageText', () => import('./basics/imageText')], // 图文
     ['brandList', () => import('./basics/brandList')], // 品牌列表
     ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['productGroupList', () => import('./basics/productGroupList')], // 分组列表
     ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
     ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
     ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
@@ -57,6 +59,7 @@ export const componentMap = [
     ['imageText', () => import('./basics/imageText')], // 图文
     ['brandList', () => import('./basics/brandList')], // 品牌列表
     ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['productGroupList', () => import('./basics/productGroupList')], // 分组列表
     ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
     ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
     ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航
@@ -83,6 +86,7 @@ export const componentMap = [
     ['imageText', () => import('./basics/imageText')], // 图文
     ['brandList', () => import('./basics/brandList')], // 品牌列表
     ['categoryList', () => import('./basics/categoryList')], // 品牌列表
+    ['productGroupList', () => import('./basics/productGroupList')], // 分组列表
     ['imageTextList', () => import('./basics/imageTextList')], // 图文列表
     ['assistDiv', () => import('./basics/assistDiv')], // 铺助分割
     ['imageTextNav', () => import('./basics/imageTextNav')], // 图文导航