.aboutUs{ width: 100%; height: 88vh; /* background: palegoldenrod; */ position: relative; } /* .aboutUs .container{ width: 100%; height: 83%; } */ .CarouselBox{ width: 100%; height: 80%; margin: 0 auto; overflow: hidden; position: relative; } /* 轮播图容器 */ .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: 0 0 100%; width: 100%; height: 100%; } /* 优化图片渲染 */ .carousel-item img { width: 100%; height: 100%; object-fit: cover; user-select: none; /* 添加这些属性以提升性能 */ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } /* 优化箭头按钮样式 */ .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; } .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.8); } /* 添加触摸设备支持 */ @media (hover: none) { .carousel-arrow { display: none; /* 在触摸设备上隐藏箭头 */ } } .carousel-arrow-left { left: 2vw; top: 48.7%; } .carousel-arrow-right { right: 2vw; } /* 修正指示器容器样式 */ .carousel-indicators { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } /* 修正指示器小圆点样式 */ .indicator { width: 8px; /* 稍微调小一点 */ height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); 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.5); /* 添加发光效果 */ } /* 修正容器结构相关样式 */ .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); } .aboutUs-content{ width:20vw; height: 20vh; /* background: palevioletred; */ position: absolute; bottom: 6vh; left: 15vw; display: flex; } .aboutUs-content-img{ width: 43%; } .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: 48%; display: flex; flex-direction: column; justify-content: end; align-items: center; } .exaboutUs-content-tt p{ margin-left: 1vw; } .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: 100%; } .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: 100%; } .textBox{ width: 19vw; height: 30vh; position: absolute; top: 5vh; left: 8vw; } .textBox-title{ margin-top: 1vh; } .textBox-title p{ line-height: 30px; color: rgba(0,0,0,0.7); } .textBox-title p:nth-of-type(1){ font-size: 0.9vw; } .textBox-title p:nth-of-type(2){ font-size: 0.75vw; margin-top: 0.5vh; } /* -------------------------- */ .productIntroduction{ width: 100%; /* background: palegoldenrod; */ } .productIntroduction .top{ width: 70%; height: 62vh; margin: 0 auto; display: flex; justify-content: space-between; padding-top: 5vh; } .productIntroduction .top .top-left,.top-right{ width: 50%; height: 100%; } .productIntroduction .top-left img{ width: 80%; height: auto; } .text-box{ margin-top: 3vh; padding-left: 0.5vw; width: 100%; text-align: left; } .text-box p{ margin-top: 1vh; } .text-box p:nth-of-type(1){ font-size: 0.9vw; font-weight: 600; color: rgba(0,0,0,0.7); } .productIntroduction .top-right { text-align: right; } .text-right{ padding-left: 7vw; } .productIntroduction .top-right img{ width: 82%; height: auto; } .top2Box{ width: 100%; background: #E9F1F3; padding-top: 5vh; } .top2Box .top{ height: 53vh !important; } .productIntroduction .bottom{ width: 100%; height: 55vh; margin: 0 auto; text-align: center; background: #E9F1F3; } .bottom-left{ text-align: left; width: 32%; margin: 0 auto; } .bottom-left img{ width: 90%; }