webs/hanJing/css/aboutUs.css

270 lines
4.7 KiB
CSS

.topBanner{
width: 100%;
height: 68vh;
background-color: #030045;
display: flex;
justify-content: center;
align-items: start;
/* background: palegoldenrod; */
overflow: hidden;
background-image: url(../imgs/svg/关于我们图.svg);
background-repeat: no-repeat;
background-size:43vw auto;
background-position:46vw 0vw;
position: relative;
}
.topBannerLeft{
width: 27%;
height: 80%;
/* background: #00316B; */
color: #fff;
position: absolute;
top: 10vh;
left: 18vw;
}
.topBannerLeft p:nth-child(1){
font-size: 2.5vw;
font-weight: 600;
letter-spacing: 0.5vw;
}
.topBannerLeft p:nth-child(2){
font-size: 1.28vw;
color: #01A0D0;
margin-top: 10px;
line-height: 4.2vh;
}
.btLeft{
width: 20vw;
position: absolute;
bottom: 15vh;
left: -5.5vw;
}
.tpRight{
width: 17vw;
position: absolute;
top: 10vh;
right: -6vw;
}
.btRight{
width:70vw;
position: absolute;
bottom: -1.3vh;
right: 0vw;
}
/* ------------------- */
.banner{
width: 100%;
height: 205vh;
background-image: url(../imgs/svg/背景纹(大).svg);
background-repeat: no-repeat;
background-size:160%;
background-position: 54vw -42vw;
background-color: #00316B;
}
/* .bannerLeft{
width: 100%;
height: 30%;
background-color: rgba(3, 0, 69, 0.5);
} */
.bannertop{
width: 100%;
height:105vh;
background-image: url(../imgs/svg/企业文化理念\(BJF\).svg);
background-repeat: no-repeat;
background-size:40vw;
background-position:0vw 50%;
display: flex;
align-items: center;
justify-content: end;
padding-right: 5vw;
padding-top: 18vh;
}
.textBox{
width: 45vw;
height: 100%;
color: #fff;
/* background: peru; */
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
}
.textOne,.textTwo,.textThree{
width: 100%;
height: 30%;
/* background-color: rgba(3, 0, 69, 0.5); */
display: flex;
align-items: center;
justify-content: start;
margin-top: 3vh;
}
.Left{
width: 15%;
height: 100%;
}
.Left img{
width: 5vw;
height: auto;
}
.Right{
width: 80%;
height: 100%;
}
.Right p:nth-child(1){
font-size: 1.9vw;
font-weight: 600;
/* letter-spacing: 0.3vw; */
}
.Right p:nth-child(2){
font-size: 1.25vw;
margin-top: 2vh;
}
.bannerBottom{
width: 100%;
/* height: 100vh; */
background-color:rgba(3, 0, 69, 0.8);
padding-top: 8vh;
padding-bottom: 8vh;
}
.bannerBottom h1{
font-size: 3vw;
font-weight: 600;
color: #fff;
text-align: center;
text-decoration: underline;
text-underline-offset: 0.8vw;
}
.bannerBottomList{
width: 80%;
height:auto;
/* background: palegoldenrod; */
margin: 0 auto;
margin-top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
}
.bannerBottomList li{
width: 80%;
height:35vh;
margin-top: 10vh;
display: flex;
justify-content: space-around;
}
.bannerBottomList li p{
width: 40%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: end;
align-items: start;
padding-bottom: 3vh;
font-size: 1.2vw;
padding-left: 4vw;
}
.bannerBottomListOne{
background-image: url(../imgs/us/ic.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.bannerBottomListTwo{
background-image: url(../imgs/us/lowpower.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.bannerBottomListThree{
background-image: url(../imgs/us/manufacturer.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.bannerBottomListFour{
background-image: url(../imgs/us/Tapeout.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
/* ------------------- */
.top3{
width: 20vw;
position: absolute;
top: 0vh;
left: 20vw;
}
/* --------------- */
.map{
width: 100%;
height: 100vh;
/* background: palegoldenrod; */
background-color:rgba(3, 0, 69, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.addressBox-bottom{
width: 55vw;
height: 55vh;
margin: 0 auto;
position: relative;
margin-top: 10vh;
}
#mapContainer {
width: 100%;
height: 100%;
min-height: 300px; /* 确保地图有最小高度 */
}
html {
scroll-behavior: smooth; /* 添加平滑滚动效果 */
}
#contact-map {
scroll-margin-top: 10vh;
}