新增页面背景图配置

vincentzyc · vincentzyc · commit 08a6f054c45f · 2019-08-05T16:30:10.000+08:00
diff --git a/src/assets/css/widget.styl b/src/assets/css/widget.styl
@@ -12,7 +12,10 @@ $primary-background-color = #d8e8fa;
     min-height: calc(100% - 40px);
     box-shadow: 0 2px 5px 1px rgba(124, 124, 124, 0.2);
     margin: 20px;
-    background: #fff;
+    background-color: #fff;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: 100% 100%;
 
     img {
       vertical-align: top;
@@ -285,7 +288,7 @@ $primary-background-color = #d8e8fa;
       }
     }
 
-    .wg-splitLine .splitLine-hr{
+    .wg-splitLine .splitLine-hr {
       border: 0 none;
       border-top: 1px solid #d3d3d3;
     }
diff --git a/src/assets/json/page-config.json b/src/assets/json/page-config.json
@@ -2,6 +2,7 @@
   "pageConfig": {
     "title": "云忆网络",
     "backgroundColor": "#fff",
+    "backgroundImage": null,
     "theme": null,
     "countId": null
   },
diff --git a/src/components/page-config.vue b/src/components/page-config.vue
@@ -9,6 +9,9 @@
           <el-form-item label="页面背景色">
             <el-color-picker v-model="pageData.config.backgroundColor" />
           </el-form-item>
+          <el-form-item label="页面背景图片">
+            <ImgUpload :value.sync="pageData.config.backgroundImage" />
+          </el-form-item>
           <el-form-item label="页面统计ID">
             <el-input type="number" v-model="pageData.config.countId"></el-input>
           </el-form-item>
diff --git a/src/components/widget-form.vue b/src/components/widget-form.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="widget-form-wrapper">
-    <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,margin:theme.margin,borderRadius:theme.borderRadius?'10px':'0'}"/>
-      <widget-form-list list="list"/>
+    <div
+      class="widget-form-container"
+      :style="{backgroundColor:pageData.config.backgroundColor,backgroundImage:`url(${pageData.config.backgroundImage})`}"
+    >
+      <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,margin:theme.margin,borderRadius:theme.borderRadius?'10px':'0'}"
+      />
+      <widget-form-list list="list" />
     </div>
   </div>
 </template>
@@ -22,7 +30,7 @@ export default {
   },
   computed: {
     themeBanner() {
-      if (this.theme.banner.includes("http://")||this.theme.banner.includes("https://")) {
+      if (this.theme.banner.includes("http://") || this.theme.banner.includes("https://")) {
         return this.theme.banner;
       }
       return this.BASE_URL + this.theme.banner;

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,10 @@ $primary-background-color = #d8e8fa;`
`12`	`12`	`min-height: calc(100% - 40px);`
`13`	`13`	`box-shadow: 0 2px 5px 1px rgba(124, 124, 124, 0.2);`
`14`	`14`	`margin: 20px;`
`15`		`- background: #fff;`
	`15`	`+ background-color: #fff;`
	`16`	`+ background-repeat: no-repeat;`
	`17`	`+ background-position: 0 0;`
	`18`	`+ background-size: 100% 100%;`
`16`	`19`
`17`	`20`	`img {`
`18`	`21`	`vertical-align: top;`
`@@ -285,7 +288,7 @@ $primary-background-color = #d8e8fa;`
`285`	`288`	`}`
`286`	`289`	`}`
`287`	`290`
`288`		`- .wg-splitLine .splitLine-hr{`
	`291`	`+ .wg-splitLine .splitLine-hr {`
`289`	`292`	`border: 0 none;`
`290`	`293`	`border-top: 1px solid #d3d3d3;`
`291`	`294`	`}`