fix: safari toggle问题 (#486)

* fix手机端菜单 * Update index.astro * 星空效果兼容 * Update HomeIntroduce.astro * Update index.astro * Update UseCompanies.astro * Update BaseContainer.astro * fix: safari toggle问题
nacos-group · Jan 17, 2024 · a269a1c · a269a1c
1 parent e7a7d13
commit a269a1c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/components/common/Header/index.astro b/src/components/common/Header/index.astro
@@ -52,7 +52,7 @@ let height, width, xpadding = "";
     </div>
 
     <div class="center-content h-full">
-      <Navbar class='pc-navbar h-full'/>
+      <Navbar top={height} class='pc-navbar h-full'/>
     </div>
 
     <div class="right-content flex items-center">

diff --git a/src/components/common/Navbar.astro b/src/components/common/Navbar.astro
@@ -8,7 +8,9 @@ const ifzh = isChinese(Astro);
 
 interface Props {
   class?: string;
+  top?: "4rem" | "3.5rem";
 }
+const { top = '4rem' } = Astro.props;
 
 // 修改 文档 菜单显示逻辑
 const lastIdx = dataSource.length - 1;
@@ -92,6 +94,7 @@ const ifactive = (toggle) => {
             slot={slot}
             target={target}
             position={position}
+            top={top}
             class={`item ${index === lastIdx ? 'item-last-child' : ''}`}
           >
           </Toggle>

diff --git a/src/components/common/Toggle.astro b/src/components/common/Toggle.astro
@@ -10,10 +10,11 @@ interface Props {
   slot?: HTMLElement;
   // 如果下拉窗口内容比较多，可以相对视图定位，自定义下拉内容
   position?: 'absolute' | 'fixed';
+  top?: "4rem" | "3.5rem";
   showArrow?: boolean;
 }
 
-const { title, trigger = "hover", route = '', slot, position = 'absolute', active = false, showArrow = true, target = '_self' } = Astro.props;
+const { title, trigger = "hover", route = '', slot, position = 'absolute', active = false, showArrow = true, target = '_self', top = '4rem' } = Astro.props;
 const ifdropdown = slot && !route;
 const Component = slot;
 
@@ -118,7 +119,7 @@ const Component = slot;
 
 
 
-<style define:vars={{ position }}>
+<style define:vars={{ position, top }}>
   toggle-component {
     /* 14px */
     --toggle-font: 0.875rem; 
@@ -178,12 +179,9 @@ const Component = slot;
 
   .toggle-dropdown {
     display: none;
-    /* position: absolute; */
     position: var(--position);
+    top: var(--top);
     z-index: 100000;
-    /* background-color: var(--toggle-trigger-bgd); */
-    /* 去掉之后外部使用更灵活 */
-    /* padding: var(--toggle-trigger-vp) var(--toggle-trigger-hp); */
   }
 
   .toggle-dropdown-active {