工具箱透明背景

src/views/block/Blockly.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- 智能台灯 -->
-  <div v-if="showLampPreview" class="desk-lamp-container">
+  <div class="desk-lamp-container">
     <!-- 标题框 -->
     <div class="desk-lamp-title-box">
-      <div class="desk-lamp-box-icon" @click="goBack">
+      <div v-if="showLampPreview" class="desk-lamp-box-icon" @click="goBack">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         返回虚拟实验室
       </div>
@@ -51,7 +51,7 @@
 
 
   <!-- Blockly编程界面 -->
-  <div v-show="!showLampPreview" class="container">
+  <div v-show="!showLampPreview" class="container code-overlay">
     <!-- 返回智能台灯 -->
     <div class="title-box">
       <div class="box-icon" @click="goLabShow">
@@ -1618,19 +1618,26 @@ const showStatus = (message, type = 'success') => {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
+/* 代码覆盖层样式 */
+.code-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  background-color: rgba(255, 255, 255, 0.9);
+  // backdrop-filter: blur(5px);
+  overflow: auto;
+}
+
 .container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: url('@/assets/images/desklamp.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  /* 添加黑色透明遮挡层 */
-  background-color: rgba(0, 0, 0, 0.5);
-  background-blend-mode: overlay;
+  background: transparent;
   overflow-y: auto;
 }
 /* 自定义滚动条样式 */

src/views/block/Blockly2.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- 智能台灯 -->
-  <div v-if="showLampPreview" class="desk-lamp-container">
+  <div  class="desk-lamp-container">
     <!-- 标题框 -->
     <div class="desk-lamp-title-box">
-      <div class="desk-lamp-box-icon" @click="goBack">
+      <div v-if="showLampPreview" class="desk-lamp-box-icon" @click="goBack">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         返回虚拟实验室
       </div>
@@ -60,7 +60,7 @@
 
 
   <!-- Blockly编程界面 -->
-  <div v-show="!showLampPreview" class="container">
+  <div v-show="!showLampPreview" class="container code-overlay">
     <!-- 返回智能台灯 -->
     <div class="title-box">
       <div class="box-icon" @click="goLabShow">
@@ -1857,6 +1857,18 @@ const showStatus = (message, type = 'success') => {
   box-sizing: border-box;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+/* 代码覆盖层样式 */
+.code-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  background-color: rgba(255, 255, 255, 0.9);
+  // backdrop-filter: blur(5px);
+  overflow: auto;
+}
 
 .container {
   position: fixed;
@@ -1864,13 +1876,12 @@ const showStatus = (message, type = 'success') => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: url('@/assets/images/desklamp.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  /* 黑色透明遮挡层 */
-  background-color: rgba(0, 0, 0, 0.5);
-  background-blend-mode: overlay;
+  // background-image: url('@/assets/images/desklamp.png');
+  background: transparent;
+  // background-size: cover;
+  // background-position: center;
+  // background-repeat: no-repeat;
+  // background-blend-mode: overlay;
   overflow-y: auto;
 }
 /* 自定义滚动条样式 */