11

src/views/map/index.vue

@@ -23,7 +23,8 @@
       <img src="@/assets/images/背景图.png" alt="背景图" />
     </div>
     <div class="study-bg" v-show="state.activeIndex === '6'">
-      <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
+      <img v-if="state.studyBgImage === 'default'" src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
+      <img v-else src="@/assets/images/image.png" alt="技术实践区" />
     </div>
     <!-- 视频背景 -->
     <div class="video-background" v-if="state.showVideoPlayer">
@@ -219,6 +220,8 @@ const state = reactive({
   showHistoryImage: false,
   // 当前地图模式: 'kunshan' | 'suzhou'，默认苏州地图
   currentMapMode: 'suzhou',
+  // 研学联建背景图状态
+  studyBgImage: 'default', // 'default' 或 'practice'
   // 卡片统计数据
   totalView: [
     {
@@ -247,6 +250,11 @@ const state = reactive({
     },
   ],
 })
+
+// 切换研学联建背景图
+function switchStudyBgImage(type) {
+  state.studyBgImage = type
+}
 onMounted(() => {
   // 监听地图播放完成，执行事件
   emitter.$on("mapPlayComplete", handleMapPlayComplete)
@@ -256,6 +264,8 @@ onMounted(() => {
   emitter.$on("mapModeChanged", handleMapModeChanged)
   // 监听切换到区域总览页面事件
   emitter.$on("switchToRegionOverview", handleSwitchToRegionOverview)
+  // 监听研学联建背景图切换事件
+  emitter.$on("switchStudyBgImage", switchStudyBgImage)
   // 自动适配
   assets.value = autofit.init({
     dh: 1080,
@@ -278,6 +288,7 @@ onBeforeUnmount(() => {
   emitter.$off("waterStationClick", handleWaterStationClick)
   emitter.$off("mapModeChanged", handleMapModeChanged)
   emitter.$off("switchToRegionOverview", handleSwitchToRegionOverview)
+  emitter.$off("switchStudyBgImage", switchStudyBgImage)
 })
 
 // 处理地图模式变化
@@ -399,6 +410,9 @@ function handleMenuSelect(index) {
       gsap.to(".history-content .timeline-container", { y: 0, opacity: 1, duration: 0.5, delay: 0.2 })
     } else if (index === "5") {
       gsap.to(".science-content .science-card", { y: 0, opacity: 1, duration: 0.6, stagger: 0.15 })
+    } else if (index === "6") {
+      gsap.to(".study-content .left-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
+      gsap.to(".study-content .right-column .module-card", { x: 0, opacity: 1, duration: 0.5, stagger: 0.1 })
     }
   })
 }