// ---------------------------------------------
// 导航组件
#menu{
position: fixed;
width: 100%;
height: 88px;
background: rgba(0, 0, 0, 0.06);
transition: all 0.3s ease-out;
z-index: 100;
.container{
position: relative;
height: 100%;
}
.menuContent{
position: relative;
display: flex;
align-items: center;
height: 100%;
.isBlack{
display: block;
}
.isWhite{
display: none;
}
.logo{
height: 52px;
}
.bar{
width: 1px;
height: 24px;
background: #fff;
opacity: 0.2;
margin-left: 25px;
}
.region{
width: 58px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: solid 2px rgba(255, 255, 255, 0.3);
border-radius: 14px;
box-sizing: border-box;
margin-left: 25px;
cursor: pointer;
.text{
font-size: 12px;
line-height: 20px;
color: #fff;
}
.arrow{
width: 6px;
height: 6px;
margin-left: 3px;
opacity: 0.7;
}
}
.menuList{
display: flex;
align-items: center;
margin-left: 25px;
height: 100%;
.menuBtn{
position: relative;
padding: 0 20px;
height: 100%;
display: flex;
align-items: center;
.txt{
position: relative;
font-size: 15px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
z-index: 1;
}
.navs{
position: absolute;
top: 0;
opacity: 0;
height: 0;
padding-top: 108px;
overflow: hidden;
transition: all 0.3s ease-out;
.nav{
display: flex;
align-items: center;
justify-content: center;
line-height: 48px;
font-size: 16px;
padding: 0 20px;
color: #333436;
cursor: pointer;
text-decoration: none;
}
}
&:hover{
background: #F6F8FA;
.txt{
background: #F6F8FA;
}
.navs{
display: block;
height: 380px;
opacity: 1;
}
}
}
}
.rightFlexBox{
position: absolute;
right: 0;
display: flex;
align-items: center;
.language{
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
line-height: 32px;
.active{
color: #fff;
}
}
.search{
width: 32px;
height: 32px;
margin-left: 12px;
}
.txtBox{
font-size: 12px;
color: #D1D3D5;
line-height: 16px;
margin-left: 12px;
}
}
.openMenu{
width: 32px;
.icon{
width: 100%;
}
}
.closeMenu{
width: 32px;
display: none;
}
}
&.white, &.isScroll, &.everWhite{
background: #FFF;
.menuContent{
.isBlack{
display: none;
}
.isWhite{
display: block;
}
.bar{
background: #000;
opacity: 0.15;
}
.region{
border: solid 2px rgba(81, 83, 86, 0.3);
.text{
color: #515356;
}
}
.menuList{
.menuBtn{
.txt{
color: #222325;
}
}
}
}
.rightFlexBox{
.language{
color: rgba(81, 83, 86, 0.5);
.active{
color: #515356;
}
}
.txtBox{
color: #515356;
}
}
}
}
@media (max-width: 767px) {
#menu{
height: 56px;
.menuContent{
.logo{
height: 38px;
}
.region{
margin-left: 20px;
}
}
}
}
// ---------------------------------------------
// ---------------------------------------------
// 头图
.banner{
position: relative;
.swiper-slide{
position: relative;
}
.paginations{
position: absolute;
width: 100%;
bottom: 10px;
z-index: 1;
height: 20px;
.container{
position: relative;
height: 100%;
.swiper-pagination{
width: 100%;
left: 0;
top: 0;
padding: 0 15px;
text-align: right;
.swiper-pagination-bullet{
margin: 0 4px;
}
}
}
}
.pic{
position: relative;
width: 100%;
display: block;
}
.black{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
opacity: 0.5;
}
.infoBox{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
.text{
position: relative;
font-weight: bold;
font-size: 66px;
color: #FFFFFF;
letter-spacing: 20px;
text-align: center;
display: inline-block;
}
.icon{
position: absolute;
width: 16px;
height: 16px;
left: -16px;
top: -16px;
}
}
&.alone{
.infoBox{
justify-content: start;
.text{
margin-left: 106px;
font-size: 60px;
letter-spacing: 0;
}
}
}
}
@media (max-width: 767px) {
.banner{
.paginations{
.container{
.swiper-pagination{
text-align: center;
}
}
}
.infoBox{
.text{
font-weight: bold;
font-size: 32px;
color: #FFFFFF;
letter-spacing: 3px;
text-align: center;
}
.icon{
width: 8px;
height: 8px;
left: -8px;
top: -8px;
}
}
&.alone{
height: 260px;
.picBox{
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.pic{
width: auto;
height: 100%;
}
.infoBox{
.container{
width: 100%;
}
.text{
font-size: 34px;
margin-left: 35px;
}
}
}
}
}
// ---------------------------------------------
// ---------------------------------------------
// 内容块标题
.titleContainer{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: end;
}
.titleBox{
display: flex;
align-items: center;
.bar{
width: 6px;
height: 32px;
background: #E60012;
margin-right: 20px;
}
.text{
font-size: 40px;
color: #222326;
font-weight: bold;
line-height: 52px;
.sml{
font-size: 15px;
line-height: 24px;
}
}
}
@media (max-width: 767px) {
.titleBox{
.bar{
width: 4px;
height: 22px;
margin-right: 12px;
}
.text{
font-size: 25px;
line-height: 40px;
}
}
}
// ---------------------------------------------
// 按钮
.button{
display: block;
height: 36px;
// background: #E9463F;
display: flex;
align-items: center;
cursor: pointer;
.txt{
font-size: 18px;
color: #333436;
font-weight: bold;
line-height: 40px;
}
.arrow{
width: 22px;
height: 22px;
display: block;
margin-left: 5px;
transition: all 0.3s ease-out;
}
&:hover{
text-decoration: none;
.arrow{
transform: translateX(10px);
}
}
}
@media (max-width: 767px) {
.button{
height: 32px;
.txt{
font-size: 13px;
line-height: 22px;
}
.arrow{
width: 18px;
height: 18px;
}
}
}
// 业内块容器
.content{
position: relative;
padding-top: 100px;
padding-bottom: 100px;
}
@media (max-width: 767px) {
.content{
padding-top: 50px;
padding-bottom: 50px;
}
}
// 页尾
#footer{
background: #505558;
.mapInfo{
display: flex;
justify-content: space-between;
padding-top: 60px;
padding-bottom: 51px;
overflow: initial;
.logo{
height: 66px;
display: block;
}
.maps{
display: flex;
justify-content: space-between;
.navBox{
margin-right: 20px;
&:last-child{
margin-right: 0;
}
.navBtn{
opacity: 0.9;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
display: block;
margin-bottom: 20px;
&:last-child{
margin-bottom: 0;
}
}
}
}
.emails{
.email{
margin-bottom: 18px;
.title{
opacity: 0.9;
font-size: 13px;
color: #D1D3D5;
}
.text{
opacity: 0.9;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
margin-top: 5px;
}
}
}
.qrcodeInfo{
.title{
opacity: 0.6;
font-size: 13px;
color: #FFFFFF;
}
.qrcodes{
position: relative;
display: flex;
margin-top: 10px;
.qrcodeBox{
position: relative;
margin-right: 30px;
cursor: pointer;
&:last-child{
margin-right: 0;
}
.weixin{
width: 60px;
}
.qrcode{
width: 100px;
}
.name{
opacity: 0.6;
font-weight: 300;
font-size: 12px;
color: #FFFFFF;
text-align: center;
line-height: 18px;
margin-top: 8px;
}
.hoverBox{
position: absolute;
left: -50px;
bottom: 120px;
opacity: 0;
transition: all 0.3s ease-out;
.hoverCode{
width: 160px;
padding: 20px;
padding-bottom: 12px;
background: #fff;
border-radius: 5px;
.img{
display: block;
width: 120px;
}
.txt{
font-size: 14px;
color: #333436;
margin-top: 5px;
text-align: center;
}
}
.arrow{
width: 10px;
height: 4px;
display: block;
margin: auto;
}
}
&:hover{
.hoverBox{
opacity: 1;
bottom: 90px;
}
}
}
}
}
}
.copyright{
background: #484E52;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
.txt{
font-size: 12px;
color: #868C92;
line-height: 20px;
font-weight: 300;
}
.linkBtn{
font-size: 12px;
color: #AEB3B8;
line-height: 20px;
a{
color: #AEB3B8;
}
}
}
}
@media (max-width: 767px) {
#footer{
.mapInfo{
display: block;
padding-top: 50px;
.logo{
height: 70px;
margin: auto;
}
.qrcodeInfo{
margin-top: 30px;
.title{
text-align: center;
}
.qrcodes{
display: flex;
justify-content: center;
}
}
}
}
}
// 导航下拉区
.menuDown{
position: fixed;
width: 100%;
height: 100%;
display: none;
z-index: 99;
.infoBox{
position: fixed;
width: 100%;
// height: 100%;
top: 0;
z-index: 99;
.infoContent{
background: #F6F8FA;
padding-top: 128px;
padding-bottom: 40px;
&.search{
position: absolute;
top: 0;
width: 100%;
text-align: center;
opacity: 0;
overflow: hidden;
.title{
font-size: 22px;
color: #333436;
margin-bottom: 20px;
}
.searchInput{
position: relative;
width: 500px;
height: 48px;
border-radius: 8px;
background: #ffffff;
margin: auto;
.input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0;
background: none;
padding-left: 15px;
font-size: 16px;
color: #707579;
font-weight: 300;
outline: none;
}
.icon{
position: absolute;
width: 32px;
height: 32px;
right: 8px;
top: 8px;
}
}
}
&.region{
position: absolute;
width: 100%;
height: 0;
display: none;
opacity: 0;
left: 0px;
top: 0;
overflow: hidden;
.regionContainer{
padding-left: 80px;
padding-right: 80px;
display: flex;
justify-content: space-between;
}
.regionBox{
.regionLabel{
font-size: 13px;
line-height: 17px;
color: #727476;
margin-bottom: 21px;
}
.regionBtn{
font-size: 16px;
line-height: 1.5;
color: #333436;
cursor: pointer;
text-decoration: none;
display: block;
margin-bottom: 10px;
&.active{
border-bottom: solid 2px #333436;
}
}
}
}
&.menuHover{
position: absolute;
width: 100%;
height: 0;
opacity: 0;
}
}
}
.mobileMenu{
position: fixed;
width: 100%;
height: 0;
top: 0;
padding-left: 30px;
padding-right: 30px;
padding-top: 50px;
background: #F6F8FA;
z-index: 99;
opacity: 0;
overflow: hidden;
.searchInput{
position: relative;
// width: 330px;
height: 40px;
border-radius: 6px;
background: #ffffff;
margin: auto;
margin-bottom: 30px;
margin-top: 30px;
.input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0;
background: none;
padding-left: 15px;
font-size: 14px;
color: #707579;
font-weight: 300;
outline: none;
}
.icon{
position: absolute;
width: 32px;
height: 32px;
right: 4px;
top: 4px;
}
}
.bar{
height: 1px;
background: rgba(0, 0, 0, 0.1);
opacity: 0.3;
margin-bottom: 30px;
}
.menuBtns{
.menuBtn{
display: block;
font-size: 22px;
line-height: 40px;
color: #333436;
margin-bottom: 20px;
transition: all 0.5s;
font-weight: bold;
text-decoration: none;
&:hover{
font-size: 20px;
}
}
}
.flexBox{
position: absolute;
width: 100%;
bottom: 50px;
left: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
.language{
font-size: 13px;
line-height: 32px;
color: rgba(114, 116, 118, 0.5);
margin-right: 10px;
cursor: pointer;
.active{
color: #727476;
}
}
.tel{
display: flex;
align-items: center;
font-size: 13px;
line-height: 32px;
color: #727476;
margin-left: 6px;
margin-right: 6px;
.icon{
width: 26px;
height: 26px;
display: block;
}
}
.stock{
width: 100%;
font-size: 12px;
color: #515356;
text-align: center;
line-height: 16px;
margin-top: 10px;
}
}
}
.bg{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 99;
opacity: 0;
}
}
@media (max-width: 767px) {
.menuDown{
.infoBox{
top: 50px;
.infoContent{
height: 100%;
&.region{
position: relative;
overflow: scroll;
display: block;
width: 100%;
padding: 0;
.regionContainer{
display: flex;
flex-wrap: wrap;
height: max-content;
padding: 30px;
}
// overflow: auto;
.regionBox{
width: 50%;
margin-bottom: 40px;
.regionLabel{
margin-bottom: 15px;
}
}
.region1{
width: 100%;
.regionBtn{
display: inline-block;
}
}
}
}
}
}
}
// 面包屑
.crumbsContent{
padding: 0;
background: #EFF1F3;
padding-top: 19px;
padding-bottom: 19px;
.txt{
font-size: 16px;
line-height: 22px;
color: #515356;
text-decoration: none;
}
.arrow{
width: 12px;
height: 16px;
margin-left: 12px;
margin-right: 12px;
}
}
// 报道
.newsCellBox{
position: relative;
width: 100%;
padding: 18px 20px;
padding-bottom: 16px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
margin-bottom: 12px;
text-decoration: none;
display: block;
background: #fff;
.title{
font-size: 19px;
line-height: 28px;
color: #333436;
font-weight: 500;
&.ml10{
margin-left: 10px;
}
}
.date{
font-size: 13px;
line-height: 18px;
color: #727476;
margin-top: 6px;
font-weight: 300;
margin-left: 10px;
}
.arrow{
position: absolute;
right: 20px;
top: 50%;
width: 20px;
margin-top: -10px;
}
&:hover{
text-decoration: none;
}
}
@media (max-width: 767px) {
.newsCellBox{
margin-bottom: 8px;
.title{
font-size: 15px;
line-height: 22px;
}
.date{
margin-top: 5px;
font-size: 12px;
line-height: 17px;
margin-left: 0;
}
}
}
// loading
.loading{
position: relative;
.icon{
width: 30px;
display: block;
margin: auto;
}
}