.ABtitleBox { width: 100%; height: 100vh; position: relative; display: flex; justify-content: right; background-image: url(../imgs/PNG/软件开发.png); background-repeat: no-repeat; background-size: 100% 90%; background-position: 0% 100%; } .ABtitle{ position: absolute; left: 30%; top: 13%; font-size: 35px; } .ABtitle h1{ letter-spacing: 8px; margin: 0; text-align: center; } .ABtitle p{ font-weight: 500; color: #91A7BC; font-size: 35px; margin: 0; margin-top: 8px; } .ABtitleBox .content{ position: absolute; top: 55%; left: 6%; width: 714px; font-size: 25px; letter-spacing: 3px; line-height: 55px; } .ourServicesBox{ width: 100%; height: 100vh; display: flex; justify-content: start; flex-direction: column; align-items: center; /* background-color: #F5F5F5; */ padding: 50px 0; } .ourServicesTitle{ width: 80%; height: 100px; margin: 0 auto; text-align: center; } .ourServicesTitle h1{ font-size: 35px; letter-spacing: 3px; margin: 0; } .ourServicesTitle p{ font-size: 23px; margin-top: 18px; color: #92A8BD; padding: 0; } .ourServicesContent{ width: 80%; height: 85%; display: flex; justify-content: space-between; } .ourServicesContent div{ width: 40%; margin-top: 50px; box-shadow: 0px 0px 10px 0px #87adfc; border-radius: 20px; } .left,.right{ text-align: center; padding: 20px; padding-top: 50px; } .left img{ width: 88%; height: 58%; box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5); } .left h1{ width: 90%; text-align: left; margin: 0 auto; margin-top: 30px; font-size: 30px; color: #376DF2; } .left p{ width: 90%; text-align: left; margin: 0 auto; margin-top: 3%; font-size: 1.2rem; line-height: 35px; } .right img{ width: 90%; height: 58%; box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5); } .right h1{ width: 90%; text-align: left; margin: 0 auto; margin-top: 30px; font-size: 30px; color: #376DF2; } .right p{ width: 90%; text-align: left; margin: 0 auto; margin-top: 3%; font-size: 1.2rem; line-height: 35px; } .ourWorksBox{ width: 100%; height: 900px; text-align: center; padding: 0px; margin-top: 100px; background-image: url(../imgs/PNG/首页-弧形线条\(BJF\).svg); background-repeat: no-repeat; background-size: 100% 140%; background-position: 0% 0%; } .ourWorksBox h1{ margin-top: 30px; font-size: 30px; } .ourWorksBox ul{ width: 85%; height: 100%; text-align: center; box-sizing: border-box; margin: 0 auto; display: flex; justify-content: center; margin-top: 50px; padding: 0px; /* background: palegoldenrod; */ } .ourWorksBox ul li{ width: calc(100% / 5); height: 35%; margin: 0px; display: flex; overflow: hidden; } .ourWorksBox ul li .left2{ width:60%; height: 94%; background-color: #E0EDF5; border-radius: 10px; padding: 10px; } li .right2{ flex: 1; display: flex; justify-content: center; align-items: center; text-align: center; } li .right2 img{ width: 50px; } .ourWorksBox ul .last{ width: 14% !important; background-color: #E0EDF5; border-radius: 10px; } .ourWorksBox ul .last .content{ padding: 10px; } .title{ margin-top: 10px; font-size: 23px; color: #376DF2; margin-top: 15%; } .text{ width: 100%; font-size: 0.9rem; line-height: 28px; text-align: left; } .softwareProduct{ width: 100%; height: 800px; } .softwareProduct h1{ width: 100%; text-align: center; font-size: 30px; } .softwareProduct p{ width: 100%; text-align: center; font-size: 22px; color: #92A8BD; } .CarouselBox{ width: 60%; height: 80%; box-shadow: 0px 0px 10px 0px #87adfc; margin: 0 auto; border-radius: 20px; overflow: hidden; } /* 轮播图容器 */ .carousel-container { width: 100%; height: 100%; position: relative; overflow: hidden; padding: 0; } /* 轮播图片列表 */ .carousel-list { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; } .carousel-item { flex-shrink: 0; width: 100%; height: 100%; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; } /* 箭头按钮样式 */ .carousel-arrow { position: absolute; top: 50%; /* transform: translateY(-50%); */ width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 20px; z-index: 10; transition: all 0.3s ease; user-select: none; /* 确保基线对齐 */ line-height: 1; /* 移除任何可能的内边距 */ padding: 0; /* 确保盒模型一致 */ box-sizing: border-box; /* 强制相同的文本基线 */ vertical-align: middle; } .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.8); } .carousel-arrow-left { left: 20px; top: 48.7%; } .carousel-arrow-right { right: 20px; } .footerBox{ width: 100%; height: 930px; background-image: url(../imgs/PNG/背景下.png); background-repeat: no-repeat; /* 添加这行 */ background-position: 0% 100%; /* 添加这行 */ background-size: 100% 149%; position: relative; /* 添加这行 */ margin-top: 0; /* 添加这行 */ } .Flogo{ position: absolute; top: 65%; left: 10%; } .FlogoImg{ width: 130px; }