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.
46 lines
1.1 KiB
46 lines
1.1 KiB
<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>
|