<template>
  <view class="product-info">
    <view class="price-section">
      <view class="price-item">
        <view class="label">销售价</view>
        <view class="value">￥{{ product.salePrice }}</view>
      </view>
      <view class="price-item">
        <view class="label">创客利润</view>
        <view class="value">￥{{ product.creatorProfit }}</view>
      </view>
      <view class="price-item">
        <view class="label">养老金</view>
        <view class="value">￥{{ product.pension }}</view>
      </view>
    </view>
    <view class="brand-info">
      <view class="label">品牌商</view>
      <view class="value">{{ product.brand }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
.product-info {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.price-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price-item {
  width: 33%;
  margin-bottom: 20rpx;
}
.label {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 8rpx;
}
.value {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
.brand-info {
  margin-top: 20rpx;
}
</style>