From 4c0010fc68feeafa519b7cdaef051c1a5d7cd012 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Mon, 18 Sep 2023 17:40:20 +0800
Subject: [PATCH] fix: page backgroundColor bug

---
 src/assets/styles/design.less | 16 ++++++++++++----
 src/assets/styles/main.less   |  8 ++++----
 src/views/Index.vue           |  6 ++++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/assets/styles/design.less b/src/assets/styles/design.less
index ff49f75..fc959f7 100644
--- a/src/assets/styles/design.less
+++ b/src/assets/styles/design.less
@@ -12,9 +12,11 @@
 
 @height2: 54px; // Appears 5 times
 
-#page-design-index {
+.page-design-bg-color {
   background-color: #4b678c;
   // background-color: #4682b4;
+}
+#page-design-index {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -124,10 +126,16 @@
     width: 1px;
     margin: 7px 0 0 18px;
   }
-  .shelter {
+  .shelter,
+  .shelter-bg {
     position: absolute;
-    box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
-    z-index: 8;
     pointer-events: none;
   }
+  .shelter {
+    box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
+    z-index: 8;
+  }
+  .shelter-bg {
+    background-color: #ffffff;
+  }
 }
diff --git a/src/assets/styles/main.less b/src/assets/styles/main.less
index 3d306ad..57ae0e5 100644
--- a/src/assets/styles/main.less
+++ b/src/assets/styles/main.less
@@ -35,12 +35,12 @@ body {
 &::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background-color: #ccd4de;
-  /*box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);*/
+  // box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
 }
 &::-webkit-scrollbar-track {
-  //background-color: #f0f1f3;
-  background-color: transparent;
-  border-radius: 3px;
+  background-color: #f0f1f3;
+  // background-color: transparent;
+  // border-radius: 3px;
 }
 
 input:-webkit-autofill,
diff --git a/src/views/Index.vue b/src/views/Index.vue
index fd1621a..e6b053d 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="page-design-index" ref="pageDesignIndex">
+  <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
     <div :style="style" class="top-nav">
       <div class="top-nav-wrap">
         <div class="top-left">
@@ -18,8 +18,10 @@
     <div class="page-design-index-wrap">
       <widget-panel></widget-panel>
       <design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
-        <!-- 用于挡住画布溢出部分，因为使用overflow有bug -->
+        <!-- 用于挡住画布溢出部分，因为使用overflow有bug. PS:如shadow没有透明度则可以完全遮挡元素 -->
         <div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
+        <!-- 提供一个背景图层以免遮挡穿帮 -->
+        <div class="shelter-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
       </design-board>
       <style-panel></style-panel>
     </div>