<template>
	<view :style="[{fontSize:size+'rpx'}]" class="cu-price">
		<text class="cu-price-left">{{value | leftValue}}.</text>
		<text :style="[{fontSize:size/2+'rpx'}]" class="cu-price-right text-sm">{{value | rightValue}}</text>
	</view>
</template>

<script>
	export default{
		props:{
		value:{type:String/Number,default:()=>0},
		size:{tpe:String/Number,default:()=>32}
		},
		filters:{
			leftValue:val=>{
				val=val+"";
				if(val.indexOf('.')==-1) return val
			    return val.substring(0,val.indexOf('.'))
			},
			rightValue:val=>{
				val=val+"";
				if(val.indexOf('.')==-1) return "00"
				return val.substring(val.indexOf('.'))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-price{
		display: inline;
		.cu-price-left .cu-price-right{
			vertical-align: bottom;
		}
	}
</style>