From eb26062043ff1e8962251b458af172823001c78e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 18 Aug 2022 18:15:51 +0800
Subject: [PATCH] =?UTF-8?q?style(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/panel/edit/ComponentWaitItem.vue    | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 2db5a00497..f6a45a6a65 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="component-item">
-    <div :style="commonStyle">
-      <mobile-check-bar v-if="mobileCheckBarShow" :element="config" />
+    <mobile-check-bar v-if="mobileCheckBarShow" :element="config" />
+    <div :style="commonStyle" class="inner-item">
+      <svg-icon v-if="svgInnerEnable" :style="{'color':this.config.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
       <de-out-widget
         v-if="config.type==='custom'"
         :id="'component' + config.id"
@@ -56,6 +57,17 @@ export default {
     }
   },
   computed: {
+    svgInnerEnable() {
+      return this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
+    },
+    mainSlotSvgInner() {
+      if (this.svgInnerEnable) {
+        return this.config.commonBackground.innerImage.replace('board/', '').replace('.svg', '')
+      } else {
+        return null
+      }
+    },
+
     commonStyle() {
       const style = {
         width: '100%',
@@ -69,13 +81,7 @@ export default {
           colorRGBA = hexColorToRGBA(this.config.commonBackground.color, this.config.commonBackground.alpha)
         }
         if (this.config.commonBackground.enable) {
-          if (this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') {
-            let innerImage = this.config.commonBackground.innerImage
-            if (this.screenShot) {
-              innerImage = innerImage.replace('svg', 'png')
-            }
-            style['background'] = `url(${innerImage}) no-repeat ${colorRGBA}`
-          } else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
+          if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
             style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat ${colorRGBA}`
           } else {
             style['background-color'] = colorRGBA
@@ -135,4 +141,15 @@ export default {
     height: 200px!important;
     position: relative;
   }
+
+  .inner-item {
+    position: relative;
+  }
+  .svg-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 </style>