You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.7 KiB
62 lines
1.7 KiB
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
})
|
|
const solutionStyle = computed(() => {
|
|
const difference = (props.data.capacityTotal - props.data.capacityUsed) / props.data.capacityTotal
|
|
const process = 100 - (difference * 100)
|
|
const filter = difference > 0.4 ? 'hue-rotate(270deg) saturate(100) brightness(81%)' : difference > 0.1 ? 'hue-rotate(150deg) saturate(100)' : 'hue-rotate(120deg) saturate(100)'
|
|
return {
|
|
'filter': filter,
|
|
'-webkit-mask': `linear-gradient(to bottom, transparent ${process}%, #EEEFF8 ${process + 0.01}%)`,
|
|
}
|
|
})
|
|
|
|
const percentage = computed(() => Number(((props.data.capacityTotal - props.data.capacityUsed) / props.data.capacityTotal).toFixed(2)) * 100)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="liquid-content">
|
|
<div class="bottle_base">
|
|
<img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
|
|
</div>
|
|
<div class="bottle" :style="solutionStyle">
|
|
<img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
|
|
</div>
|
|
<div class="num" :style="{ color: percentage > 40 ? '#fff' : percentage > 10 ? '#FF8E00' : '#FF1C00' }">
|
|
{{ percentage }} %
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.liquid-content{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.bottle_base{
|
|
position: relative;
|
|
}
|
|
.bottle {
|
|
position: absolute;
|
|
}
|
|
.content-img{
|
|
height: 80px;
|
|
margin: 10px;
|
|
}
|
|
.num {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-weight: 700;
|
|
}
|
|
</style>
|