@import '@styles/mixin.scss';

:host {
  --goods-card-bg: var(--background-color-white);
  --goods-card-border-radius: var(--border-radius-base);
  // 图片
  --goods-card-thumb-width: 342rpx;
  --goods-card-thumb-height: 342rpx;
  // 标题
  --goods-card-title-font-size: var(--font-size-lg);
  --goods-card-title-font-weight: var(--font-weight-bold);
  --goods-card-title-line-height: 40rpx;
  --goods-card-title-color: var(--text-color-base);
  --goods-card-title-line-clamp: 1;
  // 价格
  --goods-card-current-price-font-size: var(--font-size-lg);
  --goods-card-current-price-font-weight: var(--font-weight-bold);
  --goods-card-current-price-line-height: 40rpx;
  --goods-card-current-price-color: var(--text-color-base);
  --goods-card-origin-price-color: var(--color-gray-3);
  // 价格符号
  --goods-card-price-currency: '¥';
}

.goods-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--goods-card-bg);
  border-radius: var(--goods-card-border-radius);

  .goods-pic .van-image {
    width: var(--goods-card-thumb-width);
    height: var(--goods-card-thumb-height);
  }

  .goods-info {
    padding: var(--padding-gap-sm);
  }

  .goods-title {
    font-size: var(--goods-card-title-font-size);
    font-weight: var(--goods-card-title-font-weight);
    line-height: var(--goods-card-title-line-height);
    color: var(--goods-card-title-color);
    @include multi-ellipsis(var(--goods-card-title-line-clamp));
  }

  .goods-price-area {
    display: flex;
    align-items: center;
    margin-top: var(--padding-gap-base);

    .current-price {
      font-size: var(--goods-card-current-price-font-size);
      font-weight: var(--goods-card-current-price-font-weight);
      line-height: var(--goods-card-current-price-line-height);
      color: var(--goods-card-current-price-color);

      &::before {
        padding-right: var(--padding-gap-xs);
        content: var(--goods-card-price-currency);
      }
    }

    .origin-price {
      margin-left: var(--padding-gap-sm);
      color: var(--goods-card-origin-price-color);
      text-decoration: line-through;

      &::before {
        content: var(--goods-card-price-currency);
      }
    }
  }

  .goods-tag {
    min-width: 50rpx;
    height: 28rpx;
    margin-left: 20rpx;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 28rpx;
    color: #fff;
    text-align: center;
    background: #ff7437;
    border: 1px solid #ff8a56;
    border-radius: 2rpx;
  }

  .goods-type {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116rpx;
    height: 52rpx;
    color: #fff;
    text-align: center;
    border-bottom-right-radius: 16rpx;
  }

  .goods-type__hot {
    background: var(--gradient-red);
    box-shadow: 0 5rpx 15rpx -5rpx #f66b62;
  }

  .goods-type__new {
    background: #ff7437;
    box-shadow: 0 5rpx 15rpx -5rpx #ff9a69;
  }

  .goods-type__pre {
    background: var(--gradient-bule);
    box-shadow: 0 5rpx 15rpx -5rpx #60c3e8;
  }
}