.topBanner{ width: 100%; height: 100vh; background-color: #030045; display: flex; justify-content: center; align-items: start; /* background: palegoldenrod; */ overflow: hidden; background-image: url(../imgs/PNG/我们的产品图.png); background-repeat: no-repeat; background-size:65vw auto; background-position:35vw 0vw; position: relative; } .topBannerLeft{ width: 26%; height: 80%; /* background: #00316B; */ color: #fff; position: absolute; top: 16vh; left: 13vw; } .topBannerLeft p:nth-child(1){ font-size: 3vw; font-weight: 600; letter-spacing: 0.3vw; } .topBannerLeft p:nth-child(2){ font-size: 1.2vw; color: #01A0D0; margin-top: 18px; line-height: 6.5vh; } .topBannerBth{ width: 100%; padding-left: 2vw; margin-top: 13vh; } .topBannerBth a{ display: block; width: 15vw; height: 4vw; font-size: 1.4vw; font-weight: 600; color: #fff; text-decoration: none; background: #00ECEC; display: flex; align-items: center; justify-content: center; border-radius: 50px; transition: all 0.3s ease; } .topBannerBth span{ font-size: 1.2vw; margin-right: 1vw; } .topBannerBth img{ width: 1.5vw; height: auto; } .topBannerBth a:hover{ color: #fff; transform: scale(1.1); /* 放大到原尺寸的1.1倍 */ transition: all 0.3s ease; /* 添加过渡动画 */ } .btLeft{ width: 20vw; position: absolute; bottom: 8vh; left: -5.5vw; } .tpRight{ width: 17vw; position: absolute; top: 16vh; right: -6vw; } .btRight{ width:70vw; position: absolute; bottom: -1.3vh; right: 0vw; } /* ----------------------------- */ .banner{ width: 100%; height: 219vh; 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; display: flex; align-items: center; justify-content: left; } .imgBox{ width: 50%; height: 100%; /* background: palegreen; */ position: relative; } .imgBox .imgBox1{ width: 20vw; height: auto; /* background: palegoldenrod; */ position: absolute; top: 5vw; left:10vw; } .imgBox .imgBox2{ width: 20vw; height: auto; position: absolute; top: 19vw; left: 20vw; /* background: palegoldenrod; */ } .imgBox img{ width: 26vw; height: auto; } .textBox{ width: 15vw; height: 50%; color: #fff; margin-left: 5vw; /* background: peru; */ } .textBox h1{ font-size: 2vw; font-weight: 600; letter-spacing: 0.3vw; } .textBox p{ font-size: 1.2vw; line-height: 6vh; margin-top: 5vh; } /* ------------------------- */ .bannerBottom{ width: 100%; height: 115vh; position: relative; background-image: url(../imgs/PNG/电子商城.png); background-repeat: no-repeat; background-size:40vw; background-position:0vw 50%; display: flex; justify-content: right; padding-right: 10vw; background-color: rgba(3, 0, 69, 0.8); } .bannerBottomText{ width: 40%; height: 100%; /* background-color: palegoldenrod; */ display: flex; flex-direction: column; align-items: start; justify-content: center; color: #fff; /* background: peru; */ } .bannerBottomText .top{ width: 100%; height: 40%; /* background-color: palegoldenrod; */ display: flex; flex-direction: column; align-items: start; justify-content: center; /* padding-top: 3vh; */ } .top p{ width: 70%; font-size: 1.5vw; line-height:7vh; margin-top: 4vh; }