323 lines
6.3 KiB
CSS
323 lines
6.3 KiB
CSS
.header{
|
||
width: 100%;
|
||
height: 12vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
/* background: #fff; */
|
||
background-color: rgba(241, 241, 241, 0.5);
|
||
z-index: 1000;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
transition: background 0.3s;
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
.header.scrolled {
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,0.04); /* 可选：加阴影提升层次 */
|
||
}
|
||
|
||
.logo{
|
||
width: 20%;
|
||
height: 100%;
|
||
/* background: palegoldenrod; */
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 8vw;
|
||
}
|
||
.logo img{
|
||
width: 8vw;
|
||
height: auto;
|
||
}
|
||
|
||
.nav{
|
||
width: 46%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-right: 8vw;
|
||
/* background: palegoldenrod; */
|
||
}
|
||
|
||
.nav-list{
|
||
width: 100%;
|
||
height: 43%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
/* background: paleturquoise; */
|
||
}
|
||
|
||
.nav-item{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.nav-item a{
|
||
color: #1A2B3C;
|
||
font-size: 0.9vw;
|
||
position: relative;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.nav-item a.active {
|
||
|
||
color: #3478FD;
|
||
|
||
|
||
}
|
||
|
||
/* .nav-item a.active::before {
|
||
content: '';
|
||
width: 100%;
|
||
height: 1px;
|
||
background: #00a0d1;
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: 0;
|
||
display: block;
|
||
} */
|
||
|
||
.nav-item a:hover{
|
||
color: #3478FD;
|
||
}
|
||
|
||
/* 下拉菜单 */
|
||
.nav-dropdown {
|
||
position: relative;
|
||
}
|
||
.arrow {
|
||
margin-left: 4px;
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
|
||
.dropdown-menu li {
|
||
padding: 0;
|
||
list-style: none;
|
||
|
||
}
|
||
.dropdown-menu li a {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 24px;
|
||
color: #1A2B3C;
|
||
font-size: 1em;
|
||
white-space: nowrap;
|
||
transition: background 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dropdown-menu li a:hover {
|
||
background: #f2f8fa;
|
||
color: #3478FD;
|
||
}
|
||
.dropdown-mask {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0; top: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.08);
|
||
}
|
||
/* 下拉激活时显示 */
|
||
.nav-dropdown.open .dropdown-menu {
|
||
display: block;
|
||
}
|
||
|
||
.dropdown-mask.active {
|
||
display: block;
|
||
}
|
||
|
||
.arrow {
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
width: 0;
|
||
height: 0;
|
||
vertical-align: middle;
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-top: 5px solid #1A2B3C;
|
||
transition: transform 0.2s;
|
||
}
|
||
.nav-dropdown.open .arrow {
|
||
transform: rotate(180deg);
|
||
|
||
border-top: 5px solid #3478FD;
|
||
}
|
||
.nav-dropdown a:hover .arrow,.nav-item a.active .arrow{
|
||
border-top: 5px solid #3478FD;
|
||
}
|
||
|
||
/* 下拉菜单动画 */
|
||
.dropdown-menu {
|
||
display: block; /* 让动画生效，实际用visibility控制显示 */
|
||
/* opacity: 0; */
|
||
transform: translateY(10px);
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
transition: opacity 0.25s cubic-bezier(.4,0,.2,1),
|
||
transform 0.25s cubic-bezier(.4,0,.2,1),
|
||
visibility 0.25s;
|
||
position: absolute;
|
||
top: 8vh;
|
||
left: 0;
|
||
min-width:15vw;
|
||
background: #fff;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
||
border-radius: 8px;
|
||
z-index: 1001;
|
||
padding: 12px 0;
|
||
}
|
||
.nav-dropdown.open .dropdown-menu {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
|
||
.dropdown-item{
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
width: 0;
|
||
height: 0;
|
||
vertical-align: middle;
|
||
border-top: 5px solid transparent;
|
||
border-bottom: 5px solid transparent;
|
||
border-left: 5px solid #1A2B3C;
|
||
transition: transform 0.2s;
|
||
transition: all 0.2s;
|
||
}
|
||
.dropdown-item img{
|
||
width: 50%;
|
||
height: auto;
|
||
}
|
||
/* hover 时去掉背景色，加边框 */
|
||
.dropdown-menu li:hover .dropdown-item {
|
||
transform: scale(1.1);
|
||
border-left: 5px solid #3478FD;
|
||
}
|
||
|
||
.dropdown-menu li:hover .dropdown-item img {
|
||
filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%);
|
||
transition: all 0.3s ease;
|
||
}
|
||
/* 联系我们 */
|
||
.contactUs{
|
||
|
||
border-radius: 30px;
|
||
transition: box-shadow 0.2s, background 0.3s,transform 0.2s;
|
||
background: #3478FD;
|
||
margin-left: 6vw;
|
||
}
|
||
|
||
.contactUs:focus,
|
||
.contactUs:hover {
|
||
box-shadow: 0 8px 24px rgba(26, 109, 197, 0.22);
|
||
/* background: linear-gradient(100deg, #4fd7fa 0%, #2a7be0 100%); */
|
||
transform: translateY(-2px) scale(1.03);
|
||
}
|
||
|
||
.contactUs .contactUs-email {
|
||
transition:
|
||
box-shadow 0.2s,
|
||
background 0.2s,
|
||
transform 0.2s;
|
||
}
|
||
|
||
.contactUs:focus .contactUs-email,
|
||
.contactUs:hover .contactUs-email {
|
||
/* background: #e6f7ff; */
|
||
/* box-shadow: 0 0 0 4px rgba(54,198,240,0.15); */
|
||
transform: scale(1.12) rotate(-6deg);
|
||
}
|
||
|
||
|
||
.contactUs a{
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
display: inline-block;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* background: palevioletred; */
|
||
|
||
}
|
||
|
||
.contactUs a span {
|
||
transition: color 0.2s, font-weight 0.2s;
|
||
font-size: 0.8vw;
|
||
}
|
||
|
||
.contactUs:focus a span,
|
||
.contactUs:hover a span {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.contactUs-email{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.6vw;
|
||
height: 1.6vw;
|
||
border-radius: 50%;
|
||
/* background: #fff; */
|
||
margin-left: 0.5vw;
|
||
}
|
||
|
||
.contactUs-email img{
|
||
width: 60%;
|
||
height: auto;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* 让 menu-active 和 hover 效果一致 */
|
||
.dropdown-menu li a.menu-active,
|
||
.dropdown-menu li a:hover {
|
||
background: #f2f8fa;
|
||
color: #3478FD;
|
||
}
|
||
|
||
/* 图标边框和滤镜一致 */
|
||
.dropdown-menu li a.menu-active .dropdown-item,
|
||
.dropdown-menu li a:hover .dropdown-item {
|
||
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
width: 0;
|
||
height: 0;
|
||
vertical-align: middle;
|
||
border-top: 5px solid transparent;
|
||
border-bottom: 5px solid transparent;
|
||
border-left: 5px solid #3478FD;
|
||
transition: transform 0.2s;
|
||
transition: all 0.2s;
|
||
/* transform: scale(1.1); */
|
||
}
|
||
|
||
.dropdown-menu li a.menu-active .dropdown-item img,
|
||
.dropdown-menu li a:hover .dropdown-item img {
|
||
filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
|
||
|
||
|