修改

src/components/sallCenter/plugin/rubik.vue

 <style>
   .diy-rubik .layout {
-    width: 750px;
+    /* width: 750px; */
     position: relative;
   }
 
@@ -79,6 +79,7 @@
     </div>
     <div class="diy-rubik">
       <div class="diy-component-preview">
+        <div :style="{marginTop:rubData.data.top+'px',marginRight:rubData.data.right+'px',marginBottom:rubData.data.bottom+'px',marginLeft:rubData.data.left+'px'}">
           <div class="layout" :style="blockStyle(rubData.data.style)" :class="{'defaultImg':rubData.data.style==8}"
             @click="blockClick">
             <div class="rubik" style="width:100%;height:100%;" @mousemove="blockMove"
@@ -100,10 +101,47 @@
             </template>
           </div>
         </div>
+      </div>
       <div class="diy-component-edit" v-if="rubData.isCked">
         <el-form label-width="100px">
           <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="图片样式" name="first">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="上边距">
+                    <el-input type="text" size="small" @keyup.native="checkInteger(rubData.data,'top','-')"
+                      v-model="rubData.data.top" @change="getminNum()">
+                      <template slot="append">px</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="下边距">
+                    <el-input type="text" size="small" @keyup.native="checkInteger(rubData.data,'bottom','-')"
+                      v-model="rubData.data.bottom" @change="getminNum()">
+                      <template slot="append">px</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="左边距">
+                    <el-input type="text" size="small" @keyup.native="checkInteger(rubData.data,'left','-')"
+                      v-model="rubData.data.left" @change="getminNum()">
+                      <template slot="append">px</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="右边距">
+                    <el-input type="text" size="small" @keyup.native="checkInteger(rubData.data,'right','-')"
+                      v-model="rubData.data.right" @change="getminNum()">
+                      <template slot="append">px</template>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
               <el-form-item label="样式">
                 <div flex="dir:left" style="flex-wrap: wrap;">
                   <div class="block" @click="selectStyle(index)" :class="blockActive(index)"
@@ -161,7 +199,8 @@
               </template>
               <el-form-item label="热区划分">
                 <choiceArea :multiple="true" :pic-list="rubData.data.list" :hotspot-array="rubData.data.hotspot"
-                  width="750px" :height="rubData.data.height + 'px'" @confirm="selectHotspot" :is-link="true" :chooseType="'rubik'">
+                  width="750px" :height="rubData.data.height + 'px'" @confirm="selectHotspot" :is-link="true"
+                  :chooseType="'rubik'">
                   <el-button size="mini">划分热区</el-button>
                 </choiceArea>
               </el-form-item>
@@ -739,6 +778,20 @@
       //点击触发父组件删除
       delPlugin() {
         this.$emit('comDelPlugin', this.index);
+      },
+      getminNum(){
+        if(this.rubData.data.top==''){
+            this.rubData.data.top=0;
+        }
+        if(this.rubData.data.right==''){
+            this.rubData.data.right=0;
+        }
+        if(this.rubData.data.bottom==''){
+            this.rubData.data.bottom=0;
+        }
+        if(this.rubData.data.left==''){
+            this.rubData.data.left=0;
+        }
       }
     },
     updated() {
@@ -784,7 +837,7 @@
           let block = this.rubData.data.list[i];
           block = this.getStyle(block, this.rubData.data);
         }
-      },
+      }
     },
     mounted() {
 

src/components/sallCenter/plugin/search.vue

@@ -9,7 +9,8 @@
         style="right: -25px; top: 30px;"></el-button>
     </div>
     <div class="diy-component-preview">
-      <div class="diy-search" :style="{background:searchData.data.background}">
+      <div class="diy-search" :style="{background:searchData.data.background,marginLeft:searchData.data.left+'px',
+      marginRight:searchData.data.right+'px',marginTop:searchData.data.top+'px',marginBottom:searchData.data.bottom+'px'}">
         <div
           :style="{background:searchData.data.color,borderRadius:searchData.data.radius+'px',color:searchData.data.textColor,textAlign:searchData.data.textPosition}">
           {{searchData.data.placeholder}}
@@ -44,6 +45,26 @@
           <el-radio v-model="searchData.data.textPosition" label="left">居左</el-radio>
           <el-radio v-model="searchData.data.textPosition" label="right">居右</el-radio>
         </el-form-item>
+        <el-form-item label="上边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'top','-')" v-model="searchData.data.top" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="下边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'bottom','-')" v-model="searchData.data.bottom" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="左边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'left','-')" v-model="searchData.data.left" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="右边距">
+          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'right','-')" v-model="searchData.data.right" @change="getminNum()">
+            <template slot="append">px</template>
+          </el-input>
+        </el-form-item>
       </el-form>
     </div>
   </div>
@@ -66,7 +87,20 @@
       delPlugin() {
         this.$emit('comDelPlugin', this.index);
       },
-
+      getminNum(){
+        if(this.searchData.data.top==''){
+            this.searchData.data.top=0;
+        }
+        if(this.searchData.data.right==''){
+            this.searchData.data.right=0;
+        }
+        if(this.searchData.data.bottom==''){
+            this.searchData.data.bottom=0;
+        }
+        if(this.searchData.data.left==''){
+            this.searchData.data.left=0;
+        }
+      }
     },
     mounted() {}
   };

src/components/sallCenter/templateEdit.vue

@@ -526,7 +526,11 @@
                 radius: 4, //圆角
                 placeholder: '搜索', //提示文字
                 textColor: '#555555', //文字颜色
-                textPosition: "left" //文字位置
+                textPosition: "left", //文字位置
+                top:0, //上边距
+                right:0, //右边距
+                bottom:0, //下边距
+                left:0, //左边距
               }
             }
             this.dataList.push(searchObj);
@@ -643,7 +647,11 @@
                 w: 1, //选中的第几张图 对应的style_list里的w
                 h: 1, //选中的第几张图 对应的style_list里的h
                 list: [], //选中的第几张图的小区域对应的数据
-                hotspot: [] //热区划分
+                hotspot: [], //热区划分
+                top:0, // 上边距
+                right:0, //右边距
+                bottom:0, //下边距
+                left:0 //左边距
               }
             }
             this.dataList.push(rubObj);