<template>
  <div>
    <div class="demo-title">
      默认
    </div>
    <div class="demo-line">
      普通用法 <bxs-price :price="9.99" />
    </div>
    <div class="demo-line">
      自定义后缀 <bxs-price 
        :price="9.99" 
        suffix="元/人"
        />
    </div>
    <div class="demo-line">
      2:1比例 <bxs-price 
        :price="9.99" 
        type="big"
        />
    </div>
    <div class="demo-line">
      保留整数 <bxs-price 
        :price="9.99" 
        :precise="false"
        />
    </div>
    <div class="demo-line">
      自定义字体大小
      <bxs-price 
        :price="1" 
        fontsize="10"
        />
      <bxs-price 
        :price="2" 
        fontsize="0.35rem"
        />
      <bxs-price 
        :price="3" 
        fontsize="90%"
        />
    </div>
    <div class="demo-line">
      仿收银台样式 <bxs-price 
        :price="6.6" 
        color="#333" 
        prefix="￥"
        />
    </div>
    <div class="demo-line">
      带删除线(此时color会无效) <bxs-price 
        :price="6.6" 
        color="blue" 
        deleted
        />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>
<style>
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}

.demo-line {
  padding: 10px 15px;
  font-size: 20px;
  display: block;

  & > * {
    margin-left: 5px;
  }
}
</style>
