<template>
  <!-- 产品信息：名称 / 国家 / 发货时效 / 价格 -->
  <view class="info-wrap">
    <!-- 产品名称 18px Bold #1A1A1A -->
    <text class="name">{{ info.name }}</text>

    <!-- 国家 + 发货时效 同行 12px #979797，值黑色 -->
    <view class="meta-row">
      <view class="meta-item">
        <text class="meta-label">国家: </text>
        <text class="meta-value">{{ info.country }}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">发货时效: </text>
        <text class="meta-value">{{ info.shipTime }}</text>
      </view>
    </view>

    <!-- 价格：￥ 和 .00 为 10px，整数 24px，全部红色 -->
    <view class="price-row">
      <text class="price-symbol">{{ info.price.symbol }}</text>
      <text class="price-integer">{{ info.price.integer }}</text>
      <text class="price-decimal">{{ info.price.decimal }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductInfo',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.info-wrap {
  padding: 20rpx 20rpx 24rpx; /* 10px 10px 12px */
  background: #ffffff;
}

/* 产品名称 */
.name {
  display: block;
  font-size: 35rpx; /* 18px */
  font-weight: 700;
  color: #1a1a1a;
  line-height: 50rpx; /* 26px */
}

/* 国家 / 发货时效 同行 */
.meta-row {
  display: flex;
  margin-top: 10rpx;
}
.meta-item {
  display: flex;
  align-items: center;
}
.meta-item + .meta-item {
  margin-left: 20rpx;
}
.meta-label {
  font-size: 23rpx; /* 12px */
  color: #979797;
  line-height: 33rpx;
}
.meta-value {
  font-size: 23rpx;
  color: #000000;
  line-height: 33rpx;
}

/* 价格 */
.price-row {
  display: flex;
  align-items: baseline;
  margin-top: 16rpx;
}
.price-symbol,
.price-decimal {
  font-size: 19rpx; /* 10px */
  color: #ff0000;
  font-weight: 700;
}
.price-integer {
  font-size: 46rpx; /* 24px */
  color: #ff0000;
  font-weight: 700;
  line-height: 1;
}
</style>
