41 lines
714 B
Vue
41 lines
714 B
Vue
<script>
|
|
import ValueUnit from "./valueUnit.vue";
|
|
|
|
export default {
|
|
name: "iconSmallPanel",
|
|
components: {ValueUnit},
|
|
props: ["icon", "label", "value", "unit", "vertical"]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="iconSmallPanel" :class="{vertical}">
|
|
<img v-if="icon" class="icon" :src="icon">
|
|
<div class="fill" v-text="label"/>
|
|
<value-unit :value="value" :unit="unit"/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.iconSmallPanel {
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
|
|
&.vertical {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
}
|
|
</style>
|