gift-shop.scss 2.88 KB
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.page {
  .bgc {
    background: #F8F8F8;
  }

  .bg {}

  .main {
    .top {
      position: absolute;
      width: 750px;
      height: 110px;
      background-color: #fff;

      &-wrap {
        position: relative;
        width: $contentWidth;
        height: 110px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .search {
        width: 540px;
        height: 76px;
        background: #F8F8F8;
        border-radius: 8px;
        @extend .fcc;

        .ipt {
          font-size: 28px;
          letter-spacing: 0;
          @extend .bb;
          padding: 0 20px;
          width: 540px;
        }

        .icon {
          width: 36px;
          height: 36px;
          margin-right: 20px;
        }
      }

      .filter {
        font-size: 28px;
        color: #3680EB;
        letter-spacing: 0;
        @extend .fcc;

        .icon-wrap {
          margin-left: 4px;

          .icon {
            width: 12px;
            height: 12px;
            display: block;
            margin: 4px 0;
          }
        }
      }
    }

    .top-space {
      height: 116px;
    }

    .content {
      position: relative;

      .product {
        width: $contentWidth;
        margin: 0 auto;

        &-item {
          background: #fff;
          width: $contentWidth;
          // height: 260px;
          margin: 20px 0;
          @extend .shadow;
          @extend .bb;
          padding: 30px;
          display: flex;
          justify-content: space-between;

          .image-wrap {
            width: 200px;
            height: 200px;
            border: solid 1px #f0f0f0;
            border-radius: 8px;
            @extend .fcc;

            .image {
              width: 180px;
              height: 180px;
            }
          }

          .cont {
            position: relative;
            flex: 1;
            @extend .bb;
            margin-left: 20px;

            .name {
              font-size: 32px;
              color: #333333;
              @include ellipsis;
            }

            .desc {
              font-size: 24px;
              color: #999999;
              margin-top: 12px;
              @include ellipsis(2);
            }

            .integral {
              position: absolute;
              bottom: 0;
              left: 0;
              font-size: 24px;
              color: #FF7900;
            }

            .btn {
              position: absolute;
              bottom: 0;
              right: 0;

              width: 142px;
              height: 60px;
              line-height: 60px;
              text-align: center;
              color: #fff;
              border-radius: 8px;
              background: #3680EB;
              font-size: 28px;
            }
          }
        }
      }
    }
  }
}