Files
orico-official-website-old/public/frontend/web/css/booNavigation.css
2024-10-29 14:04:59 +08:00

753 lines
16 KiB
CSS
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Name: booNavigation.css
* Date:Sun 16 Feb 2014
* Author: Noemi Losada Estrella <info@noemilosada.com>
* Creative Commons License <http://creativecommons.org/licenses/by-sa/3.0/>
*/
/** General
================================================== */
* {
margin: 0;
padding: 0;
}
/*font-family: "Microsoft YaHei" , sans-serif; */
body {font-size: 1.2em; font-weight: 400; color: #333; background-color: #f2f2f2; }
.wrapper {
/*margin: 50px auto;*/
/*width: 960px;*/
}
ul li {
list-style-type: none;
}
.wrapper a {
color: #333;
text-decoration: none;
}
/** Navigation theme
.search_content {
width: 100%;
margin: 0 auto;
background-color: #FFF;
border-radius: 8px;
display: block;
}
/*.tabs-vertical{*/
/* font: bold 13px sans-serif;*/
/* background-color: #f7f7f7;*/
/* box-shadow: 0 0 22px #E2E2E2 inset, 2px 2px 3px #E8E8E8;*/
/* border: 1px solid #CECECE;*/
/* margin: 30px auto 30px;*/
/* max-width: 580px;*/
/* text-align: center;*/
/* border-radius: 2px;*/
/*}*/
/* The tabs */
.tabs-vertical ul{
float: left;
list-style: none;
text-align: center;
width: 20%;
margin: 0;
padding-left: 0;
}
/*.tabs-vertical ul li{*/
/* margin-right: -1px;*/
/*}*/
.tabs-vertical ul li a{
display: block;
text-decoration: none;
color: #656a6d;
border: 1px solid transparent;
border-right: 0;
border-left: 0;
padding: 16px 40px 16px 20px;
}
.tabs-vertical ul li a.tab-active {
border-color: #dddddd;
background-color: #ffffff;
box-shadow: 0px 2px 0px #EFEFEF;
}
.tabs-vertical ul li:first-child a{
border-top: 0;
}
/* The content */
.tabs-vertical .tabs-content-placeholder{
min-height: 460px;
max-height: 660px;
overflow: scroll;
border-left: 1px solid #dddddd;
font-weight: normal;
background-color: #fff;
/*padding: 20px 40px 45px;*/
margin: 0 auto;
box-shadow: -3px 0 0px #F3F3F3;
text-align: left;
}
.tabs-vertical .tabs-content-placeholder dd a{
/*margin-left: 1.5%;*/
}
.tabs-vertical .tabs-content-placeholder div{
display: none;
}
.tabs-vertical .tabs-content-placeholder div.tab-content-active{
display: block;
}
.tabs-vertical .tabs-content-placeholder div p{
color: #565a5c;
line-height: 1.5;
text-align: left;
margin: 5px 0 20px;
}
.tabs-vertical .tabs-content-placeholder div img{
max-width: 100%;
}
@media (max-width: 600px) {
.tabs-vertical ul{
float: none;
}
.tabs-vertical ul li{
display: inline-block;
margin-bottom: -1px;
}
.tabs-vertical ul li a{
border: 1px solid transparent;
border-bottom: 0;
border-top: 0;
padding: 12px 15px;
}
.tabs-vertical ul li a.tab-active {
border-color: #dddddd;
background-color: #ffffff;
box-shadow: 2px 0px 0px #EFEFEF;
}
.tabs-vertical ul li:first-child a{
border-left: 0;
}
.tabs-vertical .tabs-content-placeholder{
padding: 15px 30px 30px;
border-left: 0;
border-top: 1px solid #dddddd;
box-shadow: 0px -3px 0px #F3F3F3;
}
}
/*================================================== */
.booNavigation {
position: relative;
font-family: Montserrat !important;
}
.booNavigation li.navItem {
width: 12.5%;
height: 60px;
line-height: 60px;
text-align: center;
color: #000000;
float: left;
font-size: 1rem;
text-decoration: none;
transition: all .3s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
}
.booNavigation li.navItem:hover {
/*background-color: #444;*/
/*border-color: #000;*/
cursor: pointer;
/*color: #45c9fc !important;*/
}
.booNavigation li.navItem > a {
color: #fff;
padding-right:5px;
}
.booNavigation li.navItem > a:hover {
/*color: #45c9fc !important;*/
}
.a1{
width: 100% !important;
position: relative;
}
.a1 div:first-child{
background-color: white;
border-right:1px solid grey;
width: 30% !important;
float: left;
}
.jspop{
margin: 0 !important;
position: fixed;
height: auto;
/*padding: 0 0 100px 0 !important;*/
background-color: #f2f2f2 !important;
max-height: 660px;
/*box-shadow: 3px 3px 40px 3px #88909A*/
border: 1px solid lightgray;
}
.booNavigation li.navItem .navContent {
/*padding: 0 !important;*/
background-color: #fff;
color: black;
left: 0;
top: 60px;
width: 100%;
z-index: 9999;
}
.booNavigation li.navItem .navContent1 {
background-color: #fff;
color: black;
position: absolute;
top: 60px;
width: auto !important;
height: auto !important;
z-index: 9999;
border-radius: 5px;
box-shadow: 0 0 1px 0 #88909A
}
.booNavigation li.navItem .navContent2 {
background-color: #fff;
color: black;
left: 49%;
position: fixed;
top: 60px;
width: auto !important;
height: auto !important;
z-index: 9999;
border-radius: 5px;
box-shadow: 0 0 1px 0 #88909A
/*box-shadow: 5px 5px 10px 2px #88909A*/
/*min-height: 220px;*/
}
.navContent2 li,.navContent1 li,.navContent3 li{
width: 100%;
padding: 0 10px;
}
.booNavigation li.navItem .navContent3 {
background-color: #fff;
color: black;
left: 59%;
position: fixed;
top: 60px;
width: auto !important;
height: auto !important;
z-index: 9999;
border-radius: 5px;
box-shadow: 0 0 1px 0 #88909A
}
.downimg{height:12px;}
.booNavigation .navContent > li {
color: #fff;
float: left;
text-align: left;
line-height: 1.5rem;
padding: 0.5rem;
}
.booNavigation .jspop > li {
color: #fff;
float: left;
/*padding: 10px;*/
width: 30%;
}
.booNavigation .navContent ul li a {
/*color: #fff;*/
display: block;
padding: 0 !important;
line-height: 2.75rem !important;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
}
.booNavigation .navContent ul li a:hover {
/*background-color: #555;*/
/*padding-left: 2px;*/
color: #004BFA !important;
}
/** Navigation examples
================================================== */
.nav-example {
clear: left;
}
.navItem{
position:relative;
display: grid;
grid-template-columns: auto auto; /* 设置两列 */
align-items: center; /* 垂直居中对齐 */
/* 可选:如果需要水平居中对齐图片和文字 */
justify-content: center;
}
#allbtntop{
position: relative;
}
/*.navItem a{*/
/* position: absolute;*/
/* left: 35%;*/
/*}*/
/*.navItem .downimg{*/
/* position: absolute;*/
/* left: 120px;*/
/* top: 22px;*/
/*}*/
/*.downimg1{*/
/* margin-left: 130px;*/
/* margin-top: -37px;*/
/*}*/
.hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:top:36px;left:0px}
body.hc_home .hc_lnav .allbtn ul{display:block}
body.hc_list .hc_lnav .allbtn ul{display:block}
.allbtn ul li{zoom:1;clear:both;cursor:default; cursor: pointer;}
.allbtn ul li .tx{line-height:35px;padding-left:10px;background-repeat:no-repeat;background-position:right center;height:35px;_background-image:none}
.allbtn ul li .tx a{font-family:, ;color:#ffffff;font-size:14px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
.allbtn ul li .tx a i{line-height:25px;margin-top:5px;width:25px;background-position:0px 0px;float:left;height:25px;margin-right:10px;text-decoration:none}
.allbtn ul li dl{zoom:1;color:#ffffff;clear:both;overflow:auto;padding-top:4px}
.allbtn ul li dl a{line-height:22px;white-space:nowrap;float:left;color:#d9e7ce;margin-left:6px;margin-right:6px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
.allbtn ul li dt{padding-left:10px;width:30px;float:left;padding-top:1px}
.allbtn ul li dd{line-height:22px;width:150px;float:left;padding-top:2px}
/*二级导航隐藏*/
.allbtn ul li .pop{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:none;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px }
.allbtn ul li .pop1{position:absolute;border-left:medium none;padding-bottom:10px;background-color:#ffffff;display:block ;border-top:medium none;top:0px;padding-top:10px;width:70%;padding-left:20px ;left:30%}
.allbtn ul li .pop h3{display:none;font-size:14px}
.allbtn ul li .pop dl{padding-bottom:6px;color:#666666;padding-top:6px}
/*.allbtn ul li .pop dl:hover{background-color:#f3f3f3}*/
.allbtn ul li .pop dl a{color:#666666;margin-left:12px;margin-right:12px}
.allbtn ul li .pop dl a.un{color:#a5a5a5}
.allbtn ul li .pop dt{padding-left:0px;width:72px;}
.allbtn ul li .pop dd{width:100%;margin-left:-12px;}
.allbtn ul li .pop .act{width:100%;height:80px;overflow:hidden;padding-top:10px}
.allbtn:hover ul{display:block}/*控制一级菜单显示隐藏*/
/*.allbtn ul li:hover{background-color:#fcfcfc}*/
.allbtn ul li:hover .tx{background-color:#f5f5f5}
.allbtn ul li:hover .tx a{color:#333333}
.allbtn ul li:hover .tx a i{background-position:0px -25px}
/*控制二级菜单显示隐藏*/
.allbtn ul li:hover .pop{display:block;top:0px;left:30%}
.allbtn ul li:hover .pop dl a.un{color:#a5a5a5;text-decoration:none}
.allbtn ul li:hover dl{color:#6e6e6e}
.allbtn ul li:hover a{color:#666666}
.allbtn ul li:hover a:hover{color:#004BFA}
.modal-fade-enter-active {
animation: dialog-fade-in .3s;
}
.modal-fade-leave-active {
animation: dialog-fade-out .3s;
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
.m-modal__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
background: rgba(0, 0, 0, .5);
}
.m-modal__container {
width: 25%;
position: relative;
margin: 0 auto 50px;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-sizing: border-box;
margin-top: 15vh;
animation: dialog-fade-in .3s;
}
.m-modal__header {
padding: 20px 20px 10px;
}
.m-modal__title {
line-height: 24px;
font-size: 18px;
color: #303133;
}
button {
-webkit-appearance: button;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
margin: 0;
}
.m-modal__headerbtn {
position: absolute;
top: 20px;
right: 20px;
padding: 0;
background: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
}
.m-modal__close {
color: #909399;
}
.m-modal__headerbtn:hover .m-modal__close {
color: #409EFF;
}
.m-modal__body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
.m-modal__footer {
padding: 10px 20px 20px;
text-align: right;
box-sizing: border-box;
}
.m-modal__footer button:first-child {
margin-right: 10px;
}
.m-modal-button {
display: none;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.head-nav{
position: absolute;
top: 0;
width: 100%;
/* height: 60px; */
/*background: rgba(255,255,255,0.2);*/
display: flex;
z-index: 99999;
max-width:1920px;
margin: 0 auto;
}
@media screen and (min-width:1930px){
.head-nav{
left: 50%;
display: flex;
z-index: 99999;
max-width:1980px;
margin: 0 auto;
margin-left: -990px;
}
}
.nav-1{
position: relative;
width: 20%;
background-color: transparent;
}
.nav-1 img{
margin-left: 50%;
/*height: 60px;*/
width:45%;
margin-top:10px;
}
@media screen and (max-width:1459px){
.nav-1 img{
margin-top:15px;
}
}
.nav-2{
width: 60%;
background-color: transparent;
}
.nav-3{
position: relative;
width: 20%;
background-color: transparent;
display: flex;
}
.nav-3 div{
width: 10%;
position: relative;
margin-left:15%;
}
.nav-3 .searchimg{
position: absolute;
top: 50%;
left: 5%;
}
.nav-3 .checkimg{
position: absolute;
top: 50%;
left: 20%;
margin-top: -10px;
cursor: pointer;
}
.nav-3 .checkimg:hover .top-country{
display: block;
}
.hidden {
display: none;
}
#top-country{
width: 330px;
/*height: 100px;*/
background-color: white;
position: fixed;
right: 5%;
top: 60px;
border-radius: 15px;
box-shadow: 2px 2px 10px 1px #88909A;
}
#top-country li{
width: 100%;
height: 50px;
line-height: 50px;
/*background-color: red;*/
text-align: center;
}
.desktopli{
display: flex;
/*border: 1px solid red;*/
}
.desktopli1{
height: 30px !important;
}
.desktopli .desktop-2{
width: 22%;
margin-left: 0;
}
.desktopli .desktop-2 img{
margin-left: 20px;
margin-top: 15px;
}
.desktopli .desktop-10{
font-family: Montserrat !important;
font-size: 1rem;
width: 70%;
text-align: left;
margin-left: 10px;
}
.openModalBtn{
cursor: pointer;
}
.modal_1 {
font-family: Montserrat !important;
margin-top: 5%;
margin-left: 10%;
width: 80%;
display: flex;
position: relative;
}
.modal_2 {
font-family: Montserrat !important;
margin-top: 5%;
margin-left: 10%;
width: 80%;
display: flex;
position: relative;
text-align: left;
}
.modal_1 div{
margin-top: 10%;
margin-left: 1%;
}
.modal_2 div{
text-align: center;
margin-top: 10%;
margin-left: 1%;
}
.modal_2 .title{
font-size: 14px;
font-weight: 600;
/*height: 45px;*/
overflow: hidden; /* 隐藏溢出部分的文字 */
display: -webkit-box;
-webkit-line-clamp: 1; /* 显示两行 */
-webkit-box-orient: vertical; /* 文本在垂直方向排列 */
}
.modal_2 .title p{
margin0
padding: 0;
}
.modal_2 .title :hover{
overflow: visible;
}
.modal_2 .subtitle{
margin-top: 0;
font-size: 10px;
color: #000000;
}
.tit1{
position: absolute;
left: 0;
top: 1%;
font-size: 16px;
color: #989898;
}
/* 背景模态框样式 */
.modal {
/*display: none;*/
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
/* 弹出框内容样式 */
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: fixed !important;
right: 2%;
width: 35%;
top: 60px;
height: 80%;
z-index: 9999;
}
/* 关闭按钮样式 */
.close-btn {
color: #aaa;
float: right;
font-size: 24px;
cursor: pointer;
}
.close-btn1 {
color: #aaa;
float: right;
margin-top: -5px;
cursor: pointer;
height: 20px;
width: 20px;
margin-right: 10px;
font-size: 20px;
}
.close-btn:hover {
color: #000;
}
.picture21{
width: 33%;
/*border: 1px solid red;*/
}
.picture21-img{
width: 7.1875rem;
height: 7.1875rem;
margin-left: 13%;
}