.v-header { // font-family: SourceHanSansCN; height: 5.833333rem; background-color: #fff; color: #4c4948; position: relative; z-index: 11; .header-container { max-width: 950px; // max-width: 1024px; height: 100%; margin: auto; display: flex; align-items: center; position: relative; } .main-nav { height: 100%; flex: 1 0 auto; } .logo-img { margin-right: 2rem; cursor: pointer; } .nav-list { height: 100%; display: flex; align-items: center; justify-content: flex-end; position: relative; } .nav-item { display: flex; align-items: center; height: 100%; margin: 0; font-size: 1rem; // padding: 0 4.166667rem; -ms-flex-pack: center; justify-content: center; position: relative; cursor: pointer; } .main-nav-list { display: flex; cursor: pointer; } .nav-item.link-item { padding: 0 50px; height: 5rem; } .nav-item.search { flex: 1 1 auto; } .nav-item.auth { color: #ffffff; .user { width: 7.333333rem; height: 2.25rem; background-color: #f05a23; border-radius: 1.333333rem; display: flex; align-items: center; justify-content: center; // margin-right: 2rem; .icon-img { margin: 0 .5rem; } } .lang { color: #f05a23; } } } @media (max-width: 950px) { .v-header { .header-container { width: 96%; } } } @media (max-width: 800px) { .v-header { .main-nav-list { display: none; } } }