|
|
|
@ -32,6 +32,10 @@ |
|
|
|
--duration-normal: 0.3s; /* 变换/位移/透明度/展开收起 */ |
|
|
|
--duration-slow: 0.4s; /* 轮播/大幅位移 */ |
|
|
|
--easing: ease; /* 缓动函数 */ |
|
|
|
|
|
|
|
--nav--dropdown-duration: 300ms; |
|
|
|
--ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); |
|
|
|
--nav--dropdown-open-duration: 600ms; |
|
|
|
}/* max-width 从大到小写 *//* 1680–1919:比 1920 稿略窄,边距收到 100 */@media (max-width: 1919px) { |
|
|
|
:root { |
|
|
|
--p-x: 100Px; |
|
|
|
@ -1090,9 +1094,12 @@ body { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
list-style: none; |
|
|
|
}.site-header__nav > ul li { |
|
|
|
} |
|
|
|
.site-header__nav .site-header__nav-item{ |
|
|
|
padding-left: 1rem; |
|
|
|
padding-right: 1rem; |
|
|
|
} |
|
|
|
.site-header__nav > ul li { |
|
|
|
height: 100%; |
|
|
|
}.site-header__nav > ul > li > a { |
|
|
|
display: inline-flex; |
|
|
|
@ -1307,14 +1314,16 @@ body { |
|
|
|
right: 0; |
|
|
|
top: 100%; |
|
|
|
z-index: 2; |
|
|
|
/* 展开收起动画 */ |
|
|
|
display: grid; |
|
|
|
grid-template-rows: 0fr; |
|
|
|
max-height: calc(100dvh - var(--header-h)); |
|
|
|
visibility: hidden; |
|
|
|
opacity: 0; |
|
|
|
transition: grid-template-rows var(--nav--dropdown-duration) var(--ease-expo-out), visibility 0s var(--nav--dropdown-duration), opacity var(--nav--dropdown-duration) var(--ease-expo-out); |
|
|
|
max-height: calc(100dvh - var(--header-h)); |
|
|
|
background: var(--color-white); |
|
|
|
border-top: 1px solid rgb(223, 224, 226); |
|
|
|
box-shadow: 0 1.5rem 3rem rgba(46, 53, 58, 0.08); |
|
|
|
transition: grid-template-rows 0.5s var(--easing); |
|
|
|
}.nav-mega__inner { |
|
|
|
overflow: auto; |
|
|
|
min-height: 0; |
|
|
|
@ -1617,6 +1626,8 @@ body { |
|
|
|
}.site-header__nav-item:hover .nav-mega { |
|
|
|
grid-template-rows: 1fr; |
|
|
|
visibility: visible; |
|
|
|
opacity: 1; |
|
|
|
transition: grid-template-rows var(--nav--dropdown-open-duration) var(--ease-expo-out), visibility 0s 0s, opacity var(--nav--dropdown-duration) var(--ease-expo-out); |
|
|
|
}.site-header__nav-item:hover .site-header__nav-link { |
|
|
|
color: var(--color-primary); |
|
|
|
}.site-header__nav-item:hover .site-header__chevron { |
|
|
|
@ -1629,7 +1640,7 @@ body { |
|
|
|
color: var(--color-text); |
|
|
|
box-shadow: none; |
|
|
|
}.site-header:has(.site-header__nav-item--mega:hover) .site-header__main { |
|
|
|
border-top-color: rgba(46, 53, 58, 0.1); |
|
|
|
/* border-top-color: rgba(46, 53, 58, 0.1); */ |
|
|
|
}.site-header:has(.site-header__nav-item--mega:hover) .header-logo .header-logo__img--default { |
|
|
|
display: none; |
|
|
|
}.site-header:has(.site-header__nav-item--mega:hover) .header-logo .header-logo__img--dark { |
|
|
|
|