.banner{ width: 100%; color: rgba(255, 255, 255, 1); position: relative; padding-bottom: 170px; } .container{ width: 100%; height: 83vh; background-image: url(../imgs/首页.jpg); background-size: cover; background-position: center; color: rgba(255, 255, 255, 1); } .content{ width:60%; height: 75%; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; } .content .title{ text-align: center; padding-right: 4%; } .content .title h1{ font-size: 4.5vw; font-weight: 600; letter-spacing: 3px; margin-top: 22%; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); } .content .title p{ font-size: 2.5vw; font-weight: 400; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-align: right; padding-right: 5vw; letter-spacing: 10px; } .content .text{ width: 51%; font-size: 0.86vw; font-weight: 400; text-align: left; margin-left: 24%; line-height: 35px; text-indent: 2em; letter-spacing: 2px; } .content .list{ position: absolute; bottom: 0; left: 24%; width: 50%; height:300px; } .content .list ul{ width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; color: #000; /* align-items: center; */ } .content .list ul li{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } ul li .roundImg{ width: clamp(150px, 9vw, 400px); /* 最小200px,最大400px,默认20vw */ height: auto; list-style: none; border-radius: 50%; overflow: hidden; text-align: center; padding: 5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; cursor: pointer; } ul li .roundImg:hover{ width: clamp(150px, 10vw, 400px); box-shadow: 0 0 20px rgba(63, 53, 206, 0.5); } ul li .roundImg img{ width: 100%; height: auto; object-fit: cover; border-radius: 50%; /* 如果是圆形图片 */ } ul li .textImg{ width: 100%; margin-left: 0px; padding-left: 0px; margin-top: 18px; text-align: center; cursor: pointer; } ul li .imgTitle{ font-size: 23px; font-weight: 600; color: rgba(0, 0, 0, 0.8); } ul li .imgTitleEN{ font-size: 16px; color: #A8A8A8; } .we{ width: 100%; height: 50vh; /* background-color: palegoldenrod; */ } .weList{ width: 40%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; margin: 0 auto; /* background: paleturquoise; */ box-sizing: border-box; } .weList li{ list-style: none; width: 12vw; /* height: 100%; */ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; /* background: peachpuff; */ } .weList li img{ /* width: 100%; */ object-fit: cover; /* 保持图片比例填充 */ display: block; /* 避免图片底部间隙 */ } .core{ position: absolute; top: 21.5vh; left: 17%; } .core2{ position: absolute; top: 21.5vh; left: 22%; } .core3{ position: absolute; top: 21.5vh; left: 24%; } ul .weList1 img{ width: auto; height: 35vh; /* background-image: url(../imgs/核心技术.png); background-size: 12vw auto; background-position: 0.5vw 1.4vw; background-repeat: no-repeat; */ } ul .weList2 img{ width: auto; height: 35vh; /* background-image: url(../imgs/技术团队.png); background-size:10.2vw auto; background-position: 0.8vw 2vw; background-repeat: no-repeat; */ } ul .weList3 img{ width: auto; height: 35vh; /* background-image: url(../imgs/技术支持.png); background-size: 10.95vw auto; background-position: 0.5vw 0vw; background-repeat: no-repeat; */ } .weListTitle{ /* margin-top: 7vh; */ font-size: 0.8vw; font-weight: bold; color: rgba(0, 0, 0, 0.7); margin-bottom: 0.6vw; /* background: palegreen; */ height: 11vh; display: flex; flex-direction: column; justify-content: end; text-align: center; } .weListText{ font-size: 0.6vw; font-weight: 400; color: rgba(0, 0, 0, 0.6); padding-bottom: 1vh; text-align: center; }