fix: unable to display background image

src/views/bigscreen/ast/Designer.vue

@@ -183,12 +183,15 @@
         >
           <div
             ref="canvas"
-            class="c-designer__canvas has-bg"
-            :class="{ dragging }"
+            class="c-designer__canvas"
             :style="[transformStyles, styles]"
             @dragover.prevent
             @drop.prevent="widgetOnDrop"
           >
+            <div
+              class="c-designer__background has-bg"
+              :style="backgroundStyles"
+            />
             <div
               v-show="grid"
               class="c-designer__grid"
@@ -893,10 +896,10 @@ $drak: #242a30;
 
   &__canvas {
     position: relative;
-    overflow: visible;
     background-color: #000;
+    overflow: visible;
 
-    &::after {
+    &::before {
       content: "";
       position: absolute;
       top: 0;
@@ -906,24 +909,23 @@ $drak: #242a30;
       background-color: currentColor;
       z-index: -1;
     }
+  }
 
-    &.dragging::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 9;
-    }
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
   }
 
   &__grid {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    right: 0;
+    bottom: 0;
     background-size: 30px 30px, 30px 30px;
     background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px, transparent 0),
       linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);

src/views/bigscreen/ast/Viewer.vue

@@ -58,6 +58,10 @@
       class="c-viewer__canvas has-bg"
       :style="[transformStyles, styles]"
     >
+      <div
+        class="c-viewer__background has-bg"
+        :style="backgroundStyle"
+      />
       <widget
         v-for="(item, index) in widgets"
         :key="`${item.type}${index}`"
@@ -172,9 +176,10 @@ export default {
 
   &__canvas {
     position: relative;
+    background-color: #000;
     overflow: hidden;
 
-    &::after {
+    &::before {
       content: "";
       position: absolute;
       top: 0;
@@ -185,6 +190,15 @@ export default {
       z-index: -1;
     }
   }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
 }
 
 .c-tool {

src/views/bigscreen/ast/core/base.js

@@ -37,15 +37,23 @@ export default {
     },
     styles () {
       if (this.node) {
-        const { width, height, backgroundColor, backgroundImage } = this.node
+        const { width, height, backgroundColor } = this.node
         return {
           width: `${width}px`,
           height: `${height}px`,
-          color: backgroundColor,
+          color: backgroundColor
+        }
+      }
+      return null
+    },
+    backgroundStyles () {
+      if (this.node) {
+        const { backgroundImage } = this.node
+        return {
           'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0].keyName)}")` : 'none'
         }
       }
-      return {}
+      return null
     },
     widgets () {
       return this.node?.widgets || []

src/views/bigscreen/core/base.js

@@ -46,15 +46,23 @@ export default {
     },
     styles () {
       if (this.node) {
-        const { width, height, backgroundColor, backgroundImage } = this.node
+        const { width, height, backgroundColor } = this.node
         return {
           width: `${width}px`,
           height: `${height}px`,
-          color: backgroundColor,
+          color: backgroundColor
+        }
+      }
+      return null
+    },
+    backgroundStyles () {
+      if (this.node) {
+        const { backgroundImage } = this.node
+        return {
           'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0].keyName)}")` : 'none'
         }
       }
-      return {}
+      return null
     },
     widgets () {
       return this.node?.widgets || []

src/views/bigscreen/designer/index.vue

@@ -183,12 +183,15 @@
         >
           <div
             ref="canvas"
-            class="c-designer__canvas has-bg"
-            :class="{ dragging }"
+            class="c-designer__canvas"
             :style="[transformStyles, styles]"
             @dragover.prevent
             @drop.prevent="widgetOnDrop"
           >
+            <div
+              class="c-designer__background has-bg"
+              :style="backgroundStyles"
+            />
             <div
               v-show="grid"
               class="c-designer__grid"
@@ -819,10 +822,10 @@ $drak: #242a30;
 
   &__canvas {
     position: relative;
-    overflow: visible;
     background-color: #000;
+    overflow: visible;
 
-    &::after {
+    &::before {
       content: "";
       position: absolute;
       top: 0;
@@ -832,24 +835,23 @@ $drak: #242a30;
       background-color: currentColor;
       z-index: -1;
     }
+  }
 
-    &.dragging::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 9;
-    }
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
   }
 
   &__grid {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    right: 0;
+    bottom: 0;
     background-size: 30px 30px, 30px 30px;
     background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px, transparent 0),
       linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);

src/views/bigscreen/viewer/index.vue

@@ -60,6 +60,10 @@
       class="c-viewer__canvas has-bg"
       :style="[transformStyles, styles]"
     >
+      <div
+        class="c-viewer__background has-bg"
+        :style="backgroundStyle"
+      />
       <widget
         v-for="(item, index) in widgets"
         :key="`${item.type}${index}`"
@@ -174,9 +178,10 @@ export default {
 
   &__canvas {
     position: relative;
+    background-color: #000;
     overflow: hidden;
 
-    &::after {
+    &::before {
       content: "";
       position: absolute;
       top: 0;
@@ -187,6 +192,15 @@ export default {
       z-index: -1;
     }
   }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
 }
 
 .c-tool {