pcManagementForBeswell/src/components/power.vue

<template>
    <div class="powerContainer" v-if="parseInt(curPower) > 0">
        <img src="../static/img/power/power_full.svg" alt="" v-if="parseInt(curPower) >= 81">
        <img src="../static/img/power/power_half.svg" alt="" v-if="parseInt(curPower) >= 41 && parseInt(curPower) < 81">
        <img src="../static/img/power/power_low.svg" alt=""  v-if="parseInt(curPower) >= 21 && parseInt(curPower) < 40">
        <img src="../static/img/power/power_none.svg" alt="" v-if="parseInt(curPower) <= 20">
    </div>
</template>

<script>
    export default {
        props: ['curPower'],
    }
</script>

<style scoped>
    .powerContainer {
        float: right!important;
        color: #fff;
        font-size:1rem;
        width: 3rem!important;
        overflow: hidden;
    }
    .powerContainer img {
        width:2rem;
        line-height: 0.3rem;
    }
    .powerContainer span {
        display: inline-block;
        line-height: 1rem;
    }
    .powerContainer em {
        font-size: 1rem;
    }
</style>