src/pages/Forum/promotion-part/PromotionCarousel.css

/* 优化后的轮播样式 */
.carousel-container {
  display: flex;
  margin-top: 20px;
  margin-left: 2%;
  margin-right: 2%;
}

.carousel-section {
  flex: 1;
}

.carousel-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.carousel {
  position: relative;
  background: linear-gradient(135deg, #e1cab2, #b68791);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 24px 48px;
  color: #fff;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.promotion-name {
  font-size: 24px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 14px;
  color: #135c69;
  text-align: center;
}

.carousel .arrow {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.3s;
  z-index: 10;
}

.carousel .arrow.left {
  left: 16px;
}

.carousel .arrow.right {
  right: 16px;
}

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

.carousel .slide {
  width: 100%;
  max-width: 720px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.6;
}

.carousel .slide strong {
  font-weight: 600;
}

.carousel .action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.carousel .action-buttons button {
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel .delete-btn {
  background-color: #d9534f;
  color: white;
}

.carousel .delete-btn:hover {
  background-color: #c9302c;
}

.carousel .view-btn {
  background-color: #5bc0de;
  color: white;
}

.carousel .view-btn:hover {
  background-color: #31b0d5;
}

/* 轮播指示器容器 */
.carousel-indicators {
  margin-top: 5%;
  position: absolute; 
  bottom: 16px;       /* 距离轮播底部的间距，可调整 */
  left: 50%;         
  transform: translateX(-50%); /* 水平居中 */
  display: flex;     
  align-items: center;
  gap: 8px;          /* 圆点间距 */
  z-index: 10;       /* 确保在内容上层 */
}

/* 单个圆点 */
.carousel-indicators .indicator {
  width: 12px;       
  height: 12px;      
  border-radius: 50%; /* 圆形 */
  background-color: rgba(255, 255, 255, 0.4); /* 未选中状态颜色 */
  cursor: pointer;   
  transition: background-color 0.3s ease; /* 渐变过渡 */
}

/* 选中状态的圆点 */
.carousel-indicators .indicator.active {
  background-color: #fff; /* 选中时的高亮颜色 */
}


/* 冷门资源专用 slide */
.cold-slide {
  display: flex;
  gap: 10px;
  align-items: center;
}