index.scss 1.52 KB
@import '@/styles/_support';

.page {}

.bgc {}

// 轮播banner
.banner {
  background-color: #f2f2f2;
  @extend .bb;
  width: $screenWidth;


  .swiper {
    width: $screenWidth;
    height: 400px;

    .img {
      width: $screenWidth;
      height: 400px;
    }
  }
}

// 类别选择
.sel {
  margin: 56px auto 0;
  display: flex;
  justify-content: center;

  &-item {
    @extend .fcc;
    // @extend .bb;
    text-align: center;
    // padding: 0 12px;
    margin: 0 22px;
    color: #ffffff;
    width: 92px;
    height: 92px;
    border-radius: 92px;
    background-color: #ffcc33;
  }

  &-item-1 {}

  &-item-2 {
    background-color: #ffcccc;
  }

  &-item-3 {
    background-color: #cc9999;
  }

  &-item-4 {
    background-color: #cccc99;
  }

  &-item-5 {
    background-color: #ffcc99;
  }
}

// 产品推荐
.product {
  margin: 72px auto 0;
  width: $contentWidth;

  &-title {
    text-align: center;
    font-size: 32px;
    color: #c78f8f;
  }

  &-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    $itemWid: 330px;

    .item {
      width: $itemWid;
      // height: 440px;
      background: #F8F8F8;
      border-radius: 4px;
      margin-bottom: 32px;
      padding-bottom: 12px;

      .image {
        width: $itemWid;
        height: $itemWid;
      }

      .desc {
        @extend .bb;
        width: 325px;
        padding: 4px 20px;
        font-size: 24px;
        // line-height: 32px;
        color: #333333;
        // @include ellipsis(3);
      }
    }
  }
}