<template functional>
  <div class="priceDesc">
    <h4 class="priceDesc__title">价格说明</h4>
    <ul>
      <li>
        <p class="title">划线价格</p>
        <div class="price-content">
          <p>
            1、该划线价可能是商品（含服务）的门市价、零售价（如品牌指导价、建议零售价）、历史标价中的一项。
          </p>
          <p>
            2、由于地区、时间的差异性和市场行情波动，门市价、零售价等可能会与您购买时展示的不一致，该价格仅供您参考。
          </p>
        </div>
      </li>
      <li>
        <p class="title">未划线价</p>
        <div class="price-content">
          <p>1、指商品（含服务）的实时标价，不因表述差异改变性质。</p>
          <p>
            2、最终成交价可能会因优惠、促销、让利等更低，最终的成交价格以订单结算页价格为准。
          </p>
        </div>
      </li>
      <li>
        <p class="title">注意事项</p>
        <div class="price-content">
          <p>
            商品（含服务）促销信息以商品详情页中展示的信息为准；商品（含服务）的具体成交价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系商家咨询。此说明仅当出现价格比较时有效，若商家单独对划线价进行说明的，以商家的表述为准。
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'PriceDesc'
};
</script>
<style lang="less" scoped>
.priceDesc {
  padding: @padding-sm;
  &__title {
    .text-size(16);
    font-weight: 500;
    color: @black;
    padding-bottom: @padding-sm;
  }

  ul {
    padding: 0;
  }
  li {
    list-style: initial;
    margin-left: 8px;
    margin-bottom: 12px;
    &::marker {
      font-size: 10px;
    }
  }
}
.title {
  margin: 12px 0 10px 0;
  font-size: 13px;
  display: block;
  position: relative;
  color: #333;
  font-weight: bold;
}
.price-content {
  color: #666;
  .text-size(13);
  p {
    margin: 0;
    color: #666;
  }
}
</style>
