.header{ width: 100%; height: 15vh; background-color: #030045; position: relative; margin-bottom: 0; margin-bottom: -1px; /* background: padding-box; */ display: flex; align-items: center; justify-content: center; } .header .bg{ width: 20vw; height: 35%; /* background: palegoldenrod; */ position: absolute; bottom: 0; left: 24vw; } .header .bg img{ width: 100%; height:auto; } .header .container{ width: 100%; height: 65%; display: flex; align-items: center; /* justify-content: space-around; */ /* background: palegoldenrod; */ } .logo{ width: 50%; height: 100%; display: flex; align-items: center; padding-left: 10vw; } .logo img{ width: 4vw; height: auto; max-height: 4vw; display: block; object-fit: contain; /* 保证图片不变形 */ } .header ul{ width: auto; height: 100%; display: flex; align-items: center; justify-content: center; /* background: palevioletred; */ margin-left: 5vw; /* padding-right: 10vw; */ } .header ul li{ /* width: 100%; */ min-width: 5vw; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.9vw; margin-left: 1vw; /* background: palegreen; */ } .header ul li a{ display: inline-block; color: #009FD1; transition: all 0.2s ease; font-weight: 600; font-size: 1vw; position: relative; padding-bottom: 2vh; } .header ul li a:hover{ font-size: 1vw; color: #fff; text-shadow: 0 0 10px rgba(41, 111, 216, 0.5); } /* .active{ background: palegoldenrod; } */ .actives::before{ content:url(../imgs/svg/页面选择图标.svg); width: 100%; height: auto; position: absolute; bottom: 0; left: 0; } .language{ /* width: 10%; */ /* height: 100%; */ /* background: palegoldenrod; */ /* line-height:5vh; */ padding-bottom: 2vh; border:none; outline: none; cursor: pointer; color: #009FD1; transition: all 0.2s ease; font-weight: 600; font-size: 1vw; background: transparent; margin-left: 1vw; } .language:hover{ color: #fff; text-shadow: 0 0 10px rgba(41, 111, 216, 0.5); }