修改

src/components/sallCenter/plugin/rubik.vue

@@ -12,6 +12,7 @@
     cursor: pointer;
     color: #c9c9c9;
     z-index: 11;
+    background-color: #fff;
   }
 
   .diy-component-preview {
@@ -78,8 +79,9 @@
         style="right: -25px; top: 30px;"></el-button>
     </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="diy-component-preview" :style="{backgroundColor:rubData.data.background}">
+        <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"
@@ -142,6 +144,13 @@
                   </el-form-item>
                 </el-col>
               </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="背景色">
+                    <el-color-picker v-model="rubData.data.background"></el-color-picker>
+                  </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)"

src/components/sallCenter/templateEdit.vue

@@ -651,7 +651,8 @@
                 top:0, // 上边距
                 right:0, //右边距
                 bottom:0, //下边距
-                left:0 //左边距
+                left:0, //左边距
+                background:'', //背景颜色
               }
             }
             this.dataList.push(rubObj);