<template>
  <view class="product">
    <image class="product-image" :src="image ? image : 'https://via.placeholder.com/150x200'" />
    <view class="product-title">{{ title }}</view>
    <view class="product-price">
      <text class="product-price-favour">￥{{ originalPrice }}</text>
      <text class="product-price-original">￥{{ favourPrice }}</text>
      <text class="product-tip">{{ tip }}</text>
    </view>
  </view>
</template>
<script>
export default {
  name: 'product',
  props: ['image', 'title', 'originalPrice', 'favourPrice', 'tip']
};
</script>
<style>
.product {
  padding: 10rpx 20rpx;
  display: flex;
  flex-direction: column;
}

.product-image {
  height: 330rpx;
  width: 330rpx;
}

.product-title {
  width: 300rpx;
  font-size: 32rpx;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-price {
  font-size: 28rpx;
  position: relative;
}

.product-price-original {
  color: #e80080;
}

.product-price-favour {
  color: #888888;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.product-tip {
  position: absolute;
  right: 10rpx;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10rpx;
  border-radius: 5rpx;
}
</style>
