flyLong/tv/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">
        <!--<span>{{curPower}}-->
        <!--<em>%</em>-->
        </span>
    </div>
</template>

<script>
    import '../libs/rem';
    export default {
        props: ['curPower'],
    }
</script>

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