nginx-ui/frontend/src/components/Chart/UsageProgressLine.vue

<script setup lang="ts">
import {computed} from 'vue'

const props = withDefaults(defineProps<{
    percent: number
}>(), {
    percent: 0
})

const color = computed(() => {
    if (props.percent < 80) {
        return '#1890ff'
    } else if (props.percent >= 80 && props.percent < 90) {
        return '#faad14'
    } else {
        return '#ff6385'
    }
})

const fixed_percent = computed(() => {
    return parseFloat(props.percent.toFixed(2))
})
</script>

<template>
    <div>
        <div>
            <span class="slot-icon"><slot name="icon"></slot></span>
            <span class="slot">
                <slot></slot>
            </span>
            <span class="dot"> ·</span> {{ fixed_percent + '%' }}
        </div>
        <a-progress :percent="fixed_percent" :stroke-color="color" :show-info="false"/>
    </div>
</template>

<style scoped lang="less">
.slot-icon {
    margin-right: 5px;
}

@media (max-width: 1000px) and  (min-width: 600px) {
    .dot {
        display: none;
    }

    .slot {
        display: none;
    }
}
</style>