@charset "UTF-8";
@import '../setting';
.goods-list-item{
  display: block;
  overflow: hidden;
  background-color: $color-gray-2;
  transition: box-shadow .3s;
  cursor: pointer;
  font-size: 13px;
  @include rounded(2);
  @include p(4);
  &:hover{
    @include box-shadow;
  }

  &.selected{
    .goods-list-item-pic-box{
      .error-msg{
        display: flex !important;
      }
    }
  }

  .goods-list-item-top{
    position: relative;
    .tags{
      position: absolute;
      top: 5px;
      left: 5px;
      @include flex-ss;
      @include gap(2);
      .hot,
      .photograph,
      .available,
      .tag{
        color: $color-white;
        font-size: 12px;
        text-shadow: 1px 1px 2px $color-gray-3;
        @include p(2);
        @include rounded(2);
        @include box-shadow;
      }
      .hot{
        background-color: $color-red;
      }
      .photograph{
        background-color: $color-green;
      }
      .available {
        background-color: $color-blue;
      }
      .good-icons{
        display: block;
        height: 34px;
      }
    }
    &:hover{
      .goods-list-item-tool{
        bottom: 0;
      }
    }
  }
  .goods-list-item-center,
  .goods-list-item-bottom{
    @include mt(2);
    @include flex-sbc;
  }
  .goods-list-item-center{
    @include gap(2);
    .goods-list-item-prize{
      flex: 0 0 auto;
      font-size: 15px;
      color: $color-red;
    }
    .goods-list-item-sn{
      flex: 0 1 auto;
      color: $color-gray-6;
      @include text-dot;
    }
  }
  .goods-list-item-pic{
    position: relative;
    padding-top: 100%;
    background-color: $color-gray-3;
    overflow: hidden;
    .goods-list-item-pic-box{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      @include flex-cc;
      .error-msg{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        transform: translate(-50%, -50%);
        flex-direction: column;
        @include flex-cc;
        @include gap(2);
        display: none;
        .msg{
          background-color: $color-red;
          color: $color-white;
          line-height: 1.2em;
          @include p(2);
          @include rounded(2);
        }
      }
    }
    img{
      display: block;
      max-width: 204px;
      max-height: 204px;
      object-fit: contain;
    }
    .goods-down-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
      @include flex-cc;

      .goods-down-text {
        border: 8px solid #fff;
        width: 70%;
        height: 70%;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }
  }
  .goods-list-item-tool{
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    background-color: $primary-color;
    cursor: pointer;
    transition: bottom .6s;
    z-index: 2;
    @include flex-ss;
    > div{
      flex: 1;
      color: $color-white;
      text-align: center;
      font-size: 13px;
      height: 36px;
      line-height: 36px;
      &:hover{
        @include box-shadow;
        @include text-shadow;
      }
    }
    &.good-not-exist{
      [bind-book-mark],
      [one-step-upload]{
        display: none;
      }
    }
  }
  .goods-list-item-shop{
    overflow: hidden;
    @include flex-sc;
    @include gap(2);
    .iconfont{
      font-size: 16px;

      &.icon-company-license {
        color: $color-blue;
      }

      &.gold {
        color: #FFD700;
      }

      &.silvery {
        color: #C5C8C9;
      }

      &.copper {
        color: #D98719;
      }
    }
    .goods-list-item-shop-name{
      @include text-dot;
    }
  }
  .goods-list-item-title{
    @include mt(2);
    height: 35px;
    overflow: hidden;
  }
  .goods-list-item-video{
    position: absolute;
    bottom: 0;
    right: 0;
    @include p(2);
    .iconfont{
      font-size: 30px;
      color: $primary-color;
      @include text-shadow;
    }
  }
  .create_time{
    font-size: 12px;
    white-space: nowrap;
  }
}


.select-mode {
  a.goods-list-item{
    position: relative;
    .goods-list-item-tool{
      display: none;
    }
    &:after{
      content: '✓';
      position: absolute;
      top: 2px;
      right: 5px;
      color: $color-white;
      z-index: 2;
      font-size: 15px;
    }
    &:before{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      z-index: 1;
      border: 20px solid rgba(0,0,0,.5);
      border-left-color: transparent;
      border-bottom-color: transparent;
    }
    &.selected{
      &:before{
        border-top-color: $primary-color;
        border-right-color: $primary-color;
      }
    }
  }
}