fix

+<template>
+    <Modal
+            v-model="showExample"
+            width="700"
+            title="色卡图片示例">
+        <div>
+            <div>
+                <div class="example-1"></div>
+                <div class="example-2"></div>
+                <div class="example-3"></div>
+                <div class="example-4"></div>
+                <div class="example-5"></div>
+            </div>
+            <div>
+                <span class="example-title">商品正面图</span>
+                <span class="example-title">商品反面图</span>
+                <span class="example-title">模特图</span>
+                <span class="example-title">男生频道封面图</span>
+                <span class="example-title">女生频道封面图</span>
+            </div>
+        </div>
+
+        <div slot="footer" style="text-align: center">
+            <Button type="primary" size="large"  @click="close">关闭</Button>
+        </div>
+    </Modal>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                showExample: false
+            }
+        },
+        methods: {
+          show() {
+              this.showExample = true;
+          },
+          close() {
+              this.showExample = false;
+          }
+        }
+    }
+</script>
+
+<style lang="scss">
+    @mixin exampleImg ($num: 1) {
+        display: inline-block;
+        width: 100px;
+        height: 150px;
+        border-radius: 3px;
+        background-image: url(../../../../images/example/#{$num}.png);
+        background-repeat: no-repeat;
+        margin: 15px 15px;
+    }
+
+    .example-1 {
+        @include exampleImg(1);
+    }
+
+    .example-2 {
+        @include exampleImg(2);
+    }
+
+    .example-3 {
+        @include exampleImg(3);
+    }
+
+    .example-4 {
+        @include exampleImg(4);
+    }
+
+    .example-5 {
+        @include exampleImg(5);
+    }
+
+    .example-title {
+        display: inline-block;
+        width: 130px;
+        text-align: center;
+    }
+</style>
\ No newline at end of file

@@ -209,12 +209,7 @@
             </Col>
         </Row>
 
-        <Modal
-                v-model="showExample"
-                title="色卡图片示例">
-            <p>自定义宽度，单位 px，默认 520px。</p>
-            <p>对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动<code>auto</code>。</p>
-        </Modal>
+        <ExampleModal ref="exampleModal"></ExampleModal>
     </div>
 </template>
 
@@ -223,6 +218,7 @@
 import api from 'product-create/api';
 import service from 'product-create/service';
 import serial from 'product-create/serialize';
+import ExampleModal from './example-modal.vue';
 
 export default {
     props: ['step', 'product'],
@@ -323,9 +319,11 @@ export default {
             this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = '';
         },
         onClickShowExample: function() {
-            console.log('fdsad');
-            this.showExample = true;
+            this.$refs.exampleModal.show();
         }
+    },
+    components: {
+        ExampleModal
     }
 };
 </script>

@@ -48,7 +48,7 @@
     import Operator from './Operator';
 
     export default {
-        name: 'ProducList',
+        name: 'ProductList',
         props: {
             cid: {
                 type: [Number, String],

@@ -78,7 +78,7 @@
 
                 this.$Modal.confirm({
                     title: '删除店铺商品分类',
-                    content: `你确定 删除 商品分类 ${row.categoryName} 么？`,
+                    content: `你确定 删除 商品分类 ${row.categoryName} 吗？`,
                     onOk() {
                         _this.deleteCategory(row.categoryId).then(() => {
                             _this.getData();