de-net/src/view/components/font-amount.vue

<template>
    <div :style="{ fontSize: amount_font_size + 'px' }">
        <a-tooltip :title="amount" >
            <span class="content" :style="{ fontSize: amount_font_size + 'px' }">{{ getBit(amount) }}</span>
        </a-tooltip>
    </div>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import { getBit } from "@/uilts/help";

let props = defineProps({
    amount: {
        type: String,
        default: ''
    },
    width: {
        type: Number,
        default: 360
    },
    fontSize: {
        type: Number,
        default: 56
    },

})

let amount_font_size = ref(60);
watch(props, () => {
    setFontSize()
})
function setFontSize(){
    let amount = getBit(props.amount);
    let _num = parseInt(props.width / amount.length);
    amount_font_size.value = _num < props.fontSize ? _num : props.fontSize;
}

onMounted(() => {
    setFontSize()
})

</script>
<style lang="scss" scoped>
.content {
    word-break: break-all;
    margin-left: 12px;
    font-weight: 800;
    font-size: 60px;
    line-height: 76px;
    color: #FFFFFF;
}
</style>