@import './var.less';

.product {
  &-layout {
    &__item {
      display: block;
      position: relative;
      min-height: 50px;
      color: #333;
      background-color: #fff;
      /* background-color: yellow; */
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;

      /**
            * 圆角
            */
      &.circle {
        border-radius: 8px;
      }

      /**
             * 列表
             */
      &.list {
        overflow: hidden;

        /**
               * 列表下的图片样式
               */
        .photo {
          float: left;
          margin-right: 10px;
          min-height: auto;
          width: 145px;
          height: 145px;
        }

        /**
              * 列表下的信息
             */
        .info {
          padding: 0 10px 0 0;
          overflow: hidden;
          margin-left: 155px;
          height: 145px;

          &-title {
            .title {
              margin-top: 10px;
            }
          }

          &-price {
            position: absolute;
            left: 0;
            bottom: 0;
            margin: 0;
          }

          .buy-btn-wrapper {
            right: 10px;
          }
        }
      }

      /**
            * 卡页投影
            */
      &.card-shadow {
        box-shadow: 0 2px 8px rgba(93, 113, 127, 0.08);
      }

      /**
            *描边白底
            */
      &.card-border {
        border: 1px solid rgba(50, 50, 51, 0.1);
      }

      /**
            * 无边透明底
            */
      &.no-border-transparent {
        background-color: inherit;
      }

      /**
   * 图片区域
   */
      .photo {
        position: relative;

        /**
       * 图片相关
       */
        .img {
          &-wrapper {
            position: relative;
            overflow: hidden;
            max-height: 500px;

            /**
            * 图片填充满
            */
            &--cover {
              background-size: cover;
            }

            &--contain,
            &--cover {
              width: 100%;
              background-position: 50%;
              background-repeat: no-repeat;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
            }

            /**
            * 图片周边留边
           */
            &-contain {
              background-size: contain;
            }
          }
        }

        /*************  拼团相关样式  *************/

        .tag {
          position: absolute;
          bottom: 0;
          left: 0;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          padding: 0 15px;
          width: 100%;
          height: 24px;
          line-height: 24px;
          color: #fff;
          background: -webkit-linear-gradient(to left, #fd3e20, #fc6340);
          background: -webkit-gradient(
            linear,
            to left top,
            right top,
            from(#fd3e20),
            to(#fc6340)
          );
          background: -moz- oldlinear-gradient(to left, #fd3e20, #fc6340);
          background: linear-gradient(90deg, #fd3e20, #fc6340);

          /**
         * 列表和小图
         */
          &.hybrid-list,
          &.list,
          &.small {
            padding: 0 10px;
            height: auto;

            .title {
              display: none;
            }

            .countdown {
              display: -webkit-box;
              display: -webkit-flex;
              display: -moz-box;
              display: flex;
              -webkit-flex-wrap: wrap;
              flex-wrap: wrap;
              -webkit-box-pack: justify;
              -webkit-justify-content: space-between;
              -moz-box-pack: justify;
              justify-content: space-between;
              height: auto;
            }

            .countdown-text {
              display: block;
              height: 24px;
              line-height: 24px;
            }
            /**
             * 垂直居中
             */
            .countdown-time {
               display: flex;
               align-items: center;
            }
          }

          /**
         * 大图
         */
          &.big,
          &.hybrid-big {
            height: 40px;
            line-height: 40px;
            .countdown {
              float: right;
              font-size: 10px;
              height: 40px;
              line-height: 20px;
            }

            .countdown-text {
              display: block;
              text-align: left;
              line-height: 14px;
              height: 14px;
              margin: 4px 0 2px;
              opacity: 0.6;
            }
          }

          .title {
            font-size: 20px;
            font-weight: 700;
          }

          .extra {
            position: absolute;
            left: 0;
            bottom: 100%;
            margin: 0 0 6px 6px;
            padding: 0 4px;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.5);
            font-size: 12px;
            line-height: 18px;
            color: #fff;
          }

          .countdown-text {
            height: 10px;
            font-size: 10px;
            line-height: 10px;
            opacity: 0.7;
          }

          &.no-countdown {
            height: 0;
          }
        }
      }

      /**
        *  商品信息
        */
      .info {
        padding: 0 10px;
        position: relative;

        /**
         * 标题
         */
        &-title {
          margin: 10px 0 0;

          /** 
             * 列表
             */
          &.list {
            .title {
              max-height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          /**
             * 列表样式   small:一行两个  three:一行三个  swipe:横向滑动
             */
          &.small,
          &.swipe,
          &.three {
            .title {
              height: 40px;
              max-height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          .title {
            font-size: 14px;
            line-height: 20px;
            max-height: 20px;
            margin-bottom: 5px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;

            &--tag {
              display: inline-block;
              height: 16px;
              padding: 0 6px;
              line-height: 16px;
              color: #f44;
              font-size: 12px;
              border-radius: 8px;
              background-color: #ffdfdf;
              font-weight: 400;
            }
          }

          /**
            * 商品描述
             */
          .sub-title {
            font-size: 12px;
            line-height: 16px;
            color: #999;
            height: 16px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        /**
         * 价格
         */
        &-price {
          position: relative;
          width: 100%;

          &.size--small {
            .price-info {
              height: 40px;
            }
          }

          .price-info {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            align-items: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-align-content: center;
            align-content: center;
          }

          /**
         *  价格居
         */
          &.center {
            text-align: center;

            .price-info {
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -moz-box-pack: center;
              justify-content: center;
              height: 32px;
            }

            .buy-btn-wrapper {
              position: relative;
              display: inline-block;
              margin: 0 0 10px;
              top: 0;
            }
          }

          /**
          *  销售价
          */
          .sale-price {
            margin-right: 4px;
          }

          .sale-price,
          .sale-price__origin {
            color: #f44;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          /**
           * 划线原价
          */
          .sale-price__origin {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            color: #999;
            margin-top: 2px;
            font-weight: 400;
            text-decoration: line-through;
          }

          .price-tag {
            font-size: 15px;
            margin-right: 2px;
          }

          /**
           * 按钮
          */
          .buy-btn-wrapper {
            display: flex;
            align-items: center;
            height: 100%;
          }

          /**
                 * 购买按钮
                 */
          .buy-btn-wrapper.small {
            height: 20px;
          }

          .buy-btn-wrapper {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }
    }
  }
}