diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.less b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.less index 26cf230d3674789c24999db6a294d65a9d971e11..2dbe940051c6ebd94d59c980b461cad9dd9ebee2 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.less +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.less @@ -1,27 +1,24 @@ .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 +} diff --git a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx index 4bef8c71797a94ffb8e3cab220d4598940a62d1d..e7a77511d92744fb38ddf6120d36248aa22158e4 100644 --- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx +++ b/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx @@ -22,17 +22,17 @@ const RestaurantOil: React.FC = ({ visible }) => { return (
- {/* 左侧内容(这里不实现,根据需求) */} + {/* 左侧内容区域 - 通过CSS设置pointer-events为auto,仅在有内容的区域启用事件 */}
{/* 左侧内容将在后续实现 */}
- {/* 中部内容(这里不实现,根据需求) */} + {/* 中间区域 - 保持pointer-events: none让地图可交互 */}
{/* 中部内容将在后续实现 */}
- {/* 右侧内容 */} + {/* 右侧内容 - 有实际内容的区域使用pointer-events: auto */}
diff --git a/src/pages/Home_v_2504/index.less b/src/pages/Home_v_2504/index.less index 45d28d688c80ccd1b05d01330625318a65566dd8..403b1d4aa678a6e2331ed8e251bba71100c0d646 100644 --- a/src/pages/Home_v_2504/index.less +++ b/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 {