<!--
    @name: 两行商品
    @author: kahu4
    @date: 2023-11-01 16:49
    @description：TwoRowGoodROw
    @update: 2023-11-01 16:49
-->
<script setup>
import Goods from "@/components/goodsComponents/Goods.vue";
import Options from "@/components/goodsComponents/components/Options.vue";

const props = defineProps({
  products: {
    type: Array
  }
})
</script>

<template>
  <view
      class="two-row"
      v-if=" props.products"
  >
    <template v-for="item in props.products.slice(0,2)">
      <view class="row-item">
        <Goods
            row
            :goods="item"
            img-width="220rpx"
            info-padding="20rpx 20rpx"
        >
          <template #options>
            <Options
                style="width: 100%;"
                :goods="item"
                btn-text="立即抢购"
                show-btn
            ></Options>
          </template>
        </Goods>
      </view>
    </template>
  </view>
</template>

<style
    scoped
    lang="scss"
>
.two-row {
  width: 100%;

  .row-item {
    @include usePadding(15, 14);
    background: #fff;
    margin: 20rpx 0;
    border-radius: 15rpx;
  }

  .good-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20rpx;

    .price {
      display: flex;
      align-items: center;
      color: #EE6D46;
      font-size: 30rpx;

      .tip {
        color: #999999;
        font-size: 24rpx;
      }
    }

    .sale {
      color: #999999;
    }

    .btn {
      background: #ee6d46;
      color: #fff;
      font-size: 24rpx;
      padding: 10rpx 24rpx;
      transition: all .3s;

      &:active {
        transform-origin: right bottom;
        scale: .9;
      }
    }
  }
}
</style>
