From 6f3217ef0ab81f17a3f83002985cd87479d1370c Mon Sep 17 00:00:00 2001
From: tangshaojian <63377964@qq.com>
Date: Fri, 18 Apr 2025 17:10:12 +0800
Subject: [PATCH] =?UTF-8?q?tsj:=20=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E9=97=B4=E5=88=87=E6=8D=A2=E7=9A=84=E6=95=88=E6=9E=9C=EF=BC=9B?=
 =?UTF-8?q?=E9=87=8D=E7=82=B9=E6=98=AF=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E6=94=B9=E5=8F=98=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=88938px=E5=8F=AA=E8=83=BD=E6=94=B9=E5=8F=98=E5=88=B0800?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=EF=BC=8C=E5=8E=9F=E5=9B=A0=E6=98=AFcenterCon?=
 =?UTF-8?q?tainer=E7=9A=84position:=20relative=EF=BC=89=EF=BC=9B=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=88=87=E6=8D=A2=E5=90=8E=20videoCarousel=20?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=A2=AB=E7=9C=8B=E5=88=B0=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MapContainer/AreaSelector/index.less      | 25 +++---
 .../MapContainer/AreaSelector/index.tsx       |  2 -
 .../MapContainer/DistrictMap/index.less       | 44 +++++------
 .../MapContainer/NavigationBar/index.less     | 11 ++-
 .../components/MapContainer/index.less        | 22 +++---
 .../SubPages/RestaurantOil/index.tsx          | 40 ++++++----
 src/pages/Home_v_2504/components/context.tsx  | 33 +++++++-
 src/pages/Home_v_2504/index.less              | 12 ++-
 src/pages/Home_v_2504/index.tsx               | 79 ++++++++++++-------
 9 files changed, 161 insertions(+), 107 deletions(-)

diff --git a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.less b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.less
index bd7e5d7b..879c7534 100644
--- a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.less
+++ b/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
diff --git a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx
index 485596f3..a37ac559 100644
--- a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx
+++ b/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: {
diff --git a/src/pages/Home_v_2504/components/MapContainer/DistrictMap/index.less b/src/pages/Home_v_2504/components/MapContainer/DistrictMap/index.less
index 5f1f1009..83892377 100644
--- a/src/pages/Home_v_2504/components/MapContainer/DistrictMap/index.less
+++ b/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 {
diff --git a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less b/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less
index ab931191..216bb153 100644
--- a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less
+++ b/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;
   }
 }
 
diff --git a/src/pages/Home_v_2504/components/MapContainer/index.less b/src/pages/Home_v_2504/components/MapContainer/index.less
index ab1ed5a4..d612e6e4 100644
--- a/src/pages/Home_v_2504/components/MapContainer/index.less
+++ b/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%;
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 7dfb2e5b..a1d65734 100644
--- a/src/pages/Home_v_2504/components/SubPages/RestaurantOil/index.tsx
+++ b/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>
diff --git a/src/pages/Home_v_2504/components/context.tsx b/src/pages/Home_v_2504/components/context.tsx
index 12828b80..1d6bd816 100644
--- a/src/pages/Home_v_2504/components/context.tsx
+++ b/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,
   };
diff --git a/src/pages/Home_v_2504/index.less b/src/pages/Home_v_2504/index.less
index c463aaa8..f46c5845 100644
--- a/src/pages/Home_v_2504/index.less
+++ b/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 {
diff --git a/src/pages/Home_v_2504/index.tsx b/src/pages/Home_v_2504/index.tsx
index 9d92fafa..3c0b33b2 100644
--- a/src/pages/Home_v_2504/index.tsx
+++ b/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 (
     <>
-- 
GitLab