.content{
padding-top: 70px;
padding-bottom: 100px;
}
.container{
position: relative;
}
.regionTabs{
position: relative;
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-top: 40px;
margin-bottom: -10px;
overflow-x: scroll;
&::-webkit-scrollbar{
display: none;
}
.regionTab{
position: relative;
margin-right: 40px;
flex-shrink: 0;
cursor: pointer;
&:last-child{
margin-right: 0;
}
.txt{
font-size: 18px;
line-height: 40px;
opacity: 0.55;
}
.bar{
position: absolute;
width: 20px;
height: 5px;
border-radius: 3px;
background: #E60012;
margin: auto;
// margin-top: 2px;
display: none;
bottom: 0;
left: 50%;
margin-left: -10px;
}
&.active{
.txt{
opacity: 1;
}
.bar{
display: block;
}
}
}
}
.contentInfo{
position: relative;
display: flex;
justify-content: space-between;
margin-top: 40px;
padding-left: 400px;
}
.contentInfoBox{
position: absolute;
left: 0;
top: 0;
margin-left: -30px;
padding-bottom: 10px;
width: 400px;
height: 100%;
overflow-y: scroll;
}
.addressBtns{
position: relative;
width: 340px;
margin-right: 30px;
margin-left: 30px;
.addressBtn{
padding: 12px 20px;
border-radius: 5px;
color: #505558;
margin-bottom: 15px;
cursor: pointer;
.title{
font-size: 15px;
line-height: 24px;
font-weight: bold;
}
.address{
margin-top: 1px;
font-size: 13px;
line-height: 24px;
font-weight: 300;
}
.tel{
font-size: 13px;
line-height: 24px;
font-weight: 300;
}
&:hover{
background: #fff;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
&.active{
background: #E60012;
color: #fff;
}
}
}
.content2{
background: #F1F3F5;
}
.mapBox{
position: relative;
width: 770px;
.mapInfo{
position: relative;
overflow: hidden;
border-radius: 5px;
// box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}
.baiduMap{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.mapPic{
width: 100%;
display: block;
opacity: 0;
}
.button{
margin-top: 20px;
}
}
#mapFloat{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
.floatInfo{
position: absolute;
width: 100%;
top: auto;
left: 0;
bottom: -100px;
margin: 0;
background: #fff;
border-radius: 5px 5px 0 0;
.titleCon{
position: relative;
width: 100%;
height: 50px;
background: linear-gradient(#ffffff, #F2F5F8);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px 5px 0 0;
.title{
font-size: 15px;
line-height: 20px;
color: #333436;
font-weight: bold;
}
.close{
opacity: 1;
width: 28px;
}
}
.infoBox{
position: relative;
padding: 20px;
padding-bottom: 50px;
width: 100%;
.mapInfo{
position: relative;
width: 100%;
height: 100%;
}
.baiduMap{
position: absolute;
width: 100%;
height: 100%;
}
.map{
display: block;
width: 100%;
opacity: 0;
}
.address{
font-size: 13px;
line-height: 24px;
color: #505558;
font-weight: 300;
margin-top: 10px;
}
.tel{
font-size: 13px;
line-height: 24px;
color: #505558;
font-weight: 300;
margin-top: 5px;
}
.button{
margin-top: 10px;
}
}
}
}
@media (max-width: 767px) {
.content{
padding-top: 40px;
padding-bottom: 40px;
}
.contentInfo{
padding-left: 0;
display: block;
margin-top: 20px;
}
.contentInfoBox{
position: relative;
margin-left: 0;
width: 100%;
overflow: initial;
}
.addressBtns{
margin: 0;
width: 100%;
}
.regionTabs{
margin-top: 30px;
}
}HoME日本不卡一区 日本不卡一区二区三区 日本不卡一区二区高清更新 日本不卡一区免费更新一区 日本不卡三区