cip-components/styles/cci-stardand/carousel.less

@import "../variate.less";

// UI中只涉及横向的轮播图 因此写样式时只考虑到了横向的情况
.@{elNamespace}-carousel {
  // 指示器的宽、高
  --el-carousel-indicator-width: 10px;
  --el-carousel-indicator-height: 4px;
  // 切换按钮的宽高
  --el-carousel-arrow-size: 28px;
  // 切换按钮 hover时的背景色
  --el-carousel-arrow-hover-background: #000;
  // 切换按钮 正常时的背景色
  --el-carousel-arrow-background: #000;
  // 指示器外层li的padding
  --el-carousel-indicator-padding-horizontal: 3px;
  .@{elNamespace}-carousel__indicator.@{elNamespace}-carousel__indicator--horizontal {
    // 常规指示器的样式
    .@{elNamespace}-carousel__button {
      opacity: 0.6;
      border-radius: 2px;
    }
    // 激活时指示器的样式
    &.is-active {
      .@{elNamespace}-carousel__button {
        width: 20px;
        opacity: 1;
      }
    }
  }
  .@{elNamespace}-carousel__item {
    background-color: #C0C0C0;
  }
  // 切换按钮 hover
  .@{elNamespace}-carousel__arrow {
    background-color: var(--el-carousel-arrow-background);
    opacity: .12;
    &:hover {
      background-color: var(--el-carousel-arrow-hover-background);
      opacity: .4;
    }
  }
  // 带切换按钮的指示器的样式
  .@{elNamespace}-carousel__container:has(button) + .@{elNamespace}-carousel__indicators.@{elNamespace}-carousel__indicators--horizontal { 
    .@{elNamespace}-carousel__indicator.@{elNamespace}-carousel__indicator--horizontal {
      .@{elNamespace}-carousel__button {
        width: 4px;
        height: 4px;
        opacity: 0.6;
        border-radius: 2px;
      }
      &.is-active {
        .@{elNamespace}-carousel__button {
          width: 10px;
          opacity: 1;
        }
      }
    }
  }
}