配置优化

vincentzyc · vincentzyc · commit f80f21a448d6 · 2019-08-05T15:25:55.000+08:00
diff --git a/src/assets/css/themes.styl b/src/assets/css/themes.styl
@@ -20,9 +20,7 @@ $t3-base-color = #6e7786;
 
 .theme3 {
   position: relative;
-  width: 92%;
-  background-color: #fff;
-  margin: -50px auto 20px auto;
+  background: #fff;
   padding: 10px 0;
   box-shadow: 5px 5px 10px 0 rgba(116, 116, 116, 0.6), -5px 5px 10px 0 rgba(116, 116, 116, 0.6);
 }
diff --git a/src/assets/json/page-config.json b/src/assets/json/page-config.json
@@ -1,7 +1,7 @@
 {
   "pageConfig": {
     "title": "云忆网络",
-    "background": "#fff",
+    "backgroundColor": "#fff",
     "theme": null,
     "countId": null
   },
@@ -10,24 +10,24 @@
       "value": "theme1",
       "name": "主题1",
       "banner": "static/img/theme1.jpg",
-      "background": "#4a9bed",
+      "backgroundColor": "#4a9bed",
       "contentWidth": "100%",
       "borderRadius": false
     },
     {
       "value": "theme2",
       "name": "主题2",
       "banner": "static/img/theme2.jpg",
-      "background": "#707988",
+      "backgroundColor": "#707988",
       "contentWidth": "80%",
       "borderRadius": true
     },
     {
       "value": "theme3",
       "name": "主题3",
       "banner": "static/img/theme3.jpg",
-      "background": "#ffffff",
-      "contentWidth": "90%",
+      "backgroundColor": "#ffffff",
+      "margin": "-50px 20px 20px 20px",
       "borderRadius": true
     }
   ]
diff --git a/src/components/page-config.vue b/src/components/page-config.vue
@@ -7,7 +7,7 @@
             <el-input v-model="pageData.config.title"></el-input>
           </el-form-item>
           <el-form-item label="页面背景色">
-            <el-color-picker v-model="pageData.config.background"/>
+            <el-color-picker v-model="pageData.config.backgroundColor" />
           </el-form-item>
           <el-form-item label="页面统计ID">
             <el-input type="number" v-model="pageData.config.countId"></el-input>
@@ -21,7 +21,7 @@
 
         <el-collapse-item title="主题设置" name="theme" v-if="pageData.config.theme">
           <el-form-item label="图片上传">
-            <ImgUpload :value.sync="pageData.config.theme.banner"/>
+            <ImgUpload :value.sync="pageData.config.theme.banner" />
           </el-form-item>
           <el-form-item label="内容区域宽度" v-if="pageData.config.theme.hasOwnProperty('contentWidth')">
             <el-radio-group v-model="pageData.config.theme.contentWidth" size="mini">
@@ -34,6 +34,9 @@
           <el-form-item label="内容区域圆角" v-if="pageData.config.theme.hasOwnProperty('borderRadius')">
             <el-switch v-model="pageData.config.theme.borderRadius"></el-switch>
           </el-form-item>
+          <el-form-item label="内容区域位置（上 右 下 左 、空格隔开）" v-if="pageData.config.theme.hasOwnProperty('margin')">
+            <el-input v-model="pageData.config.theme.margin"></el-input>
+          </el-form-item>
         </el-collapse-item>
       </el-collapse>
     </el-form>
@@ -66,7 +69,7 @@ export default {
   methods: {
     setTheme(val) {
       this.pageData.config.theme = this.themes.find(item => val === item.value);
-      this.pageData.config.background = this.pageData.config.theme.background;
+      this.pageData.config.backgroundColor = this.pageData.config.theme.backgroundColor;
     }
   }
 }
diff --git a/src/components/widget-form.vue b/src/components/widget-form.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="widget-form-wrapper">
-    <div class="widget-form-container" :style="{background:pageData.config.background}">
+    <div class="widget-form-container" :style="{backgroundColor:pageData.config.backgroundColor}">
       <img v-if="theme" :src="themeBanner" alt="banner" width="100%" @click="setConfigTab()">
-      <widget-form-list list="formList" v-if="theme" :class="theme.value" :style="{width:theme.contentWidth,borderRadius:theme.borderRadius?'10px':'0'}"/>
+      <widget-form-list list="formList" v-if="theme" :class="theme.value" :style="{width:theme.contentWidth,margin:theme.margin,borderRadius:theme.borderRadius?'10px':'0'}"/>
       <widget-form-list list="list"/>
     </div>
   </div>
