45 lines
693 B
Vue
45 lines
693 B
Vue
<script>
|
|
export default {
|
|
name: "valueUnit",
|
|
props: ["value", "unit"]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="valueUnit" :class="[$attrs.size]" :style="{color:$attrs.color}">
|
|
{{ value || 0 }}<p v-text="unit"/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.valueUnit {
|
|
font-family: DINAlternate,serif;
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
color: #02FEFF;
|
|
display: flex;
|
|
letter-spacing: 0;
|
|
line-height: 36px;
|
|
align-items: baseline;
|
|
|
|
& > p {
|
|
margin-left: 2px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&.mini {
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
|
|
& > p {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
&.large {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|