tsj: 调整页面间切换的效果；重点是修复地图尺寸改变的问题（938px只能改变到800左右，原因是centerContainer的position:...

tsj: 调整页面间切换的效果；重点是修复地图尺寸改变的问题（938px只能改变到800左右，原因是centerContainer的position: relative）；解决切换后 videoCarousel 可以被看到的问题

src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.less

@@ -10,6 +10,7 @@
 // 基础按钮样式
 .button {
   height: 39px;
+  min-height: 39px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -68,20 +69,18 @@
   flex-direction: column;
   gap: 16px;
   padding-right: 10px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
   
   // 自定义滚动条样式
   &::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 2px;
+    display: none;
   }
   
   .button {
     width: 150px;
-    height: 39px;
+    min-height: 39px;
+    flex-shrink: 0;
   }
 }
 
@@ -96,19 +95,17 @@
   flex-direction: column;
   gap: 16px;
   padding-right: 10px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
   
   // 自定义滚动条样式
   &::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 2px;
+    display: none;
   }
   
   .button {
     width: 180px;
-    height: 39px;
+    min-height: 39px;
+    flex-shrink: 0;
   }
 } 
\ No newline at end of file

src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx

@@ -44,8 +44,6 @@ const AreaSelector: React.FC = () => {
         { key: 'xinjin', label: '新津区' },
         { key: 'dayi', label: '大邑县' },
         { key: 'jianyang', label: '简阳市' },
-        { key: 'jianyang', label: '简阳市' },
-
       ]
     },
     level3: {

src/pages/Home_v_2504/components/MapContainer/DistrictMap/index.less

@@ -289,16 +289,18 @@
 }
 
 .indexMarker {
-  min-width: 20px;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  border-radius: 50%;
-  background: #FF6B6B;
-  color: white;
-  font-size: 12px;
-  cursor: pointer;
-  font-weight: bold;
+  width: 44px;
+  height: 44px;
+  box-sizing: border-box;
+  border: 3px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  background: var(--bg-color);
+  border-radius: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: D-DIN;
+  color: var(--color);
 }
 
 .window {
@@ -324,25 +326,21 @@
   }
 }
 .window1 {
-  padding: 10px;
-  overflow: hidden;
-  width: 300px;
-  background: rgba(7, 25, 54, 0.8);
-  border: 1px solid rgba(0, 209, 255, 0.5);
-  border-radius: 10px;
-  position: relative;
-  
-  &::before {
+  box-sizing: border-box;
+
+  &::after {
+    position: absolute;
     content: '';
+    /**三角形 */
     width: 0;
     height: 0;
-    position: absolute;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
     bottom: -7px;
     left: 50%;
     transform: translateX(-50%);
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-top: 8px solid rgba(0, 209, 255, 0.5);
+    z-index: 999;
   }
 }
 .modalTitle {

src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less

@@ -28,6 +28,7 @@
   background-size: 100% 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
   padding: 0 20px;
   cursor: pointer;
   transition: all 0.3s;
@@ -42,6 +43,7 @@
   width: 30px;
   height: 30px;
   margin-right: 9px;
+  flex-shrink: 0;
 }
 
 .navLabel {
@@ -62,15 +64,12 @@
   padding-bottom: 13px;
   max-height: 400px;
   overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
   
   // 自定义滚动条样式
   &::-webkit-scrollbar {
-    width: 4px;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 2px;
+    display: none;
   }
 }
 

src/pages/Home_v_2504/components/MapContainer/index.less

@@ -2,8 +2,8 @@
   width: 100%;
   height: 100%;
   position: relative;
-  border-radius: 15px;
-  overflow: hidden;
+  // border-radius: 15px;
+  // overflow: hidden;
 
   .topTabsWarp {
     position: absolute;
@@ -26,15 +26,15 @@
   }
 }
 
-:global {
-  .leaflet-control-container {
-    .leaflet-top {
-      &.leaflet-right {
-        transform: translateX(-20px);
-      }
-    }
-  }
-}
+// :global {
+//   .leaflet-control-container {
+//     .leaflet-top {
+//       &.leaflet-right {
+//         transform: translateX(-20px);
+//       }
+//     }
+//   }
+// }
 
 // .container {
 //   width: 100%;

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

