tsj：解决切换餐饮油烟后地图不能响应的问题（要实现事件的穿透（pointer-events: none; ）关键在于：...

tsj：解决切换餐饮油烟后地图不能响应的问题（要实现事件的穿透（pointer-events: none; ）关键在于： subPageContainer（前端\cd-comprehensive-web\src\pages\Home_v_2504\index.less）要设置穿透（pointer-events: none; ））

src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.less

 .container {
   display: flex;
+  // flex-direction: row;
   width: 100%;
   height: 100%;
+  //pointer-events: none; // Allow events to pass through container
 }
 
 .leftSidebar {
   width: 1105px;
-  height: 928px;
-//   width: 480px;
-//   height: 100%;
-  flex-shrink: 0;
+  // height: 100%;
+  // height: 928px;
+  pointer-events: auto; // Make the sidebar respond to events
 }
 
 .centerContainer {
   flex: 1;
-  height: 100%;
+  pointer-events: none; // Allow map events to pass through
 }
 
 .rightContent {
-  position: absolute;
-  width: 1105px;
-  height: 928px;
-  right: 40px;
-  flex-shrink: 0;
-//   top: 112px;
-} 
\ No newline at end of file
+  margin-right: 40px;
+  pointer-events: auto; // Make the right content respond to events
+}

src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx

@@ -22,17 +22,17 @@ const RestaurantOil: React.FC<RestaurantOilProps> = ({ visible }) => {
 
   return (
     <div className={styles.container}>
-      {/* 左侧内容（这里不实现，根据需求） */}
+      {/* 左侧内容区域 - 通过CSS设置pointer-events为auto，仅在有内容的区域启用事件 */}
       <div className={styles.leftSidebar}>
         {/* 左侧内容将在后续实现 */}
       </div>
       
-      {/* 中部内容（这里不实现，根据需求） */}
+      {/* 中间区域 - 保持pointer-events: none让地图可交互 */}
       <div className={styles.centerContainer}>
         {/* 中部内容将在后续实现 */}
       </div>
       
-      {/* 右侧内容 */}
+      {/* 右侧内容 - 有实际内容的区域使用pointer-events: auto */}
       <div className={styles.rightContent}>
         <RightContent />
       </div>

src/pages/Home_v_2504/index.less

@@ -47,23 +47,30 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  //position: relative;
+  position: relative;
+
+  // position: relative;
+  // z-index: 1;
+  // flex: 1;
 }
 
 .mapContainer {
   width: 100%;
   height: 705px;
-  background: rgb(51, 79, 121);
+  // background: rgb(51, 79, 121);
   border-radius: 20px;
   overflow: hidden;
 
   //flex: 2;
   //position: relative;
-  transition: flex 0.5s ease;
+  // transition: flex 0.5s ease;
+  transition: height 1s ease-in-out; // 推荐明确指定过渡属性
 }
 
 .mapContainer_expand {
-  flex: 1;
+  // flex: 1;
+  // width: 1490px;
+  height: 938px;
 }
 
 .videoCarousel {
@@ -74,7 +81,7 @@
 
   transform: translateY(0);
   opacity: 1;
-  transition: transform 0.5s ease, opacity 0.3s ease, height 0.5s ease;
+  transition: transform 1s ease, opacity 1s ease, height 1s ease;
 }
 
 .videoCarousel_exit {
@@ -100,7 +107,7 @@
   transform: translateX(0);
   //opacity: 1;
   //transition: transform 0.5s ease, opacity 0.3s ease;
-  transition: transform 0.5s ease;
+  transition: transform 1s ease-in-out;
   z-index: 10;
 }
 
@@ -110,6 +117,9 @@
 }
 
 .subPageContainer {
+  pointer-events: none; // 允许事件穿透
+  background: transparent; // 确保背景透明
+
   position: absolute;
   top: 112px;
   // top: 0;
@@ -130,6 +140,7 @@
 .subPage_active {
   opacity: 1;
   z-index: 15;
+  // pointer-events: auto; // 子页面自身内容需要响应事件
 }
 
 .subPage_exit {