台灯灯光修改

src/views/AILaboratory.vue

@@ -331,6 +331,10 @@ const groupList = ref([
   width: rpx(100);
   margin-top: rpx(75);
   // margin-left: rpx(50) auto;
+  transition: transform 0.3s ease; // 过渡效果
+}
+.people-box img:hover {
+  transform: scale(1.1); // 鼠标经过时放大1.1倍
 }
 .people-title {
   font-size: rpx(8);

src/views/EnNumerals/index.vue

@@ -311,6 +311,10 @@ const navigateToAIQuestions = (person) => {
   width: rpx(100);
   margin-top: rpx(75);
   // margin-left: rpx(50) auto;
+  transition: transform 0.3s ease; // 过渡效果
+}
+.people-box img:hover {
+  transform: scale(1.1); // 鼠标经过时放大1.1倍
 }
 .people-title {
   font-size: rpx(8);

src/views/block/Blockly.vue

@@ -3,7 +3,7 @@
   <div v-if="showLampPreview" class="desk-lamp-container">
     <!-- 标题框 -->
     <div class="desk-lamp-title-box">
-      <div class="desk-lamp-box-icon" @click="goBackLab">
+      <div class="desk-lamp-box-icon" @click="goBack">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         返回虚拟实验室
       </div>
@@ -51,10 +51,10 @@
 
 
   <!-- Blockly编程界面 -->
-  <div class="container">
+  <div v-show="!showLampPreview" class="container">
     <!-- 返回智能台灯 -->
     <div class="title-box">
-      <div class="box-icon" @click="goBack">
+      <div class="box-icon" @click="goLabShow">
         <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
         返回智能台灯
       </div>
@@ -233,11 +233,11 @@ const recordingCountdown = ref(10);
 let countdownInterval = null;
 
 // 返回虚拟实验室
-const goBackLab = () => {
-  router.push("/virtual-laboratory");
+const goLabShow = () => {
+  showLampPreview.value = true;
 };
 const goBack = () => {
-  showLampPreview.value = true;
+  router.push("/virtual-laboratory");
 };
 // 切换灯光状态
 const toggleLight = () => {
@@ -1938,17 +1938,35 @@ textarea {
 /* 台灯灯光样式 - 使用动态颜色 */
 .lamp-light-mask {
   position: absolute;
-  width: rpx(78);
-  height: rpx(250);
-  margin-top: rpx(49);
-  margin-left: rpx(192);
-  background: linear-gradient(to bottom, var(--lamp-color) 0%, var(--lamp-color) 10%, rgba(255, 255, 255, 0) 90%);
-  filter: blur(60px);
-  transform: rotate(9deg);
+  /* 使用更精确的定位，并针对不同屏幕尺寸进行优化 */
+  top: 56%; /* 调整这个值以匹配台灯的位置 */
+  left: 64%; /* 调整这个值以匹配台灯的位置 */
+  width: 18vmin; /* 使用视口单位使灯光大小随屏幕变化 */
+  height: 60vmin;
+  /* 使用transform进行精确定位 */
+  transform: translate(-50%, -50%) rotate(9deg);
   transform-origin: top center;
+  background: radial-gradient(circle at center top, var(--lamp-color) 0%, var(--lamp-color) 20%, rgba(255, 255, 255, 0) 70%);
+  filter: blur(40px);
   opacity: var(--lamp-opacity, 0.6);
   /* 创建扇形效果 */
-  clip-path: polygon(0% 0%, 100% 0%, 250% 100%, -150% 100%);
+  clip-path: polygon(0% 0%, 100% 0%, 200% 100%, -100% 100%);
+  z-index: 1; /* 确保在图片上方但在UI控件下方 */
+  /* 固定定位确保在全屏时也能正确显示 */
+  will-change: transform;
+}
+/* 响应式调整：在不同屏幕尺寸下微调灯光位置 */
+@media (max-aspect-ratio: 4/3) {
+  .lamp-light-mask {
+    top: 56%;
+    left: 64%;
+  }
+}
+@media (min-aspect-ratio: 16/9) {
+  .lamp-light-mask {
+    top: 55%;
+    left: 63%;
+  }
 }
 
 /* 灯光信息显示 */

src/views/virtuallaboratory/DeskLampView.vue

@@ -10,8 +10,8 @@
     </div>
     
     <img src="@/assets/images/desklamp.png" alt="智能台灯" class="full-screen-image" />
-    <!-- 使用动态样式设置灯光遮罩 -->
-     <div v-if="isLightOn" :style="{ '--lamp-color': lampColor,'--lamp-opacity': lampBrightness / 100 }" class="lamp-light-mask"></div>
+    <!-- 使用动态样式设置灯光遮罩 --> 
+    <div v-if="isLightOn" :style="{ '--lamp-color': lampColor,'--lamp-opacity': lampBrightness / 100 }" class="lamp-light-mask"></div>
 
     <!-- 右下角按钮组 -->
     <div class="button-group">