@@ -21,16 +21,34 @@ const RestaurantOil: React.FC<RestaurantOilProps> = ({ visible }) => {
 
   if (!visible && !isTransitioning) return null;
 
+  // 根据transitionDirection确定合适的样式
+  // 进入动画: 从两侧向中间运动 (in)
+  // 退出动画: 从两侧向外运动 (out)
+  const getTransform = () => {
+    if (transitionDirection === 'in') {
+      // 进入动画的初始状态或退出动画的最终状态
+      if (isTransitioning && !visible) {
+        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
+      } else if (isTransitioning && visible) {
+        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
+      }
+    } else if (transitionDirection === 'out') {
+      // 退出动画的初始状态或进入动画的最终状态
+      if (isTransitioning) {
+        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
+      }
+    }
+    
+    // 正常显示状态
+    return { left: 'translateX(0)', right: 'translateX(0)' };
+  };
+
+  const transforms = getTransform();
+
   return (
     <div className={styles.container}>
       {/* 左侧内容区域 - 通过CSS设置pointer-events为auto，仅在有内容的区域启用事件 */}
-      <div className={styles.leftSidebar} style={{
-        transform: isTransitioning && transitionDirection === 'in' 
-          ? 'translateX(-100%)' 
-          : isTransitioning && transitionDirection === 'out' 
-            ? 'translateX(-100%)' 
-            : 'translateX(0)'
-      }}>
+      <div className={styles.leftSidebar} style={{ transform: transforms.left }}>
         <LeftContent />
       </div>
       
@@ -40,13 +58,7 @@ const RestaurantOil: React.FC<RestaurantOilProps> = ({ visible }) => {
       </div>
       
       {/* 右侧内容 - 有实际内容的区域使用pointer-events: auto */}
-      <div className={styles.rightContent} style={{
-        transform: isTransitioning && transitionDirection === 'in' 
-          ? 'translateX(100%)' 
-          : isTransitioning && transitionDirection === 'out' 
-            ? 'translateX(100%)' 
-            : 'translateX(0)'
-      }}>
+      <div className={styles.rightContent} style={{ transform: transforms.right }}>
         <RightContent />
       </div>
     </div>

src/pages/Home_v_2504/components/context.tsx

@@ -7,6 +7,7 @@ interface DashboardContextType {
   isTransitioning: boolean;
   setIsTransitioning: (isTransitioning: boolean) => void;
   backToHome: () => void;
+  navigateTo: (page: string) => void;
   transitionDirection: 'in' | 'out';
   setTransitionDirection: (direction: 'in' | 'out') => void;
 }
@@ -18,6 +19,7 @@ const DashboardContext = createContext<DashboardContextType>({
   isTransitioning: false,
   setIsTransitioning: () => {},
   backToHome: () => {},
+  navigateTo: () => {},
   transitionDirection: 'in',
   setTransitionDirection: () => {},
 });
@@ -39,6 +41,35 @@ export const DashboardProvider: React.FC<{ children: React.ReactNode }> = ({ chi
   const [isTransitioning, setIsTransitioning] = useState<boolean>(false);
   const [transitionDirection, setTransitionDirection] = useState<'in' | 'out'>('in');
 
+  // 切换到指定页面
+  const navigateTo = (page: string) => {
+    if (page === activePage) return;
+    
+    // 从主页切换到子页面
+    if (activePage === 'home') {
+      setTransitionDirection('in');
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setActivePage(page);
+        setTimeout(() => {
+          setIsTransitioning(false);
+        }, 500);
+      }, 500);
+    } 
+    // 在子页面之间切换
+    else if (page !== 'home') {
+      setTransitionDirection('out');
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setActivePage(page);
+        setTransitionDirection('in');
+        setTimeout(() => {
+          setIsTransitioning(false);
+        }, 500);
+      }, 500);
+    }
+  };
+
   // 返回首页的方法
   const backToHome = () => {
     setTransitionDirection('out');
@@ -47,7 +78,6 @@ export const DashboardProvider: React.FC<{ children: React.ReactNode }> = ({ chi
       setActivePage('home');
       setTimeout(() => {
         setIsTransitioning(false);
-        setTransitionDirection('in');
       }, 500);
     }, 500);
   };
@@ -58,6 +88,7 @@ export const DashboardProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     isTransitioning,
     setIsTransitioning,
     backToHome,
+    navigateTo,
     transitionDirection,
     setTransitionDirection,
   };

src/pages/Home_v_2504/index.less

@@ -52,9 +52,6 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  position: relative;
-
-  // position: relative;
   // z-index: 1;
   // flex: 1;
 }
