<!-- 
    filename: MaterialCost.vue
    author: liubin
    date: 2023-12-06 09:09:27
    description: 
-->

<template>
	<Container name="原料用量统计" size="middle" style="">
		<div
			class="absolute"
			style="
				padding: 12px;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-auto-rows: auto;
				gap: 8px;
			">
			<ShadowRect v-for="n in 9" :key="n" :rounded="false">
				<div
					class="material"
					style="
						flex: 1;
						padding: 6px;
						display: flex;
						flex-direction: column;
						gap: 4px;
						align-items: center;
						justify-content: center;
					">
					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
						234
					</span>
					<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
						- 原料1/吨 -
					</span>
				</div>
			</ShadowRect>
		</div>
	</Container>
</template>

<script>
import Container from '../components/Container.vue';
import ShadowRect from '../components/ShadowRect.vue';
export default {
	name: 'MaterialCost',
	components: { Container, ShadowRect },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss"></style>
