.aboutUs{ width: 100%; height: 100vh; /* background: palegoldenrod; */ position: relative; } .aboutUs .container{ width: 100%; height: 73%; /* background: palevioletred; */ background-image: url(../imgs/解决方案背景图.png); background-size:100% 100%; background-position: 100% 100%; background-repeat: no-repeat; } .aboutUs-content{ width:30vw; height: 25vh; /* background: palevioletred; */ position: absolute; bottom: 15vh; left: 15vw; display: flex; } .aboutUs-content-img{ width: 30%; } .with-border{ padding: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); overflow: hidden; } .with-border img{ width: 100%; height:auto; } .exaboutUs-content-tt{ /* background: palevioletred; */ width: 20vw; display: flex; flex-direction: column; justify-content: end; align-items: center; } .exaboutUs-content-tt p:nth-of-type(1){ font-size: 1.3vw; font-weight: 600; color: rgba(0,0,0,0.7); text-align: left; width: 80%; } .exaboutUs-content-tt p:nth-of-type(2){ font-size: 0.8vw; font-weight: 600; color: rgba(0,0,0,0.3); text-align: left; width: 80%; } .exaboutUs-content-tt p:nth-of-type(3){ font-size: 0.8vw; /* font-weight: 600; */ color: rgba(0,0,0,0.8); text-align: left; width: 80%; margin-top: 8px; } /* ---------------- */ .CarouselBox{ width: 40vw; height: 45vh; margin: 0 auto; overflow: hidden; position: absolute; top: 8vh; left: 5vw; padding-bottom: 2vh; object-fit: cover; } /* 轮播图容器 */ .carousel-container { width: 100%; height: 100%; position: relative; overflow: hidden; padding: 0; object-fit: cover; } .carousel-list { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease; } .carousel-item { flex: 0 0 100%; width: 100%; height: 100%; } /* 优化图片渲染 */ .carousel-item img { width: 100%; height: 100%; object-fit: contain; /* 改为contain,确保图片完整显示 */ user-select: none; /* 添加这些属性以提升性能 */ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } /* 修正指示器容器样式 */ .carousel-indicators { position: absolute; bottom: 2vh; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; } /* 修正指示器小圆点样式 */ .indicator { width: 8px; /* 稍微调小一点 */ height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: all 0.3s ease; } /* 补充激活状态的指示器样式 */ .indicator.active { background-color: #fff; /* 高亮为纯白色 */ transform: scale(1.2); /* 稍微放大 */ box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* 添加发光效果 */ } /* 修正容器结构相关样式 */ .carousel-container { width: 100%; height: 100%; position: relative; /* 确保是相对定位 */ overflow: hidden; padding: 0; } /* 悬停效果 */ .indicator:hover { background-color: rgba(255, 255, 255, 0.8); transform: scale(1.1); }