693 lines
14 KiB
CSS
Executable File
693 lines
14 KiB
CSS
Executable File
/**
|
|
* 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;
|
|
}
|
|
|
|
body { font-family: "Montserrat-Bold" , sans-serif !important; font-size: 1.2em; font-weight: 400; color: #333; background-color: #D8D8D8; }
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.booNavigation li.navItem {
|
|
width: 15%;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
/*background-color: #fff;*/
|
|
/* border-top: 5px solid #9900CC; */
|
|
/*padding: 5px 20px;*/
|
|
color: #000000;
|
|
float: left;
|
|
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;
|
|
}
|
|
.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;
|
|
/*padding: 0 0 100px 0 !important;*/
|
|
background-color: #f2f2f2 !important;
|
|
min-height: 460px;
|
|
box-shadow: 3px 3px 40px 3px #88909A
|
|
}
|
|
.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;
|
|
left: 10%;
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 135%;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
box-shadow: 3px 3px 40px 3px #88909A
|
|
}
|
|
.booNavigation li.navItem .navContent2 {
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 15%;
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
box-shadow: 3px 3px 40px 3px #88909A
|
|
/*min-height: 220px;*/
|
|
}
|
|
.navContent2 li,.navContent1 li,.navContent3 li{
|
|
width: 100%;
|
|
padding-left: 5px;
|
|
|
|
}
|
|
.booNavigation li.navItem .navContent3 {
|
|
background-color: #fff;
|
|
color: black;
|
|
left: 15%;
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
border-radius: 5px;
|
|
box-shadow: 3px 3px 40px 3px #88909A
|
|
|
|
/*min-height: 220px;*/
|
|
}
|
|
|
|
|
|
.booNavigation .navContent > li {
|
|
color: #fff;
|
|
float: left;
|
|
text-align: left;
|
|
/*padding: 10px;*/
|
|
/*width: 30%;*/
|
|
}
|
|
.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: 50px !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: blue;
|
|
}
|
|
|
|
/** Navigation examples
|
|
================================================== */
|
|
.nav-example {
|
|
clear: left;
|
|
}
|
|
.navItem{
|
|
position:relative;
|
|
}
|
|
#allbtntop{
|
|
position: relative;
|
|
}
|
|
.downimg{
|
|
margin-left: 120px;
|
|
margin-top: -37px;
|
|
}
|
|
.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:blue}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.nav-1{
|
|
position: relative;
|
|
width: 20%;
|
|
background-color: transparent;
|
|
}
|
|
.nav-1 img{
|
|
margin-left: 60%;
|
|
/*height: 60px;*/
|
|
width:45%;
|
|
margin-top:10px;
|
|
}
|
|
.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:20px;
|
|
}
|
|
.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: 250px;
|
|
/*height: 100px;*/
|
|
background-color: white;
|
|
position: absolute;
|
|
left: -23px;
|
|
top: 60px;
|
|
}
|
|
#top-country li{
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
/*background-color: red;*/
|
|
text-align: center;
|
|
}
|
|
.desktopli{
|
|
display: flex;
|
|
/*border: 1px solid red;*/
|
|
}
|
|
|
|
.desktopli .desktop-2{
|
|
width: 30%;
|
|
}
|
|
.desktopli .desktop-2 img{
|
|
margin-left: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
.desktopli .desktop-10{
|
|
width: 70%;
|
|
text-align: left;
|
|
}
|
|
#openModalBtn{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal_1 {
|
|
margin-top: 5%;
|
|
margin-left: 10%;
|
|
width: 80%;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.modal_2 {
|
|
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; /* 隐藏溢出部分的文字 */
|
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
}
|
|
.modal_2 .title :hover{
|
|
overflow: visible;
|
|
}
|
|
.modal_2 .subtitle{
|
|
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;
|
|
/* max-width: 400px;
|
|
margin: 100px auto; */
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
position: absolute;
|
|
right: 2%;
|
|
width: 35%;
|
|
top: 5%;
|
|
height: 90%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* 关闭按钮样式 */
|
|
.close-btn {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
color: #000;
|
|
}
|
|
.picture21{
|
|
width: 33%;
|
|
/*border: 1px solid red;*/
|
|
}
|
|
.picture21-img{
|
|
width: 7.1875rem!important;
|
|
height: 7.1875rem!important;
|
|
margin-left: 13%;
|
|
} |