graphite_vue/src/views/components/Liquid.vue

<template>
	<div class="w-[340px] py-4">
		<div>
			<div class="text-sm font-medium text-text px-6">溶液容器状态</div>
			<div class="flex flex-wrap px-6 py-3 gap-x-8 gap-y-4">
				<div
					v-for="container in settingStore.heatContainerWithLiquid"
					:key="container.id"
					class="flex flex-col items-center justify-center">
					<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[42px] h-[58px]">
						<div class="absolute top-[8px] bottom-0 w-full rounded overflow-hidden">
							<div
								class="absolute left-0 w-full bottom-0 bg-[#26D574]"
								:style="`height:${
									((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
								}%; background: ${
									container.capacityTotal - container.capacityUsed <
									(settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
										? '#EE8223'
										: '#26D574'
								}`"></div>
							<span
								class="absolute text-xs left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white"
								>{{
									`${Math.round(((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100)}%`
								}}</span
							>
						</div>
					</div>
					<div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { useSettingStore } from "@/stores/setting";

const settingStore = useSettingStore();
</script>