graphite-digestion-web/src/components/home/Liquid/index.vue

<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>