@import "@/static/css/mixin";
.store-buy {
  background: url("@/static/image/buy-bg.jpg") no-repeat top;
  background-size: 100% 40vh;
  background-repeat: no-repeat;
  padding-top: 50rpx;
  .card{
    width: 720rpx;
    margin: 0 auto;
  }
  .card-info{
    background: url("/static/image/coupon_wait_use.png") no-repeat top right;
    width: 700rpx;
    flex-shrink: 0;
    height: 190rpx;
    background-size: 100% 100%;
    .left-box{
      flex: 1;
      padding: 0 20rpx;
      .price{
        white-space: nowrap;
        color: #888d93;
        font-size: 28rpx;
        .num{
          color: #E8B388;
          font-size: 60rpx;
        }
      }
      .info-box{
        margin-left: 20rpx;
        .tags{
          margin-top: 10rpx;
          .tag{
            background: #FDE7DA;
            color: #424751;
            padding: 3rpx 8rpx;
            margin-right: 8rpx;
            font-size: 22rpx;
            border-radius: 6rpx;
          }
        }
      }
    }
    .right-box{
      width: 165rpx;
    }
  }
  .price-tags{
    margin-bottom: 50rpx;
    margin-top: 20rpx;
    padding: 0 20rpx;
    .price-tag{
      flex: 1;
      color: #fff;
      font-size: 26rpx;
      padding: 4rpx 6rpx;
      white-space: nowrap;
      &.normal-price{
        background: linear-gradient(#858A90,#4C525E);
      }
      &.sale-price{
        background: linear-gradient(#504740,#1F1A14);
        margin: 0 50rpx;
      }
      &.vip-price{
        @include vipBorder;
        border-width: 1rpx;
      }
    }
  }
  .store-info{
    background: #fff;
    border-radius: 10rpx;
    padding: 10rpx 30rpx;
  }
  .desc{
    .content{
      color: $text-deep-grey-color;
    }
  }
  .buy-btn{
    @include background;
    color: #fff;
    width: 90vw;
    margin: 80rpx auto 0rpx;
    padding: 20rpx 0;
    border-radius: 10rpx;
    bottom: 0;
    text-align: center;
  }
  .buy-popup{
    padding: 30rpx 0;
    font-size: 26rpx;
    .goods-box{
      padding: 0 30rpx;
      .cover-img{
        width: 240rpx;
        height: 200rpx;
        >image{
          width: 100%;
          height: 100%;
        }
      }
      .goods-info{
        background: #FEF9F6;
        flex: 1;
        padding: 20rpx;
      }
    }
    .spec-box{
      padding: 0 30rpx;
      font-size: 26rpx;
      .name{
        color: $text-black-color;
      }
    }
    .spec-detail{
      box-shadow: 0 0 10rpx rgba(0,0,0,.15);
      border-radius: 12rpx;
      padding: 32rpx 16rpx;
      .spec-name{
        color: $text-black-color;
        text-align: center;
        padding-bottom: 22rpx;
      }
      .detail-box{
        height: 150rpx;
        .detail-item{
          padding: 12rpx 0;
          text-align: center;
          color: $text-grey-color;
          >text{
            flex: 1;
          }
          .name{
            flex: 2;
          }
        }
      }
    }
    .price-box{
      padding: 16rpx 32rpx;
      position: relative;
      margin-bottom: 16rpx;
      margin-top: 16rpx;
      &:after{
        content: "";
        position: absolute;
        height: 1rpx;
        width: 95%;
        background: $grey-color;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .normal-price{
        flex: 1;
        text{
          margin-right: 16rpx;
        }
      }
      .goods-num{
        display: flex;
        flex: 1;
        justify-content: flex-end;
      }
    }
    .buy-btn{
      margin-top: 30rpx;
    }
  }
}