@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.page {
  padding-bottom: $pageBottom;

  .bgc {}

  .bg {}

  .main {
    .top-space {
      height: 0px;
    }

    .content {
      position: relative;
      min-height: 1000px;

      // 产品图片
      .img-wrap {
        $imgWidth: 750px;
        $imgHeight: 480px;
        width: $imgWidth;
        height: $imgHeight;
        // border: 1PX solid #F0F0F0;
        border-radius: 4px;
        // @extend .bb;

        .swiper {
          width: $imgWidth;
          height: $imgHeight;

          .swiper-image {
            width: $imgWidth;
            height: $imgHeight;
          }
        }
      }

      // 价格栏
      .func {
        position: relative;
        $funcHei: 120px;
        height: $funcHei;
        display: flex;
        justify-content: space-between;
        background-color: #f2f2f2;

        .arrow {
          top: 0;
          left: 500px;
          position: absolute;
          width: 0;
          height: 0;
          border: $funcHei/2 solid transparent;
          border-left-color: #f2f2f2;

        }

        &-ele {
          display: flex;
          font-size: 22px;
          @extend .bb;

          .price {
            font-size: 52px;
            font-weight: bold;
          }

        }

        &-left {
          align-items: center;
          color: #333333;

          padding-left: 24px;
          font-size: 20px;

          .t1 {
            margin-left: 20px;
            margin-top: 36px;
            align-self: flex-start;

          }

          .t2 {}

          .line-th {
            text-decoration: line-through;
          }
        }

        &-right {
          text-align: right;
          @extend .linear;
          width: 250px;
          height: $funcHei;

          @include border-right-radius(4px);
          color: #ffffff;
          padding-right: 24px;
          align-content: center;
          flex-wrap: wrap;

          .t1 {
            width: 100%;
            font-size: 20px;
            padding: 4px 0;
          }

          .t2 {
            font-size: 24px;
          }

          .date {
            // width: 100%;
            font-size: 22px;
          }
        }
      }

      // 描述
      .desc {
        position: relative;
        font-size: 26px;
        color: #666666;
        width: $contentWidth;
        margin: 0 auto;

        .refresh-btn {
          @include cb2(160px, 48px, 24px);
          position: absolute;
          right: 0;
          top: 0;
        }

        &-tit {
          font-size: 36px;
          font-weight: bold;
          color: #333333;
          margin: 24px 0 10px;
          width: 520px;
          @include ellipsis(1);
        }

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

      // 线
      .line {
        width: $contentWidth;
        margin: 24px auto;
        height: 1PX;
        background-color: #666666;
        opacity: 0.5;
      }

      // 拍卖详情
      .auction {
        width: $contentWidth;
        margin: 24px auto 0;
        font-size: 24px;

        &-desc {
          color: #666666;
          display: flex;
          flex-wrap: wrap;

          .t1 {
            width: 50%;
            padding: 6px 0;
            // @extend .bb;
          }
        }

        &-table {
          @extend .bb;
          padding: 24px 0 24px 24px;
          background-color: #f8f8f8;
          border-radius: 8px;
          margin-top: 24px;
          font-size: 22px;

          .tab {
            &-item {
              display: flex;
              justify-content: space-between;

              .item {
                text-align: center;
                height: 32px;
                line-height: 32px;
                margin: 6px 0;
                @extend .bb;
                padding: 0 6px;
              }

              .item1 {
                width: 72px;
                @extend .fcc;

                .block {
                  width: 72px;
                  height: 32px;
                  line-height: 32px;
                  @extend .linear;
                  color: #ffffff;
                  border-radius: 4px;
                }
              }

              .item2 {
                width: 200px;
              }

              .item3 {
                width: 120px;
              }

              .item4 {
                flex: 1;
              }
            }

            &-item2 {
              color: #c9c9c9;

              .item1 {
                .block {
                  background: #c9c9c9;
                }
              }
            }
          }

          .all-bid-tips {
            color: #3680EB;
            margin-top: 32px;
          }

          .empty-tips {
            text-align: center;
            padding: 60px 0;
            color: #666666;
          }
        }
      }
    }

    // 我的出价
    .my-price {
      margin: 36px auto 12px;
      text-align: center;
      font-size: 24px;
    }

    // 提交按钮
    .submit-btn {
      @include cb(560px, 84px);
      @extend .linear;
      margin: 0 auto 0;
    }

  }
}

.disable {
  background: #c9c9c9 !important;
}