添加家居图片

src/views/block/Blockly2.vue

@@ -24,7 +24,16 @@
       <div v-if="recordingCountdown <= 5" class="recording-countdown">{{ recordingCountdown }}秒</div>
     </div>
 
-    <img :src="device.image" alt="智能台灯" class="full-screen-image" />
+    <!-- 智能家居 -->
+    <div class="image-overlay-container">
+      <img :src="baseMap" alt="智能家居" class="full-screen-image base-image" />
+      <img :src="curtainLeft" alt="白窗帘左" class="full-screen-image overlay-image" />
+      <img :src="curtainRight" alt="白窗帘右" class="full-screen-image overlay-image" />
+      <img :src="curtainFront" alt="窗帘前" class="full-screen-image overlay-image" />
+      <img :src="television" alt="电视画面" class="full-screen-image overlay-image" />
+      <img :src="lightOpen" alt="灯光打开" class="full-screen-image overlay-image" />
+      <img :src="lightClose" alt="灯光关闭" class="full-screen-image overlay-image" />
+    </div>
     <!-- 使用动态样式设置灯光遮罩 -->
     <div v-if="state.lamp.isLightOn"  :style="{ '--lamp-color': state.lamp.color,'--lamp-opacity': state.lamp.brightness / 100 }" class="lamp-light-mask"></div>
 
@@ -56,7 +65,7 @@
     <div class="title-box">
       <div class="box-icon" @click="goLabShow">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-        返回智能台灯
+        返回智能家居
       </div>
     </div>
 
@@ -223,6 +232,15 @@ import { globalState } from "@/utils/globalState.js";
 import { playMusic, stopMusic, onMusicEnded } from "@/api/blockly/music.js";
 import {ElButton} from "element-plus";
 
+// 智能家居图片
+import baseMap from '@/assets/images/smart-home/base-map.png' // 底图
+import curtainLeft from '@/assets/images/smart-home/curtain-left.png' // 白窗帘左
+import curtainRight from '@/assets/images/smart-home/curtain-right.png' // 白窗帘右
+import lightOpen from '@/assets/images/smart-home/light-open.png' // 灯光打开
+import lightClose from '@/assets/images/smart-home/light-close.png' // 灯光关闭
+import television from '@/assets/images/smart-home/television.png' // 电视画面
+import curtainFront from '@/assets/images/smart-home/curtain-front.png' // 前面窗帘遮挡
+
 const router = useRouter();
 
 // 设备信息
@@ -2074,6 +2092,25 @@ textarea {
   z-index: 1000;
 }
 
+.image-overlay-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.base-image{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.overlay-image{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
 .full-screen-image {
   width: 100%;
   height: 100%;