.ad-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 138px; /* 固定高度，根据你的需求调整 */
  margin: 0 auto; /* 居中显示 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.carousel-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.carousel-item.active {
  opacity: 1;
  pointer-events: auto;
}

/* 核心：图片适配固定容器 */
.carousel-item img {
  width: 100%;
  height: 100%;
  /* 关键属性：按比例填充容器，裁剪超出部分（不会拉伸） */
  object-fit: contain;
  /* 可选：图片居中显示（裁剪时保留中间部分） */
  object-position: center;
}

/* 指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: -10px;
  left: 35%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;
  cursor: pointer;
}

.indicator-dot.active {
  opacity: 1;
  background: #ff4400;
}

/* 切换箭头样式 */
.carousel-arrow {
  position: absolute;
  /* 箭头垂直居中，基于容器高度 */
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  /* 新增：提升箭头层级，避免被图片遮挡 */
  z-index: 10;
}

.carousel-arrow.prev {
  left: 2px;
}

.carousel-arrow.next {
  right: 2px;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 关闭按钮样式（保留） */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 4px;
}