.skin-blue .main-header .navbar .nav>li>a { color: #FFFFFF; } .navbar { font-size: 15px; } .navcontentfixed { height: 60px; } /*logo的样式*/ #logo { width: 24px; height: 24px; margin-top: 10px; display: inline-block; margin-right: 6px; } .navbar .project-title { text-decoration: none; vertical-align: middle; color: rgba(255, 255, 255, 1); opacity: 0.85; /* letter-spacing: -0.16px; */ font-weight: 400; } #title { font-size: 20px; color: #FFFFFF; } .pre-release { font-size: 18px; color: #FFFFFF; vertical-align: super; margin-left: 5px; } #suffix-title { font-size: 16px; height: 60px; line-height: 60px; padding: 5px; float: left; color: rgba(255, 255, 255, 0.85); } .main-header .sidebar-toggle { float: left; background-color: transparent; background-image: none; padding: 15px 17px; } .main-header .sidebar-toggle:before { content: "\f03b"; } /*头部选项选中时的颜色*/ .skin-blue .main-header .navbar .nav>li>a:hover, .skin-blue .main-header .navbar .nav>li>a:active, .skin-blue .main-header .navbar .nav>li>a:focus, .skin-blue .main-header .navbar .nav .open>a, .skin-blue .main-header .navbar .nav .open>a:hover, .skin-blue .main-header .navbar .nav .open>a:focus { background: #C30022; } .skin-blue .main-header .navbar .nav>li>a:hover { background: rgba(255, 255, 255, 0.12) } .navbar-toggle { height: 60px; } .navbar-toggle>img { width: 30px; height: 30px; } .navbar.default .navbar-title { height: 100%; /*width: 460px;*/ } /*头部选项下拉菜单框的样式*/ .nav-header { border-bottom: 2px solid rgba(255, 255, 255, 0.12); } .navbar ul { list-style: none outside none; padding: 0 4px; } .navbar-nav>li { position: static !important; height: 62px; display: table; } .navbar-nav>li>a { display: table-cell; vertical-align: middle; } .navbar-menu .menu-sub-warp { max-height: 0; } .navbar-menu:hover .menu-sub-warp { max-height: 660px; transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transition: all .5s ease-out 0.2s; -webkit-transition: all .5s ease-out 0.2s; -moz-transition: all .5s ease-out 0.2s; } .navbar .project-log-container { vertical-align: middle; margin-right: 6px; } .lang-option { cursor: pointer; z-index: -1; } .menu-box { width: 100%; position: absolute; left: 0; top: 62px; } .menu-box .menu-sub-warp { width: 100%; margin: 0 auto; overflow: auto; text-align: center; line-height: normal; color: white; background-color: rgba(25, 21, 21, 0.9); } .menu-box .menu-sub-warp::-webkit-scrollbar { width: 3px; } .menu-box .menu-sub-warp::-webkit-scrollbar-thumb { border-radius: 12px; background: rgba(0, 0, 0, .8); } .navbar-nav>li>a { padding-bottom: 17px; } ul.icl-nav-menu-box { margin: 0; padding: 10px; } .icl-nav-menu-box>li { display: inline-block; vertical-align: text-top; width: 160px; margin: 0 30px; text-align: right; } li.navbar-menu>a { padding: 12.5px; } li.navbar-menu>a:hover, li.navbar-menu>a:focus { outline: none; } li.navbar-menu>a::after { position: absolute; left: 0; width: 100%; height: 3px; background: #E14D57; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } li.navbar-menu>a::after { bottom: 0px; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } li.navbar-menu.active>a::after { bottom: 0px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } ul.icl-nav-menu-sub:nth-child(1) { border-bottom: 1px solid rgba(255, 255, 255, .1); } .icl-nav-menu-title { display: block; color: white; font-size: 1.7rem; text-align: right; margin: 6px 0; padding: 10px 4px; } .icl-nav-menu-title:link, .icl-nav-menu-title:hover, .icl-nav-menu-title:focus, .icl-nav-menu-title:visited { color: white; } .icl-nav-menu-box li a:not(.disabled):hover, .icl-nav-menu-box li a:not(.disabled):focus { color: #e14d57; } .icl-nav-menu-sub { font-size: 1.4rem; max-height: 600px; margin-bottom: 10px; /* overflow: auto; */ color: #d7d7d7; } .icl-nav-menu-sub a { color: #d7d7d7; } .icl-nav-menu-sub li { text-align: match-parent; line-height: 30px; } .icl-nav-menu-sub .red-circle { display: inline-block; width: 6px; height: 6px; border-radius: 6px; position: absolute; right: -10px; top: 7px; background: #e14d57; } .icl-nav-menu-sub::-webkit-scrollbar { width: 3px; } .icl-nav-menu-sub::-webkit-scrollbar-thumb { border-radius: 12px; background: rgba(0, 0, 0, .8); } .icl-nav-menu-item:not(.icl-nav-menu-overivew)>li:last-child { width: 135px; } .icl-line { width:1392px; height: 1px; background: rgba(255, 255, 255, 1); opacity: 0.12; margin: 0 auto; } @media screen and (max-width: 1440px) { .navcontentfixed { width: 96% !important; } } @media screen and (max-width: 1200px) { .navcontentfixed { width: 96% !important; } .navbar-header { margin-left: 0; margin-right: 0; } .navbar.default .navbar-toggle { display: block; float: right; } .navbar.default .navbar-collapse.collapse { display: none !important; } .navbar.default .collapse.in { display: block !important; } .navbar.default .navbar-header { float: none; } .menu-box { top: 120px; } } @media screen and (max-width: 992px) { /*尺寸小于992时下拉菜单的样式*/ .navbar-custom-menu>.navbar-nav>li>.dropdown-menu { border: 0; background: #C30022; } .navbar-custom-menu>.navbar-nav>li>.dropdown-menu>li { position: relative; right: 0; left: auto; border: 0; background: #C30022; } .skin-blue .main-header .navbar .dropdown-menu>li>a { color: #ffffff; } /*头部右侧收缩按钮的收缩样式和宽度控制*/ .navbar-header { float: none } .navbar-toggle { display: block; float: right; } .navbar-collapse.collapse { display: none !important; } .menu-box { top: 120px; } .collapse.in { display: block !important; } .icl-nav-menu-title { font-size: 1.5rem; } .icl-nav-menu-overivew>li { margin: 0 20px; } } @media (max-width: 991px) { .navbar-custom-menu>.navbar-nav>li { position: relative; } .navbar-custom-menu>.navbar-nav>li>.dropdown-menu { position: absolute; top: auto; right: 0; left: auto; } } @media (max-width: 826px) { .icl-nav-menu-overivew>li { margin: 0; } } @media screen and (max-width: 768px) { .menu-box { top: 120px; } .navbar-nav>li>.dropdown-menu { margin-top: 0 !important; } #suffix-title { font-size: 14px; } /*尺寸小于768px时,logo和产品名称的样式*/ .navbar-brand { height: 30px; line-height: 30px; } #logo { width: 34px; height: 34px; margin: 15px 0 0 12px; } .navbar-toggle>img { width: 34px; height: 34px; } .pre-release { font-size: 14px; } .navbar-toggle { height: 60px; padding-left: 10px; padding-top: 15px } .navbar-collapse.in { overflow-y: visible; } .navbar-menu { font-size: 14px; } } @media screen and (max-width: 767px) { .menu-box { top: 181px; } } @media screen and (max-width: 640px) { .navbar-header { display: flex; justify-content: space-between; } .navbar-header #suffix-title { line-height: 14px; height: auto; margin-left: 43px; font-size: 12px; } } @media screen and (max-width: 540px) { .navbar-custom-menu>.navbar-nav>li { position: static; } .navbar-custom-menu>.navbar-nav>li>.dropdown-menu { position: absolute; top: auto; right: auto; left: auto; } } /*尺寸小于510px时,logo和产品名称的样式,主要是为了适应iphone6 plus等移动端的浏览器*/ @media screen and (max-width: 510px) { .navbar.default .navbar-toggle { margin-right: 0; } .navbar.default .navbar-toggle>i { width: 18px; height: 16px; } #title { font-size: 16px; } .pre-release { font-size: 8px; } /*尺寸小于510时,利用按钮展开的头部选项的样式*/ .navbar-custom-menu .navbar-nav>li>a { padding: 12px; line-height: 20px; } .skin-blue .main-header .navbar .nav>li>a { font-size: 15px; } } @media screen and (max-width: 424px) { .skin-blue .main-header .navbar .nav>li>a { font-size: 13px; } } /*尺寸小于410px时,logo、产品名称、右侧收缩按钮的样式,主要是为了适应iphone6等移动端的浏览器*/ @media screen and (max-width: 410px) { #suffix-title { font-size: 8px; } #title { font-size: 12px; } .pre-release { font-size: 5px; } .navbar-toggle { padding-left: 10px; padding-right: 10px; } /*尺寸小于400时,利用按钮展开的头部选项的样式*/ .navbar-custom-menu .navbar-nav>li>a { padding-left: 10px; padding-right: 10px; } } /*尺寸小于358px时,logo、产品名称、右侧收缩按钮的样式,主要是为了适应iphone5等移动端的浏览器*/ @media screen and (max-width: 358px) { .navbar-toggle { padding-left: 3px; padding-right: 6px; } .menu-box { top: 240px; } } @media screen and (max-height: 640px) { .navbar-menu:hover .menu-sub-warp { max-height: 400px; } }