@@ -69,7 +66,7 @@
   //flex: 2;
   //position: relative;
   // transition: flex 0.5s ease;
-  transition: height 0.8s ease-in-out; // 推荐明确指定过渡属性
+  transition: height 0.8s ease-in-out; // 推荐明确指定过渡属性
   z-index: 1;
 }
 
@@ -77,6 +74,7 @@
   // flex: 1;
   // width: 1490px;
   height: 938px;
+  margin-bottom: 30px;
 }
 
 .videoCarousel {
@@ -134,8 +132,8 @@
 }
 
 .subPageContainer {
-  pointer-events: none; // 允许事件穿透
-  background: transparent; // 确保背景透明
+  pointer-events: none; // 允许事件穿透
+  background: transparent; // 确保背景透明
 
   position: absolute;
   top: 112px;
@@ -157,7 +155,7 @@
 .subPage_active {
   opacity: 1;
   z-index: 15;
-  // pointer-events: auto; // 子页面自身内容需要响应事件
+  // pointer-events: auto; // 子页面自身内容需要响应事件
 }
 
 .subPage_exit {

src/pages/Home_v_2504/index.tsx

@@ -41,37 +41,58 @@ const PageContent: React.FC = () => {
   }, [activePage, prevPage]);
 
   // 主页内容
-  const renderHomeContent = () => (
-    <>
-      <div className={classNames(styles.leftSidebar, {
-        [styles.leftSidebar_exit]: activePage !== 'home' && isTransitioning && transitionDirection === 'in',
-        [styles.leftSidebar_enter]: activePage === 'home' && isTransitioning && transitionDirection === 'out',
-        [styles.hidden]: activePage !== 'home' && !isTransitioning
-      })}>
-        <LeftSidebar />
-      </div>
-      <div className={styles.centerContainer}>
-        <div className={classNames(styles.mapContainer, {
-          [styles.mapContainer_expand]: activePage !== 'home'
-        })}>
-          <MapContainer />
+  const renderHomeContent = () => {
+    const isHomePage = activePage === 'home';
+    const isHomeTransitioning = isTransitioning && (activePage === 'home' || prevPage === 'home');
+    
+    // 确定左侧边栏样式
+    const leftSidebarStyle = {
+      transform: !isHomePage || (isHomeTransitioning && transitionDirection === 'in')
+        ? 'translateX(-110%)'
+        : isHomeTransitioning && transitionDirection === 'out'
+          ? 'translateX(-110%)'
+          : 'translateX(0)'
+    };
+    
+    // 确定右侧内容样式
+    const rightContentStyle = {
+      transform: !isHomePage || (isHomeTransitioning && transitionDirection === 'in')
+        ? 'translateX(110%)'
+        : isHomeTransitioning && transitionDirection === 'out'
+          ? 'translateX(110%)'
+          : 'translateX(0)'
+    };
+    
+    return (
+      <>
+        <div 
+          className={styles.leftSidebar} 
+          style={leftSidebarStyle}
+        >
+          <LeftSidebar />
         </div>
-        <div className={classNames(styles.videoCarousel, {
-          [styles.videoCarousel_exit]: activePage !== 'home' && transitionDirection === 'in',
-          [styles.videoCarousel_enter]: activePage === 'home' && transitionDirection === 'out'
-        })}>
-          <VideoCarousel />
+        <div className={styles.centerContainer}>
+          <div className={classNames(styles.mapContainer, {
+            [styles.mapContainer_expand]: activePage !== 'home'
+          })}>
+            <MapContainer />
+          </div>
+          <div className={classNames(styles.videoCarousel, {
+            [styles.videoCarousel_exit]: activePage !== 'home' && transitionDirection === 'in',
+            [styles.videoCarousel_enter]: activePage === 'home' && transitionDirection === 'out'
+          })}>
+            <VideoCarousel />
+          </div>
         </div>
-      </div>
-      <div className={classNames(styles.rightContent, {
-        [styles.rightContent_exit]: activePage !== 'home' && isTransitioning && transitionDirection === 'in',
-        [styles.rightContent_enter]: activePage === 'home' && isTransitioning && transitionDirection === 'out',
-        [styles.hidden]: activePage !== 'home' && !isTransitioning
-      })}>
-        <RightContent />
-      </div>
-    </>
-  );
+        <div 
+          className={styles.rightContent}
+          style={rightContentStyle}
+        >
+          <RightContent />
+        </div>
+      </>
+    );
+  };
 
   return (
     <>