/* 外层容器:改用Flex布局承载轮播图+箭头(核心修改) */ .carousel-wrapper { width: 100%; margin: 0 auto; /* 移除position: relative(无需定位) */ display: flex; /* 核心:Flex布局 */ align-items: center; /* 箭头与轮播图垂直居中 */ justify-content: center; /* 整体水平居中 */ gap: 0; /* 初始间距为0,后续通过箭头margin控制更灵活 */ padding: 0; /* 可选:清除默认内边距 */ padding-top: 0.4rem; } /* 轮播容器整体样式(仅承载图片) */ .carousel-container { width: 1440px; max-width: 1440px; min-width: 1280px; /* 移除margin: 0 auto(Flex容器已居中) */ overflow: hidden; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); flex-shrink: 0; /* 防止轮播图容器被Flex挤压 */ } /* 轮播图片列表 */ .carousel-imgs { width: 100%; height: 100%; display: flex; transition: transform 0.5s ease; } /* 单张轮播图样式 */ .carousel-img { width: 100%; height: 100%; flex-shrink: 0; object-fit: cover; } /* 图片版箭头样式(Flex版,移除定位相关属性) */ .carousel-arrow { /* 箭头容器尺寸(保留原有) */ width: 0.77rem; height: 0.77rem; background: transparent; border: none; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; opacity: 0.85; user-select: none; flex-shrink: 0; /* 防止箭头被Flex挤压 */ /* 控制箭头与轮播图的间距(核心:替代定位的left/right) */ margin: 0 20px; /* 可自定义箭头与轮播图的左右间距,比如改10px/30px */ } /* 箭头图片样式(保留原有) */ .carousel-arrow img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } /* hover动效(修改transform,移除translateY(-50%)) */ .carousel-arrow:hover { opacity: 1; transform: scale(1.1); /* 仅保留缩放,无需 translateY */ box-shadow: 0 6px 20px rgba(0, 120, 255, 0.4); } /* 移除定位相关的箭头位置控制(Flex布局无需) */ .arrow-left { margin-right: 2.32rem; } .arrow-right { margin-left: 2.32rem; } /* 轮播下方文字区域(保留原有) */ .carousel-texts { max-width: 1440px; min-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; padding-top: 1rem; color: #555; } /* 文字高亮样式(保留原有) */ .carousel-text { border-bottom: 3px solid transparent; transition: all 0.3s ease; cursor: pointer; border-radius: 4px; } .carousel-text.active { font-weight: bold; transform: translateY(-3px); color: #fff; } .carousel-text-t { font-size: 0.32rem; text-align: center; } .carousel-text-p { font-size:clamp(16px, 1vw, 0.22rem); padding-top: 0.3rem; text-align: center; }