sagacloud-cwc-pages/src/views/evaluate/evRateTitle.vue

<template>
    <div class='count-bottom-title'>
        <span v-if='tab==1' class='count-bottom-text'>
            <span class='span1'></span>
            <span class='span2 Micbold'>室内温度满足率</span>
            <span class='span3'>
                <font :class='rate=="x"?"red":""'>{{rate||'--'}}</font>%
            </span>
        </span>
        <span v-if='tab==2' class='count-bottom-text'>
            <span class='span1'></span>
            <span class='span2 Micbold'>节能率</span>
            <span class='span4'>
                <font :class='rate=="x"?"red":""'>{{rate}}</font>%
            </span>
            <span class='span5'>准确率</span>
            <span class='span6'>
                <font :class='accuracy=="x"?"red":""'>{{accuracy}}</font>%
            </span>
        </span>
        <span v-if='tab==3' class='count-bottom-text'>
            <span class='span1'></span>
            <span class='span2 Micbold'>是否按策略执行</span>
            <img v-if='chillerExecuteRateReal>=75' class='span7' src='../../assets/finish.png' alt />
            <img v-else class='span7' src='../../assets/wrong.png' alt />
        </span>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    mounted() {},
    props: ['tab', 'rate', 'accuracy', 'chillerExecuteRateReal']
}
</script>
<style lang="scss" scoped>
.count-bottom-title {
    display: flex;
    .count-bottom-text {
        height: 64px;
        background: rgba(248, 249, 250, 1);
        border-radius: 4px;
        border: 1px solid rgba(238, 238, 238, 1);
        display: flex;
        align-items: center;
        padding-right: 24px;
        .span1 {
            width: 4px;
            height: 64px;
            background: rgba(0, 145, 255, 1);
            border-radius: 4px 0 0 4px;
            margin-right: 20px;
        }
        .span2 {
            font-size: 20px;
            color: rgba(31, 36, 41, 1);
            margin-right: 12px;
        }
        .span3 {
            font-size: 24px;
            font-family: Persagy-Bold, Persagy;
            font-weight: bold;
            color: rgba(31, 36, 41, 1);
        }
        .span4 {
            font-size: 24px;
            font-family: Persagy-Bold, Persagy;
            font-weight: bold;
            color: rgba(31, 36, 41, 1);
            margin-right: 32px;
        }
        .span5 {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(100, 108, 115, 1);
            margin-right: 8px;
        }
        .span6 {
            font-size: 16px;
            font-family: Persagy;
            color: rgba(100, 108, 115, 1);
        }
        .span7 {
            width: 20px;
            height: 20px;
        }
    }
    .red {
        color: #f54e45;
    }
}
</style>