zx_flk_app/component/priceTool/priceTool.vue

<template>
	<view  class="price-style">
		<text class="unit-style">$</text>
		<text :style="'font-size:'+font_size+'rpx'">{{integerPart }}</text>
		<text class="unit-decimal-style">.{{decimalPart }}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			price:{
				type:Number,
				default:10
			},
			font_size:{
				type:Number,
				default:40
			},
		},
		computed: {
			formattedPrice() {
		        let parts = this.price.toString().split('.');
				if (parts.length === 1) {
				  return parts[0] + '.0'; // 价格为整数时，添加一位小数
				} else if (parts[1]) {
				  return parts[0] + '.' + parts[1].padEnd(1, '0'); // 确保至少有一位小数
				} else {
				  return parts[0] + '.0'; // 防止parts[1]为undefined
				}
		  },
		  integerPart() {
		    let parts = this.formattedPrice.split('.');
		    return parts[0];
		  },
		  decimalPart() {
		    let parts = this.formattedPrice.split('.');
		    return parts[1];
		  }
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
		}
	};
</script>
<style scoped>
.price-style{
	font-family: DIN, DIN;
	font-weight: bold;
	font-size: 32rpx;
	color: #FA2918;
}
.unit-style{
	font-size: 24rpx;
	margin-right: 4rpx;
}
</style>