product-detail.scss 2.2 KB
@import '@/styles/_support';

.page {}

// 分页导航
.nav {
  .tabs {
    @extend .bb;
    padding: 0 50px;
    background-color: #ffffff;
  }
}

// 轮播banner
.banner {
  $bannerWid: $screenWidth;
  $bannerHei: 760px;
  background-color: #f2f2f2;
  @extend .bb;
  width: $bannerWid;
  height: $bannerHei;

  .swiper {
    width: $bannerWid;
    height: $bannerHei;

    .img {
      width: $bannerWid;
      height: $bannerHei;
    }
  }
}

.content {
  width: $contentWidth;
  margin: 0 auto;
}

// 功能导航
.func {
  margin: 42px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .desc {
    &-tit {}

    &-desc {
      margin-top: 12px;
    }

  }

  .fav {
    text-align: center;
    color: #cf9e9e;
    padding: 0 24px;

    &-icon {
      @extend .bb;
      width: 100%;

      .iconfont {
        font-size: 52px;
      }
    }

    .btn {
      margin-top: 12px;
    }
  }
}

// 店铺信息
.shop {
  margin: 92px auto 0;
  display: flex;
  align-items: center;

  &-icon {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: solid 1px #333333;
  }

  &-detail {
    flex: 1;
    @extend .bb;
    padding-left: 24px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    div {
      width: 100%;
      margin: 2px 0;
    }

    &-title {
      font-size: 28px;
    }

    &-phone {}
  }

  &-btn {
    @include btc(148px, 52px);
    background-color: #cc9999;
    border: solid 1px #333333;
    border-radius: 48px;
    color: #ffffff;
  }
}


// 商品详情
.detail {
  margin: 72px auto 0;
}

// 商品参数
.parameter {
  margin: 72px auto 0;

  &-table {
    margin-top: 32px;

    &-item {
      display: flex;
      border: solid 1px $fontGray;
      border-bottom: none;
      height: 48px;

      div {
        line-height: 48px;
        @extend .bb;
        padding: 0 12px;
      }

      .label {
        width: 132px;
        border-right: solid 1px $fontGray;
      }

      .val {
        flex: 1;
      }

      &:last-child {
        border-bottom: solid 1px $fontGray;
      }
    }
  }
}

// 返回顶部
.top-btn {
  margin: 72px auto 0;
  @include btc(232px, 60px);
  background-color: #1e9ad3;
  color: #ffffff;
  border-radius: 8px;
}