Merge branch 'dev'

public/static/index/pc/css/header.css

@@ -4,7 +4,10 @@
     box-sizing: border-box;
     font-family: '微软雅黑', sans-serif;
 }
-
+html {
+    overflow-y: scroll;
+    scrollbar-gutter: stable ;
+}
 body {
     overflow-x: hidden;
 
@@ -41,7 +44,7 @@ a {
 .header-nav-bar {
     width: 100%;
     max-width: 1520px;
-    height: 4em;
+    height:64px;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
@@ -256,25 +259,36 @@ a {
 
 /* ========== 以下为原有样式，保持不变 ========== */
 
-/* 原有的下拉框样式 */
+/* 原有的下拉框样式 - 带动画效果 */
 .header-dropdown {
     box-sizing: border-box;
     max-width: 1920px;
     width: 100%;
     position: absolute;
-    top: 4em;
+    top: 64px;
     left: 0;
     right: 0;
     background-color: #fff;
-    z-index: 199;
+    z-index: 999;
     border-top: none;
     overflow: hidden;
     padding-bottom: 2.375em;
-    display: none;
+    opacity: 0;
+    transform: translateY(-1.25em);
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+   
 }
 
-.header-nav-item:hover .header-dropdown {
-    display: block;
+/* .header-nav-item:hover .header-dropdown {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+} */
+
+/* 添加动画锁定时的不响应状态 */
+.header-dropdown.animating-out {
+    pointer-events: none;
 }
 
 /* Tabs切换栏：居中，宽度100%（基于下拉框内容区） */
@@ -385,13 +399,13 @@ a {
     justify-content: space-between;
     flex: 1;
     min-width: 0;
-   
+   font-size: 16px;
 }
 
 
 
 .header-product-card {
-     text-align: center;
+    text-align: center;
     width: calc(50% - 0.75em);
     max-width: 22.625em;
     flex-shrink: 1;
@@ -416,11 +430,11 @@ a {
 }
 
 .header-product-card:nth-child(1) {
-    margin-right: 1.5em;
+    /* margin-right: 1.5em; */
 }
 
 .header-product-card:nth-child(3) {
-    margin-right: 1.5em;
+    /* margin-right: 1.5em; */
     margin-top: 1.5em;
 }
 
@@ -952,7 +966,7 @@ a {
     }
 
     .header-dropdown-content1 {
-        padding: 0 12em;
+        padding: 2em 12em;
     }
 
     .header-buy-dropdown {
@@ -980,7 +994,7 @@ a {
     }
 
     .header-dropdown-content1 {
-        padding: 0 10em;
+        padding: 2em 10em;
     }
 
     .header-buy-dropdown {
@@ -1008,7 +1022,7 @@ a {
     }
 
     .header-dropdown-content1 {
-        padding: 0 8em;
+        padding: 2em 8em;
     }
 
     .header-buy-dropdown {
@@ -1020,6 +1034,7 @@ a {
         row-gap: 60px;
     }
 }
+/* 蒙版层样式 */
 #mhk {
     width: 100%;
     height: 100%;
@@ -1028,6 +1043,7 @@ a {
     left: 0;
     backdrop-filter: blur(5px);
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 88;
+    z-index: 90;
     display: none;
+    overflow: hidden;
 }