graphite-digestion-web/src/views/container/index.vue

<script lang="ts" setup>
import { ref } from 'vue'
import liquidItem from './liquidItem.vue'

interface Chemical {
  name: string
  volume: number
  checked: boolean
}

const chemicalList = ref<Chemical[]>([
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
  { name: '硝酸', volume: 300, checked: true },
])
</script>

<template>
  <div class="liquied-container">
    <liquidItem
      v-for="(item, index) in chemicalList"
      :key="index"
      :item-index="index"
      :item-name="item.name"
      :item-volume="item.volume"
      :item-checked="item.checked"
    />
  </div>
</template>

<style>
.liquied-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
</style>